diff --git a/.gitignore b/.gitignore
index 5504403..e8a90df 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,4 @@ yarn-error.log
 /.nova
 /.vscode
 /.zed
+/.continue
diff --git a/app/Console/Commands/CaldavSyncCommand.php b/app/Console/Commands/CaldavSyncCommand.php
index 8eb71c0..0894c85 100644
--- a/app/Console/Commands/CaldavSyncCommand.php
+++ b/app/Console/Commands/CaldavSyncCommand.php
@@ -33,6 +33,31 @@ public function handle(CaldavService $service)
             Todo::upsert($todo->attributesToArray(), 'id');
             $count++;
         }
+        // Collect hrefs/URLs returned by the CalDAV server so we can remove local
+        // todos that belong to this calendar but were deleted on the server.
+        $hrefs = array_values(array_filter(array_map(function ($t) {
+            return $t->url ?? null;
+        }, $todos)));
+
+        // Remove local todos that have a URL in this calendar but weren't returned
+        // by the server (i.e. they were deleted remotely). Scope deletion by
+        // calendar prefix to avoid touching other calendars.
+        $calendarId = $service->getCalendarId();
+        $username = config('caldav.username') ?? '';
+        $calendarPrefix = 'calendars/' . $username . '/' . $calendarId;
+
+        if ($calendarId && $username) {
+            Todo::whereNotNull('url')
+                ->where('url', 'like', '%' . $calendarPrefix . "%")
+                ->whereNotIn('url', $hrefs ?: [''])
+                ->delete();
+        }
+
+        // Remove old todos
+        Todo::where('status', 'COMPLETED')
+            ->where('last_modified', '<', now()->subDays(30)) // TODO: get from settings
+            ->where('due_date', '<', now()->subDays(30))
+            ->delete();
 
         Log::info("Synced " . count($todos) . " todos.");
         $this->info("Synced " . count($todos) . " todos.");
diff --git a/app/Http/Controllers/NoteController.php b/app/Http/Controllers/NoteController.php
index fcf5a6d..0e5d3a5 100644
--- a/app/Http/Controllers/NoteController.php
+++ b/app/Http/Controllers/NoteController.php
@@ -11,14 +11,14 @@ class NoteController extends Controller
 {
     /**
      * Display a listing of the resource.
+     * @param Request $request
+     * @param string $modelType The type of the model (e.g., 'Customer', 'Invoice')
+     * @param string $modelId The ID of the model
+     * @return \Illuminate\Http\JsonResponse
      */
-    public function index(Request $request, $modelId)
+    public function index(Request $request, string $modelType, int $modelId)
     {
-        $modelType = $request->route()->parameter('modelType');
-        if (!$modelType) {
-            $modelType = $request->route()->getAction('modelType');
-        }
-        $model = app("App\\Models\\" . ucfirst($modelType))::findOrFail($modelId);
+        $model = app("App\\Models\\" . $modelType)::findOrFail($modelId);
 
         // Lade alle Notizen des Modells mit der Benutzerbeziehung
         $notes = $model->notes()->with('user')->orderBy('created_at', 'desc')->get();
@@ -34,24 +34,30 @@ public function index(Request $request, $modelId)
     /**
      * Store a newly created resource in storage.
      */
-    public function store(Request $request, $modelId)
+    public function store(Request $request)
     {
-        $modelType = $request->route()->parameter('modelType');
-        if (!$modelType) {
-            $modelType = $request->route()->getAction('modelType');
-        }
 
         $validatedData = $request->validate([
+            'userId' => 'required|integer|exists:users,id',
             'text' => 'required|string',
-            'userId' => 'required|integer'
+            'noteableId' => 'required|integer',
+            'noteableType' => 'required|string',
+            'createdAt' => 'sometimes|date|nullable'
         ]);
 
         // Convert camelCase to snake_case
         $snakeCaseData = ApiDataTransformer::camelToSnake($validatedData);
 
-        $model = app("App\\Models\\" . ucfirst($modelType))::findOrFail($modelId);
-        $note = new Note($validatedData);
-        $note->user_id = $validatedData['userId'];
+        $model = app("App\\Models\\" . $snakeCaseData['noteable_type'])::findOrFail($snakeCaseData['noteable_id']);
+
+        // Create a new Note instance
+        $note = new Note($snakeCaseData);
+
+        // Set the created_at field if it is provided
+        if (isset($snakeCaseData['created_at'])) {
+            $note->created_at = $snakeCaseData['created_at'];
+        }
+
         $model->notes()->save($note);
 
         return response()->json($this->single($note->id), 201);
@@ -64,22 +70,6 @@ public static function single($id)
     }
 
 
-    /**
-     * Display the specified resource.
-     */
-    public function show(Note $note)
-    {
-        //
-    }
-
-    /**
-     * Show the form for editing the specified resource.
-     */
-    public function edit(Note $note)
-    {
-        //
-    }
-
     /**
      * Update the specified resource in storage.
      */
diff --git a/app/Http/Controllers/PipelineController.php b/app/Http/Controllers/PipelineController.php
new file mode 100644
index 0000000..78a768d
--- /dev/null
+++ b/app/Http/Controllers/PipelineController.php
@@ -0,0 +1,82 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Http\Controllers\Controller;
+use App\Models\PipelineLane;
+use App\Models\PipelineItem;
+use App\Support\ApiDataTransformer;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Log;
+use Illuminate\Support\Facades\Validator;
+use Inertia\Inertia;
+
+class PipelineController extends Controller
+{
+    public function index()
+    {
+        $lanes = PipelineLane::with(['items' => function ($q) {
+            $q->withCount(['notes' => function ($query) {
+                $query->where('notable_type', 'App\Models\PipelineItem');
+            }])->orderBy('position');
+        }])->orderBy('position')->get();
+
+        return $lanes->map(function ($lane) {
+            return ApiDataTransformer::snakeToCamel($lane->toArray());
+        });
+    }
+
+    public function show()
+    {
+        return Inertia::render('Pipeline', [
+            'pipeline' => $this->index(),
+        ]);
+    }
+
+    /**
+     * Update positions in bulk. Expect array of objects with camelCase keys: id, stage, position
+     */
+    public function updatePositions(Request $request)
+    {
+        $payload = $request->all();
+
+        if (!is_array($payload)) {
+            return response()->json(['message' => 'Invalid payload'], 422);
+        }
+
+        $items = array_map(function ($item) {
+            return ApiDataTransformer::camelToSnake((array)$item);
+        }, $payload);
+
+        $validator = Validator::make(['items' => $items], [
+            'items.*.id' => 'required|integer|exists:pipeline_items,id',
+            'items.*.pipeline_lane_id' => 'required|integer|exists:pipeline_lanes,id',
+            'items.*.title' => 'string',
+            'items.*.position' => 'required|integer|min:0',
+            'items.*.expected_revenue' => 'decimal',
+            'items.*.description' => 'string',
+        ]);
+
+        if ($validator->fails()) {
+            return response()->json(['errors' => $validator->errors()], 422);
+        }
+
+        DB::beginTransaction();
+        try {
+            foreach ($items as $it) {
+                PipelineItem::where('id', $it['id'])->update([
+                    'pipeline_lane_id' => $it['pipeline_lane_id'],
+                    'position' => $it['position'],
+                ]);
+            }
+            DB::commit();
+        } catch (\Exception $e) {
+            DB::rollBack();
+            Log::error('Failed to update pipeline positions: ' . $e->getMessage());
+            return response()->json(['message' => 'Failed to update positions'], 500);
+        }
+
+        return response()->json(['status' => 'ok']);
+    }
+}
diff --git a/app/Http/Controllers/PipelineItemController.php b/app/Http/Controllers/PipelineItemController.php
new file mode 100644
index 0000000..8543b1e
--- /dev/null
+++ b/app/Http/Controllers/PipelineItemController.php
@@ -0,0 +1,81 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\PipelineItem;
+use App\Support\ApiDataTransformer;
+use Illuminate\Http\Request;
+
+class PipelineItemController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        $pipelineItems = PipelineItem::withCount(['notes' => function ($query) {
+            $query->where('notable_type', 'App\Models\PipelineItem');
+        }])->orderBy('position')->get();
+
+        return ApiDataTransformer::snakeToCamel($pipelineItems->toArray());
+    }
+
+    /**
+     * Display a listing of the resource.
+     */
+    public function single(int $id)
+    {
+        $pipelineItem = PipelineItem::withCount(['notes' => function ($query) {
+            $query->where('notable_type', 'App\Models\PipelineItem');
+        }])->orderBy('position')->findOrFail($id);
+
+        return ApiDataTransformer::snakeToCamel($pipelineItem->toArray());
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        $validatedData = $request->validate([
+            'pipeline_lane_id' => 'required|integer|exists:pipeline_lanes,id',
+            'title' => 'required|string',
+            'position' => 'required|integer|min:0',
+            'expected_revenue' => 'nullable|numeric',
+            'due_date' => 'nullable|date',
+            'description' => 'nullable|string',
+        ]);
+
+        $pipelineItem = PipelineItem::create($validatedData);
+
+        return ApiDataTransformer::snakeToCamel($pipelineItem->toArray());
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, PipelineItem $pipelineItem)
+    {
+        $validatedData = $request->validate([
+            'pipeline_lane_id' => 'sometimes|integer|exists:pipeline_lanes,id',
+            'title' => 'sometimes|string',
+            'position' => 'sometimes|integer|min:0',
+            'expected_revenue' => 'nullable|numeric',
+            'due_date' => 'nullable|date',
+            'description' => 'nullable|string',
+        ]);
+
+        $pipelineItem->update($validatedData);
+
+        return ApiDataTransformer::snakeToCamel($pipelineItem->toArray());
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function delete(int $id)
+    {
+        PipelineItem::findOrFail($id)->delete();
+        return response()->noContent();
+    }
+}
diff --git a/app/Http/Controllers/TimesheetController.php b/app/Http/Controllers/TimesheetController.php
new file mode 100644
index 0000000..e6803ac
--- /dev/null
+++ b/app/Http/Controllers/TimesheetController.php
@@ -0,0 +1,101 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Inertia\Inertia;
+use App\Models\Timesheet;
+use Illuminate\Http\Request;
+use App\Support\ApiDataTransformer;
+
+class TimesheetController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        $timesheets = Timesheet::with(['entries' => function ($query) {
+            $query->selectRaw('
+                timesheet_id,
+                SUM(hours) as total_hours,
+                SUM(CASE WHEN billed = 1 THEN hours ELSE 0 END) as hours_billed,
+                MIN(date) as earliest_date,
+                MAX(date) as latest_date
+            ')
+                ->groupBy('timesheet_id');
+        }])->get();
+
+        // Sort timesheets by the updated_at timestamp of the latest entry
+        $timesheets = $timesheets->sortByDesc(function ($timesheet) {
+            $latestEntry = $timesheet->entries()->latest('updated_at')->first();
+            return $latestEntry ? $latestEntry->updated_at : $timesheet->updated_at;
+        })->values();
+
+        $snakeCaseData = $timesheets->map(function ($timesheet) {
+            $entryStats = $timesheet->entries->first();
+
+            return [
+                'id' => $timesheet->id,
+                'title' => $timesheet->title,
+                'total_hours' => $entryStats->total_hours ?? 0,
+                'hours_billed' => $entryStats->hours_billed ?? 0,
+                'earliest_date' => $entryStats->earliest_date ?? null,
+                'latest_date' => $entryStats->latest_date ?? null,
+                'created_at' => $timesheet->created_at->toISOString(),
+                'updated_at' => $timesheet->updated_at->toISOString(),
+            ];
+        });
+
+        return ApiDataTransformer::snakeToCamel($snakeCaseData->toArray());
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        $validated = $request->validate([
+            'title' => 'required|string|max:255',
+        ]);
+
+        $snakeCaseData = Timesheet::create($validated);
+        return ApiDataTransformer::snakeToCamel($snakeCaseData->toArray());
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(Timesheet $timesheet)
+    {
+        return Inertia::render('Timesheets', [
+            'timesheetData' => $this->index()
+        ]);
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, Timesheet $timesheet)
+    {
+        $validatedData = $request->validate([
+            'title' => 'required|string|max:255',
+        ]);
+
+        // Convert camelCase to snake_case
+        $snakeCaseData = ApiDataTransformer::camelToSnake($validatedData);
+
+        $timesheet->update($snakeCaseData);
+
+        return $timesheet;
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(Timesheet $timesheet)
+    {
+        $timesheet->delete();
+
+        return response()->noContent();
+    }
+}
diff --git a/app/Http/Controllers/TimesheetEntryController.php b/app/Http/Controllers/TimesheetEntryController.php
new file mode 100644
index 0000000..14d436e
--- /dev/null
+++ b/app/Http/Controllers/TimesheetEntryController.php
@@ -0,0 +1,102 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\TimesheetEntry;
+use App\Models\Timesheet;
+use Illuminate\Http\Request;
+use App\Support\ApiDataTransformer;
+
+class TimesheetEntryController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        $entries = TimesheetEntry::with(['timesheet', 'user'])->orderBy('date', 'asc')->get();
+
+        return $entries->map(function ($entry) {
+            return ApiDataTransformer::snakeToCamel($entry->toArray());
+        });
+    }
+
+    /**
+     * Get all entries for a specific timesheet
+     */
+    public function getEntriesForTimesheet(Timesheet $timesheet)
+    {
+        $entries = $timesheet->entries()->with('user')->orderBy('date', 'asc')->get();
+
+        return $entries->map(function ($entry) {
+            return ApiDataTransformer::snakeToCamel($entry->toArray());
+        });
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        $validatedData = $request->validate([
+            'timesheetId' => 'required|exists:timesheets,id',
+            'date' => 'required|date',
+            'userId' => 'required|exists:users,id',
+            'description' => 'nullable|string',
+            'hours' => 'required|numeric',
+            'billed' => 'sometimes|boolean',
+        ]);
+
+        // Convert camelCase to snake_case
+        $snakeCaseData = ApiDataTransformer::camelToSnake($validatedData);
+
+        $entry = TimesheetEntry::create($snakeCaseData);
+        $entry = TimesheetEntry::with(['timesheet', 'user'])->find($entry->id);
+        return ApiDataTransformer::snakeToCamel($entry->toArray());
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(TimesheetEntry $timesheetEntry)
+    {
+        $entry = $timesheetEntry->load(['timesheet', 'user']);
+        return ApiDataTransformer::snakeToCamel($entry->toArray());
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, TimesheetEntry $timesheetEntry)
+    {
+        $validatedData = $request->validate([
+            'timesheetId' => 'sometimes|exists:timesheets,id',
+            'date' => 'sometimes|date',
+            'userId' => 'sometimes|exists:users,id',
+            'description' => 'nullable|string',
+            'hours' => 'sometimes|numeric',
+            'billed' => 'sometimes|boolean',
+        ]);
+        // Convert camelCase to snake_case
+        $snakeCaseData = ApiDataTransformer::camelToSnake($validatedData);
+
+        $timesheetEntry->update($snakeCaseData);
+
+        return ApiDataTransformer::snakeToCamel($timesheetEntry->toArray());
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(TimesheetEntry $timesheetEntry)
+    {
+        $timesheetEntry->delete();
+        return response()->noContent();
+    }
+
+    public function toggleBilled(TimesheetEntry $timesheetEntry)
+    {
+        $timesheetEntry = $timesheetEntry->update(['billed' => !$timesheetEntry->billed]);
+        return ApiDataTransformer::snakeToCamel($timesheetEntry->toArray());
+    }
+}
diff --git a/app/Http/Controllers/TodoController.php b/app/Http/Controllers/TodoController.php
index f157de0..94c08a8 100644
--- a/app/Http/Controllers/TodoController.php
+++ b/app/Http/Controllers/TodoController.php
@@ -11,7 +11,7 @@ class TodoController extends Controller
 {
     public function index()
     {
-        $todos = Todo::with('type')->get();
+        $todos = Todo::with('type')->orderBy('due_date')->get();
         return ApiDataTransformer::snakeToCamel($todos->toArray());
     }
 
diff --git a/app/Models/Customer.php b/app/Models/Customer.php
index 6b589d7..ed5101d 100644
--- a/app/Models/Customer.php
+++ b/app/Models/Customer.php
@@ -2,8 +2,8 @@
 
 namespace App\Models;
 
-use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
 
 class Customer extends Model
 {
diff --git a/app/Models/LineItem.php b/app/Models/LineItem.php
index ef4bdae..59841d9 100644
--- a/app/Models/LineItem.php
+++ b/app/Models/LineItem.php
@@ -20,6 +20,12 @@ class LineItem extends Model
         'price',
     ];
 
+    protected $casts = [
+        'is_section' => 'boolean',
+        'quantity' => 'integer',
+        'price' => 'decimal:2',
+    ];
+
     public function invoice()
     {
         return $this->belongsTo(Invoice::class);
diff --git a/app/Models/Note.php b/app/Models/Note.php
index 6ccac40..6023f24 100644
--- a/app/Models/Note.php
+++ b/app/Models/Note.php
@@ -22,6 +22,8 @@ public function user()
         return $this->belongsTo(User::class);
     }
 
+    // Polymorphic relationship to the notable model (e.g., Lead, Contact, PipelineItem, etc.)
+    // https://laravel.com/docs/12.x/eloquent-relationships#one-to-many-polymorphic-relations
     public function notable()
     {
         return $this->morphTo();
diff --git a/app/Models/PipelineItem.php b/app/Models/PipelineItem.php
new file mode 100644
index 0000000..c6fed1f
--- /dev/null
+++ b/app/Models/PipelineItem.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class PipelineItem extends Model
+{
+    use HasFactory;
+
+    protected $table = 'pipeline_items';
+
+    protected $fillable = [
+        'pipeline_lane_id',
+        'title',
+        'position',
+        'expected_revenue',
+        'due_date',
+        'description'
+    ];
+
+    protected $casts = [
+        'next_action' => 'date',
+        'expected_revenue' => 'decimal:2',
+        'actions' => 'integer',
+        'position' => 'integer',
+    ];
+
+    public function pipelineLane()
+    {
+        return $this->belongsTo(PipelineLane::class);
+    }
+
+    /**
+     * Get the notes
+     */
+    public function notes()
+    {
+        return $this->morphMany(Note::class, 'notable');
+    }
+}
diff --git a/app/Models/PipelineLane.php b/app/Models/PipelineLane.php
new file mode 100644
index 0000000..c5cba9a
--- /dev/null
+++ b/app/Models/PipelineLane.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+
+class PipelineLane extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'title',
+        'position',
+    ];
+
+    protected $casts = [
+        'position' => 'integer',
+    ];
+
+    /**
+     * Get the pipeline items for the lane
+     */
+    public function items()
+    {
+        return $this->hasMany(PipelineItem::class);
+    }
+}
diff --git a/app/Models/Timesheet.php b/app/Models/Timesheet.php
new file mode 100644
index 0000000..d651239
--- /dev/null
+++ b/app/Models/Timesheet.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\HasMany;
+
+class Timesheet extends Model
+{
+    protected $fillable = ['title'];
+
+    public function entries(): HasMany
+    {
+        return $this->hasMany(TimesheetEntry::class);
+    }
+}
\ No newline at end of file
diff --git a/app/Models/TimesheetEntry.php b/app/Models/TimesheetEntry.php
new file mode 100644
index 0000000..30a2ece
--- /dev/null
+++ b/app/Models/TimesheetEntry.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class TimesheetEntry extends Model
+{
+    protected $fillable = [
+        'timesheet_id',
+        'date',
+        'user_id',
+        'description',
+        'hours',
+        'billed'
+    ];
+
+    protected $casts = [
+        'date' => 'datetime',
+        'billed' => 'boolean',
+        'hours' => 'float'
+    ];
+
+    public function timesheet(): BelongsTo
+    {
+        return $this->belongsTo(Timesheet::class);
+    }
+
+    public function user(): BelongsTo
+    {
+        return $this->belongsTo(User::class);
+    }
+}
\ No newline at end of file
diff --git a/app/Models/User.php b/app/Models/User.php
index 66ff1da..8c6180f 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -34,8 +34,12 @@ class User extends Authenticatable
     protected $hidden = [
         'password',
         'remember_token',
+        'two_factor_secret',
+        'two_factor_recovery_codes',
+        'two_factor_confirmed_at',
     ];
 
+
     /**
      * Get the attributes that should be cast.
      *
diff --git a/database/migrations/2026_01_23_102938_create_timesheets_table.php b/database/migrations/2026_01_23_102938_create_timesheets_table.php
new file mode 100644
index 0000000..176969f
--- /dev/null
+++ b/database/migrations/2026_01_23_102938_create_timesheets_table.php
@@ -0,0 +1,28 @@
+<?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('timesheets', function (Blueprint $table) {
+            $table->id();
+            $table->string('title');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('timesheets');
+    }
+};
diff --git a/database/migrations/2026_01_23_103528_create_timesheet_entries_table.php b/database/migrations/2026_01_23_103528_create_timesheet_entries_table.php
new file mode 100644
index 0000000..0c1dfb1
--- /dev/null
+++ b/database/migrations/2026_01_23_103528_create_timesheet_entries_table.php
@@ -0,0 +1,33 @@
+<?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('timesheet_entries', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('timesheet_id')->constrained()->onDelete('cascade');
+            $table->dateTime('date');
+            $table->foreignId('user_id')->constrained()->onDelete('cascade');
+            $table->text('description')->nullable();
+            $table->float('hours');
+            $table->boolean('billed')->default(false);
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('timesheet_entries');
+    }
+};
diff --git a/database/migrations/2026_02_03_000000_create_pipeline_lanes_table.php b/database/migrations/2026_02_03_000000_create_pipeline_lanes_table.php
new file mode 100644
index 0000000..f31ac55
--- /dev/null
+++ b/database/migrations/2026_02_03_000000_create_pipeline_lanes_table.php
@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('pipeline_lanes', function (Blueprint $table) {
+            $table->id();
+            $table->string('title');
+            $table->integer('position')->default(0)->index();
+            $table->timestamps();
+        });
+    }
+
+    protected $casts = [
+        'position' => 'integer',
+        'created_at' => 'datetime',
+        'last_modified' => 'datetime',
+    ];
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('pipeline_lanes');
+    }
+};
diff --git a/database/migrations/2026_02_04_000000_create_pipeline_items_table.php b/database/migrations/2026_02_04_000000_create_pipeline_items_table.php
new file mode 100644
index 0000000..217b045
--- /dev/null
+++ b/database/migrations/2026_02_04_000000_create_pipeline_items_table.php
@@ -0,0 +1,40 @@
+<?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('pipeline_items', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('pipeline_lane_id')->constrained()->onDelete('cascade');
+            $table->string('title');
+            $table->integer('position')->default(0);
+            $table->decimal('expected_revenue', 10, 2)->nullable();
+            $table->timestamp('due_date')->nullable();
+            $table->string('description')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    protected $casts = [
+        'due_date' => 'datetime',
+        'expected_revenue' => 'decimal:2',
+        'created_at' => 'datetime',
+        'last_modified' => 'datetime',
+    ];
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('pipeline_items');
+    }
+};
diff --git a/package-lock.json b/package-lock.json
index 97ea307..9a7d4db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
                 "@coders-tm/vue-number-format": "^3.35.4",
                 "@inertiajs/vue3": "^2.1.0",
                 "@tanstack/vue-table": "^8.21.3",
+                "@tiptap/pm": "^3.19.0",
+                "@tiptap/starter-kit": "^3.19.0",
+                "@tiptap/vue-3": "^3.19.0",
                 "@vueuse/core": "^12.8.2",
                 "axios": "^1.12.2",
                 "camelcase-keys": "^10.0.0",
@@ -16,9 +19,8 @@
                 "fuse.js": "^7.1.0",
                 "laravel-vite-plugin": "^2.0.0",
                 "lucide-vue-next": "^0.468.0",
-                "moment": "^2.30.1",
                 "pinia": "^3.0.3",
-                "reka-ui": "^2.7.0",
+                "reka-ui": "^2.8.0",
                 "tailwind-merge": "^3.2.0",
                 "tailwindcss": "^4.1.1",
                 "tw-animate-css": "^1.2.5",
@@ -71,12 +73,12 @@
             }
         },
         "node_modules/@babel/parser": {
-            "version": "7.28.6",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.6.tgz",
-            "integrity": "sha512-TeR9zWR18BvbfPmGbLampPMW+uW1NZnJlRuuHso8i87QZNq2JRF9i6RgxRqtEq+wQGsS19NNTWr2duhnE49mfQ==",
+            "version": "7.29.0",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
+            "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
             "license": "MIT",
             "dependencies": {
-                "@babel/types": "^7.28.6"
+                "@babel/types": "^7.29.0"
             },
             "bin": {
                 "parser": "bin/babel-parser.js"
@@ -86,9 +88,9 @@
             }
         },
         "node_modules/@babel/types": {
-            "version": "7.28.6",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.6.tgz",
-            "integrity": "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==",
+            "version": "7.29.0",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
+            "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
             "license": "MIT",
             "dependencies": {
                 "@babel/helper-string-parser": "^7.27.1",
@@ -105,9 +107,9 @@
             "license": "MIT"
         },
         "node_modules/@esbuild/aix-ppc64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz",
-            "integrity": "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.3.tgz",
+            "integrity": "sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==",
             "cpu": [
                 "ppc64"
             ],
@@ -121,9 +123,9 @@
             }
         },
         "node_modules/@esbuild/android-arm": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.2.tgz",
-            "integrity": "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.3.tgz",
+            "integrity": "sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==",
             "cpu": [
                 "arm"
             ],
@@ -137,9 +139,9 @@
             }
         },
         "node_modules/@esbuild/android-arm64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.2.tgz",
-            "integrity": "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.3.tgz",
+            "integrity": "sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==",
             "cpu": [
                 "arm64"
             ],
@@ -153,9 +155,9 @@
             }
         },
         "node_modules/@esbuild/android-x64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.2.tgz",
-            "integrity": "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.3.tgz",
+            "integrity": "sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==",
             "cpu": [
                 "x64"
             ],
@@ -169,9 +171,9 @@
             }
         },
         "node_modules/@esbuild/darwin-arm64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.2.tgz",
-            "integrity": "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.3.tgz",
+            "integrity": "sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==",
             "cpu": [
                 "arm64"
             ],
@@ -185,9 +187,9 @@
             }
         },
         "node_modules/@esbuild/darwin-x64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.2.tgz",
-            "integrity": "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.3.tgz",
+            "integrity": "sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==",
             "cpu": [
                 "x64"
             ],
@@ -201,9 +203,9 @@
             }
         },
         "node_modules/@esbuild/freebsd-arm64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.2.tgz",
-            "integrity": "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.3.tgz",
+            "integrity": "sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==",
             "cpu": [
                 "arm64"
             ],
@@ -217,9 +219,9 @@
             }
         },
         "node_modules/@esbuild/freebsd-x64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.2.tgz",
-            "integrity": "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.3.tgz",
+            "integrity": "sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==",
             "cpu": [
                 "x64"
             ],
@@ -233,9 +235,9 @@
             }
         },
         "node_modules/@esbuild/linux-arm": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.2.tgz",
-            "integrity": "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.3.tgz",
+            "integrity": "sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==",
             "cpu": [
                 "arm"
             ],
@@ -249,9 +251,9 @@
             }
         },
         "node_modules/@esbuild/linux-arm64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.2.tgz",
-            "integrity": "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.3.tgz",
+            "integrity": "sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==",
             "cpu": [
                 "arm64"
             ],
@@ -265,9 +267,9 @@
             }
         },
         "node_modules/@esbuild/linux-ia32": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.2.tgz",
-            "integrity": "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.3.tgz",
+            "integrity": "sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==",
             "cpu": [
                 "ia32"
             ],
@@ -281,9 +283,9 @@
             }
         },
         "node_modules/@esbuild/linux-loong64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.2.tgz",
-            "integrity": "sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.3.tgz",
+            "integrity": "sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==",
             "cpu": [
                 "loong64"
             ],
@@ -297,9 +299,9 @@
             }
         },
         "node_modules/@esbuild/linux-mips64el": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.2.tgz",
-            "integrity": "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.3.tgz",
+            "integrity": "sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==",
             "cpu": [
                 "mips64el"
             ],
@@ -313,9 +315,9 @@
             }
         },
         "node_modules/@esbuild/linux-ppc64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.2.tgz",
-            "integrity": "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.3.tgz",
+            "integrity": "sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==",
             "cpu": [
                 "ppc64"
             ],
@@ -329,9 +331,9 @@
             }
         },
         "node_modules/@esbuild/linux-riscv64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.2.tgz",
-            "integrity": "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.3.tgz",
+            "integrity": "sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==",
             "cpu": [
                 "riscv64"
             ],
@@ -345,9 +347,9 @@
             }
         },
         "node_modules/@esbuild/linux-s390x": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.2.tgz",
-            "integrity": "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.3.tgz",
+            "integrity": "sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==",
             "cpu": [
                 "s390x"
             ],
@@ -361,9 +363,9 @@
             }
         },
         "node_modules/@esbuild/linux-x64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.2.tgz",
-            "integrity": "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.3.tgz",
+            "integrity": "sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==",
             "cpu": [
                 "x64"
             ],
@@ -377,9 +379,9 @@
             }
         },
         "node_modules/@esbuild/netbsd-arm64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.2.tgz",
-            "integrity": "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.3.tgz",
+            "integrity": "sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==",
             "cpu": [
                 "arm64"
             ],
@@ -393,9 +395,9 @@
             }
         },
         "node_modules/@esbuild/netbsd-x64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.2.tgz",
-            "integrity": "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.3.tgz",
+            "integrity": "sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==",
             "cpu": [
                 "x64"
             ],
@@ -409,9 +411,9 @@
             }
         },
         "node_modules/@esbuild/openbsd-arm64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.2.tgz",
-            "integrity": "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.3.tgz",
+            "integrity": "sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==",
             "cpu": [
                 "arm64"
             ],
@@ -425,9 +427,9 @@
             }
         },
         "node_modules/@esbuild/openbsd-x64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.2.tgz",
-            "integrity": "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.3.tgz",
+            "integrity": "sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==",
             "cpu": [
                 "x64"
             ],
@@ -441,9 +443,9 @@
             }
         },
         "node_modules/@esbuild/openharmony-arm64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.2.tgz",
-            "integrity": "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.3.tgz",
+            "integrity": "sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==",
             "cpu": [
                 "arm64"
             ],
@@ -457,9 +459,9 @@
             }
         },
         "node_modules/@esbuild/sunos-x64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.2.tgz",
-            "integrity": "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.3.tgz",
+            "integrity": "sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==",
             "cpu": [
                 "x64"
             ],
@@ -473,9 +475,9 @@
             }
         },
         "node_modules/@esbuild/win32-arm64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.2.tgz",
-            "integrity": "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.3.tgz",
+            "integrity": "sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==",
             "cpu": [
                 "arm64"
             ],
@@ -489,9 +491,9 @@
             }
         },
         "node_modules/@esbuild/win32-ia32": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.2.tgz",
-            "integrity": "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.3.tgz",
+            "integrity": "sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==",
             "cpu": [
                 "ia32"
             ],
@@ -505,9 +507,9 @@
             }
         },
         "node_modules/@esbuild/win32-x64": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.2.tgz",
-            "integrity": "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.3.tgz",
+            "integrity": "sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==",
             "cpu": [
                 "x64"
             ],
@@ -700,21 +702,22 @@
             }
         },
         "node_modules/@floating-ui/core": {
-            "version": "1.7.3",
-            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
-            "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+            "version": "1.7.4",
+            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.4.tgz",
+            "integrity": "sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg==",
             "license": "MIT",
             "dependencies": {
                 "@floating-ui/utils": "^0.2.10"
             }
         },
         "node_modules/@floating-ui/dom": {
-            "version": "1.7.4",
-            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
-            "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+            "version": "1.7.5",
+            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.5.tgz",
+            "integrity": "sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
-                "@floating-ui/core": "^1.7.3",
+                "@floating-ui/core": "^1.7.4",
                 "@floating-ui/utils": "^0.2.10"
             }
         },
@@ -725,12 +728,12 @@
             "license": "MIT"
         },
         "node_modules/@floating-ui/vue": {
-            "version": "1.1.9",
-            "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.9.tgz",
-            "integrity": "sha512-BfNqNW6KA83Nexspgb9DZuz578R7HT8MZw1CfK9I6Ah4QReNWEJsXWHN+SdmOVLNGmTPDi+fDT535Df5PzMLbQ==",
+            "version": "1.1.10",
+            "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.10.tgz",
+            "integrity": "sha512-vdf8f6rHnFPPLRsmL4p12wYl+Ux4mOJOkjzKEMYVnwdf7UFdvBtHlLvQyx8iKG5vhPRbDRgZxdtpmyigDPjzYg==",
             "license": "MIT",
             "dependencies": {
-                "@floating-ui/dom": "^1.7.4",
+                "@floating-ui/dom": "^1.7.5",
                 "@floating-ui/utils": "^0.2.10",
                 "vue-demi": ">=0.13.0"
             }
@@ -814,37 +817,37 @@
             }
         },
         "node_modules/@inertiajs/core": {
-            "version": "2.3.10",
-            "resolved": "https://registry.npmjs.org/@inertiajs/core/-/core-2.3.10.tgz",
-            "integrity": "sha512-shoDHBtbFngFnHomGcLEhIEnPr+IjqxFo3PnWxurKNE5zUfViEyMYC0ZK36OVI6AeYKtHdrdyRGVeRWlOoTXHQ==",
+            "version": "2.3.14",
+            "resolved": "https://registry.npmjs.org/@inertiajs/core/-/core-2.3.14.tgz",
+            "integrity": "sha512-A6OU/Ye1ub2Dmn3eNJ2S0sEPKk5dWG/BUISAIDz/318N71/WuRXmEoqyaf9JJiYR7LTnJSO3UlugUPmFne+f1w==",
             "license": "MIT",
             "dependencies": {
                 "@types/lodash-es": "^4.17.12",
                 "axios": "^1.13.2",
-                "laravel-precognition": "^1.0.0",
-                "lodash-es": "^4.17.21",
+                "laravel-precognition": "^1.0.1",
+                "lodash-es": "^4.17.23",
                 "qs": "^6.14.1"
             }
         },
         "node_modules/@inertiajs/vue3": {
-            "version": "2.3.10",
-            "resolved": "https://registry.npmjs.org/@inertiajs/vue3/-/vue3-2.3.10.tgz",
-            "integrity": "sha512-dLutfgy4uNDwKgaxz/CQO15XPL/NlEqZptqgqoaKWNpS1UWVRkrcfdXOb9rWvRPWSVE9YCjD6Y8BR8oe/W1PMw==",
+            "version": "2.3.14",
+            "resolved": "https://registry.npmjs.org/@inertiajs/vue3/-/vue3-2.3.14.tgz",
+            "integrity": "sha512-0weXz8rSJl2cEV0knubD7rMvf7Y7soWkVmuA9w2hTPsOUeHMPAR58rkpU2nkF/8u2L6TbeuOvQ3u3S8ARYVZFw==",
             "license": "MIT",
             "dependencies": {
-                "@inertiajs/core": "2.3.10",
+                "@inertiajs/core": "2.3.14",
                 "@types/lodash-es": "^4.17.12",
-                "laravel-precognition": "^1.0.0",
-                "lodash-es": "^4.17.21"
+                "laravel-precognition": "^1.0.1",
+                "lodash-es": "^4.17.23"
             },
             "peerDependencies": {
                 "vue": "^3.0.0"
             }
         },
         "node_modules/@internationalized/date": {
-            "version": "3.10.1",
-            "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.10.1.tgz",
-            "integrity": "sha512-oJrXtQiAXLvT9clCf1K4kxp3eKsQhIaZqxEyowkBcsvZDdZkbWrVmnGknxs5flTD0VGsxrxKgBCZty1EzoiMzA==",
+            "version": "3.11.0",
+            "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.11.0.tgz",
+            "integrity": "sha512-BOx5huLAWhicM9/ZFs84CzP+V3gBW6vlpM02yzsdYC7TGlZJX1OJiEEHcSayF00Z+3jLlm4w79amvSt6RqKN3Q==",
             "license": "Apache-2.0",
             "dependencies": {
                 "@swc/helpers": "^0.5.0"
@@ -953,17 +956,23 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/@remirror/core-constants": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-3.0.0.tgz",
+            "integrity": "sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==",
+            "license": "MIT"
+        },
         "node_modules/@rolldown/pluginutils": {
-            "version": "1.0.0-beta.53",
-            "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz",
-            "integrity": "sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==",
+            "version": "1.0.0-rc.2",
+            "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.2.tgz",
+            "integrity": "sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw==",
             "dev": true,
             "license": "MIT"
         },
         "node_modules/@rollup/rollup-android-arm-eabi": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.55.2.tgz",
-            "integrity": "sha512-21J6xzayjy3O6NdnlO6aXi/urvSRjm6nCI6+nF6ra2YofKruGixN9kfT+dt55HVNwfDmpDHJcaS3JuP/boNnlA==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.57.1.tgz",
+            "integrity": "sha512-A6ehUVSiSaaliTxai040ZpZ2zTevHYbvu/lDoeAteHI8QnaosIzm4qwtezfRg1jOYaUmnzLX1AOD6Z+UJjtifg==",
             "cpu": [
                 "arm"
             ],
@@ -974,9 +983,9 @@
             ]
         },
         "node_modules/@rollup/rollup-android-arm64": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.55.2.tgz",
-            "integrity": "sha512-eXBg7ibkNUZ+sTwbFiDKou0BAckeV6kIigK7y5Ko4mB/5A1KLhuzEKovsmfvsL8mQorkoincMFGnQuIT92SKqA==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.57.1.tgz",
+            "integrity": "sha512-dQaAddCY9YgkFHZcFNS/606Exo8vcLHwArFZ7vxXq4rigo2bb494/xKMMwRRQW6ug7Js6yXmBZhSBRuBvCCQ3w==",
             "cpu": [
                 "arm64"
             ],
@@ -987,9 +996,9 @@
             ]
         },
         "node_modules/@rollup/rollup-darwin-arm64": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.55.2.tgz",
-            "integrity": "sha512-UCbaTklREjrc5U47ypLulAgg4njaqfOVLU18VrCrI+6E5MQjuG0lSWaqLlAJwsD7NpFV249XgB0Bi37Zh5Sz4g==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.57.1.tgz",
+            "integrity": "sha512-crNPrwJOrRxagUYeMn/DZwqN88SDmwaJ8Cvi/TN1HnWBU7GwknckyosC2gd0IqYRsHDEnXf328o9/HC6OkPgOg==",
             "cpu": [
                 "arm64"
             ],
@@ -1000,9 +1009,9 @@
             ]
         },
         "node_modules/@rollup/rollup-darwin-x64": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.55.2.tgz",
-            "integrity": "sha512-dP67MA0cCMHFT2g5XyjtpVOtp7y4UyUxN3dhLdt11at5cPKnSm4lY+EhwNvDXIMzAMIo2KU+mc9wxaAQJTn7sQ==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.57.1.tgz",
+            "integrity": "sha512-Ji8g8ChVbKrhFtig5QBV7iMaJrGtpHelkB3lsaKzadFBe58gmjfGXAOfI5FV0lYMH8wiqsxKQ1C9B0YTRXVy4w==",
             "cpu": [
                 "x64"
             ],
@@ -1013,9 +1022,9 @@
             ]
         },
         "node_modules/@rollup/rollup-freebsd-arm64": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.55.2.tgz",
-            "integrity": "sha512-WDUPLUwfYV9G1yxNRJdXcvISW15mpvod1Wv3ok+Ws93w1HjIVmCIFxsG2DquO+3usMNCpJQ0wqO+3GhFdl6Fow==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.57.1.tgz",
+            "integrity": "sha512-R+/WwhsjmwodAcz65guCGFRkMb4gKWTcIeLy60JJQbXrJ97BOXHxnkPFrP+YwFlaS0m+uWJTstrUA9o+UchFug==",
             "cpu": [
                 "arm64"
             ],
@@ -1026,9 +1035,9 @@
             ]
         },
         "node_modules/@rollup/rollup-freebsd-x64": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.55.2.tgz",
-            "integrity": "sha512-Ng95wtHVEulRwn7R0tMrlUuiLVL/HXA8Lt/MYVpy88+s5ikpntzZba1qEulTuPnPIZuOPcW9wNEiqvZxZmgmqQ==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.57.1.tgz",
+            "integrity": "sha512-IEQTCHeiTOnAUC3IDQdzRAGj3jOAYNr9kBguI7MQAAZK3caezRrg0GxAb6Hchg4lxdZEI5Oq3iov/w/hnFWY9Q==",
             "cpu": [
                 "x64"
             ],
@@ -1039,9 +1048,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.55.2.tgz",
-            "integrity": "sha512-AEXMESUDWWGqD6LwO/HkqCZgUE1VCJ1OhbvYGsfqX2Y6w5quSXuyoy/Fg3nRqiwro+cJYFxiw5v4kB2ZDLhxrw==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.57.1.tgz",
+            "integrity": "sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==",
             "cpu": [
                 "arm"
             ],
@@ -1052,9 +1061,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.55.2.tgz",
-            "integrity": "sha512-ZV7EljjBDwBBBSv570VWj0hiNTdHt9uGznDtznBB4Caj3ch5rgD4I2K1GQrtbvJ/QiB+663lLgOdcADMNVC29Q==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.57.1.tgz",
+            "integrity": "sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==",
             "cpu": [
                 "arm"
             ],
@@ -1065,9 +1074,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm64-gnu": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.55.2.tgz",
-            "integrity": "sha512-uvjwc8NtQVPAJtq4Tt7Q49FOodjfbf6NpqXyW/rjXoV+iZ3EJAHLNAnKT5UJBc6ffQVgmXTUL2ifYiLABlGFqA==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.57.1.tgz",
+            "integrity": "sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==",
             "cpu": [
                 "arm64"
             ],
@@ -1078,9 +1087,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm64-musl": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.55.2.tgz",
-            "integrity": "sha512-s3KoWVNnye9mm/2WpOZ3JeUiediUVw6AvY/H7jNA6qgKA2V2aM25lMkVarTDfiicn/DLq3O0a81jncXszoyCFA==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.57.1.tgz",
+            "integrity": "sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==",
             "cpu": [
                 "arm64"
             ],
@@ -1091,9 +1100,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-loong64-gnu": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.55.2.tgz",
-            "integrity": "sha512-gi21faacK+J8aVSyAUptML9VQN26JRxe484IbF+h3hpG+sNVoMXPduhREz2CcYr5my0NE3MjVvQ5bMKX71pfVA==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.57.1.tgz",
+            "integrity": "sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==",
             "cpu": [
                 "loong64"
             ],
@@ -1104,9 +1113,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-loong64-musl": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.55.2.tgz",
-            "integrity": "sha512-qSlWiXnVaS/ceqXNfnoFZh4IiCA0EwvCivivTGbEu1qv2o+WTHpn1zNmCTAoOG5QaVr2/yhCoLScQtc/7RxshA==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.57.1.tgz",
+            "integrity": "sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==",
             "cpu": [
                 "loong64"
             ],
@@ -1117,9 +1126,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.55.2.tgz",
-            "integrity": "sha512-rPyuLFNoF1B0+wolH277E780NUKf+KoEDb3OyoLbAO18BbeKi++YN6gC/zuJoPPDlQRL3fIxHxCxVEWiem2yXw==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.57.1.tgz",
+            "integrity": "sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==",
             "cpu": [
                 "ppc64"
             ],
@@ -1130,9 +1139,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-ppc64-musl": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.55.2.tgz",
-            "integrity": "sha512-g+0ZLMook31iWV4PvqKU0i9E78gaZgYpSrYPed/4Bu+nGTgfOPtfs1h11tSSRPXSjC5EzLTjV/1A7L2Vr8pJoQ==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.57.1.tgz",
+            "integrity": "sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==",
             "cpu": [
                 "ppc64"
             ],
@@ -1143,9 +1152,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.55.2.tgz",
-            "integrity": "sha512-i+sGeRGsjKZcQRh3BRfpLsM3LX3bi4AoEVqmGDyc50L6KfYsN45wVCSz70iQMwPWr3E5opSiLOwsC9WB4/1pqg==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.57.1.tgz",
+            "integrity": "sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==",
             "cpu": [
                 "riscv64"
             ],
@@ -1156,9 +1165,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-riscv64-musl": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.55.2.tgz",
-            "integrity": "sha512-C1vLcKc4MfFV6I0aWsC7B2Y9QcsiEcvKkfxprwkPfLaN8hQf0/fKHwSF2lcYzA9g4imqnhic729VB9Fo70HO3Q==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.57.1.tgz",
+            "integrity": "sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==",
             "cpu": [
                 "riscv64"
             ],
@@ -1169,9 +1178,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-s390x-gnu": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.55.2.tgz",
-            "integrity": "sha512-68gHUK/howpQjh7g7hlD9DvTTt4sNLp1Bb+Yzw2Ki0xvscm2cOdCLZNJNhd2jW8lsTPrHAHuF751BygifW4bkQ==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.57.1.tgz",
+            "integrity": "sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==",
             "cpu": [
                 "s390x"
             ],
@@ -1195,9 +1204,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-x64-musl": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.55.2.tgz",
-            "integrity": "sha512-4BJucJBGbuGnH6q7kpPqGJGzZnYrpAzRd60HQSt3OpX/6/YVgSsJnNzR8Ot74io50SeVT4CtCWe/RYIAymFPwA==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.57.1.tgz",
+            "integrity": "sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==",
             "cpu": [
                 "x64"
             ],
@@ -1208,9 +1217,9 @@
             ]
         },
         "node_modules/@rollup/rollup-openbsd-x64": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.55.2.tgz",
-            "integrity": "sha512-cT2MmXySMo58ENv8p6/O6wI/h/gLnD3D6JoajwXFZH6X9jz4hARqUhWpGuQhOgLNXscfZYRQMJvZDtWNzMAIDw==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.57.1.tgz",
+            "integrity": "sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==",
             "cpu": [
                 "x64"
             ],
@@ -1221,9 +1230,9 @@
             ]
         },
         "node_modules/@rollup/rollup-openharmony-arm64": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.55.2.tgz",
-            "integrity": "sha512-sZnyUgGkuzIXaK3jNMPmUIyJrxu/PjmATQrocpGA1WbCPX8H5tfGgRSuYtqBYAvLuIGp8SPRb1O4d1Fkb5fXaQ==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.57.1.tgz",
+            "integrity": "sha512-4wYoDpNg6o/oPximyc/NG+mYUejZrCU2q+2w6YZqrAs2UcNUChIZXjtafAiiZSUc7On8v5NyNj34Kzj/Ltk6dQ==",
             "cpu": [
                 "arm64"
             ],
@@ -1234,9 +1243,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-arm64-msvc": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.55.2.tgz",
-            "integrity": "sha512-sDpFbenhmWjNcEbBcoTV0PWvW5rPJFvu+P7XoTY0YLGRupgLbFY0XPfwIbJOObzO7QgkRDANh65RjhPmgSaAjQ==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.57.1.tgz",
+            "integrity": "sha512-O54mtsV/6LW3P8qdTcamQmuC990HDfR71lo44oZMZlXU4tzLrbvTii87Ni9opq60ds0YzuAlEr/GNwuNluZyMQ==",
             "cpu": [
                 "arm64"
             ],
@@ -1247,9 +1256,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-ia32-msvc": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.55.2.tgz",
-            "integrity": "sha512-GvJ03TqqaweWCigtKQVBErw2bEhu1tyfNQbarwr94wCGnczA9HF8wqEe3U/Lfu6EdeNP0p6R+APeHVwEqVxpUQ==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.57.1.tgz",
+            "integrity": "sha512-P3dLS+IerxCT/7D2q2FYcRdWRl22dNbrbBEtxdWhXrfIMPP9lQhb5h4Du04mdl5Woq05jVCDPCMF7Ub0NAjIew==",
             "cpu": [
                 "ia32"
             ],
@@ -1260,9 +1269,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-x64-gnu": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.55.2.tgz",
-            "integrity": "sha512-KvXsBvp13oZz9JGe5NYS7FNizLe99Ny+W8ETsuCyjXiKdiGrcz2/J/N8qxZ/RSwivqjQguug07NLHqrIHrqfYw==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.57.1.tgz",
+            "integrity": "sha512-VMBH2eOOaKGtIJYleXsi2B8CPVADrh+TyNxJ4mWPnKfLB/DBUmzW+5m1xUrcwWoMfSLagIRpjUFeW5CO5hyciQ==",
             "cpu": [
                 "x64"
             ],
@@ -1273,9 +1282,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-x64-msvc": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.55.2.tgz",
-            "integrity": "sha512-xNO+fksQhsAckRtDSPWaMeT1uIM+JrDRXlerpnWNXhn1TdB3YZ6uKBMBTKP0eX9XtYEP978hHk1f8332i2AW8Q==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.57.1.tgz",
+            "integrity": "sha512-mxRFDdHIWRxg3UfIIAwCm6NzvxG0jDX/wBN6KsQFTvKFqqg9vTrWUE68qEjHt19A5wwx5X5aUi2zuZT7YR0jrA==",
             "cpu": [
                 "x64"
             ],
@@ -1623,6 +1632,437 @@
                 "vue": "^2.7.0 || ^3.0.0"
             }
         },
+        "node_modules/@tiptap/core": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.19.0.tgz",
+            "integrity": "sha512-bpqELwPW+DG8gWiD8iiFtSl4vIBooG5uVJod92Qxn3rA9nFatyXRr4kNbMJmOZ66ezUvmCjXVe/5/G4i5cyzKA==",
+            "license": "MIT",
+            "peer": true,
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/pm": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-blockquote": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-3.19.0.tgz",
+            "integrity": "sha512-y3UfqY9KD5XwWz3ndiiJ089Ij2QKeiXy/g1/tlAN/F1AaWsnkHEHMLxCP1BIqmMpwsX7rZjMLN7G5Lp7c9682A==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/core": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-bold": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-3.19.0.tgz",
+            "integrity": "sha512-UZgb1d0XK4J/JRIZ7jW+s4S6KjuEDT2z1PPM6ugcgofgJkWQvRZelCPbmtSFd3kwsD+zr9UPVgTh9YIuGQ8t+Q==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/core": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-bubble-menu": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-3.19.0.tgz",
+            "integrity": "sha512-klNVIYGCdznhFkrRokzGd6cwzoi8J7E5KbuOfZBwFwhMKZhlz/gJfKmYg9TJopeUhrr2Z9yHgWTk8dh/YIJCdQ==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "@floating-ui/dom": "^1.0.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/core": "^3.19.0",
+                "@tiptap/pm": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-bullet-list": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-3.19.0.tgz",
+            "integrity": "sha512-F9uNnqd0xkJbMmRxVI5RuVxwB9JaCH/xtRqOUNQZnRBt7IdAElCY+Dvb4hMCtiNv+enGM/RFGJuFHR9TxmI7rw==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/extension-list": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-code": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-3.19.0.tgz",
+            "integrity": "sha512-2kqqQIXBXj2Or+4qeY3WoE7msK+XaHKL6EKOcKlOP2BW8eYqNTPzNSL+PfBDQ3snA7ljZQkTs/j4GYDj90vR1A==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/core": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-code-block": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-3.19.0.tgz",
+            "integrity": "sha512-b/2qR+tMn8MQb+eaFYgVk4qXnLNkkRYmwELQ8LEtEDQPxa5Vl7J3eu8+4OyoIFhZrNDZvvoEp80kHMCP8sI6rg==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/core": "^3.19.0",
+                "@tiptap/pm": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-document": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-3.19.0.tgz",
+            "integrity": "sha512-AOf0kHKSFO0ymjVgYSYDncRXTITdTcrj1tqxVazrmO60KNl1Rc2dAggDvIVTEBy5NvceF0scc7q3sE/5ZtVV7A==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/core": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-dropcursor": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-3.19.0.tgz",
+            "integrity": "sha512-sf3dEZXiLvsGqVK2maUIzXY6qtYYCvBumag7+VPTMGQ0D4hiZ1X/4ukt4+6VXDg5R2WP1CoIt/QvUetUjWNhbQ==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/extensions": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-floating-menu": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-3.19.0.tgz",
+            "integrity": "sha512-JaoEkVRkt+Slq3tySlIsxnMnCjS0L5n1CA1hctjLy0iah8edetj3XD5mVv5iKqDzE+LIjF4nwLRRVKJPc8hFBg==",
+            "license": "MIT",
+            "optional": true,
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@floating-ui/dom": "^1.0.0",
+                "@tiptap/core": "^3.19.0",
+                "@tiptap/pm": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-gapcursor": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-3.19.0.tgz",
+            "integrity": "sha512-w7DACS4oSZaDWjz7gropZHPc9oXqC9yERZTcjWxyORuuIh1JFf0TRYspleK+OK28plK/IftojD/yUDn1MTRhvA==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/extensions": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-hard-break": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-3.19.0.tgz",
+            "integrity": "sha512-lAmQraYhPS5hafvCl74xDB5+bLuNwBKIEsVoim35I0sDJj5nTrfhaZgMJ91VamMvT+6FF5f1dvBlxBxAWa8jew==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/core": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-heading": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-3.19.0.tgz",
+            "integrity": "sha512-uLpLlfyp086WYNOc0ekm1gIZNlEDfmzOhKzB0Hbyi6jDagTS+p9mxUNYeYOn9jPUxpFov43+Wm/4E24oY6B+TQ==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/core": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-horizontal-rule": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-3.19.0.tgz",
+            "integrity": "sha512-iqUHmgMGhMgYGwG6L/4JdelVQ5Mstb4qHcgTGd/4dkcUOepILvhdxajPle7OEdf9sRgjQO6uoAU5BVZVC26+ng==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/core": "^3.19.0",
+                "@tiptap/pm": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-italic": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-3.19.0.tgz",
+            "integrity": "sha512-6GffxOnS/tWyCbDkirWNZITiXRta9wrCmrfa4rh+v32wfaOL1RRQNyqo9qN6Wjyl1R42Js+yXTzTTzZsOaLMYA==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/core": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-link": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-3.19.0.tgz",
+            "integrity": "sha512-HEGDJnnCPfr7KWu7Dsq+eRRe/mBCsv6DuI+7fhOCLDJjjKzNgrX2abbo/zG3D/4lCVFaVb+qawgJubgqXR/Smw==",
+            "license": "MIT",
+            "dependencies": {
+                "linkifyjs": "^4.3.2"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/core": "^3.19.0",
+                "@tiptap/pm": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-list": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-list/-/extension-list-3.19.0.tgz",
+            "integrity": "sha512-N6nKbFB2VwMsPlCw67RlAtYSK48TAsAUgjnD+vd3ieSlIufdQnLXDFUP6hFKx9mwoUVUgZGz02RA6bkxOdYyTw==",
+            "license": "MIT",
+            "peer": true,
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/core": "^3.19.0",
+                "@tiptap/pm": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-list-item": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-3.19.0.tgz",
+            "integrity": "sha512-VsSKuJz4/Tb6ZmFkXqWpDYkRzmaLTyE6dNSEpNmUpmZ32sMqo58mt11/huADNwfBFB0Ve7siH/VnFNIJYY3xvg==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/extension-list": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-list-keymap": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-list-keymap/-/extension-list-keymap-3.19.0.tgz",
+            "integrity": "sha512-bxgmAgA3RzBGA0GyTwS2CC1c+QjkJJq9hC+S6PSOWELGRiTbwDN3MANksFXLjntkTa0N5fOnL27vBHtMStURqw==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/extension-list": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-ordered-list": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-3.19.0.tgz",
+            "integrity": "sha512-cxGsINquwHYE1kmhAcLNLHAofmoDEG6jbesR5ybl7tU5JwtKVO7S/xZatll2DU1dsDAXWPWEeeMl4e/9svYjCg==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/extension-list": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-paragraph": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-3.19.0.tgz",
+            "integrity": "sha512-xWa6gj82l5+AzdYyrSk9P4ynySaDzg/SlR1FarXE5yPXibYzpS95IWaVR0m2Qaz7Rrk+IiYOTGxGRxcHLOelNg==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/core": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-strike": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-3.19.0.tgz",
+            "integrity": "sha512-xYpabHsv7PccLUBQaP8AYiFCnYbx6P93RHPd0lgNwhdOjYFd931Zy38RyoxPHAgbYVmhf1iyx7lpuLtBnhS5dA==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/core": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-text": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-3.19.0.tgz",
+            "integrity": "sha512-K95+SnbZy0h6hNFtfy23n8t/nOcTFEf69In9TSFVVmwn/Nwlke+IfiESAkqbt1/7sKJeegRXYO7WzFEmFl9Q/g==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/core": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extension-underline": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-3.19.0.tgz",
+            "integrity": "sha512-800MGEWfG49j10wQzAFiW/ele1HT04MamcL8iyuPNu7ZbjbGN2yknvdrJlRy7hZlzIrVkZMr/1tz62KN33VHIw==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/core": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/extensions": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/extensions/-/extensions-3.19.0.tgz",
+            "integrity": "sha512-ZmGUhLbMWaGqnJh2Bry+6V4M6gMpUDYo4D1xNux5Gng/E/eYtc+PMxMZ/6F7tNTAuujLBOQKj6D+4SsSm457jw==",
+            "license": "MIT",
+            "peer": true,
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/core": "^3.19.0",
+                "@tiptap/pm": "^3.19.0"
+            }
+        },
+        "node_modules/@tiptap/pm": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-3.19.0.tgz",
+            "integrity": "sha512-789zcnM4a8OWzvbD2DL31d0wbSm9BVeO/R7PLQwLIGysDI3qzrcclyZ8yhqOEVuvPitRRwYLq+mY14jz7kY4cw==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "prosemirror-changeset": "^2.3.0",
+                "prosemirror-collab": "^1.3.1",
+                "prosemirror-commands": "^1.6.2",
+                "prosemirror-dropcursor": "^1.8.1",
+                "prosemirror-gapcursor": "^1.3.2",
+                "prosemirror-history": "^1.4.1",
+                "prosemirror-inputrules": "^1.4.0",
+                "prosemirror-keymap": "^1.2.2",
+                "prosemirror-markdown": "^1.13.1",
+                "prosemirror-menu": "^1.2.4",
+                "prosemirror-model": "^1.24.1",
+                "prosemirror-schema-basic": "^1.2.3",
+                "prosemirror-schema-list": "^1.5.0",
+                "prosemirror-state": "^1.4.3",
+                "prosemirror-tables": "^1.6.4",
+                "prosemirror-trailing-node": "^3.0.0",
+                "prosemirror-transform": "^1.10.2",
+                "prosemirror-view": "^1.38.1"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            }
+        },
+        "node_modules/@tiptap/starter-kit": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-3.19.0.tgz",
+            "integrity": "sha512-dTCkHEz+Y8ADxX7h+xvl6caAj+3nII/wMB1rTQchSuNKqJTOrzyUsCWm094+IoZmLT738wANE0fRIgziNHs/ug==",
+            "license": "MIT",
+            "dependencies": {
+                "@tiptap/core": "^3.19.0",
+                "@tiptap/extension-blockquote": "^3.19.0",
+                "@tiptap/extension-bold": "^3.19.0",
+                "@tiptap/extension-bullet-list": "^3.19.0",
+                "@tiptap/extension-code": "^3.19.0",
+                "@tiptap/extension-code-block": "^3.19.0",
+                "@tiptap/extension-document": "^3.19.0",
+                "@tiptap/extension-dropcursor": "^3.19.0",
+                "@tiptap/extension-gapcursor": "^3.19.0",
+                "@tiptap/extension-hard-break": "^3.19.0",
+                "@tiptap/extension-heading": "^3.19.0",
+                "@tiptap/extension-horizontal-rule": "^3.19.0",
+                "@tiptap/extension-italic": "^3.19.0",
+                "@tiptap/extension-link": "^3.19.0",
+                "@tiptap/extension-list": "^3.19.0",
+                "@tiptap/extension-list-item": "^3.19.0",
+                "@tiptap/extension-list-keymap": "^3.19.0",
+                "@tiptap/extension-ordered-list": "^3.19.0",
+                "@tiptap/extension-paragraph": "^3.19.0",
+                "@tiptap/extension-strike": "^3.19.0",
+                "@tiptap/extension-text": "^3.19.0",
+                "@tiptap/extension-underline": "^3.19.0",
+                "@tiptap/extensions": "^3.19.0",
+                "@tiptap/pm": "^3.19.0"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            }
+        },
+        "node_modules/@tiptap/vue-3": {
+            "version": "3.19.0",
+            "resolved": "https://registry.npmjs.org/@tiptap/vue-3/-/vue-3-3.19.0.tgz",
+            "integrity": "sha512-H/w8k++Dv5ejacbPX6VEYqWpvcrAvU+iPggIU8XGZNOkCY9jKiHRXNXXEev/ScNhHm4E1itGJZFsgqJmtiCHLw==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "optionalDependencies": {
+                "@tiptap/extension-bubble-menu": "^3.19.0",
+                "@tiptap/extension-floating-menu": "^3.19.0"
+            },
+            "peerDependencies": {
+                "@floating-ui/dom": "^1.0.0",
+                "@tiptap/core": "^3.19.0",
+                "@tiptap/pm": "^3.19.0",
+                "vue": "^3.0.0"
+            }
+        },
         "node_modules/@types/estree": {
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1636,6 +2076,12 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/@types/linkify-it": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+            "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+            "license": "MIT"
+        },
         "node_modules/@types/lodash": {
             "version": "4.17.23",
             "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.23.tgz",
@@ -1651,10 +2097,26 @@
                 "@types/lodash": "*"
             }
         },
+        "node_modules/@types/markdown-it": {
+            "version": "14.1.2",
+            "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+            "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/linkify-it": "^5",
+                "@types/mdurl": "^2"
+            }
+        },
+        "node_modules/@types/mdurl": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+            "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+            "license": "MIT"
+        },
         "node_modules/@types/node": {
-            "version": "22.19.7",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.7.tgz",
-            "integrity": "sha512-MciR4AKGHWl7xwxkBa6xUGxQJ4VBOmPTF7sL+iGzuahOFaO0jHCsuEfS80pan1ef4gWId1oWOweIhrDEYLuaOw==",
+            "version": "22.19.11",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.11.tgz",
+            "integrity": "sha512-BH7YwL6rA93ReqeQS1c4bsPpcfOmJasG+Fkr6Y59q83f9M1WcBRHR2vM+P9eOisYRcN3ujQoiZY8uk5W+1WL8w==",
             "devOptional": true,
             "license": "MIT",
             "peer": true,
@@ -1669,17 +2131,17 @@
             "license": "MIT"
         },
         "node_modules/@typescript-eslint/eslint-plugin": {
-            "version": "8.53.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.53.1.tgz",
-            "integrity": "sha512-cFYYFZ+oQFi6hUnBTbLRXfTJiaQtYE3t4O692agbBl+2Zy+eqSKWtPjhPXJu1G7j4RLjKgeJPDdq3EqOwmX5Ag==",
+            "version": "8.55.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.55.0.tgz",
+            "integrity": "sha512-1y/MVSz0NglV1ijHC8OT49mPJ4qhPYjiK08YUQVbIOyu+5k862LKUHFkpKHWu//zmr7hDR2rhwUm6gnCGNmGBQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@eslint-community/regexpp": "^4.12.2",
-                "@typescript-eslint/scope-manager": "8.53.1",
-                "@typescript-eslint/type-utils": "8.53.1",
-                "@typescript-eslint/utils": "8.53.1",
-                "@typescript-eslint/visitor-keys": "8.53.1",
+                "@typescript-eslint/scope-manager": "8.55.0",
+                "@typescript-eslint/type-utils": "8.55.0",
+                "@typescript-eslint/utils": "8.55.0",
+                "@typescript-eslint/visitor-keys": "8.55.0",
                 "ignore": "^7.0.5",
                 "natural-compare": "^1.4.0",
                 "ts-api-utils": "^2.4.0"
@@ -1692,7 +2154,7 @@
                 "url": "https://opencollective.com/typescript-eslint"
             },
             "peerDependencies": {
-                "@typescript-eslint/parser": "^8.53.1",
+                "@typescript-eslint/parser": "^8.55.0",
                 "eslint": "^8.57.0 || ^9.0.0",
                 "typescript": ">=4.8.4 <6.0.0"
             }
@@ -1708,17 +2170,17 @@
             }
         },
         "node_modules/@typescript-eslint/parser": {
-            "version": "8.53.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.53.1.tgz",
-            "integrity": "sha512-nm3cvFN9SqZGXjmw5bZ6cGmvJSyJPn0wU9gHAZZHDnZl2wF9PhHv78Xf06E0MaNk4zLVHL8hb2/c32XvyJOLQg==",
+            "version": "8.55.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.55.0.tgz",
+            "integrity": "sha512-4z2nCSBfVIMnbuu8uinj+f0o4qOeggYJLbjpPHka3KH1om7e+H9yLKTYgksTaHcGco+NClhhY2vyO3HsMH1RGw==",
             "dev": true,
             "license": "MIT",
             "peer": true,
             "dependencies": {
-                "@typescript-eslint/scope-manager": "8.53.1",
-                "@typescript-eslint/types": "8.53.1",
-                "@typescript-eslint/typescript-estree": "8.53.1",
-                "@typescript-eslint/visitor-keys": "8.53.1",
+                "@typescript-eslint/scope-manager": "8.55.0",
+                "@typescript-eslint/types": "8.55.0",
+                "@typescript-eslint/typescript-estree": "8.55.0",
+                "@typescript-eslint/visitor-keys": "8.55.0",
                 "debug": "^4.4.3"
             },
             "engines": {
@@ -1734,14 +2196,14 @@
             }
         },
         "node_modules/@typescript-eslint/project-service": {
-            "version": "8.53.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.53.1.tgz",
-            "integrity": "sha512-WYC4FB5Ra0xidsmlPb+1SsnaSKPmS3gsjIARwbEkHkoWloQmuzcfypljaJcR78uyLA1h8sHdWWPHSLDI+MtNog==",
+            "version": "8.55.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.55.0.tgz",
+            "integrity": "sha512-zRcVVPFUYWa3kNnjaZGXSu3xkKV1zXy8M4nO/pElzQhFweb7PPtluDLQtKArEOGmjXoRjnUZ29NjOiF0eCDkcQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/tsconfig-utils": "^8.53.1",
-                "@typescript-eslint/types": "^8.53.1",
+                "@typescript-eslint/tsconfig-utils": "^8.55.0",
+                "@typescript-eslint/types": "^8.55.0",
                 "debug": "^4.4.3"
             },
             "engines": {
@@ -1756,14 +2218,14 @@
             }
         },
         "node_modules/@typescript-eslint/scope-manager": {
-            "version": "8.53.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.53.1.tgz",
-            "integrity": "sha512-Lu23yw1uJMFY8cUeq7JlrizAgeQvWugNQzJp8C3x8Eo5Jw5Q2ykMdiiTB9vBVOOUBysMzmRRmUfwFrZuI2C4SQ==",
+            "version": "8.55.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.55.0.tgz",
+            "integrity": "sha512-fVu5Omrd3jeqeQLiB9f1YsuK/iHFOwb04bCtY4BSCLgjNbOD33ZdV6KyEqplHr+IlpgT0QTZ/iJ+wT7hvTx49Q==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/types": "8.53.1",
-                "@typescript-eslint/visitor-keys": "8.53.1"
+                "@typescript-eslint/types": "8.55.0",
+                "@typescript-eslint/visitor-keys": "8.55.0"
             },
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1774,9 +2236,9 @@
             }
         },
         "node_modules/@typescript-eslint/tsconfig-utils": {
-            "version": "8.53.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.53.1.tgz",
-            "integrity": "sha512-qfvLXS6F6b1y43pnf0pPbXJ+YoXIC7HKg0UGZ27uMIemKMKA6XH2DTxsEDdpdN29D+vHV07x/pnlPNVLhdhWiA==",
+            "version": "8.55.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.55.0.tgz",
+            "integrity": "sha512-1R9cXqY7RQd7WuqSN47PK9EDpgFUK3VqdmbYrvWJZYDd0cavROGn+74ktWBlmJ13NXUQKlZ/iAEQHI/V0kKe0Q==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -1791,15 +2253,15 @@
             }
         },
         "node_modules/@typescript-eslint/type-utils": {
-            "version": "8.53.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.53.1.tgz",
-            "integrity": "sha512-MOrdtNvyhy0rHyv0ENzub1d4wQYKb2NmIqG7qEqPWFW7Mpy2jzFC3pQ2yKDvirZB7jypm5uGjF2Qqs6OIqu47w==",
+            "version": "8.55.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.55.0.tgz",
+            "integrity": "sha512-x1iH2unH4qAt6I37I2CGlsNs+B9WGxurP2uyZLRz6UJoZWDBx9cJL1xVN/FiOmHEONEg6RIufdvyT0TEYIgC5g==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/types": "8.53.1",
-                "@typescript-eslint/typescript-estree": "8.53.1",
-                "@typescript-eslint/utils": "8.53.1",
+                "@typescript-eslint/types": "8.55.0",
+                "@typescript-eslint/typescript-estree": "8.55.0",
+                "@typescript-eslint/utils": "8.55.0",
                 "debug": "^4.4.3",
                 "ts-api-utils": "^2.4.0"
             },
@@ -1816,9 +2278,9 @@
             }
         },
         "node_modules/@typescript-eslint/types": {
-            "version": "8.53.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.53.1.tgz",
-            "integrity": "sha512-jr/swrr2aRmUAUjW5/zQHbMaui//vQlsZcJKijZf3M26bnmLj8LyZUpj8/Rd6uzaek06OWsqdofN/Thenm5O8A==",
+            "version": "8.55.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.55.0.tgz",
+            "integrity": "sha512-ujT0Je8GI5BJWi+/mMoR0wxwVEQaxM+pi30xuMiJETlX80OPovb2p9E8ss87gnSVtYXtJoU9U1Cowcr6w2FE0w==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -1830,16 +2292,16 @@
             }
         },
         "node_modules/@typescript-eslint/typescript-estree": {
-            "version": "8.53.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.53.1.tgz",
-            "integrity": "sha512-RGlVipGhQAG4GxV1s34O91cxQ/vWiHJTDHbXRr0li2q/BGg3RR/7NM8QDWgkEgrwQYCvmJV9ichIwyoKCQ+DTg==",
+            "version": "8.55.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.55.0.tgz",
+            "integrity": "sha512-EwrH67bSWdx/3aRQhCoxDaHM+CrZjotc2UCCpEDVqfCE+7OjKAGWNY2HsCSTEVvWH2clYQK8pdeLp42EVs+xQw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/project-service": "8.53.1",
-                "@typescript-eslint/tsconfig-utils": "8.53.1",
-                "@typescript-eslint/types": "8.53.1",
-                "@typescript-eslint/visitor-keys": "8.53.1",
+                "@typescript-eslint/project-service": "8.55.0",
+                "@typescript-eslint/tsconfig-utils": "8.55.0",
+                "@typescript-eslint/types": "8.55.0",
+                "@typescript-eslint/visitor-keys": "8.55.0",
                 "debug": "^4.4.3",
                 "minimatch": "^9.0.5",
                 "semver": "^7.7.3",
@@ -1858,16 +2320,16 @@
             }
         },
         "node_modules/@typescript-eslint/utils": {
-            "version": "8.53.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.53.1.tgz",
-            "integrity": "sha512-c4bMvGVWW4hv6JmDUEG7fSYlWOl3II2I4ylt0NM+seinYQlZMQIaKaXIIVJWt9Ofh6whrpM+EdDQXKXjNovvrg==",
+            "version": "8.55.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.55.0.tgz",
+            "integrity": "sha512-BqZEsnPGdYpgyEIkDC1BadNY8oMwckftxBT+C8W0g1iKPdeqKZBtTfnvcq0nf60u7MkjFO8RBvpRGZBPw4L2ow==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.9.1",
-                "@typescript-eslint/scope-manager": "8.53.1",
-                "@typescript-eslint/types": "8.53.1",
-                "@typescript-eslint/typescript-estree": "8.53.1"
+                "@typescript-eslint/scope-manager": "8.55.0",
+                "@typescript-eslint/types": "8.55.0",
+                "@typescript-eslint/typescript-estree": "8.55.0"
             },
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1882,13 +2344,13 @@
             }
         },
         "node_modules/@typescript-eslint/visitor-keys": {
-            "version": "8.53.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.53.1.tgz",
-            "integrity": "sha512-oy+wV7xDKFPRyNggmXuZQSBzvoLnpmJs+GhzRhPjrxl2b/jIlyjVokzm47CZCDUdXKr2zd7ZLodPfOBpOPyPlg==",
+            "version": "8.55.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.55.0.tgz",
+            "integrity": "sha512-AxNRwEie8Nn4eFS1FzDMJWIISMGoXMb037sgCBJ3UR6o0fQTzr2tqN9WT+DkWJPhIdQCfV7T6D387566VtnCJA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/types": "8.53.1",
+                "@typescript-eslint/types": "8.55.0",
                 "eslint-visitor-keys": "^4.2.1"
             },
             "engines": {
@@ -1913,13 +2375,13 @@
             }
         },
         "node_modules/@vitejs/plugin-vue": {
-            "version": "6.0.3",
-            "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.3.tgz",
-            "integrity": "sha512-TlGPkLFLVOY3T7fZrwdvKpjprR3s4fxRln0ORDo1VQ7HHyxJwTlrjKU3kpVWTlaAjIEuCTokmjkZnr8Tpc925w==",
+            "version": "6.0.4",
+            "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.4.tgz",
+            "integrity": "sha512-uM5iXipgYIn13UUQCZNdWkYk+sysBeA97d5mHsAoAt1u/wpN3+zxOmsVJWosuzX+IMGRzeYUNytztrYznboIkQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@rolldown/pluginutils": "1.0.0-beta.53"
+                "@rolldown/pluginutils": "1.0.0-rc.2"
             },
             "engines": {
                 "node": "^20.19.0 || >=22.12.0"
@@ -1959,39 +2421,51 @@
             }
         },
         "node_modules/@vue/compiler-core": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.27.tgz",
-            "integrity": "sha512-gnSBQjZA+//qDZen+6a2EdHqJ68Z7uybrMf3SPjEGgG4dicklwDVmMC1AeIHxtLVPT7sn6sH1KOO+tS6gwOUeQ==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.28.tgz",
+            "integrity": "sha512-kviccYxTgoE8n6OCw96BNdYlBg2GOWfBuOW4Vqwrt7mSKWKwFVvI8egdTltqRgITGPsTFYtKYfxIG8ptX2PJHQ==",
             "license": "MIT",
             "dependencies": {
-                "@babel/parser": "^7.28.5",
-                "@vue/shared": "3.5.27",
-                "entities": "^7.0.0",
+                "@babel/parser": "^7.29.0",
+                "@vue/shared": "3.5.28",
+                "entities": "^7.0.1",
                 "estree-walker": "^2.0.2",
                 "source-map-js": "^1.2.1"
             }
         },
+        "node_modules/@vue/compiler-core/node_modules/entities": {
+            "version": "7.0.1",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+            "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+            "license": "BSD-2-Clause",
+            "engines": {
+                "node": ">=0.12"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/entities?sponsor=1"
+            }
+        },
         "node_modules/@vue/compiler-dom": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.27.tgz",
-            "integrity": "sha512-oAFea8dZgCtVVVTEC7fv3T5CbZW9BxpFzGGxC79xakTr6ooeEqmRuvQydIiDAkglZEAd09LgVf1RoDnL54fu5w==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.28.tgz",
+            "integrity": "sha512-/1ZepxAb159jKR1btkefDP+J2xuWL5V3WtleRmxaT+K2Aqiek/Ab/+Ebrw2pPj0sdHO8ViAyyJWfhXXOP/+LQA==",
             "license": "MIT",
             "dependencies": {
-                "@vue/compiler-core": "3.5.27",
-                "@vue/shared": "3.5.27"
+                "@vue/compiler-core": "3.5.28",
+                "@vue/shared": "3.5.28"
             }
         },
         "node_modules/@vue/compiler-sfc": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.27.tgz",
-            "integrity": "sha512-sHZu9QyDPeDmN/MRoshhggVOWE5WlGFStKFwu8G52swATgSny27hJRWteKDSUUzUH+wp+bmeNbhJnEAel/auUQ==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.28.tgz",
+            "integrity": "sha512-6TnKMiNkd6u6VeVDhZn/07KhEZuBSn43Wd2No5zaP5s3xm8IqFTHBj84HJah4UepSUJTro5SoqqlOY22FKY96g==",
             "license": "MIT",
             "dependencies": {
-                "@babel/parser": "^7.28.5",
-                "@vue/compiler-core": "3.5.27",
-                "@vue/compiler-dom": "3.5.27",
-                "@vue/compiler-ssr": "3.5.27",
-                "@vue/shared": "3.5.27",
+                "@babel/parser": "^7.29.0",
+                "@vue/compiler-core": "3.5.28",
+                "@vue/compiler-dom": "3.5.28",
+                "@vue/compiler-ssr": "3.5.28",
+                "@vue/shared": "3.5.28",
                 "estree-walker": "^2.0.2",
                 "magic-string": "^0.30.21",
                 "postcss": "^8.5.6",
@@ -1999,13 +2473,13 @@
             }
         },
         "node_modules/@vue/compiler-ssr": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.27.tgz",
-            "integrity": "sha512-Sj7h+JHt512fV1cTxKlYhg7qxBvack+BGncSpH+8vnN+KN95iPIcqB5rsbblX40XorP+ilO7VIKlkuu3Xq2vjw==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.28.tgz",
+            "integrity": "sha512-JCq//9w1qmC6UGLWJX7RXzrGpKkroubey/ZFqTpvEIDJEKGgntuDMqkuWiZvzTzTA5h2qZvFBFHY7fAAa9475g==",
             "license": "MIT",
             "dependencies": {
-                "@vue/compiler-dom": "3.5.27",
-                "@vue/shared": "3.5.27"
+                "@vue/compiler-dom": "3.5.28",
+                "@vue/shared": "3.5.28"
             }
         },
         "node_modules/@vue/compiler-vue2": {
@@ -2104,53 +2578,53 @@
             }
         },
         "node_modules/@vue/reactivity": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.27.tgz",
-            "integrity": "sha512-vvorxn2KXfJ0nBEnj4GYshSgsyMNFnIQah/wczXlsNXt+ijhugmW+PpJ2cNPe4V6jpnBcs0MhCODKllWG+nvoQ==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.28.tgz",
+            "integrity": "sha512-gr5hEsxvn+RNyu9/9o1WtdYdwDjg5FgjUSBEkZWqgTKlo/fvwZ2+8W6AfKsc9YN2k/+iHYdS9vZYAhpi10kNaw==",
             "license": "MIT",
             "dependencies": {
-                "@vue/shared": "3.5.27"
+                "@vue/shared": "3.5.28"
             }
         },
         "node_modules/@vue/runtime-core": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.27.tgz",
-            "integrity": "sha512-fxVuX/fzgzeMPn/CLQecWeDIFNt3gQVhxM0rW02Tvp/YmZfXQgcTXlakq7IMutuZ/+Ogbn+K0oct9J3JZfyk3A==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.28.tgz",
+            "integrity": "sha512-POVHTdbgnrBBIpnbYU4y7pOMNlPn2QVxVzkvEA2pEgvzbelQq4ZOUxbp2oiyo+BOtiYlm8Q44wShHJoBvDPAjQ==",
             "license": "MIT",
             "dependencies": {
-                "@vue/reactivity": "3.5.27",
-                "@vue/shared": "3.5.27"
+                "@vue/reactivity": "3.5.28",
+                "@vue/shared": "3.5.28"
             }
         },
         "node_modules/@vue/runtime-dom": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.27.tgz",
-            "integrity": "sha512-/QnLslQgYqSJ5aUmb5F0z0caZPGHRB8LEAQ1s81vHFM5CBfnun63rxhvE/scVb/j3TbBuoZwkJyiLCkBluMpeg==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.28.tgz",
+            "integrity": "sha512-4SXxSF8SXYMuhAIkT+eBRqOkWEfPu6nhccrzrkioA6l0boiq7sp18HCOov9qWJA5HML61kW8p/cB4MmBiG9dSA==",
             "license": "MIT",
             "dependencies": {
-                "@vue/reactivity": "3.5.27",
-                "@vue/runtime-core": "3.5.27",
-                "@vue/shared": "3.5.27",
+                "@vue/reactivity": "3.5.28",
+                "@vue/runtime-core": "3.5.28",
+                "@vue/shared": "3.5.28",
                 "csstype": "^3.2.3"
             }
         },
         "node_modules/@vue/server-renderer": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.27.tgz",
-            "integrity": "sha512-qOz/5thjeP1vAFc4+BY3Nr6wxyLhpeQgAE/8dDtKo6a6xdk+L4W46HDZgNmLOBUDEkFXV3G7pRiUqxjX0/2zWA==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.28.tgz",
+            "integrity": "sha512-pf+5ECKGj8fX95bNincbzJ6yp6nyzuLDhYZCeFxUNp8EBrQpPpQaLX3nNCp49+UbgbPun3CeVE+5CXVV1Xydfg==",
             "license": "MIT",
             "dependencies": {
-                "@vue/compiler-ssr": "3.5.27",
-                "@vue/shared": "3.5.27"
+                "@vue/compiler-ssr": "3.5.28",
+                "@vue/shared": "3.5.28"
             },
             "peerDependencies": {
-                "vue": "3.5.27"
+                "vue": "3.5.28"
             }
         },
         "node_modules/@vue/shared": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.27.tgz",
-            "integrity": "sha512-dXr/3CgqXsJkZ0n9F3I4elY8wM9jMJpP3pvRG52r6m0tu/MsAFIe6JpXVGeNMd/D9F4hQynWT8Rfuj0bdm9kFQ==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.28.tgz",
+            "integrity": "sha512-cfWa1fCGBxrvaHRhvV3Is0MgmrbSCxYTXCSCau2I0a1Xw1N1pHAvkWCiXPRAqjvToILvguNyEwjevUqAuBQWvQ==",
             "license": "MIT"
         },
         "node_modules/@vueuse/core": {
@@ -2267,7 +2741,6 @@
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
             "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-            "dev": true,
             "license": "Python-2.0"
         },
         "node_modules/aria-hidden": {
@@ -2289,13 +2762,13 @@
             "license": "MIT"
         },
         "node_modules/axios": {
-            "version": "1.13.2",
-            "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
-            "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+            "version": "1.13.5",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.5.tgz",
+            "integrity": "sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==",
             "license": "MIT",
             "dependencies": {
-                "follow-redirects": "^1.15.6",
-                "form-data": "^4.0.4",
+                "follow-redirects": "^1.15.11",
+                "form-data": "^4.0.5",
                 "proxy-from-env": "^1.1.0"
             }
         },
@@ -2385,27 +2858,27 @@
             }
         },
         "node_modules/camelcase": {
-            "version": "8.0.0",
-            "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-8.0.0.tgz",
-            "integrity": "sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==",
+            "version": "9.0.0",
+            "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-9.0.0.tgz",
+            "integrity": "sha512-TO9xmyXTZ9HUHI8M1OnvExxYB0eYVS/1e5s7IDMTAoIcwUd+aNcFODs6Xk83mobk0velyHFQgA1yIrvYc6wclw==",
             "license": "MIT",
             "engines": {
-                "node": ">=16"
+                "node": ">=20"
             },
             "funding": {
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
         "node_modules/camelcase-keys": {
-            "version": "10.0.1",
-            "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-10.0.1.tgz",
-            "integrity": "sha512-kIH5nQUKB8ORZrwjk40GUgnhzuzxwKb6n5L+anOVmVSrjgix1pfNqVNl0tEcOP4AaFYdke3NNpNiGDSD112lcA==",
+            "version": "10.0.2",
+            "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-10.0.2.tgz",
+            "integrity": "sha512-PVHCLVbJ7nWGal0lPAmBN5eSLjIynlMUk2EPmL9aPl6QyJ6+FoszTKwldPzkuVqg5teZbPTbb8Oenzyw9GSJRw==",
             "license": "MIT",
             "dependencies": {
-                "camelcase": "^8.0.0",
-                "map-obj": "5.0.2",
-                "quick-lru": "^7.1.0",
-                "type-fest": "^4.41.0"
+                "camelcase": "^9.0.0",
+                "map-obj": "6.0.0",
+                "quick-lru": "^7.3.0",
+                "type-fest": "^5.4.1"
             },
             "engines": {
                 "node": ">=20"
@@ -2559,6 +3032,12 @@
                 "url": "https://github.com/sponsors/mesqueeb"
             }
         },
+        "node_modules/crelt": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+            "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+            "license": "MIT"
+        },
         "node_modules/cross-spawn": {
             "version": "7.0.6",
             "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2672,23 +3151,23 @@
             "license": "MIT"
         },
         "node_modules/enhanced-resolve": {
-            "version": "5.18.4",
-            "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz",
-            "integrity": "sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==",
+            "version": "5.19.0",
+            "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.19.0.tgz",
+            "integrity": "sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "graceful-fs": "^4.2.4",
-                "tapable": "^2.2.0"
+                "tapable": "^2.3.0"
             },
             "engines": {
                 "node": ">=10.13.0"
             }
         },
         "node_modules/entities": {
-            "version": "7.0.0",
-            "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.0.tgz",
-            "integrity": "sha512-FDWG5cmEYf2Z00IkYRhbFrwIwvdFKH07uV8dvNy0omp/Qb1xcyCWp2UDtcwJF4QZZvk0sLudP6/hAu42TaqVhQ==",
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+            "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
             "license": "BSD-2-Clause",
             "engines": {
                 "node": ">=0.12"
@@ -2743,9 +3222,9 @@
             }
         },
         "node_modules/esbuild": {
-            "version": "0.27.2",
-            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz",
-            "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==",
+            "version": "0.27.3",
+            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.3.tgz",
+            "integrity": "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==",
             "hasInstallScript": true,
             "license": "MIT",
             "bin": {
@@ -2755,32 +3234,32 @@
                 "node": ">=18"
             },
             "optionalDependencies": {
-                "@esbuild/aix-ppc64": "0.27.2",
-                "@esbuild/android-arm": "0.27.2",
-                "@esbuild/android-arm64": "0.27.2",
-                "@esbuild/android-x64": "0.27.2",
-                "@esbuild/darwin-arm64": "0.27.2",
-                "@esbuild/darwin-x64": "0.27.2",
-                "@esbuild/freebsd-arm64": "0.27.2",
-                "@esbuild/freebsd-x64": "0.27.2",
-                "@esbuild/linux-arm": "0.27.2",
-                "@esbuild/linux-arm64": "0.27.2",
-                "@esbuild/linux-ia32": "0.27.2",
-                "@esbuild/linux-loong64": "0.27.2",
-                "@esbuild/linux-mips64el": "0.27.2",
-                "@esbuild/linux-ppc64": "0.27.2",
-                "@esbuild/linux-riscv64": "0.27.2",
-                "@esbuild/linux-s390x": "0.27.2",
-                "@esbuild/linux-x64": "0.27.2",
-                "@esbuild/netbsd-arm64": "0.27.2",
-                "@esbuild/netbsd-x64": "0.27.2",
-                "@esbuild/openbsd-arm64": "0.27.2",
-                "@esbuild/openbsd-x64": "0.27.2",
-                "@esbuild/openharmony-arm64": "0.27.2",
-                "@esbuild/sunos-x64": "0.27.2",
-                "@esbuild/win32-arm64": "0.27.2",
-                "@esbuild/win32-ia32": "0.27.2",
-                "@esbuild/win32-x64": "0.27.2"
+                "@esbuild/aix-ppc64": "0.27.3",
+                "@esbuild/android-arm": "0.27.3",
+                "@esbuild/android-arm64": "0.27.3",
+                "@esbuild/android-x64": "0.27.3",
+                "@esbuild/darwin-arm64": "0.27.3",
+                "@esbuild/darwin-x64": "0.27.3",
+                "@esbuild/freebsd-arm64": "0.27.3",
+                "@esbuild/freebsd-x64": "0.27.3",
+                "@esbuild/linux-arm": "0.27.3",
+                "@esbuild/linux-arm64": "0.27.3",
+                "@esbuild/linux-ia32": "0.27.3",
+                "@esbuild/linux-loong64": "0.27.3",
+                "@esbuild/linux-mips64el": "0.27.3",
+                "@esbuild/linux-ppc64": "0.27.3",
+                "@esbuild/linux-riscv64": "0.27.3",
+                "@esbuild/linux-s390x": "0.27.3",
+                "@esbuild/linux-x64": "0.27.3",
+                "@esbuild/netbsd-arm64": "0.27.3",
+                "@esbuild/netbsd-x64": "0.27.3",
+                "@esbuild/openbsd-arm64": "0.27.3",
+                "@esbuild/openbsd-x64": "0.27.3",
+                "@esbuild/openharmony-arm64": "0.27.3",
+                "@esbuild/sunos-x64": "0.27.3",
+                "@esbuild/win32-arm64": "0.27.3",
+                "@esbuild/win32-ia32": "0.27.3",
+                "@esbuild/win32-x64": "0.27.3"
             }
         },
         "node_modules/escalade": {
@@ -2797,7 +3276,6 @@
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
             "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=10"
@@ -3650,9 +4128,9 @@
             }
         },
         "node_modules/laravel-precognition": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/laravel-precognition/-/laravel-precognition-1.0.0.tgz",
-            "integrity": "sha512-hvXPT7dayCQAidxnsY0hab9Q+Y2rsh7xRpH9uiFtXN8Dekc3tIZt+NrxrOZ9N5SwHBmRBze/Bv+ElfXac0kD6g==",
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/laravel-precognition/-/laravel-precognition-1.0.2.tgz",
+            "integrity": "sha512-0H08JDdMWONrL/N314fvsO3FATJwGGlFKGkMF3nNmizVFJaWs17816iM+sX7Rp8d5hUjYCx6WLfsehSKfaTxjg==",
             "license": "MIT",
             "dependencies": {
                 "axios": "^1.4.0",
@@ -3660,9 +4138,9 @@
             }
         },
         "node_modules/laravel-vite-plugin": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/laravel-vite-plugin/-/laravel-vite-plugin-2.0.1.tgz",
-            "integrity": "sha512-zQuvzWfUKQu9oNVi1o0RZAJCwhGsdhx4NEOyrVQwJHaWDseGP9tl7XUPLY2T8Cj6+IrZ6lmyxlR1KC8unf3RLA==",
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/laravel-vite-plugin/-/laravel-vite-plugin-2.1.0.tgz",
+            "integrity": "sha512-z+ck2BSV6KWtYcoIzk9Y5+p4NEjqM+Y4i8/H+VZRLq0OgNjW2DqyADquwYu5j8qRvaXwzNmfCWl1KrMlV1zpsg==",
             "license": "MIT",
             "dependencies": {
                 "picocolors": "^1.0.0",
@@ -3863,9 +4341,9 @@
             }
         },
         "node_modules/lightningcss-linux-x64-gnu": {
-            "version": "1.31.0",
-            "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.31.0.tgz",
-            "integrity": "sha512-enNePbgDKmJybVz90/8dAGTOulvpn0IwxamHHnIj32gmdbuSPJ9mk+Nob4UmiqLMAdHlH+0c+lpsZkv4TSxi3w==",
+            "version": "1.31.1",
+            "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.31.1.tgz",
+            "integrity": "sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==",
             "cpu": [
                 "x64"
             ],
@@ -3962,6 +4440,21 @@
                 "url": "https://opencollective.com/parcel"
             }
         },
+        "node_modules/linkify-it": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+            "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+            "license": "MIT",
+            "dependencies": {
+                "uc.micro": "^2.0.0"
+            }
+        },
+        "node_modules/linkifyjs": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.3.2.tgz",
+            "integrity": "sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==",
+            "license": "MIT"
+        },
         "node_modules/locate-path": {
             "version": "6.0.0",
             "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -3979,16 +4472,16 @@
             }
         },
         "node_modules/lodash": {
-            "version": "4.17.21",
-            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+            "version": "4.17.23",
+            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+            "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
             "dev": true,
             "license": "MIT"
         },
         "node_modules/lodash-es": {
-            "version": "4.17.22",
-            "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.22.tgz",
-            "integrity": "sha512-XEawp1t0gxSi9x01glktRZ5HDy0HXqrM0x5pXQM98EaI0NxO6jVM7omDOxsuEo5UIASAnm2bRp1Jt/e0a2XU8Q==",
+            "version": "4.17.23",
+            "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.23.tgz",
+            "integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==",
             "license": "MIT"
         },
         "node_modules/lodash.merge": {
@@ -4017,17 +4510,34 @@
             }
         },
         "node_modules/map-obj": {
-            "version": "5.0.2",
-            "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-5.0.2.tgz",
-            "integrity": "sha512-K6K2NgKnTXimT3779/4KxSvobxOtMmx1LBZ3NwRxT/MDIR3Br/fQ4Q+WCX5QxjyUR8zg5+RV9Tbf2c5pAWTD2A==",
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-6.0.0.tgz",
+            "integrity": "sha512-PwDvwt/tK70+luLw5k9ySLtzLAzwf7tZTY9GBj63Y010nHRPjwHcQTpTd5JwQqITC2ty7prtxBo71iwyYY0TAg==",
             "license": "MIT",
             "engines": {
-                "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+                "node": ">=20"
             },
             "funding": {
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/markdown-it": {
+            "version": "14.1.1",
+            "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.1.tgz",
+            "integrity": "sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==",
+            "license": "MIT",
+            "dependencies": {
+                "argparse": "^2.0.1",
+                "entities": "^4.4.0",
+                "linkify-it": "^5.0.0",
+                "mdurl": "^2.0.0",
+                "punycode.js": "^2.3.1",
+                "uc.micro": "^2.1.0"
+            },
+            "bin": {
+                "markdown-it": "bin/markdown-it.mjs"
+            }
+        },
         "node_modules/math-intrinsics": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -4037,6 +4547,12 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/mdurl": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+            "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+            "license": "MIT"
+        },
         "node_modules/merge2": {
             "version": "1.4.1",
             "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -4104,15 +4620,6 @@
             "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
             "license": "MIT"
         },
-        "node_modules/moment": {
-            "version": "2.30.1",
-            "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
-            "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
-            "license": "MIT",
-            "engines": {
-                "node": "*"
-            }
-        },
         "node_modules/ms": {
             "version": "2.1.3",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -4201,6 +4708,12 @@
                 "node": ">= 0.8.0"
             }
         },
+        "node_modules/orderedmap": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz",
+            "integrity": "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==",
+            "license": "MIT"
+        },
         "node_modules/p-limit": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -4371,9 +4884,9 @@
             }
         },
         "node_modules/prettier": {
-            "version": "3.8.0",
-            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.0.tgz",
-            "integrity": "sha512-yEPsovQfpxYfgWNhCfECjG5AQaO+K3dp6XERmOepyPDVqcJm+bjyCVO3pmU+nAPe0N5dDvekfGezt/EIiRe1TA==",
+            "version": "3.8.1",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+            "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
             "dev": true,
             "license": "MIT",
             "peer": true,
@@ -4492,6 +5005,204 @@
                 }
             }
         },
+        "node_modules/prosemirror-changeset": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.3.1.tgz",
+            "integrity": "sha512-j0kORIBm8ayJNl3zQvD1TTPHJX3g042et6y/KQhZhnPrruO8exkTgG8X+NRpj7kIyMMEx74Xb3DyMIBtO0IKkQ==",
+            "license": "MIT",
+            "dependencies": {
+                "prosemirror-transform": "^1.0.0"
+            }
+        },
+        "node_modules/prosemirror-collab": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/prosemirror-collab/-/prosemirror-collab-1.3.1.tgz",
+            "integrity": "sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==",
+            "license": "MIT",
+            "dependencies": {
+                "prosemirror-state": "^1.0.0"
+            }
+        },
+        "node_modules/prosemirror-commands": {
+            "version": "1.7.1",
+            "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.7.1.tgz",
+            "integrity": "sha512-rT7qZnQtx5c0/y/KlYaGvtG411S97UaL6gdp6RIZ23DLHanMYLyfGBV5DtSnZdthQql7W+lEVbpSfwtO8T+L2w==",
+            "license": "MIT",
+            "dependencies": {
+                "prosemirror-model": "^1.0.0",
+                "prosemirror-state": "^1.0.0",
+                "prosemirror-transform": "^1.10.2"
+            }
+        },
+        "node_modules/prosemirror-dropcursor": {
+            "version": "1.8.2",
+            "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.2.tgz",
+            "integrity": "sha512-CCk6Gyx9+Tt2sbYk5NK0nB1ukHi2ryaRgadV/LvyNuO3ena1payM2z6Cg0vO1ebK8cxbzo41ku2DE5Axj1Zuiw==",
+            "license": "MIT",
+            "dependencies": {
+                "prosemirror-state": "^1.0.0",
+                "prosemirror-transform": "^1.1.0",
+                "prosemirror-view": "^1.1.0"
+            }
+        },
+        "node_modules/prosemirror-gapcursor": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.4.0.tgz",
+            "integrity": "sha512-z00qvurSdCEWUIulij/isHaqu4uLS8r/Fi61IbjdIPJEonQgggbJsLnstW7Lgdk4zQ68/yr6B6bf7sJXowIgdQ==",
+            "license": "MIT",
+            "dependencies": {
+                "prosemirror-keymap": "^1.0.0",
+                "prosemirror-model": "^1.0.0",
+                "prosemirror-state": "^1.0.0",
+                "prosemirror-view": "^1.0.0"
+            }
+        },
+        "node_modules/prosemirror-history": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.5.0.tgz",
+            "integrity": "sha512-zlzTiH01eKA55UAf1MEjtssJeHnGxO0j4K4Dpx+gnmX9n+SHNlDqI2oO1Kv1iPN5B1dm5fsljCfqKF9nFL6HRg==",
+            "license": "MIT",
+            "dependencies": {
+                "prosemirror-state": "^1.2.2",
+                "prosemirror-transform": "^1.0.0",
+                "prosemirror-view": "^1.31.0",
+                "rope-sequence": "^1.3.0"
+            }
+        },
+        "node_modules/prosemirror-inputrules": {
+            "version": "1.5.1",
+            "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.5.1.tgz",
+            "integrity": "sha512-7wj4uMjKaXWAQ1CDgxNzNtR9AlsuwzHfdFH1ygEHA2KHF2DOEaXl1CJfNPAKCg9qNEh4rum975QLaCiQPyY6Fw==",
+            "license": "MIT",
+            "dependencies": {
+                "prosemirror-state": "^1.0.0",
+                "prosemirror-transform": "^1.0.0"
+            }
+        },
+        "node_modules/prosemirror-keymap": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.3.tgz",
+            "integrity": "sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==",
+            "license": "MIT",
+            "dependencies": {
+                "prosemirror-state": "^1.0.0",
+                "w3c-keyname": "^2.2.0"
+            }
+        },
+        "node_modules/prosemirror-markdown": {
+            "version": "1.13.4",
+            "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.13.4.tgz",
+            "integrity": "sha512-D98dm4cQ3Hs6EmjK500TdAOew4Z03EV71ajEFiWra3Upr7diytJsjF4mPV2dW+eK5uNectiRj0xFxYI9NLXDbw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/markdown-it": "^14.0.0",
+                "markdown-it": "^14.0.0",
+                "prosemirror-model": "^1.25.0"
+            }
+        },
+        "node_modules/prosemirror-menu": {
+            "version": "1.2.5",
+            "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.2.5.tgz",
+            "integrity": "sha512-qwXzynnpBIeg1D7BAtjOusR+81xCp53j7iWu/IargiRZqRjGIlQuu1f3jFi+ehrHhWMLoyOQTSRx/IWZJqOYtQ==",
+            "license": "MIT",
+            "dependencies": {
+                "crelt": "^1.0.0",
+                "prosemirror-commands": "^1.0.0",
+                "prosemirror-history": "^1.0.0",
+                "prosemirror-state": "^1.0.0"
+            }
+        },
+        "node_modules/prosemirror-model": {
+            "version": "1.25.4",
+            "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.4.tgz",
+            "integrity": "sha512-PIM7E43PBxKce8OQeezAs9j4TP+5yDpZVbuurd1h5phUxEKIu+G2a+EUZzIC5nS1mJktDJWzbqS23n1tsAf5QA==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "orderedmap": "^2.0.0"
+            }
+        },
+        "node_modules/prosemirror-schema-basic": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.4.tgz",
+            "integrity": "sha512-ELxP4TlX3yr2v5rM7Sb70SqStq5NvI15c0j9j/gjsrO5vaw+fnnpovCLEGIcpeGfifkuqJwl4fon6b+KdrODYQ==",
+            "license": "MIT",
+            "dependencies": {
+                "prosemirror-model": "^1.25.0"
+            }
+        },
+        "node_modules/prosemirror-schema-list": {
+            "version": "1.5.1",
+            "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.5.1.tgz",
+            "integrity": "sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==",
+            "license": "MIT",
+            "dependencies": {
+                "prosemirror-model": "^1.0.0",
+                "prosemirror-state": "^1.0.0",
+                "prosemirror-transform": "^1.7.3"
+            }
+        },
+        "node_modules/prosemirror-state": {
+            "version": "1.4.4",
+            "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.4.tgz",
+            "integrity": "sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "prosemirror-model": "^1.0.0",
+                "prosemirror-transform": "^1.0.0",
+                "prosemirror-view": "^1.27.0"
+            }
+        },
+        "node_modules/prosemirror-tables": {
+            "version": "1.8.5",
+            "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.8.5.tgz",
+            "integrity": "sha512-V/0cDCsHKHe/tfWkeCmthNUcEp1IVO3p6vwN8XtwE9PZQLAZJigbw3QoraAdfJPir4NKJtNvOB8oYGKRl+t0Dw==",
+            "license": "MIT",
+            "dependencies": {
+                "prosemirror-keymap": "^1.2.3",
+                "prosemirror-model": "^1.25.4",
+                "prosemirror-state": "^1.4.4",
+                "prosemirror-transform": "^1.10.5",
+                "prosemirror-view": "^1.41.4"
+            }
+        },
+        "node_modules/prosemirror-trailing-node": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-3.0.0.tgz",
+            "integrity": "sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@remirror/core-constants": "3.0.0",
+                "escape-string-regexp": "^4.0.0"
+            },
+            "peerDependencies": {
+                "prosemirror-model": "^1.22.1",
+                "prosemirror-state": "^1.4.2",
+                "prosemirror-view": "^1.33.8"
+            }
+        },
+        "node_modules/prosemirror-transform": {
+            "version": "1.11.0",
+            "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.11.0.tgz",
+            "integrity": "sha512-4I7Ce4KpygXb9bkiPS3hTEk4dSHorfRw8uI0pE8IhxlK2GXsqv5tIA7JUSxtSu7u8APVOTtbUBxTmnHIxVkIJw==",
+            "license": "MIT",
+            "dependencies": {
+                "prosemirror-model": "^1.21.0"
+            }
+        },
+        "node_modules/prosemirror-view": {
+            "version": "1.41.6",
+            "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.41.6.tgz",
+            "integrity": "sha512-mxpcDG4hNQa/CPtzxjdlir5bJFDlm0/x5nGBbStB2BWX+XOQ9M8ekEG+ojqB5BcVu2Rc80/jssCMZzSstJuSYg==",
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "prosemirror-model": "^1.20.0",
+                "prosemirror-state": "^1.0.0",
+                "prosemirror-transform": "^1.1.0"
+            }
+        },
         "node_modules/proxy-from-env": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -4508,10 +5219,19 @@
                 "node": ">=6"
             }
         },
+        "node_modules/punycode.js": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+            "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/qs": {
-            "version": "6.14.1",
-            "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
-            "integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
+            "version": "6.14.2",
+            "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.2.tgz",
+            "integrity": "sha512-V/yCWTTF7VJ9hIh18Ugr2zhJMP01MY7c5kh4J870L7imm6/DIzBsNLTXzMwUA3yZ5b/KBqLx8Kp3uRvd7xSe3Q==",
             "license": "BSD-3-Clause",
             "dependencies": {
                 "side-channel": "^1.1.0"
@@ -4557,9 +5277,9 @@
             }
         },
         "node_modules/reka-ui": {
-            "version": "2.7.0",
-            "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.7.0.tgz",
-            "integrity": "sha512-m+XmxQN2xtFzBP3OAdIafKq7C8OETo2fqfxcIIxYmNN2Ch3r5oAf6yEYCIJg5tL/yJU2mHqF70dCCekUkrAnXA==",
+            "version": "2.8.0",
+            "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.8.0.tgz",
+            "integrity": "sha512-N4JOyIrmDE7w2i06WytqcV2QICubtS2PsK5Uo8FIMAgmO13KhUAgAByP26cXjjm2oF/w7rTyRs8YaqtvaBT+SA==",
             "license": "MIT",
             "dependencies": {
                 "@floating-ui/dom": "^1.6.13",
@@ -4567,8 +5287,8 @@
                 "@internationalized/date": "^3.5.0",
                 "@internationalized/number": "^3.5.0",
                 "@tanstack/vue-virtual": "^3.12.0",
-                "@vueuse/core": "^12.5.0",
-                "@vueuse/shared": "^12.5.0",
+                "@vueuse/core": "^14.1.0",
+                "@vueuse/shared": "^14.1.0",
                 "aria-hidden": "^1.2.4",
                 "defu": "^6.1.4",
                 "ohash": "^2.0.11"
@@ -4577,6 +5297,44 @@
                 "vue": ">= 3.2.0"
             }
         },
+        "node_modules/reka-ui/node_modules/@vueuse/core": {
+            "version": "14.2.1",
+            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.2.1.tgz",
+            "integrity": "sha512-3vwDzV+GDUNpdegRY6kzpLm4Igptq+GA0QkJ3W61Iv27YWwW/ufSlOfgQIpN6FZRMG0mkaz4gglJRtq5SeJyIQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/web-bluetooth": "^0.0.21",
+                "@vueuse/metadata": "14.2.1",
+                "@vueuse/shared": "14.2.1"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "vue": "^3.5.0"
+            }
+        },
+        "node_modules/reka-ui/node_modules/@vueuse/metadata": {
+            "version": "14.2.1",
+            "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.2.1.tgz",
+            "integrity": "sha512-1ButlVtj5Sb/HDtIy1HFr1VqCP4G6Ypqt5MAo0lCgjokrk2mvQKsK2uuy0vqu/Ks+sHfuHo0B9Y9jn9xKdjZsw==",
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/reka-ui/node_modules/@vueuse/shared": {
+            "version": "14.2.1",
+            "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.2.1.tgz",
+            "integrity": "sha512-shTJncjV9JTI4oVNyF1FQonetYAiTBd+Qj7cY89SWbXSkx7gyhrgtEdF2ZAVWS1S3SHlaROO6F2IesJxQEkZBw==",
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "vue": "^3.5.0"
+            }
+        },
         "node_modules/require-directory": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -4615,9 +5373,9 @@
             "license": "MIT"
         },
         "node_modules/rollup": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.55.2.tgz",
-            "integrity": "sha512-PggGy4dhwx5qaW+CKBilA/98Ql9keyfnb7lh4SR6shQ91QQQi1ORJ1v4UinkdP2i87OBs9AQFooQylcrrRfIcg==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
+            "integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
             "license": "MIT",
             "dependencies": {
                 "@types/estree": "1.0.8"
@@ -4630,38 +5388,38 @@
                 "npm": ">=8.0.0"
             },
             "optionalDependencies": {
-                "@rollup/rollup-android-arm-eabi": "4.55.2",
-                "@rollup/rollup-android-arm64": "4.55.2",
-                "@rollup/rollup-darwin-arm64": "4.55.2",
-                "@rollup/rollup-darwin-x64": "4.55.2",
-                "@rollup/rollup-freebsd-arm64": "4.55.2",
-                "@rollup/rollup-freebsd-x64": "4.55.2",
-                "@rollup/rollup-linux-arm-gnueabihf": "4.55.2",
-                "@rollup/rollup-linux-arm-musleabihf": "4.55.2",
-                "@rollup/rollup-linux-arm64-gnu": "4.55.2",
-                "@rollup/rollup-linux-arm64-musl": "4.55.2",
-                "@rollup/rollup-linux-loong64-gnu": "4.55.2",
-                "@rollup/rollup-linux-loong64-musl": "4.55.2",
-                "@rollup/rollup-linux-ppc64-gnu": "4.55.2",
-                "@rollup/rollup-linux-ppc64-musl": "4.55.2",
-                "@rollup/rollup-linux-riscv64-gnu": "4.55.2",
-                "@rollup/rollup-linux-riscv64-musl": "4.55.2",
-                "@rollup/rollup-linux-s390x-gnu": "4.55.2",
-                "@rollup/rollup-linux-x64-gnu": "4.55.2",
-                "@rollup/rollup-linux-x64-musl": "4.55.2",
-                "@rollup/rollup-openbsd-x64": "4.55.2",
-                "@rollup/rollup-openharmony-arm64": "4.55.2",
-                "@rollup/rollup-win32-arm64-msvc": "4.55.2",
-                "@rollup/rollup-win32-ia32-msvc": "4.55.2",
-                "@rollup/rollup-win32-x64-gnu": "4.55.2",
-                "@rollup/rollup-win32-x64-msvc": "4.55.2",
+                "@rollup/rollup-android-arm-eabi": "4.57.1",
+                "@rollup/rollup-android-arm64": "4.57.1",
+                "@rollup/rollup-darwin-arm64": "4.57.1",
+                "@rollup/rollup-darwin-x64": "4.57.1",
+                "@rollup/rollup-freebsd-arm64": "4.57.1",
+                "@rollup/rollup-freebsd-x64": "4.57.1",
+                "@rollup/rollup-linux-arm-gnueabihf": "4.57.1",
+                "@rollup/rollup-linux-arm-musleabihf": "4.57.1",
+                "@rollup/rollup-linux-arm64-gnu": "4.57.1",
+                "@rollup/rollup-linux-arm64-musl": "4.57.1",
+                "@rollup/rollup-linux-loong64-gnu": "4.57.1",
+                "@rollup/rollup-linux-loong64-musl": "4.57.1",
+                "@rollup/rollup-linux-ppc64-gnu": "4.57.1",
+                "@rollup/rollup-linux-ppc64-musl": "4.57.1",
+                "@rollup/rollup-linux-riscv64-gnu": "4.57.1",
+                "@rollup/rollup-linux-riscv64-musl": "4.57.1",
+                "@rollup/rollup-linux-s390x-gnu": "4.57.1",
+                "@rollup/rollup-linux-x64-gnu": "4.57.1",
+                "@rollup/rollup-linux-x64-musl": "4.57.1",
+                "@rollup/rollup-openbsd-x64": "4.57.1",
+                "@rollup/rollup-openharmony-arm64": "4.57.1",
+                "@rollup/rollup-win32-arm64-msvc": "4.57.1",
+                "@rollup/rollup-win32-ia32-msvc": "4.57.1",
+                "@rollup/rollup-win32-x64-gnu": "4.57.1",
+                "@rollup/rollup-win32-x64-msvc": "4.57.1",
                 "fsevents": "~2.3.2"
             }
         },
         "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-gnu": {
-            "version": "4.55.2",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.55.2.tgz",
-            "integrity": "sha512-1e30XAuaBP1MAizaOBApsgeGZge2/Byd6wV4a8oa6jPdHELbRHBiw7wvo4dp7Ie2PE8TZT4pj9RLGZv9N4qwlw==",
+            "version": "4.57.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.57.1.tgz",
+            "integrity": "sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==",
             "cpu": [
                 "x64"
             ],
@@ -4671,6 +5429,12 @@
                 "linux"
             ]
         },
+        "node_modules/rope-sequence": {
+            "version": "1.3.4",
+            "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
+            "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==",
+            "license": "MIT"
+        },
         "node_modules/run-parallel": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -4706,9 +5470,9 @@
             }
         },
         "node_modules/semver": {
-            "version": "7.7.3",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-            "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+            "version": "7.7.4",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+            "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
             "dev": true,
             "license": "ISC",
             "bin": {
@@ -4919,6 +5683,18 @@
                 "url": "https://github.com/chalk/supports-color?sponsor=1"
             }
         },
+        "node_modules/tagged-tag": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/tagged-tag/-/tagged-tag-1.0.0.tgz",
+            "integrity": "sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=20"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/tailwind-merge": {
             "version": "3.4.0",
             "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
@@ -5060,12 +5836,15 @@
             }
         },
         "node_modules/type-fest": {
-            "version": "4.41.0",
-            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
-            "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
+            "version": "5.4.4",
+            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-5.4.4.tgz",
+            "integrity": "sha512-JnTrzGu+zPV3aXIUhnyWJj4z/wigMsdYajGLIYakqyOW1nPllzXEJee0QQbHj+CTIQtXGlAjuK0UY+2xTyjVAw==",
             "license": "(MIT OR CC0-1.0)",
+            "dependencies": {
+                "tagged-tag": "^1.0.0"
+            },
             "engines": {
-                "node": ">=16"
+                "node": ">=20"
             },
             "funding": {
                 "url": "https://github.com/sponsors/sindresorhus"
@@ -5087,16 +5866,16 @@
             }
         },
         "node_modules/typescript-eslint": {
-            "version": "8.53.1",
-            "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.53.1.tgz",
-            "integrity": "sha512-gB+EVQfP5RDElh9ittfXlhZJdjSU4jUSTyE2+ia8CYyNvet4ElfaLlAIqDvQV9JPknKx0jQH1racTYe/4LaLSg==",
+            "version": "8.55.0",
+            "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.55.0.tgz",
+            "integrity": "sha512-HE4wj+r5lmDVS9gdaN0/+iqNvPZwGfnJ5lZuz7s5vLlg9ODw0bIiiETaios9LvFI1U94/VBXGm3CB2Y5cNFMpw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/eslint-plugin": "8.53.1",
-                "@typescript-eslint/parser": "8.53.1",
-                "@typescript-eslint/typescript-estree": "8.53.1",
-                "@typescript-eslint/utils": "8.53.1"
+                "@typescript-eslint/eslint-plugin": "8.55.0",
+                "@typescript-eslint/parser": "8.55.0",
+                "@typescript-eslint/typescript-estree": "8.55.0",
+                "@typescript-eslint/utils": "8.55.0"
             },
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -5110,6 +5889,12 @@
                 "typescript": ">=4.8.4 <6.0.0"
             }
         },
+        "node_modules/uc.micro": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+            "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+            "license": "MIT"
+        },
         "node_modules/undici-types": {
             "version": "6.21.0",
             "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
@@ -5365,17 +6150,17 @@
             "license": "MIT"
         },
         "node_modules/vue": {
-            "version": "3.5.27",
-            "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.27.tgz",
-            "integrity": "sha512-aJ/UtoEyFySPBGarREmN4z6qNKpbEguYHMmXSiOGk69czc+zhs0NF6tEFrY8TZKAl8N/LYAkd4JHVd5E/AsSmw==",
+            "version": "3.5.28",
+            "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.28.tgz",
+            "integrity": "sha512-BRdrNfeoccSoIZeIhyPBfvWSLFP4q8J3u8Ju8Ug5vu3LdD+yTM13Sg4sKtljxozbnuMu1NB1X5HBHRYUzFocKg==",
             "license": "MIT",
             "peer": true,
             "dependencies": {
-                "@vue/compiler-dom": "3.5.27",
-                "@vue/compiler-sfc": "3.5.27",
-                "@vue/runtime-dom": "3.5.27",
-                "@vue/server-renderer": "3.5.27",
-                "@vue/shared": "3.5.27"
+                "@vue/compiler-dom": "3.5.28",
+                "@vue/compiler-sfc": "3.5.28",
+                "@vue/runtime-dom": "3.5.28",
+                "@vue/server-renderer": "3.5.28",
+                "@vue/shared": "3.5.28"
             },
             "peerDependencies": {
                 "typescript": "*"
@@ -5475,6 +6260,12 @@
                 "vue": "^3.0.1"
             }
         },
+        "node_modules/w3c-keyname": {
+            "version": "2.2.8",
+            "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+            "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+            "license": "MIT"
+        },
         "node_modules/which": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 1aab739..b44918d 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,9 @@
         "@coders-tm/vue-number-format": "^3.35.4",
         "@inertiajs/vue3": "^2.1.0",
         "@tanstack/vue-table": "^8.21.3",
+        "@tiptap/pm": "^3.19.0",
+        "@tiptap/starter-kit": "^3.19.0",
+        "@tiptap/vue-3": "^3.19.0",
         "@vueuse/core": "^12.8.2",
         "axios": "^1.12.2",
         "camelcase-keys": "^10.0.0",
@@ -40,9 +43,8 @@
         "fuse.js": "^7.1.0",
         "laravel-vite-plugin": "^2.0.0",
         "lucide-vue-next": "^0.468.0",
-        "moment": "^2.30.1",
         "pinia": "^3.0.3",
-        "reka-ui": "^2.7.0",
+        "reka-ui": "^2.8.0",
         "tailwind-merge": "^3.2.0",
         "tailwindcss": "^4.1.1",
         "tw-animate-css": "^1.2.5",
diff --git a/resources/css/app.css b/resources/css/app.css
index 3d82668..16abbec 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -45,6 +45,9 @@ @theme inline {
     --color-warning: var(--warning);
     --color-warning-foreground: var(--warning-foreground);
 
+    --color-action: var(--action);
+    --color-action-foreground: var(--action-foreground);
+
     --color-border: var(--border);
     --color-input: var(--input);
     --color-ring: var(--ring);
@@ -57,6 +60,7 @@ @theme inline {
 
     --color-sidebar: var(--sidebar-background);
     --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-icon: var(--sidebar-icon);
     --color-sidebar-primary: var(--sidebar-primary);
     --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
     --color-sidebar-accent: var(--sidebar-accent);
@@ -74,7 +78,7 @@ @theme inline {
 
     /* https://typescale.com/ /*
     /* Major Third */
-    --text-4xl: 3.815rem;
+    /* --text-4xl: 3.815rem;
     --text-3xl: 3.052rem;
     --text-2xl: 2.441rem;
     --text-xl: 1.953rem;
@@ -82,12 +86,22 @@ @theme inline {
     --text-md: 1.25rem;
     --text-base: 1rem;
     --text-sm: 0.8rem;
-    --text-xs: 0.64rem;
+    --text-xs: 0.64rem; */
+
+    /* Minor Third */
+    --text-4xl: 2.986rem;
+    --text-3xl: 2.488rem;
+    --text-2xl: 2.074rem;
+    --text-xl: 1.728rem;
+    --text-lg: 1.44rem;
+    --text-md: 1.2rem;
+    --text-base: 1rem;
+    --text-sm: 0.833rem;
+    --text-xs: 0.694rem;
 
     --shadow-arrow: 0 2px 1px rgb(0 0 0 / 0.1)
 }
 
-
 /*
   The default border color has changed to `currentColor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still
@@ -103,7 +117,7 @@ @layer base {
     ::before,
     ::backdrop,
     ::file-selector-button {
-        border-color: var(--color-gray-200, currentColor);
+        border-color: var(--color-zinc-200, currentColor);
     }
 }
 
@@ -112,11 +126,31 @@ @layer utilities {
     body,
     html {
         --font-sans: system-ui, sans-serif;
-        font-size: 18px;
-        background-color: var(--sidebar-background);
-        /* background: linear-gradient(45deg, var(--color-slate-100), var(--color-orange-100)); */
+        font-size: 16px;
+        background-color: var(--main-background);
         letter-spacing: 0.006em;
     }
+
+    @media (min-width: 1281px) { body, html { font-size: 16px; } }
+    /* @media (min-width: 1921px) { body, html { font-size: 18px; } } */
+
+    /* Fluid scaling */
+    /* @media screen and (min-width: 320px) {
+
+        body,
+        html {
+            font-size: calc(16px + 2 * ((100vw - 320px) / 1120));
+        }
+    }
+
+    @media screen and (min-width: 1440px) {
+
+        body,
+        html {
+            font-size: 18px;
+        }
+    } */
+
 }
 
 :root {
@@ -126,14 +160,14 @@ :root {
     --card-foreground: hsl(0 0% 3.9%);
     --popover-foreground: hsl(0 0% 3.9%);
     --popover: var(--color-background);
-    --popover-foreground: var(--color-gray-900);
-    --primary: var(--color-orange-200);
-    --primary-foreground: var(--color-orange-600);
+    --popover-foreground: var(--color-zinc-900);
+    --primary: var(--color-orange-500);
+    --primary-foreground: var(--color-white);
     --secondary: hsl(0 0% 92.1%);
     --secondary-foreground: hsl(0 0% 9%);
-    --muted: var(--color-gray-50);
-    --muted-foreground: var(--color-gray-400);
-    --accent: var(--color-gray-50);
+    --muted: var(--color-zinc-50);
+    --muted-foreground: var(--color-zinc-500);
+    --accent: var(--color-zinc-100);
     --accent-foreground: hsl(0 0% 9%);
     --destructive: var(--color-red-500);
     --destructive-foreground: hsl(0 0% 98%);
@@ -141,26 +175,29 @@ :root {
     --success-foreground: var(--color-foreground);
     --warning: var(--color-amber-300);
     --warning-foreground: var(--color-amber-900);
-    --border: hsl(0 0% 92.8%);
+    --action: var(--color-blue-500);
+    --action-foreground: var(--color-white);
+    --border: var(--color-zinc-200);
     --input: var(--color-zinc-100);
-    --ring: hsl(0 0% 3.9%);
+    --ring: var(--color-zinc-200);
     --chart-1: hsl(12 76% 61%);
     --chart-2: hsl(313, 58%, 39%);
     --chart-3: hsl(197 37% 24%);
     --chart-4: hsl(43 74% 66%);
     --chart-5: hsl(27 87% 67%);
     --radius: 0.5rem;
-    --main-background: transparent;
-    --sidebar-background: var(--color-slate-100);
-    --sidebar-foreground: hsl(240 5.3% 26.1%);
+    --main-background: var(--color-zinc-50);
+    --sidebar-background: oklch(95.5% 0.003 286.35);;
+    --sidebar-foreground: var(--foreground);
+    --sidebar-icon: var(--color-zinc-500);
     --sidebar-primary: hsl(0 0% 10%);
     --sidebar-primary-foreground: hsl(0 0% 98%);
     --sidebar-accent: var(--color-white);
-    --sidebar-accent-foreground: hsl(0 0% 30%);
-    --sidebar-border: var(--color-gray-300);
+    --sidebar-accent-foreground: var(--color-foreground);
+    --sidebar-border: oklch(84% 0.008 286.2);
     --sidebar-ring: hsl(217.2 91.2% 59.8%);
     --sidebar: hsl(0 0% 98%);
-    --status-draft: var(--color-gray-100);
+    --status-draft: var(--color-zinc-100);
     --status-sent: var(--color-sky-400);
     --status-paid: var(--color-lime-500);
     --status-due: var(--color-warning);
@@ -170,27 +207,28 @@ :root {
 }
 
 .dark {
-    --background: var(--color-neutral-800);
+    --background: oklch(24% 0 0);
     --foreground: var(--color-neutral-300);
     --card: var(--color-neutral-800);
     --card-foreground: var(--color-neutral-300);
-    /* --popover: hsl(0 0% 3.9%); */
     --popover: var(--color-neutral-900);
     --popover-foreground: var(--color-neutral-300);
-    --primary: var(--color-orange-300);
-    --primary-foreground: var(--color-orange-400);
+    --primary: var(--color-amber-600);
+    --primary-foreground: var(--color-amber-200);
     --secondary: hsl(0 0% 14.9%);
     --secondary-foreground: var(--color-neutral-300);
     --muted: var(--color-neutral-700);
     --muted-foreground: var(--color-neutral-500);
-    --accent: oklch(25% 0 0);
+    --accent: var(--color-neutral-800);
     --accent-foreground: var(--color-neutral-300);
     --destructive: var(--color-red-600);
-    --destructive-foreground: var(--color-red-200);
-    --success: var(--color-lime-900);
-    --success-foreground: var(--color-lime-400);
+    --destructive-foreground: var(--color-red-100);
+    --success: var(--color-lime-700);
+    --success-foreground: var(--color-lime-200);
     --warning: var(--color-amber-900);
     --warning-foreground: var(--color-amber-400);
+    --action: var(--color-blue-600);
+    --action-foreground: var(--color-blue-200);
     --border: var(--color-neutral-700);
     --input: var(--color-neutral-700);
     --ring: var(--color-neutral-500);
@@ -199,17 +237,18 @@ .dark {
     --chart-3: hsl(30 80% 55%);
     --chart-4: hsl(280 65% 60%);
     --chart-5: hsl(340 75% 55%);
-    --main-background: transparent;
-    --sidebar-background: var(--color-neutral-700);
-    --sidebar-foreground: hsl(0 0% 95.9%);
+    --main-background: oklch(29% 0 0);
+    --sidebar-background: var(--color-neutral-800);
+    --sidebar-foreground: var(--foreground);
+    --sidebar-icon: var(--color-neutral-500);
     --sidebar-primary: hsl(360, 100%, 100%);
     --sidebar-primary-foreground: hsl(0 0% 100%);
-    --sidebar-accent: hsl(0 0% 15.9%);
+    --sidebar-accent: var(--color-neutral-700);
     --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
-    --sidebar-border: var(--color-neutral-600);
+    --sidebar-border: var(--color-neutral-700);
     --sidebar-ring: hsl(217.2 91.2% 59.8%);
     --sidebar: hsl(240 5.9% 10%);
-    --status-draft: var(--color-zinc-500);
+    --status-draft: var(--color-neutral-500);
     --status-sent: var(--color-sky-700);
     --status-paid: var(--color-lime-700);
     --status-due: var(--color-warning);
@@ -226,6 +265,10 @@ @layer base {
     body {
         @apply bg-background text-foreground;
     }
+
+    .lucide {
+        stroke-width: 1.666;
+    }
 }
 
 @layer components {
@@ -251,6 +294,6 @@ @layer utilities {
 
     /* Backdrop */
     [data-slot=dialog-overlay] {
-        backdrop-filter: blur(2px);
+        backdrop-filter: blur(0.75px);
     }
 }
\ No newline at end of file
diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index 94b4045..fd31ac7 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -1,16 +1,19 @@
 <script setup lang="ts">
 import NavFooter from '@/components/NavFooter.vue';
 import NavMain from '@/components/NavMain.vue';
-import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarTrigger } from '@/components/ui/sidebar';
-import { dashboard, crm, offers, invoices, newInvoice, products, timesheets, customers, leads, achievements } from '@/routes';
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarTrigger } from '@/components/ui/crm-sidebar';
+import { useSidebar } from '@/components/ui/crm-sidebar/utils'
+import { dashboard, pipeline, offers, invoices, newInvoice, products, timesheets, customers, leads, achievements } from '@/routes';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { Kbd, KbdGroup } from '@/components/ui/kbd'
 import { type NavGroup } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
-import { Kanban, Euro, Trophy, Calculator, BookUser, Timer, ShoppingBasket, Headset, Plus } from 'lucide-vue-next';
+import { Kanban, Euro, Trophy, Calculator, Timer, ContactRound, Headset, Plus, Package } from 'lucide-vue-next';
 import AppLogo from './AppLogo.vue';
 import { computed } from 'vue';
 
+const { open } = useSidebar()
+
 const page = usePage();
 const auth = computed(() => page.props.auth);
 
@@ -20,27 +23,23 @@ const mainNavGroups: NavGroup[] = [
         items: [
             {
                 title: 'Pipeline',
-                href: crm(),
+                href: pipeline(),
                 icon: Kanban,
-                color: 'text-pink-500',
             },
             {
                 title: 'Akquise',
                 href: leads(),
                 icon: Headset,
-                color: 'text-blue-500',
             },
             {
                 title: 'Kunden',
                 href: customers(),
-                icon: BookUser,
-                color: 'text-lime-500',
+                icon: ContactRound,
             },
             {
                 title: 'Erfolge',
                 href: achievements(),
                 icon: Trophy,
-                color: 'text-amber-500',
             },
         ],
     },
@@ -51,31 +50,26 @@ const mainNavGroups: NavGroup[] = [
                 title: 'Angebote',
                 href: offers(),
                 icon: Calculator,
-                color: 'text-cyan-600',
-            },
-            {
-                title: 'Produkte',
-                href: products(),
-                icon: ShoppingBasket,
-                color: 'text-yellow-400',
             },
             {
                 title: 'Rechnungen',
                 href: invoices(),
                 icon: Euro,
-                color: 'text-pink-700',
                 action: {
                     title: "Neue Rechnung",
                     icon: Plus,
-                    color: 'text-foreground',
                     href: newInvoice()
                 }
             },
+            {
+                title: 'Produkte',
+                href: products(),
+                icon: Package,
+            },
             {
                 title: 'Zeiterfassung',
                 href: timesheets(),
                 icon: Timer,
-                color: 'text-lime-600',
             },
         ],
     }
@@ -84,7 +78,7 @@ const mainNavGroups: NavGroup[] = [
 </script>
 
 <template>
-    <Sidebar collapsible="icon" variant="sidebar">
+    <Sidebar collapsible="icon">
 
         <SidebarHeader>
             <Link :href="dashboard()" prefetch class="flex row items-center mt-3">
@@ -93,11 +87,11 @@ const mainNavGroups: NavGroup[] = [
 
             <TooltipProvider>
                 <Tooltip>
-                    <TooltipTrigger class="w-fit absolute top-9 right-[.666rem]">
-                        <SidebarTrigger class="hidden md:flex text-primary-foreground" />
+                    <TooltipTrigger class="w-fit absolute top-9" :class="open ? 'right-[.666rem]' : 'right-[1.14333rem]'">
+                        <SidebarTrigger class="hidden md:flex" />
                     </TooltipTrigger>
                     <TooltipContent>
-                        <span>Seitenleiste schließen</span>
+                        <span>Seitenleiste </span>
                         <KbdGroup class="ml-2">
                             <Kbd class="visible-mac">⌘</Kbd>
                             <Kbd class="visible-pc">Ctrl</Kbd>
diff --git a/resources/js/components/CustomerDialog.vue b/resources/js/components/CustomerDialog.vue
index c96d97e..12a748f 100644
--- a/resources/js/components/CustomerDialog.vue
+++ b/resources/js/components/CustomerDialog.vue
@@ -248,8 +248,8 @@ const deleteNote = async (id: number) => {
                         <!-- Save -->
                         <Button v-if="customer && isDirty" class="grow md:grow-0" size="sm" @click="save"
                             :disabled="isSaving">
-                            <Loader2 v-if="isSaving" stroke-width="1.5" class="animate-spin" />
-                            <Check v-else stroke-width="1.5" />
+                            <Loader2 v-if="isSaving"  class="animate-spin" />
+                            <Check v-else  />
                             Speichern
                         </Button>
 
@@ -257,7 +257,7 @@ const deleteNote = async (id: number) => {
                         <DropdownMenu v-if="customer && customer.id > 0">
                             <DropdownMenuTrigger>
                                 <Button variant="ghost" size="sm" class="px-0! w-7 ml-2">
-                                    <Ellipsis class="size-4" stroke-width="1.5" />
+                                    <Ellipsis class="size-4"  />
                                 </Button>
                             </DropdownMenuTrigger>
 
@@ -267,7 +267,7 @@ const deleteNote = async (id: number) => {
                                     class="flex justify-between text-destructive! hover:bg-red-100! dark:hover:bg-red-950!"
                                     @click="">
                                     <div class="flex items-center gap-3">
-                                        <Trash2 :strokeWidth="1.5" class="text-current" />
+                                        <Trash2 class="text-current" />
                                         <span class="mr-2">Löschen</span>
                                     </div>
                                 </DropdownMenuItem>
@@ -449,7 +449,7 @@ const deleteNote = async (id: number) => {
                         <div class="flex justify-between items-center mb-6">
                             <h2 class="font-bold">Nächste Schritte</h2>
                             <Button variant="ghost">
-                                <Plus stroke-width="1.5" />
+                                <Plus  />
                             </Button>
                         </div>
 
@@ -468,11 +468,11 @@ const deleteNote = async (id: number) => {
                                     <div class="flex items-center gap-2">
                                         <Input v-model="todo.text"
                                             class="my-0 px-0 text-base! h-6 border-0 outline-0 shadow-none" />
-                                        <PhoneCall v-if="todo.type === 'phoneCall'" stroke-width="1.5" :size="16"
+                                        <PhoneCall v-if="todo.type === 'phoneCall'"  :size="16"
                                             class="text-muted-foreground" />
-                                        <Check v-else-if="todo.type === 'task'" stroke-width="1.5" :size="16"
+                                        <Check v-else-if="todo.type === 'task'"  :size="16"
                                             class="text-muted-foreground" />
-                                        <Mail v-else-if="todo.type === 'mail'" stroke-width="1.5" :size="16"
+                                        <Mail v-else-if="todo.type === 'mail'"  :size="16"
                                             class="text-muted-foreground" />
                                     </div>
 
@@ -490,7 +490,7 @@ const deleteNote = async (id: number) => {
                         <div class="flex justify-between items-center mb-6">
                             <h2 class="font-bold">Notizen</h2>
                             <Button variant="ghost" @click="isTakingNote = true">
-                                <Plus stroke-width="1.5" />
+                                <Plus  />
                             </Button>
                         </div>
 
@@ -505,11 +505,11 @@ const deleteNote = async (id: number) => {
                                     <Kbd class="visible-mac">⌘</Kbd>
                                     <Kbd class="visible-pc">Ctrl</Kbd>
                                     <Kbd>
-                                        <CornerDownLeft stroke-width="1.5" class="h-3 w-3" />
+                                        <CornerDownLeft  class="h-3 w-3" />
                                     </Kbd>
                                 </KbdGroup>
                                 <Button class="w-20" size="sm" variant="outline" @click="saveNote">
-                                    <Send stroke-width="1.5" />
+                                    <Send  />
                                 </Button>
                             </div>
                         </div>
@@ -529,7 +529,7 @@ const deleteNote = async (id: number) => {
                                 <span>{{ toLocalDate(note.createdAt) }}</span>
                                 <div class="grow-1"></div>
                                 <Button variant="ghost" size="sm" @click="deleteNote(note.id)">
-                                    <Trash2 stroke-width="1.5" />
+                                    <Trash2  />
                                 </Button>
                             </div>
                             <div class="text-sm whitespace-pre-wrap">{{ note.text }}</div>
diff --git a/resources/js/components/DialogCloseButton/DialogCloseButton.vue b/resources/js/components/DialogCloseButton/DialogCloseButton.vue
index 3da889f..b65d50c 100644
--- a/resources/js/components/DialogCloseButton/DialogCloseButton.vue
+++ b/resources/js/components/DialogCloseButton/DialogCloseButton.vue
@@ -6,7 +6,7 @@ import { X } from "lucide-vue-next"
 
 <template>
     <Button size="sm">
-        <X stroke-width="1.5" />
+        <X  />
     </Button>
 </template>
 
diff --git a/resources/js/components/EditorDialog/EditorDialog.vue b/resources/js/components/EditorDialog/EditorDialog.vue
new file mode 100644
index 0000000..4ab29c5
--- /dev/null
+++ b/resources/js/components/EditorDialog/EditorDialog.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from '@/components/ui/dialog'
+import DialogCloseButton from "../DialogCloseButton/DialogCloseButton.vue"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'
+import { TooltipProvider } from '@/components/ui/tooltip'
+import { Button } from '../ui/crm-button'
+import { Ellipsis, Menu } from "lucide-vue-next"
+import { computed } from 'vue';
+
+const props = defineProps<{
+    title?: string
+    modelValue?: boolean
+}>()
+const emit = defineEmits(['update:modelValue', 'save', 'cancel', 'delete'])
+
+// Dialog state
+const isOpen = computed({
+    get: () => props.modelValue,
+    set: (value) => {
+        emit('update:modelValue', value)
+    }
+})
+
+const cancel = (event: Event | null) => {
+    if (!event) return
+
+    event.preventDefault()
+    event.returnValue = true
+
+    emit('cancel')
+    isOpen.value = false
+}
+
+
+</script>
+
+<template>
+    <Dialog v-model:open="isOpen">
+        <DialogContent
+            class="sm:max-w-[min((100%-2rem),1152px)] grid-rows-[auto_minmax(0,1fr)_auto] h-[calc(100dvh-2rem)] gap-0 p-0 outline-none"
+            @escapeKeyDown="cancel" @interactOutside="cancel">
+
+            <DialogHeader class="p-4 md:p-6 lg:p-12 pb-0 md:pb-2 lg:pb-8 flex flex-row items-start gap-12">
+
+                <div class="flex flex-col grow">
+                    <DialogTitle class="text-primary font-bold text-left">
+                        <h1>{{ title }}</h1>
+                    </DialogTitle>
+                    <DialogDescription>
+                        <slot name="description"></slot>
+                    </DialogDescription>
+                </div>
+
+                <div class="flex items-center gap-2">
+                    <TooltipProvider v-if="$slots.buttons || $slots.ellipsisMenuItems">
+                        <slot name="buttons"></slot>
+
+                        <!-- Ellipsis menu -->
+                        <DropdownMenu v-if="$slots.ellipsisMenuItems">
+                            <DropdownMenuTrigger>
+                                <Button variant="ghost" size="icon" class="">
+                                    <Ellipsis class="visible-mac" />
+                                    <Menu class="visible-pc" />
+                                </Button>
+                            </DropdownMenuTrigger>
+
+                            <DropdownMenuContent align="end">
+                                <slot name="ellipsisMenuItems"></slot>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+
+                        <DialogClose as-child>
+                            <DialogCloseButton />
+                        </DialogClose>
+                    </TooltipProvider>
+                </div>
+
+
+            </DialogHeader>
+
+            <div class="flex flex-row">
+                <div class="p-4 md:p-6 lg:p-12 pt-0! grow">
+                    <slot name="content"></slot>
+                </div>
+                <aside class="w-120 p-4 md:p-6 lg:p-12 pt-0! flex flex-col gap-4" v-if="$slots.sidebar">
+                    <slot name="sidebar"></slot>
+                </aside>
+            </div>
+        </DialogContent>
+    </Dialog>
+</template>
\ No newline at end of file
diff --git a/resources/js/components/EditorDialog/index.ts b/resources/js/components/EditorDialog/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/resources/js/components/Heading.vue b/resources/js/components/Heading.vue
index f50187a..b559a95 100644
--- a/resources/js/components/Heading.vue
+++ b/resources/js/components/Heading.vue
@@ -9,8 +9,8 @@ defineProps<Props>();
 
 <template>
     <div class="mb-8 space-y-0.5">
-        <h2 class="text-xl font-semibold tracking-tight">{{ title }}</h2>
-        <p v-if="description" class="text-sm text-muted-foreground">
+        <h2 class="text-lg text-primary font-semibold">{{ title }}</h2>
+        <p v-if="description" class="text-muted-foreground">
             {{ description }}
         </p>
     </div>
diff --git a/resources/js/components/NavFooter.vue b/resources/js/components/NavFooter.vue
index 784a588..f3c6029 100644
--- a/resources/js/components/NavFooter.vue
+++ b/resources/js/components/NavFooter.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/crm-sidebar';
 import { User } from '@/types';
-import { defineProps } from 'vue';
 import UserInfo from '@/components/UserInfo.vue';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import UserMenuContent from '@/components/UserMenuContent.vue';
diff --git a/resources/js/components/NavMain.vue b/resources/js/components/NavMain.vue
index 4caa078..6777dbf 100644
--- a/resources/js/components/NavMain.vue
+++ b/resources/js/components/NavMain.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuAction } from '@/components/ui/sidebar';
+import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuAction } from '@/components/ui/crm-sidebar';
 import { urlIsActive } from '@/lib/utils';
 import { type NavGroup } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
-import { LayoutGrid, Plus } from 'lucide-vue-next';
+import { LayoutGrid } from 'lucide-vue-next';
 import { dashboard } from '@/routes';
-import SidebarSeparator from './ui/sidebar/SidebarSeparator.vue';
+import SidebarSeparator from './ui/crm-sidebar/SidebarSeparator.vue';
 
 defineProps<{
     groups: NavGroup[];
@@ -19,10 +19,10 @@ const page = usePage();
     <SidebarGroup class="px-2 py-0 mt-[1.8rem]">
 
         <SidebarMenuItem :key="'dashboard'">
-            <SidebarMenuButton as-child :is-active="urlIsActive(dashboard(), page.url)" :tooltip="'Dashboard'">
+            <SidebarMenuButton as-child :is-active="urlIsActive(dashboard(), page.url)" :tooltip="'Dashboard'" class="text-base">
                 <Link prefetch :href="dashboard()">
-                <component :is="LayoutGrid" class="text-gray-500" stroke-width="1.5" />
-                <span>Dashboard</span>
+                    <LayoutGrid class="text-muted-foreground" :class="urlIsActive(dashboard(), page.url) ? 'text-primary' : 'text-sidebar-icon'" />
+                    <span>Dashboard</span>
                 </Link>
             </SidebarMenuButton>
         </SidebarMenuItem>
@@ -30,23 +30,24 @@ const page = usePage();
 
     <SidebarGroup class="px-2 py-0" v-for="group in groups">
         <SidebarSeparator
-            class="absolute mt-6 shrink transition-[opacity] opacity-0 group-data-[collapsible=icon]:opacity-100 w-4 bg-muted-foreground"
+            class="absolute mt-6 shrink transition-opacity opacity-0 group-data-[collapsible=icon]:opacity-100 w-4 bg-muted-foreground/50"
             style="width: calc(var(--spacing) * 4);" />
-        <SidebarGroupLabel class="text-bold uppercase text-gray-400 mt-2 group-data-[collapsible=icon]:mt-2">
+        <SidebarGroupLabel class="font-medium text-sm text-muted-foreground mt-2 group-data-[collapsible=icon]:mt-2">
             {{ group.title }}
         </SidebarGroupLabel>
-        <SidebarMenu>
+        <SidebarMenu class="font-medium text-base gap-2">
             <SidebarMenuItem v-for="item in group.items" :key="item.title">
-                <SidebarMenuButton as-child :is-active="urlIsActive(item.href, page.url)" :tooltip="item.title">
+                <SidebarMenuButton as-child :is-active="urlIsActive(item.href, page.url)" :tooltip="item.title" class="text-base font-normal">
                     <Link prefetch :href="item.href">
-                    <component :is="item.icon" :class="item.color" stroke-width="1.5" />
-                    <span>{{ item.title }}</span>
+                        <component :is="item.icon" 
+                            :class="urlIsActive(item.href, page.url) ? 'text-primary' : 'text-sidebar-icon'" />
+                        <span>{{ item.title }}</span>
                     </Link>
                 </SidebarMenuButton>
                 <SidebarMenuAction v-if="item.action">
                     <Link prefetch :href="item.action.href">
-                    <component :is="item.action.icon" :class="item.action.color" stroke-width="1.5" size="0.833rem" />
-                    <span class="sr-only">{{ item.action.title }}</span>
+                        <component :is="item.action.icon" class="text-sidebar-icon" size="0.833rem" />
+                        <span class="sr-only">{{ item.action.title }}</span>
                     </Link>
                 </SidebarMenuAction>
             </SidebarMenuItem>
diff --git a/resources/js/components/NavUser.vue b/resources/js/components/NavUser.vue
index c53a54a..f9c66ad 100644
--- a/resources/js/components/NavUser.vue
+++ b/resources/js/components/NavUser.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import UserInfo from '@/components/UserInfo.vue';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
-import { useSidebar } from '@/components/ui/sidebar';
+import { useSidebar } from '@/components/ui/crm-sidebar';
 import { usePage } from '@inertiajs/vue3';
 import { ChevronsUpDown } from 'lucide-vue-next';
 import UserMenuContent from './UserMenuContent.vue';
diff --git a/resources/js/components/Notes.vue b/resources/js/components/Notes.vue
new file mode 100644
index 0000000..ee4036c
--- /dev/null
+++ b/resources/js/components/Notes.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { computed, ref, useTemplateRef, watch } from 'vue';
+import { Button } from '@/components/ui/crm-button'
+import TextEditor from '@/components/TextEditor.vue';
+import { Trash2, CornerDownLeft, Pencil, X } from "lucide-vue-next"
+import { Note, NoteableType } from '@/types';
+import { bgColorForString, toDatetimeLocal, toDuration, toShortISOString } from '@/lib/utils';
+import { getInitials } from '@/composables/useInitials';
+import { alertStore } from '@/stores/alertStore';
+import { Kbd, KbdGroup } from '@/components/ui/kbd'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Input } from './ui/crm-input';
+import axios, { AxiosError } from 'axios';
+import { toast } from 'vue-sonner';
+import { usePage } from '@inertiajs/vue3';
+import NotesService from '@/services/NotesService';
+
+const props = defineProps<{
+    notableId: number
+    notableType: NoteableType
+    title?: string
+    modelValue?: Note[]
+}>()
+defineEmits(['update:modelValue'])
+const notes = ref(props.modelValue)
+const isTakingNote = ref(false)
+const noteEditor = useTemplateRef('note-editor')
+const noteDate = ref<string>(toDatetimeLocal(new Date())) // 
+const alert = alertStore()
+const page = usePage();
+const auth = computed(() => page.props.auth);
+
+watch(() => props.modelValue, (newValue) => {
+    notes.value = newValue
+})
+
+const toggleNoteEditor = () => {
+    isTakingNote.value = !isTakingNote.value
+
+    if (isTakingNote.value) {
+        noteDate.value = toDatetimeLocal(new Date())
+        noteEditor.value?.editor?.commands.clearContent()
+        noteEditor.value?.editor?.commands.focus()
+    }
+}
+
+const saveNote = async () => {
+    if (!noteEditor.value?.getContent().trim()) {
+        isTakingNote.value = false
+        return
+    }
+
+    try {
+        const response = await axios.post(`/api/notes`, {
+            userId: auth.value.user.id,
+            text: noteEditor.value?.getContent(),
+            noteableId: props.notableId,
+            noteableType: props.notableType,
+            createdAt: new Date(noteDate.value).toISOString() || new Date().toISOString()
+        });
+
+        // Add to notes array and sort by creation date
+        notes.value?.unshift(response.data)
+        notes.value?.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+
+        // Clear editor and hide the note editor
+        toggleNoteEditor()
+    } catch (error) {
+        console.error("Fehler beim Speichern der Notiz:", error);
+        toast.error("Fehler beim Speichern der Notiz", {
+            description: (error as AxiosError).message || String(error)
+        });
+    }
+}
+
+const deleteNote = async (id: number) => {
+    alert.show(
+        "Möchtest Du diese Notiz wirklich löschen?", null,
+        {
+            actionText: "Löschen",
+            actionVariant: "destructive",
+            onAction: async () => {
+                const deleted = await NotesService.deleteNote(id)
+                if (!deleted) return
+
+                // Remove from notes array
+                const index = notes.value?.findIndex(note => note.id === id)
+                if (index !== -1 && index !== undefined) {
+                    notes.value?.splice(index, 1)
+                }
+            }
+        }
+    )
+}
+</script>
+
+<template>
+    <div class="notes overflow-y-auto flex flex-col">
+        <!-- Header -->
+        <div class="flex justify-between items-center gap-6 sticky top-0 bg-background z-1 mb-6">
+            <h2 class="font-bold text-md">{{ title || 'Notizen' }}</h2>
+            <Button variant="ghost" size="icon" @click="toggleNoteEditor">
+                <X v-if="isTakingNote" />
+                <Pencil v-else />
+            </Button>
+        </div>
+
+        <!-- Note editor -->
+        <div class="flex flex-col overflow-hidden transition-all min-h-40 bg-accent mb-8 rounded-lg p-4"
+            :class="{ 'h-0! min-h-0! mb-0 py-0': !isTakingNote }">
+
+            <Input type="datetime-local" ref="note-date" class="mb-4" :model-value="noteDate"
+                @update:model-value="value => noteDate = value as string" />
+
+            <TextEditor ref="note-editor" class="grow" />
+
+            <div class="flex gap-3 items-center justify-end">
+                <KbdGroup class="ml-2">
+                    <Kbd class="visible-mac">⌘</Kbd>
+                    <Kbd class="visible-pc">Ctrl</Kbd>
+                    <Kbd>
+                        <CornerDownLeft class="h-3 w-3" />
+                    </Kbd>
+                </KbdGroup>
+                <Button variant="action" size="sm" @click="saveNote">
+                    Speichern
+                </Button>
+            </div>
+        </div>
+
+        <!-- Notes -->
+        <article v-for="note in notes" class="group">
+            <div class="text-muted-foreground text-sm font-medium flex gap-3 items-center">
+
+                <Avatar class="size-7">
+                    <AvatarImage :src="'storage/uploads/users/' + (note.user.avatar || '')" loading="lazy" />
+                    <AvatarFallback :class="bgColorForString(getInitials(note.user.name))">
+                        {{ getInitials(note.user.name) }}
+                    </AvatarFallback>
+                </Avatar>
+
+                <span class="text-sm">{{ toDuration(note.createdAt) }}</span>
+
+                <div class="grow"></div>
+
+                <div class="transition-opacity opacity-0 group-hover:opacity-100">
+                    <Button variant="ghost" size="sm" @click="deleteNote(note.id)" class="text-muted-foreground">
+                        <Trash2 />
+                    </Button>
+                    <Button variant="ghost" size="sm" @click="" class="text-muted-foreground">
+                        <Pencil />
+                    </Button>
+                </div>
+            </div>
+            <div v-html="note.text" class="note-content ml-3.5 mt-3 pl-6.5 border-l" />
+        </article>
+    </div>
+</template>
+
+<style lang="css">
+.notes {
+    p:not(:last-child) {
+        margin-bottom: calc(var(--spacing) * 1.333);
+    }
+
+    article:not(:last-child) {
+        margin-bottom: calc(var(--spacing) * 3);
+    }
+
+    article:not(:last-child) .note-content {
+        padding-bottom: calc(var(--spacing) * 3);
+    }
+
+    blockquote {
+        margin: calc(var(--spacing) * 4) 0;
+        padding: calc(var(--spacing) * 4) calc(var(--spacing) * 6);
+        color: var(--color-muted-foreground);
+        background-color: var(--color-muted);
+        border-radius: var(--radius-lg);
+        border-left: 4px solid var(--color-border);
+        box-shadow: var(--shadow-md);
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/resources/js/components/TextEditor.vue b/resources/js/components/TextEditor.vue
new file mode 100644
index 0000000..855b9cd
--- /dev/null
+++ b/resources/js/components/TextEditor.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { Editor, EditorContent, } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { ButtonGroup, ButtonGroupSeparator } from './ui/button-group';
+import { Button } from './ui/crm-button';
+import { Bold, Code2, Heading, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Italic, List, ListOrdered, Pilcrow, Redo2, Strikethrough, Undo2 } from 'lucide-vue-next';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator } from '@/components/ui/dropdown-menu'
+import Separator from './ui/separator/Separator.vue';
+
+
+const props = defineProps<{
+    modelValue?: string | null | undefined
+}>()
+const editor = ref<Editor>()
+const getContent = (): string => editor.value?.getHTML() || ''
+const isFocused = (): boolean => editor.value?.isFocused || false
+
+defineExpose({ editor, getContent, isFocused });
+const emit = defineEmits(['update:modelValue', 'change:modelValue'])
+
+// set editor content on prop change
+watch(() => props.modelValue, (newValue, oldValue) => {
+    const isSame = editor.value?.getHTML() === newValue
+    if (isSame) return
+    editor.value?.commands.setContent(newValue as string)
+})
+
+onMounted(() => {
+    editor.value = new Editor({
+        extensions: [StarterKit],
+        content: props.modelValue,
+        onUpdate: () => {
+            if (!editor.value) return
+            emit('update:modelValue', editor.value.getHTML())
+        },
+        onBlur: () => {
+            if (!editor.value) return
+            emit('change:modelValue', editor.value.getHTML())
+        }
+    })
+})
+
+onBeforeUnmount(() => {
+    editor.value?.destroy()
+})
+
+</script>
+
+
+<template>
+
+    
+    <!-- Editor -->
+    <div>
+
+        <!-- Menu -->
+        <ButtonGroup class="editor-menu shadow border rounded-md overflow-clip z-1 bg-background">
+            <Button @click="editor?.chain().focus().undo().run()" :disabled="!editor?.can().undo()" size="sm"
+                variant="ghost">
+                <Undo2 />
+            </Button>
+            <Button @click="editor?.chain().focus().redo().run()" :disabled="!editor?.can().redo()" size="sm"
+                variant="ghost">
+                <redo2 />
+            </Button>
+    
+            <ButtonGroupSeparator/>
+    
+            <DropdownMenu>
+                <DropdownMenuTrigger as-child>
+                    <Button size="sm" variant="ghost">
+                        <heading />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                    <DropdownMenuItem @click="editor?.chain().focus().clearNodes().run()" size="sm" variant="ghost">
+                        <pilcrow /> Absatz
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem @click="editor?.chain().focus().toggleHeading({ level: 1 }).run()">
+                        <heading1 /> Überschrift 1
+                    </DropdownMenuItem>
+                    <DropdownMenuItem @click="editor?.chain().focus().toggleHeading({ level: 2 }).run()">
+                        <heading2 /> Überschrift 2
+                    </DropdownMenuItem>
+                    <DropdownMenuItem @click="editor?.chain().focus().toggleHeading({ level: 3 }).run()">
+                        <heading3 /> Überschrift 3
+                    </DropdownMenuItem>
+                    <DropdownMenuItem @click="editor?.chain().focus().toggleHeading({ level: 4 }).run()">
+                        <heading4 /> Überschrift 4
+                    </DropdownMenuItem>
+                    <DropdownMenuItem @click="editor?.chain().focus().toggleHeading({ level: 5 }).run()">
+                        <heading5 /> Überschrift 5
+                    </DropdownMenuItem>
+                    <DropdownMenuItem @click="editor?.chain().focus().toggleHeading({ level: 6 }).run()">
+                        <heading6 /> Überschrift 6
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+            <dropdown-menu>
+                <dropdown-menu-trigger as-child>
+                    <Button size="sm" variant="ghost">
+                        <list />
+                    </Button>
+                </dropdown-menu-trigger>
+                <dropdown-menu-content>
+                    <dropdown-menu-item @click="editor?.chain().focus().toggleBulletList().run()">
+                        <list /> Ungeordnete Liste
+                    </dropdown-menu-item>
+                    <dropdown-menu-item @click="editor?.chain().focus().toggleOrderedList().run()"><list-ordered />
+                        Geordnete Liste</dropdown-menu-item>
+                </dropdown-menu-content>
+            </dropdown-menu>
+    
+            <ButtonGroupSeparator/>
+    
+            <Button @click="editor?.chain().focus().toggleBold().run()" :class="{ 'is-active': editor?.isActive('bold') }"
+                size="sm" variant="ghost">
+                <Bold />
+            </Button>
+            <Button @click="editor?.chain().focus().toggleItalic().run()" size="sm" variant="ghost">
+                <Italic />
+            </Button>
+            <Button @click="editor?.chain().focus().toggleStrike().run()" size="sm" variant="ghost">
+                <strikethrough />
+            </Button>
+            <Button @click="editor?.chain().focus().toggleCode().run()" size="sm" variant="ghost">
+                <code2 />
+            </Button>
+        </ButtonGroup>
+
+        <EditorContent :editor="editor" class="editor mb-8" />
+        <div class="absolute top-0.75 py-2 px-0.75 italic text-muted-foreground pointer-events-none"
+            :class="{ 'hidden': !editor?.isEmpty }">Beschreibung</div>
+    </div>
+
+</template>
+
+<style></style>
\ No newline at end of file
diff --git a/resources/js/components/Todos.vue b/resources/js/components/Todos.vue
new file mode 100644
index 0000000..6b723d1
--- /dev/null
+++ b/resources/js/components/Todos.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue"
+import { Todo } from "@/types";
+import { toLocalDate, toDuration, isToday, daysFromNow } from "@/lib/utils";
+import { Mail, PhoneCall, ClipboardCheck } from "lucide-vue-next"
+import { Badge } from '@/components/ui/crm-badge'
+
+const props = defineProps<{
+    modelValue?: Todo[] | null
+    showCompleted?: boolean
+}>()
+const todos = ref<Todo[]>([])
+const emit = defineEmits(['update:modelValue'])
+const showCompleted = ref(props.showCompleted)
+
+watch(() => props.modelValue, value => {
+    todos.value = value as Todo[];
+})
+
+const groupedTodos = computed(() => {
+    const groups: Record<string, Todo[]> = {};
+
+    if (todos.value) {
+        for (let todo of todos.value) {
+            if (!todo.dueDate) continue
+
+            let dueDate = new Date(todo.dueDate)
+
+            // today
+            if (isToday(dueDate)) {
+                if (!groups['today']) groups['today'] = []
+                groups['today'].push(todo)
+            }
+            // overdue
+            else if (daysFromNow(dueDate) < 0) {
+                if (!groups['overdue']) groups['overdue'] = []
+                groups['overdue'].push(todo)
+            }
+            // by month
+            else {
+                let month = dueDate.toLocaleDateString('de-DE', { month: 'long' })
+                if (!groups[month]) groups[month] = []
+                groups[month].push(todo)
+            }
+        }
+    }
+
+    return groups
+})
+
+const todoTitle = (title: string) => {
+    // If there's no title, return empty string
+    if (!title) return '';
+
+    // Check if the title contains brackets
+    const match = title.match(/^\[([^\]]+)\]\s*(.*)$/);
+
+    // If there's a match, return the part after the brackets
+    // Otherwise, return the full title
+    return match ? match[2] : title;
+}
+
+const todoBadge = (title: string) => {
+    // If there's no title, return empty string
+    if (!title) return '';
+
+    // Check if the title contains brackets
+    const match = title.match(/^\[([^\]]+)\]\s*(.*)$/);
+
+    // If there's a match, return the part inside the brackets
+    // Otherwise, return an empty string
+    return match ? match[1] : '';
+}
+
+const shouldDisplay = (todo: Todo) => {
+    if (todo.status?.toLowerCase() !== 'completed') return true
+
+    return showCompleted.value; // && moment(todo.dueDate).isSameOrAfter(moment(new Date()), 'day')
+}
+
+</script>
+
+<template>
+    <div v-if="todos" v-for="(todos, groupKey) in groupedTodos" :key="groupKey">
+        <!-- Group header -->
+        <h3 class="mt-4 mb-2 text-sm text-muted-foreground"
+            :class="{ 'text-destructive! font-bold': groupKey === 'overdue', 'text-foreground! font-bold': groupKey === 'today' }">
+            {{ groupKey === 'today' ? 'Heute' : groupKey === 'overdue' ? 'Verspätet' : groupKey }}
+        </h3>
+        <hr>
+
+        <ul>
+            <li v-for="todo in todos" class="flex gap-3 items-baseline py-2.5 pr-1 transition-all"
+                :class="{ 'scale-y-0 h-0 py-0! my-0 origin-top': !shouldDisplay(todo) }">
+
+                <!-- Check mark -->
+                <div
+                    class="relative top-0.75 shrink-0 h-4 aspect-square rounded-full border-muted-foreground has-[input:checked]:border-primary border flex items-center justify-center">
+                    <div class="absolute inset-0.5 rounded-full bg-transparent has-[input:checked]:bg-primary">
+                        <input type="checkbox" class="absolute -inset-2 opacity-0"
+                            :checked="todo.status?.toLowerCase() == 'completed'" :id="todo.id">
+                    </div>
+                </div>
+
+                <!-- Text -->
+                <div class="grow overflow-hidden truncate">
+                    <!-- Priority -->
+                    <span v-if="todo.priority < 5 && todo.priority > 0" class="mr-2 text-destructive">!!!</span>
+                    <span v-if="todo.priority == 5" class="mr-2 text-warning-foreground">!!</span>
+                    <span v-if="todo.priority > 5" class="mr-2 text-muted-foreground">!</span>
+
+                    <!-- Title -->
+                    <label :for="todo.id" class="my-0 px-0 border-0 outline-0 shadow-none" :class="{
+                        'line-through text-muted-foreground': todo.status?.toLowerCase() == 'completed'
+                    }">
+                        {{ todoTitle(todo.title) }}
+                    </label>
+
+                    <!-- Date -->
+                    <div class="text-xs text-muted-foreground flex gap-3 items-center mt-1">
+                        <Badge v-if="todoBadge(todo.title)" variant="outline">{{ todoBadge(todo.title)
+                        }}
+                        </Badge>
+                        <span v-if="todo.dueDate"
+                            :class="{ 'text-destructive font-bold': todo.status?.toLowerCase() != 'completed' && daysFromNow(todo.dueDate) < 0 }">
+                            {{ toDuration(todo.dueDate) }}</span>
+                        <!-- <Repeat v-if="todo.recurring" stroke-width="2" :size="14" /> -->
+                    </div>
+                </div>
+
+                <!-- Icon -->
+                <div class="relative top-0.75 text-muted-foreground shrink-0">
+                    <PhoneCall v-if="todo.type?.name === 'phoneCall'" :size="18" />
+                    <ClipboardCheck v-else-if="todo.type?.name === 'todo'" :size="18" />
+                    <Mail v-else-if="todo.type?.name === 'mail'" :size="18" />
+                </div>
+
+            </li>
+        </ul>
+    </div>
+</template>
\ No newline at end of file
diff --git a/resources/js/components/UserInfo.vue b/resources/js/components/UserInfo.vue
index d8cbcaa..57e529b 100644
--- a/resources/js/components/UserInfo.vue
+++ b/resources/js/components/UserInfo.vue
@@ -22,8 +22,8 @@ const showAvatar = computed(() => props.user.avatar && props.user.avatar !== '')
 
 <template>
     <div class="flex items-center gap-2">
-        <Avatar class="size-8 overflow-hidden rounded-lg">
-            <AvatarImage v-if="showAvatar" :src="'storage/uploads/users/' + user.avatar!" :alt="user.name" />
+        <Avatar class="size-8">
+            <AvatarImage v-if="showAvatar" :src="'storage/uploads/users/' + user.avatar" :alt="user.name" />
             <AvatarFallback class="rounded-full bg-primary text-black dark:text-white">
                 {{ getInitials(user.name) }}
             </AvatarFallback>
diff --git a/resources/js/components/UserMenuContent.vue b/resources/js/components/UserMenuContent.vue
index 85e8d37..ed8211f 100644
--- a/resources/js/components/UserMenuContent.vue
+++ b/resources/js/components/UserMenuContent.vue
@@ -21,7 +21,7 @@ const handleLogout = () => {
         <DropdownMenuItem as-child>
             <Link :href="edit()" prefetch class="flex items-center justify-between">
             <div class="flex items-center gap-3">
-                <Settings stroke-width="1.5" />
+                <Settings  />
                 <span class="mr-4">Einstellungen</span>
             </div>
             <KbdGroup>
@@ -35,7 +35,7 @@ const handleLogout = () => {
         <DropdownMenuItem as-child>
             <Link :href="proceduralDocumentation()" prefetch class="flex items-center justify-between">
             <div class="flex items-center gap-3">
-                <Book stroke-width="1.5" />
+                <Book  />
                 <span class="mr-4">Verfahrensdokumentation</span>
             </div>
             </Link>
@@ -46,7 +46,7 @@ const handleLogout = () => {
 
         <DropdownMenuItem as-child>
             <Link class="block w-full" :href="logout()" @click="handleLogout" as="button" data-test="logout-button">
-            <LogOut stroke-width="1.5" class="mr-2 h-4 w-4" />
+            <LogOut  class="mr-2 h-4 w-4" />
             Log out
             </Link>
         </DropdownMenuItem>
diff --git a/resources/js/components/documents/DocumentTable.vue b/resources/js/components/documents/DocumentTable.vue
index 7684852..b99607b 100644
--- a/resources/js/components/documents/DocumentTable.vue
+++ b/resources/js/components/documents/DocumentTable.vue
@@ -4,7 +4,7 @@ import { computed } from 'vue'
 import { Invoice } from '@/types'
 import { toLocalDate, toCurrency, toFixedRounded } from '@/lib/utils'
 import { StatusBadge, statusBadgeLabels, statusTextStyle, castToStatusVariant } from '@/components/ui/status-badge'
-import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/crm-table'
 
 
 const props = defineProps<{
@@ -104,25 +104,23 @@ const calcTaxes = (amount: number) => {
 
 
 <template>
-    <Table class="relative document-table bg-none">
-        <TableHeader>
-            <TableRow class="hover:bg-transparent border-none">
+    <Table class="relative document-table">
+        <TableHeader class="sticky top-0">
+            <TableRow>
                 <TableHead class="w-1/100 lg:w-1/100 hidden md:table-cell lg:pl-4 lg:pr-5">Nr.</TableHead>
                 <TableHead class="w-1/100 lg:w-1/20 text-center">Status</TableHead>
-                <TableHead class="w-1/100 lg:w-1/20 lg:px-5 text-right hidden md:table-cell">Gestellt
-                </TableHead>
-                <TableHead class="w-1/5 text-right lg:hidden">Rechnung</TableHead>
+                <TableHead class="w-1/100 lg:w-1/20 lg:px-5 hidden md:table-cell">Gestellt</TableHead>
+                <TableHead class="w-1/5 lg:hidden">Rechnung</TableHead>
                 <TableHead class="w-1/5 hidden lg:table-cell">Kunde</TableHead>
-                <TableHead colspan="2" class="w-1/3 hidden lg:table-cell">Betreff</TableHead>
+                <TableHead class="w-1/3 hidden lg:table-cell">Betreff</TableHead>
                 <TableHead class="w-1/12 text-right">Netto</TableHead>
                 <TableHead class="w-1/12 text-right hidden lg:table-cell">Ust.</TableHead>
                 <TableHead class="w-1/12 text-right hidden lg:table-cell lg:pr-4">Brutto</TableHead>
             </TableRow>
         </TableHeader>
 
-        <TableBody class="overflow-clip rounded-lg shadow">
+        <TableBody>
             <TableRow v-for="invoice in invoices" :key="invoice.nr" @click="onItemClicked(invoice)"
-                class="select-none md:select-auto cursor-default bg-background"
                 :class="statusTextStyle(invoice.paymentStatus)">
                 <TableCell class="w-1/100 hidden md:table-cell lg:pl-4 lg:pr-5 tabular-nums">{{ invoice.nr }}
                 </TableCell>
@@ -131,7 +129,7 @@ const calcTaxes = (amount: number) => {
                         statusBadgeLabels[invoice.paymentStatus] }}
                     </StatusBadge>
                 </TableCell>
-                <TableCell class="pr-5 hidden md:table-cell lg:px-5 text-right tabular-nums">{{
+                <TableCell class="pr-5 hidden md:table-cell lg:px-5 tabular-nums whitespace-nowrap">{{
                     toLocalDate(invoice.invoiceDate) }}
                 </TableCell>
                 <TableCell class="lg:hidden max-w-[220px] md:max-w-[320px] overflow-hidden text-ellipsis">
@@ -141,7 +139,7 @@ const calcTaxes = (amount: number) => {
                 <TableCell
                     class="hidden lg:table-cell max-w-[100px] md:max-w-[120px] lg:max-w-auto overflow-hidden text-ellipsis font-semibold">
                     {{ invoice.billingData?.companyName }}</TableCell>
-                <TableCell colspan="2"
+                <TableCell
                     class="hidden lg:table-cell max-w-[120px] md:max-w-[160px] lg:max-w-auto overflow-hidden text-ellipsis">
                     {{
                         invoice.title }}</TableCell>
@@ -154,10 +152,10 @@ const calcTaxes = (amount: number) => {
             </TableRow>
         </TableBody>
 
-        <TableFooter class="border-none bg-transparent">
+        <TableFooter>
             <!-- Summe -->
-            <TableRow class="border-none hover:bg-transparent">
-                <TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
+            <TableRow>
+                <TableCell class="hidden lg:table-cell"></TableCell>
                 <TableCell colspan="2" class="hidden md:table-cell"></TableCell>
                 <TableCell colspan="1"></TableCell>
                 <TableCell class="py-4 text-right tabular-nums w-1/100 font-bold">Summe</TableCell>
@@ -168,8 +166,8 @@ const calcTaxes = (amount: number) => {
                     toCurrency(totalGross) }}</TableCell>
             </TableRow>
             <!-- Bezahlt -->
-            <TableRow v-if="!(totalDue == 0 && totalNotIssued == 0)" class="border-none hover:bg-transparent">
-                <TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
+            <TableRow v-if="!(totalDue == 0 && totalNotIssued == 0)">
+                <TableCell class="hidden lg:table-cell"></TableCell>
                 <TableCell colspan="2" class="hidden md:table-cell"></TableCell>
                 <TableCell colspan="1"></TableCell>
                 <TableCell class=" w-1/100 text-right tabular-nums font-bold">Bezahlt</TableCell>
@@ -178,11 +176,11 @@ const calcTaxes = (amount: number) => {
                 </TableCell>
                 <TableCell class="lg:pr-4 text-right tabular-nums hidden lg:table-cell font-bold">{{
                     toCurrency(totalGrossPaid)
-                    }}</TableCell>
+                }}</TableCell>
             </TableRow>
 
-            <TableRow v-if="totalDue > 0" class="border-none text-destructive hover:bg-transparent">
-                <TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
+            <TableRow v-if="totalDue > 0" class="text-destructive">
+                <TableCell class="hidden lg:table-cell"></TableCell>
                 <TableCell colspan="2" class="hidden md:table-cell"></TableCell>
                 <TableCell colspan="1"></TableCell>
                 <TableCell class="text-right tabular-nums w-1/100 font-bold">Offen</TableCell>
@@ -191,10 +189,10 @@ const calcTaxes = (amount: number) => {
                 </TableCell>
                 <TableCell class="lg:pr-4 text-right tabular-nums hidden lg:table-cell font-bold">{{
                     toCurrency(totalGrossDue)
-                    }}</TableCell>
+                }}</TableCell>
             </TableRow>
 
-            <TableRow v-if="totalNotIssued > 0" class="border-none text-muted-foreground hover:bg-transparent">
+            <TableRow v-if="totalNotIssued > 0">
                 <TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
                 <TableCell colspan="2" class="hidden md:table-cell"></TableCell>
                 <TableCell colspan="1"></TableCell>
@@ -211,11 +209,6 @@ const calcTaxes = (amount: number) => {
 </template>
 
 <style>
-.document-table {
-    font-size: 0.833rem;
-}
-
-.document-table th {}
 
 .document-table td {
     padding-top: 1.125em !important;
@@ -229,5 +222,5 @@ const calcTaxes = (amount: number) => {
 .document-table tfoot td {
     padding-top: 0.64em !important;
     padding-bottom: 0.64em !important;
-}
+} 
 </style>
\ No newline at end of file
diff --git a/resources/js/components/documents/InvoiceDialog.vue b/resources/js/components/documents/InvoiceDialog.vue
index 981d998..e739961 100644
--- a/resources/js/components/documents/InvoiceDialog.vue
+++ b/resources/js/components/documents/InvoiceDialog.vue
@@ -6,18 +6,16 @@
 <!-- TODO: Steuersatz in LineItem -->
 <!-- TODO: Stunden und Tagessatz aus Settings -->
 <!-- TODO: Client-side validation -->
-
 <script setup lang="ts">
 
-import { ref, computed, watch, onMounted, onUpdated, toRaw } from "vue"
+import { ref, computed, watch, onMounted, onUpdated, toRaw, nextTick } from "vue"
 import { Customer, Invoice, Contact, PaymentTerms, Address, LineItem, PaymentStatus, Unit } from "@/types"
 import { newCustomer, newContact, newBillingData } from '@/types/index.d'
-import { toCurrency, toLocalDate, toShortISOString, calcDueDate, toFixedRounded } from '@/lib/utils'
-import axios from 'axios'
-import { type DateValue, getLocalTimeZone, fromDate } from "@internationalized/date"
+import { toCurrency, toLocalDate, toShortISOString, calcDueDate, toFixedRounded, hotkey } from '@/lib/utils'
+import axios from "axios"
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@/components/ui/dialog"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-import { Table, TableBody, TableCell, TableHead, TableRow, } from '@/components/ui/table'
+import { Table, TableBody, TableCell, TableHead, TableRow, } from '@/components/ui/crm-table'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'
 import { Button } from '@/components/ui/crm-button'
 import { Input } from '@/components/ui/crm-input';
@@ -28,35 +26,21 @@ import { Eye, FileText, Trash2, BookUser, User, CodeXml, MessageCircleQuestion,
 import { alertStore } from "@/stores/alertStore"
 import { GrowingTextarea } from '../ui/growing-textarea'
 import { toast } from "vue-sonner"
-import { Kbd, KbdGroup } from '@/components/ui/kbd';
+import { Kbd, KbdGroup } from '@/components/ui/kbd'
 import DialogClose from "../ui/dialog/DialogClose.vue"
-import DialogCloseButton from "../DialogCloseButton/DialogCloseButton.vue";
+import DialogCloseButton from "../DialogCloseButton/DialogCloseButton.vue"
 import SendMailDialog from "../ui/send-mail-dialog/SendMailDialog.vue"
 
+const DEBUG = ref(false)
+
 const props = defineProps<{
-    invoiceData?: Invoice,
+    invoiceData: Invoice | undefined,
     modelValue: boolean
 }>()
 
-
-const invoice = ref<Invoice>()
-const units = ref([] as Unit[])
-const customers = ref([] as Customer[])
-const paymentTermsData = ref([] as PaymentTerms[])
-const isDirty = ref(false)
-const isLoading = ref(false)
-const isSaving = ref(false)
-const itemsLoading = ref(false)
-const importContact = ref(newContact() as Contact)
-const importCustomer = ref(newCustomer() as Customer)
-const alert = alertStore()
-const reminderDialogOpen = ref(false)
-const reminderLoading = ref(false)
-const value = ref<DateValue>() // TODO: name properly
-const fileInput = ref<HTMLInputElement | null>(null);
-
 const emit = defineEmits(['update:modelValue', 'save', 'cancel', 'delete'])
 
+// Dialog state
 const isOpen = computed({
     get: () => props.modelValue,
     set: (value) => {
@@ -64,7 +48,21 @@ const isOpen = computed({
     }
 })
 
-const title = computed<string>(() => {
+const invoice = ref<Invoice>()
+const units = ref([] as Unit[])
+const customers = ref([] as Customer[])
+const paymentTerms = ref([] as PaymentTerms[])
+const isDirty = ref(false)
+const isSaving = ref(false)
+const itemsLoading = ref(false)
+const importContact = ref(newContact() as Contact)
+const importCustomer = ref(newCustomer() as Customer)
+const alert = alertStore()
+const reminderDialogOpen = ref(false)
+const reminderLoading = ref(false)
+const fileInput = ref<HTMLInputElement | null>(null);
+const dataLoaded = ref(false)
+const title = computed<string>(_ => {
     if (invoice.value && invoice.value.id !== 0) {
         return `Rechnung ${invoice.value.nr || ''}`
     } else {
@@ -72,83 +70,99 @@ const title = computed<string>(() => {
     }
 })
 
+
 onMounted(async () => {
-    // Load customers and payment terms
+    // Load additional data that wasn’t provided by parent invoices view
     try {
-        const promises = [];
-        promises.push(axios.get('/api/customers'))
-        promises.push(axios.get('/api/paymentterms'))
-        promises.push(axios.get('/api/units'))
+        const promises: Promise<any>[] = [];
+
+        // Create an array of promises for each data request
+        promises.push(axios.get("/api/customers"))
+        promises.push(axios.get("/api/paymentterms"))
+        promises.push(axios.get("/api/units"))
+
+        // Wait for all promises to resolve
         const responses = await Promise.all(promises)
-        let responseIndex = 0
-        customers.value = responses[responseIndex].data as Customer[]
-        paymentTermsData.value = responses[responseIndex + 1].data as PaymentTerms[]
-        units.value = responses[responseIndex + 2].data as Unit[]
+
+        // Process each response
+        customers.value = responses[0].data
+        paymentTerms.value = responses[0].data
+        units.value = responses[0].data
+
     } catch (error) {
         toast.error('Fehler beim Laden der Daten', error || String(error))
     }
+
+    // Register hotkeys
+    hotkey('mod+i', importLineItems, null, () => isOpen.value)
+    hotkey('mod+e', exportPdf, null, () => isOpen.value)
+    hotkey('mod+p', preview, null, () => isOpen.value)
 })
 
-onUpdated(() => {
-    if (isLoading.value) isLoading.value = false
-    // console.group('onUpdated')
-    // console.error(`isDirty: ${isDirty.value}\tisLoading: ${isLoading.value}`)
-    // console.groupEnd()
-})
+// Initial data from parent view
+watch(() => props.invoiceData, async () => {
+    // Reset state flag
+    isDirty.value = false
+    dataLoaded.value = false
 
-watch(() => props.modelValue, (open) => {
-    // on open
-    if (open) {
-        // console.group('on open')
-        // console.log(`isDirty: ${isDirty.value}\tisLoading: ${isLoading.value}`)
+    if (DEBUG.value) {
+        console.group('on parent data')
+        console.log(`isDirty: ${isDirty.value}`, `dataLoaded: ${dataLoaded.value}`)
+    }
 
-        // Reset state flags
-        isDirty.value = false;
-        isLoading.value = true;
+    // Get invoice data from props
+    invoice.value = props.invoiceData
 
-        // Get invoice data from props
-        // console.warn('trigger invoice watcher')
-        invoice.value = props.invoiceData
+    // Load line items
+    if (invoice.value && invoice.value.id !== 0) {
+        itemsLoading.value = true
 
-        // Load line items
-        if (invoice.value && invoice.value.id !== 0) {
-            itemsLoading.value = true
-
-            try {
-                itemsLoading.value = true
-                axios.get('/api/lineitems/' + invoice.value.id).then(response => {
-                    if (invoice.value) invoice.value.items = response.data as LineItem[]
-                })
-            } catch (error) {
-                toast.error('Fehler beim Laden der Positionen', error || String(error))
-            }
-        } else {
+        try {
+            await axios.get('/api/lineitems/' + invoice.value.id).then(response => {
+                if (invoice.value) invoice.value.items = response.data as LineItem[]
+            })
+        } catch (error) {
+            toast.error('Fehler beim Laden der Positionen', error || String(error))
+        } finally {
+            await nextTick()
             itemsLoading.value = false
         }
+    }
 
-        // console.log(`isDirty: ${isDirty.value}\tisLoading: ${isLoading.value}`)
-        // console.groupEnd()
+
+    /* wait until next tick to reset loading state
+     *
+     * as changes made to customer and contacts here will probably 
+     * change the invoice and would then trigger the invoice watcher agai
+     */
+    await nextTick()
+    dataLoaded.value = true
+    if (DEBUG.value) {
+        console.log(`isDirty: ${isDirty.value}`, `dataLoaded: ${dataLoaded.value}`)
+        console.groupEnd()
     }
 })
 
-
 // watch changes on local invoice date
 watch(invoice,
-    (newValue, oldValue) => {
+    async (newValue, oldValue) => {
         if (newValue == oldValue) return
 
-        // console.group('watch invoice')
-        // console.log(`isDirty: ${isDirty.value}\tisLoading: ${isLoading.value}`)
+        if (DEBUG.value) {
+            console.group('watch invoice')
+            console.log(`isDirty: ${isDirty.value}`, `dataLoaded: ${dataLoaded.value}`)
+        }
 
-        if (isLoading.value) {
+        if (dataLoaded.value) {
+            isDirty.value = true
+        } else {
             if (!newValue) {
-                // console.groupEnd()
+                console.groupEnd()
                 return;
             }
 
-            // Set default billing data from customer
+            // If no billing data is store in the invoice, generat ot from customer
             if (!newValue.billingData) {
-                // console.warn('trigger invoice watcher')
                 newValue.billingData = {
                     companyName: newValue.customer?.companyName || "",
                     vatId: newValue.customer?.vatId || "",
@@ -167,8 +181,6 @@ watch(invoice,
             }
 
             if (newValue.customerId && newValue.customerId !== 0) {
-                // if (importCustomer.value != newValue.customer)
-                //     console.warn('trigger importCustomer watcher')
                 customers.value.find(customer => {
                     if (customer.id === newValue.customerId) {
                         if (invoice.value) invoice.value.customer = customer as Customer
@@ -177,8 +189,6 @@ watch(invoice,
                         customer.contacts.find(contact => {
                             if (contact.firstName === newValue?.billingData?.contactFirstName &&
                                 contact.lastName === newValue?.billingData?.contactLastName) {
-                                // if (importContact.value != contact)
-                                //     console.warn('trigger importContact watcher')
                                 importContact.value = contact
                                 return true
                             }
@@ -186,15 +196,12 @@ watch(invoice,
                     }
                 })
             }
-
-            value.value = fromDate(new Date(newValue.invoiceDate), getLocalTimeZone())
-        }
-        else {
-            isDirty.value = true
         }
 
-        // console.log(`isDirty: ${isDirty.value}\tisLoading: ${isLoading.value}`)
-        // console.groupEnd()
+        if (DEBUG.value) {
+            console.log(`isDirty: ${isDirty.value}`, `dataLoaded: ${dataLoaded.value}`)
+            console.groupEnd()
+        }
     },
     { deep: true }
 )
@@ -204,13 +211,14 @@ watch(importCustomer,
         if (newValue == oldValue) return
 
         if (!invoice.value) return
-
-        // console.group('watch importCustomer')
-        // console.log(`isDirty: ${isDirty.value}\tisLoading: ${isLoading.value}`)
+        if (DEBUG.value) {
+            console.group('watch importCustomer')
+            console.log(`isDirty: ${isDirty.value}`)
+        }
 
         // Don't overwrite these values during loading
         // they can intentionally be different from customer data
-        if (!isLoading.value) {
+        if (dataLoaded.value) {
             if (!invoice.value.billingData) invoice.value.billingData = newBillingData()
 
             // console.warn('trigger invoice watcher')
@@ -232,8 +240,10 @@ watch(importCustomer,
             isDirty.value = true;
         }
 
-        // console.log(`isDirty: ${isDirty.value}\tisLoading: ${isLoading.value}`)
-        // console.groupEnd()
+        if (DEBUG.value) {
+            console.log(`isDirty: ${isDirty.value}`)
+            console.groupEnd()
+        }
     },
     { deep: true }
 )
@@ -243,10 +253,12 @@ watch(importContact,
         if (newValue == oldValue) return
         if (!invoice.value) return
 
-        // console.group('watch importContact')
-        // console.log(`isDirty: ${isDirty.value}\tisLoading: ${isLoading.value}`)
+        if (DEBUG.value) {
+            console.group('watch importContact')
+            console.log(`isDirty: ${isDirty.value}`)
+        }
 
-        if (!isLoading.value) {
+        if (dataLoaded.value) {
             if (newValue.id !== 0) {
                 invoice.value.billingData!.contactFirstName = newValue.firstName
                 invoice.value.billingData!.contactLastName = newValue.lastName
@@ -258,8 +270,10 @@ watch(importContact,
             isDirty.value = true;
         }
 
-        // console.log(`isDirty: ${isDirty.value}\tisLoading: ${isLoading.value}`)
-        // console.groupEnd()
+        if (DEBUG.value) {
+            console.log(`isDirty: ${isDirty.value}`)
+            console.groupEnd()
+        }
     },
     { deep: true }
 )
@@ -278,7 +292,7 @@ const save = async () => {
         isSaving.value = true
 
         try {
-            // Prepare the invoice data for API request
+            // Prepare the invoice data API request
             const invoiceToSave = {
                 nr: invoice.value.nr,
                 invoiceDate: invoice.value.invoiceDate,
@@ -322,11 +336,10 @@ const save = async () => {
                 invoice.value = response.data;
             } else {
                 // Update existing invoice
-                const response = await axios.put(`/api/invoices/${invoice.value.id}`, invoiceToSave);
+                await axios.put(`/api/invoices/${invoice.value.id}`, invoiceToSave);
             }
 
             emit('save', invoice.value)
-            // isOpen.value = false
         } catch (error) {
             toast.error("Rechnung konnte nicht gespeichert werden", {
                 description: (error as Error).message,
@@ -334,7 +347,7 @@ const save = async () => {
         } finally {
             // remove spinner from save button
             isSaving.value = false
-            setTimeout(() => { isDirty.value = false }, 1000)
+            isDirty.value = false
         }
 
     }
@@ -369,12 +382,12 @@ const preview = function () {
     window?.open('/invoice/' + invoice.value.id, '_blank')?.focus();
 }
 
-const downloadPdf = function () {
+const exportPdf = function () {
     if (!invoice.value) return;
     window?.open('/invoice/' + invoice.value.id + '/pdf');
 }
 
-const downloadXml = function () {
+const exportXml = function () {
     if (!invoice.value) return;
     window?.open('/invoice/' + invoice.value.id + '/xml');
 }
@@ -444,11 +457,11 @@ const sendReminder = async function (to: string | undefined, cc: string | undefi
 }
 
 const updateLineItems = (newItems: LineItem[]) => {
-    if (isLoading.value) return;
+    if (!dataLoaded.value) return;
     if (!invoice.value) return;
 
-    // console.group('updateLineItems');
-    // console.log(`isDirty: ${isDirty.value}\tisLoading: ${isLoading.value}`);
+    console.group('updateLineItems');
+    console.log(`isDirty: ${isDirty.value}`);
 
     // Konvertiere die neuen Items in normale Objekte
     const rawItems = toRaw(newItems) || [];
@@ -456,13 +469,13 @@ const updateLineItems = (newItems: LineItem[]) => {
     // Sortiere die Items nach position
     const sortedItems = [...rawItems].sort((a, b) => a.position - b.position);
 
-    // Erstellen Sie eine tiefe Kopie der neuen Items
+    // Create a deep copy of the new items
     const updatedItems = JSON.parse(JSON.stringify(sortedItems));
 
-    // Aktualisieren Sie die Items in der Rechnung
+    // Update the invoice items
     invoice.value.items = updatedItems;
 
-    // Berechnen Sie den neuen Gesamtbetrag
+    // Calculate the new total amount
     let total = 0;
     updatedItems.forEach(item => {
         total += item.quantity * item.price;
@@ -472,11 +485,13 @@ const updateLineItems = (newItems: LineItem[]) => {
     // Erzwingen Sie eine Aktualisierung der Benutzeroberfläche
     invoice.value = { ...invoice.value };
 
-    // console.log(`isDirty: ${isDirty.value}\tisLoading: ${isLoading.value}`);
-    // console.groupEnd();
+    console.log(`isDirty: ${isDirty.value}`);
+    console.groupEnd();
 }
 
 const importLineItems = () => {
+    if (!isOpen) return
+
     if (!fileInput.value) {
         fileInput.value = document.createElement('input');
         fileInput.value.type = 'file';
@@ -495,18 +510,14 @@ const handleFileUpload = async (event: Event) => {
     formData.append('csv', file);
 
     try {
-        if (!invoice.value || !invoice.value.id) {
-            throw new Error('Rechnung muss gespeichert werden, bevor Positionen importiert werden können');
-        }
-
-        const response = await axios.post(`/api/lineitems/import/${invoice.value.id}`, formData, {
+        const response = await axios.post(`/api/lineitems/import`, formData, {
             headers: {
                 'Content-Type': 'multipart/form-data'
             }
         });
 
         if (invoice.value) {
-            invoice.value.items = response.data;
+            invoice.value.items = invoice.value.items.concat(response.data as LineItem[]);
             isDirty.value = true;
         }
 
@@ -539,7 +550,7 @@ const handleFileUpload = async (event: Event) => {
                         <h1>{{ title }}</h1>
                     </DialogTitle>
                     <DialogDescription>
-                        <Input v-if="invoice" v-model="invoice.title"
+                        <Input v-if="invoice" v-model="invoice.title" :id="'invoice-title'"
                             class="text-foreground md:text-base text-ellipsis px-0 bg-transparent dark:bg-transparent hover:bg-accent dark:hover:bg-accent/30 border-none shadow-none"
                             type="text" placeholder="Titel" />
                     </DialogDescription>
@@ -550,8 +561,8 @@ const handleFileUpload = async (event: Event) => {
                         <!-- Save -->
                         <Button v-if="invoice && isDirty" class="grow md:grow-0" size="sm" @click="save"
                             :disabled="isSaving">
-                            <Loader2 v-if="isSaving" stroke-width="1.5" class="animate-spin" />
-                            <Check v-else stroke-width="1.5" />
+                            <Loader2 v-if="isSaving" class="animate-spin" />
+                            <Check v-else />
                             Speichern
                         </Button>
 
@@ -573,7 +584,7 @@ const handleFileUpload = async (event: Event) => {
                         <Tooltip v-if="invoice && ['issued', 'due', 'reminded'].includes(invoice.paymentStatus)">
                             <TooltipTrigger>
                                 <Button size="sm" variant="success" @click="updateStatus('paid')">
-                                    <FileCheck stroke-width="1.5" /> Bezahlt
+                                    <FileCheck /> Bezahlt
                                 </Button>
                             </TooltipTrigger>
                             <TooltipContent>
@@ -587,7 +598,6 @@ const handleFileUpload = async (event: Event) => {
                                 <Button size="sm" variant="destructive" @click="openReminderDialog"
                                     :disabled="reminderLoading" class="gap-0">
                                     <Loader2 class="h-4 w-4 transition-[width] ease-in-out animate-spin"
-                                        stroke-width="1.5"
                                         :class="{ 'w-0!': !reminderLoading, 'mr-2': reminderLoading }" />
                                     Erinnern
                                 </Button>
@@ -599,10 +609,10 @@ const handleFileUpload = async (event: Event) => {
 
 
                         <!-- Ellipsis menu -->
-                        <DropdownMenu v-if="invoice && invoice.id > 0">
+                        <DropdownMenu v-if="invoice">
                             <DropdownMenuTrigger>
                                 <Button variant="ghost" size="sm" class="px-0! w-7 ml-2">
-                                    <Ellipsis class="size-4" stroke-width="1.5" />
+                                    <Ellipsis class="size-4" />
                                 </Button>
                             </DropdownMenuTrigger>
 
@@ -612,7 +622,7 @@ const handleFileUpload = async (event: Event) => {
                                 <!-- Import Items -->
                                 <DropdownMenuItem class="flex items-center justify-between" @click="importLineItems">
                                     <div class="flex items-center gap-3">
-                                        <Import :strokeWidth="1.5" class="text-muted-foreground" />
+                                        <Import class="text-muted-foreground" />
                                         <div class="mr-4 flex flex-col">
                                             <span>Posten importieren</span>
                                             <span class="text-xs text-muted-foreground">(CSV)</span>
@@ -628,10 +638,9 @@ const handleFileUpload = async (event: Event) => {
                                 <DropdownMenuSeparator />
 
                                 <!-- Preview -->
-                                <DropdownMenuItem v-if="invoice?.paymentStatus == 'draft'"
-                                    class="flex items-center justify-between" @click="preview">
+                                <DropdownMenuItem class="flex items-center justify-between" @click="preview">
                                     <div class="flex items-center gap-3">
-                                        <Eye :strokeWidth="1.5" class="text-muted-foreground" />
+                                        <Eye class="text-muted-foreground" />
                                         <span class="mr-4">Vorschau</span>
                                     </div>
                                     <KbdGroup>
@@ -643,9 +652,9 @@ const handleFileUpload = async (event: Event) => {
 
                                 <!-- PDF -->
                                 <DropdownMenuItem v-if="invoice && invoice.paymentStatus != 'draft'"
-                                    class="flex justify-between" @click="downloadPdf">
+                                    class="flex justify-between" @click="exportPdf">
                                     <div class="flex items-center gap-3">
-                                        <FileText stroke-width="1.5" class="text-muted-foreground" />
+                                        <FileText class="text-muted-foreground" />
                                         <div class="mr-4 flex flex-col">
                                             <span>PDF exportieren</span>
                                             <span class="text-xs text-muted-foreground">(ZUGFeRD)</span>
@@ -660,9 +669,9 @@ const handleFileUpload = async (event: Event) => {
 
                                 <!-- XML -->
                                 <DropdownMenuItem v-if="invoice && invoice.paymentStatus != 'draft'"
-                                    class="flex justify-between" @click="downloadXml">
+                                    class="flex justify-between" @click="exportXml">
                                     <div class="flex items-center gap-3">
-                                        <CodeXml stroke-width="1.5" class="text-muted-foreground" />
+                                        <CodeXml class="text-muted-foreground" />
                                         <div class="mr-4 flex flex-col">
                                             <span>XML exportieren</span>
                                             <span class="text-xs text-muted-foreground">(XRechnung)</span>
@@ -676,7 +685,7 @@ const handleFileUpload = async (event: Event) => {
                                 <DropdownMenuItem v-if="invoice && invoice.paymentStatus != 'draft'"
                                     class="flex justify-between" @click="" disabled>
                                     <div class="flex items-center gap-3">
-                                        <Logs stroke-width="1.5" class="text-muted-foreground" />
+                                        <Logs class="text-muted-foreground" />
                                         <span>Audit</span>
                                     </div>
                                 </DropdownMenuItem>
@@ -688,8 +697,8 @@ const handleFileUpload = async (event: Event) => {
                                     v-if="invoice && ['issued', 'due', 'reminded'].includes(invoice.paymentStatus)"
                                     class="flex justify-between" @click="updateStatus('cancelled')">
                                     <div class="flex items-center gap-3">
-                                        <!-- <FileX stroke-width="1.5"  class="text-muted-foreground"/> -->
-                                        <Ban :strokeWidth="1.5" class="text-current" />
+                                        <!-- <FileX   class="text-muted-foreground"/> -->
+                                        <Ban class="text-current" />
                                         <span class="mr-2">Stornieren</span>
                                     </div>
                                 </DropdownMenuItem>
@@ -699,7 +708,7 @@ const handleFileUpload = async (event: Event) => {
                                     class="flex justify-between text-destructive! hover:bg-red-100! dark:hover:bg-red-950!"
                                     @click="deleteInvoice">
                                     <div class="flex items-center gap-3">
-                                        <Trash2 :strokeWidth="1.5" class="text-current" />
+                                        <Trash2 class="text-current" />
                                         <span class="mr-2">Löschen</span>
                                     </div>
                                 </DropdownMenuItem>
@@ -832,7 +841,7 @@ const handleFileUpload = async (event: Event) => {
                                             <TooltipProvider>
                                                 <Tooltip>
                                                     <TooltipTrigger>
-                                                        <MessageCircleQuestion strokeWidth="1.5"
+                                                        <MessageCircleQuestion
                                                             class="h-[16px] w-[16px] ml-[1px] mb-2" />
                                                     </TooltipTrigger>
                                                     <TooltipContent>
@@ -851,7 +860,7 @@ const handleFileUpload = async (event: Event) => {
                                                     <SelectValue placeholder="Zahlungsziel" />
                                                 </SelectTrigger>
                                                 <SelectContent>
-                                                    <SelectItem v-for="term in paymentTermsData" :value="term">
+                                                    <SelectItem v-for="term in paymentTerms" :value="term">
                                                         <span v-if="term.isFixed">{{ term.description }}</span>
                                                         <span v-else>{{ term.days }} Tage</span>
                                                     </SelectItem>
diff --git a/resources/js/components/documents/LineItemTable.vue b/resources/js/components/documents/LineItemTable.vue
index a9c8e38..0b13198 100644
--- a/resources/js/components/documents/LineItemTable.vue
+++ b/resources/js/components/documents/LineItemTable.vue
@@ -7,20 +7,21 @@ import draggable from 'vuedraggable';
 import { cn, toCurrency } from '@/lib/utils';
 import { LineItem, Product, Unit } from '@/types';
 import { newLineItem, newUnit } from '@/types/index.d'
-import { Table, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from '@/components/ui/table';
+import { Table, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from '@/components/ui/crm-table';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"
 import { NumberField, NumberFieldContent, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, } from '@/components/ui/number-field'
 import { Input } from '@/components/ui/crm-input';
 import { Loader2, GripVertical, Trash2, Plus, TextSelect, CheckIcon, ChevronsUpDownIcon } from 'lucide-vue-next';
 import { Button } from '@/components/ui/crm-button';
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from '@/components/ui/empty'
-import NumberInput from '@/components/ui/number-input/NumberInput.vue';
+import NumberInput from '@/components/ui/crm-number-input/NumberInput.vue';
 import { GrowingTextarea } from '@/components/ui/growing-textarea';
 import PlaceholderPattern from '@/components/PlaceholderPattern.vue';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from '@/components/ui/command'
 import { Popover, PopoverContent, PopoverTrigger, } from '@/components/ui/popover'
 import axios, { AxiosError } from "axios";
 import { toast } from "vue-sonner";
+import ButtonGroup from '../ui/button-group/ButtonGroup.vue';
 
 
 const DEBUG = ref(true)
@@ -194,7 +195,7 @@ const recalculatePositions = () => {
 
           <TableRow v-if="element.isSection">
             <TableCell class="handle px-1 cursor-move w-6">
-              <GripVertical :size="18" stroke-width="1.5" class="text-muted-foreground" />
+              <GripVertical :size="18"  class="text-muted-foreground" />
             </TableCell>
 
             <!-- Title -->
@@ -210,7 +211,7 @@ const recalculatePositions = () => {
             <TableCell class="w-8 text-right px-1">
               <Button variant="ghost" size="sm" @click="deleteItem(element)"
                 class="has-[>svg]:px-1 text-muted-foreground hover:text-destructive">
-                <Trash2 :size="18" stroke-width="1.5" />
+                <Trash2 :size="18"  />
               </Button>
             </TableCell>
           </TableRow>
@@ -218,7 +219,7 @@ const recalculatePositions = () => {
 
           <TableRow v-else>
             <TableCell class="handle px-1 cursor-move w-6">
-              <GripVertical :size="18" stroke-width="1.5" class="text-muted-foreground" />
+              <GripVertical :size="18"  class="text-muted-foreground" />
             </TableCell>
 
             <!-- Pos. -->
@@ -272,19 +273,19 @@ const recalculatePositions = () => {
 
             <!-- Total -->
             <TableCell class="w-1/8 text-right tabular-nums font-bold">{{ toCurrency(element.price * element.quantity)
-            }}
+              }}
             </TableCell>
 
             <!-- Buttons -->
             <TableCell class="w-8 text-right px-1">
               <Button variant="ghost" size="sm" @click="deleteItem(element)"
                 class="has-[>svg]:px-1 text-muted-foreground hover:text-destructive">
-                <Trash2 stroke-width="1.5" />
+                <Trash2  />
               </Button>
 
               <!-- <Button variant="ghost" size="sm" @click=""
                 class="has-[>svg]:px-1 text-muted-foreground">
-                <BetweenHorizonalEnd stroke-width="1.5"/>
+                <BetweenHorizonalEnd />
               </Button> -->
 
             </TableCell>
@@ -299,18 +300,18 @@ const recalculatePositions = () => {
             <div class="flex gap-2 justify-center">
 
               <Button class="mt-4" variant="ghost" @click="newItem(true)">
-                <Plus stroke-width="1.5" /> Neuer Abschnitt
+                <Plus  /> Neuer Abschnitt
               </Button>
 
               <Button class="mt-4" variant="ghost" @click="newItem(false)">
-                <Plus stroke-width="1.5" /> Neue Zeile
+                <Plus  /> Neue Zeile
               </Button>
 
               <Popover v-model:open="productsComboboxOpen">
                 <PopoverTrigger as-child>
                   <Button variant="ghost" role="combobox" :aria-expanded="productsComboboxOpen" class="mt-4"
                     :disabled="!products || products.length === 0">
-                    <Plus stroke-width="1.5" />
+                    <Plus  />
                     Produkt hinzufügen
                   </Button>
                 </PopoverTrigger>
@@ -326,7 +327,7 @@ const recalculatePositions = () => {
                         }" class="hover:bg-accent">
 
                           <!-- Thumbnail -->
-                          <div class="w-6 relative aspect-4/3 overflow-hidden rounded-lg">
+                          <div class="w-6 relative aspect-4/3 overflow-hidden rounded-sm shrink-0">
                             <img v-if="product.image" :src="'storage/uploads/products/' + product.image"
                               class="size-full object-cover dark:brightness-75" loading="lazy" />
                             <PlaceholderPattern v-else />
@@ -348,59 +349,63 @@ const recalculatePositions = () => {
     </Table>
 
     <Loader2 v-if="props.isLoading" class="mx-auto mt-8 h-6 w-6 animate-spin text-muted-foreground"
-      stroke-width="1.5" />
+       />
 
     <Empty v-else-if="items.length < 1" class="py-8!">
       <EmptyHeader>
         <EmptyMedia variant="icon">
-          <TextSelect class="text-muted-foreground" stroke-width="1.5" />
+          <TextSelect class="text-muted-foreground"  />
         </EmptyMedia>
         <EmptyTitle>Diese Rechnung ist leer</EmptyTitle>
         <EmptyDescription>Erstelle hier deinen ersten Posten</EmptyDescription>
       </EmptyHeader>
       <div class="flex gap-2">
 
-        <Button variant="action" @click="newItem(true)">
-          <Plus stroke-width="1.5" /> Neuer Abschnitt
-        </Button>
+        <ButtonGroup>
 
-        <Button variant="action" @click="newItem(false)">
-          <Plus stroke-width="1.5" /> Neue Zeile
-        </Button>
+          <Button @click="newItem(true)">
+            <Plus  /> Neuer Abschnitt
+          </Button>
 
-        <Popover v-model:open="productsComboboxOpen">
-          <PopoverTrigger as-child>
-            <Button variant="action" role="combobox" :aria-expanded="productsComboboxOpen"
-              :disabled="!products || products.length === 0">
-              <Plus stroke-width="1.5" />
-              Produkt hinzufügen
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent class="w-50 p-0">
-            <Command>
-              <CommandInput placeholder="Produkt suchen…" />
-              <CommandList>
-                <CommandEmpty>Kein Produkt gefunden</CommandEmpty>
-                <CommandGroup>
-                  <CommandItem v-for="product in products" :key="product.id" :value="product.id" @select="() => {
-                    productsComboboxOpen = false
-                    insertProduct(product)
-                  }" class="hover:bg-accent">
+          <Button @click="newItem(false)">
+            <Plus  /> Neue Zeile
+          </Button>
 
-                    <!-- Thumbnail -->
-                    <div class="w-6 relative aspect-4/3 overflow-hidden rounded-lg">
-                      <img v-if="product.image" :src="'storage/uploads/products/' + product.image"
-                        class="size-full object-cover dark:brightness-75" loading="lazy" />
-                      <PlaceholderPattern v-else />
-                    </div>
+          <Popover v-model:open="productsComboboxOpen">
+            <PopoverTrigger as-child>
+              <Button role="combobox" :aria-expanded="productsComboboxOpen"
+                :disabled="!products || products.length === 0">
+                <Plus  />
+                Produkt hinzufügen
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent class="w-50 p-0">
+              <Command>
+                <CommandInput placeholder="Produkt suchen…" />
+                <CommandList>
+                  <CommandEmpty>Kein Produkt gefunden</CommandEmpty>
+                  <CommandGroup>
+                    <CommandItem v-for="product in products" :key="product.id" :value="product.id" @select="() => {
+                      productsComboboxOpen = false
+                      insertProduct(product)
+                    }" class="hover:bg-accent">
 
-                    {{ product.title }}
-                  </CommandItem>
-                </CommandGroup>
-              </CommandList>
-            </Command>
-          </PopoverContent>
-        </Popover>
+                      <!-- Thumbnail -->
+                      <div class="w-6 relative aspect-4/3 overflow-hidden rounded-sm shrink-0">
+                        <img v-if="product.image" :src="'storage/uploads/products/' + product.image"
+                          class="size-full object-cover dark:brightness-75" loading="lazy" />
+                        <PlaceholderPattern v-else />
+                      </div>
+
+                      {{ product.title }}
+                    </CommandItem>
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+
+        </ButtonGroup>
 
 
       </div>
diff --git a/resources/js/components/ui/checkbox/Checkbox.vue b/resources/js/components/ui/checkbox/Checkbox.vue
index d43b7a4..f612895 100644
--- a/resources/js/components/ui/checkbox/Checkbox.vue
+++ b/resources/js/components/ui/checkbox/Checkbox.vue
@@ -1,36 +1,29 @@
 <script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { Check } from 'lucide-vue-next'
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import type { CheckboxRootEmits, CheckboxRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Check } from "lucide-vue-next"
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<CheckboxRootEmits>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, "class")
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <CheckboxRoot
-    data-slot="checkbox"
     v-bind="forwarded"
     :class="
-      cn('peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+      cn('grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
          props.class)"
   >
-    <CheckboxIndicator
-      data-slot="checkbox-indicator"
-      class="flex items-center justify-center text-current transition-none"
-    >
+    <CheckboxIndicator class="grid place-content-center text-current">
       <slot>
-        <Check class="size-3.5" />
+        <Check class="h-4 w-4" />
       </slot>
     </CheckboxIndicator>
   </CheckboxRoot>
diff --git a/resources/js/components/ui/checkbox/index.ts b/resources/js/components/ui/checkbox/index.ts
index 8c28c28..3391a85 100644
--- a/resources/js/components/ui/checkbox/index.ts
+++ b/resources/js/components/ui/checkbox/index.ts
@@ -1 +1 @@
-export { default as Checkbox } from './Checkbox.vue'
+export { default as Checkbox } from "./Checkbox.vue"
diff --git a/resources/js/components/ui/badge/Badge.vue b/resources/js/components/ui/crm-badge/Badge.vue
similarity index 100%
rename from resources/js/components/ui/badge/Badge.vue
rename to resources/js/components/ui/crm-badge/Badge.vue
diff --git a/resources/js/components/ui/badge/index.ts b/resources/js/components/ui/crm-badge/index.ts
similarity index 74%
rename from resources/js/components/ui/badge/index.ts
rename to resources/js/components/ui/crm-badge/index.ts
index ac4c001..c093944 100644
--- a/resources/js/components/ui/badge/index.ts
+++ b/resources/js/components/ui/crm-badge/index.ts
@@ -13,7 +13,9 @@ export const badgeVariants = cva(
         secondary:
           "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
         destructive:
-         "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "border-transparent bg-destructive text-desctructive-foreground [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        warning:
+          "border-transparent bg-warning text-warning-foreground [a&]:hover:bg-warning/90 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40 dark:bg-warning/60",
         outline:
           "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
       },
diff --git a/resources/js/components/ui/crm-button/index.ts b/resources/js/components/ui/crm-button/index.ts
index 751d3fd..b8f2550 100644
--- a/resources/js/components/ui/crm-button/index.ts
+++ b/resources/js/components/ui/crm-button/index.ts
@@ -3,30 +3,31 @@ import { cva, type VariantProps } from 'class-variance-authority'
 export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium shadow-sm active:shadow-none active:inset-shadow-2xs active:inset-shadow-black/15 active:border-none transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+  'relative inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium shadow-sm ' +
+  'focusactive:shadow-none active:shadow-none active:inset-shadow-xs active:inset-shadow-black/30 active:border-transparent active:top-[1px] transition-shadow transition-top disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive ' +
+  'text-foreground border-b-1 border-t-1 border-t-white/50 border-b-black/20 dark:border-t-white/30 dark:border-b-black/30',
   {
     variants: {
       variant: {
         default:
-          'bg-slate-100 hover:bg-slate-200 dark:bg-neutral-700 dark:hover:bg-neutral-700/66 border-b-1 border-t-1 border-t-white/75 border-b-slate-300 dark:border-t-neutral-600 dark:border-b-neutral-800',
+          'bg-zinc-100 hover:bg-zinc-200 active:bg-zinc-300 dark:bg-neutral-600 dark:hover:bg-neutral-700 dark:active:bg-neutral-800',
+        outline:
+          'border shadow-none bg-transparent border-border dark:border-border hover:bg-accent active:bg-zinc-200 dark:hover:bg-input/50',
+        primary:
+          'bg-primary hover:bg-orange-600 active:bg-orange-700 text-primary-foreground',
         action:
-          'bg-blue-600 border-b-1 border-t-1 border-t-blue-400 border-b-blue-800 active:bg-blue-700 hover:bg-blue-500 text-white',
+          'bg-action hover:bg-blue-600 active:bg-blue-700 text-action-foreground',
         destructive:
-          'bg-destructive dark:bg-red-700 text-white border-b-1 border-t-1 border-t-red-200 border-b-red-700 dark:border-t-red-400 dark:border-b-red-800 hover:bg-red-600 active:bg-red-500 active:inset-shadow-red-950 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
+          'bg-destructive hover:bg-red-600 active:bg-red-700 dark:bg-red-700 text-white',
         success:
           'bg-success text-success-foreground border-b-1 border-t-1 border-t-lime-200 border-b-lime-500 dark:border-t-lime-400 dark:border-b-lime-800 hover:bg-lime-500 active:bg-lime-500 active:inset-shadow-lime-600 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
-        outline:
-          'border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost:
-          'border-none shadow-none hover:bg-slate-100 hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 hover:underline',
+          'border-none shadow-none hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
         pressed:
-          'bg-slate-100 dark:bg-neutral-700 shadow-none inset-shadow-2xs inset-shadow-black/15 border-none',
+          'bg-zinc-100 dark:bg-neutral-700 shadow-none inset-shadow-2xs inset-shadow-black/15 border-none top-[1px]',
       },
       size: {
-        default: 'h-8 px-6 active:pt-[1px] has-[>svg]:px-3',
+        default: 'h-8 px-6 has-[>svg]:px-3',
         sm: 'h-7 px-4 rounded-md gap-1.5 has-[>svg]:px-2.5',
         lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
         icon: 'size-9',
diff --git a/resources/js/components/ui/crm-checkbox/Checkbox.vue b/resources/js/components/ui/crm-checkbox/Checkbox.vue
new file mode 100644
index 0000000..a6721e9
--- /dev/null
+++ b/resources/js/components/ui/crm-checkbox/Checkbox.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Check } from "lucide-vue-next"
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<CheckboxRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="
+      cn('grid place-content-center peer size-6 shrink-0 rounded-full border-[1.625px] border-border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-current',
+         props.class)"
+  >
+    <CheckboxIndicator class="grid place-content-center text-current">
+      <slot>
+        <Check class="h-3 w-3" stroke-width="3" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>
diff --git a/resources/js/components/ui/crm-checkbox/index.ts b/resources/js/components/ui/crm-checkbox/index.ts
new file mode 100644
index 0000000..3391a85
--- /dev/null
+++ b/resources/js/components/ui/crm-checkbox/index.ts
@@ -0,0 +1 @@
+export { default as Checkbox } from "./Checkbox.vue"
diff --git a/resources/js/components/ui/crm-editable/Editable.vue b/resources/js/components/ui/crm-editable/Editable.vue
new file mode 100644
index 0000000..4f1fefd
--- /dev/null
+++ b/resources/js/components/ui/crm-editable/Editable.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { computed, onMounted, onUpdated, ref, useTemplateRef, watch } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  placeholder?: string
+  modelValue?: string  | null
+  class?: HTMLAttributes['class']
+  spellcheck?: false
+}>()
+
+const text = ref<string>(props.modelValue || '')
+const editable = useTemplateRef('editable')
+
+onMounted(() => {
+  setText(props.modelValue || '')
+})
+
+watch(props, () => { setText(props.modelValue || '') }, { deep: true, immediate: false })
+
+const emits = defineEmits<{
+  (e: 'input:modelValue', payload: string): void
+  (e: 'change:modelValue', payload: string): void
+}>()
+
+const setText = (value: string) => {
+  if (!editable.value) return
+  editable.value.innerText = value
+}
+
+const input = () => {
+  let newValue = editable.value?.textContent || ''
+  text.value = newValue
+  emits('input:modelValue', newValue)
+}
+
+const blur = () => {
+  emits('change:modelValue', text.value)
+}
+
+const isEmpty = computed(() => {
+  return text.value === undefined || text.value === null || text.value.trim() === ''
+},)
+
+</script>
+
+<template>
+  <div class="relative">
+    <span v-if="isEmpty" :class="cn('absolute text-muted-foreground! pointer-events-none italic', props.class)">
+      {{ placeholder }}
+    </span>
+
+    <div ref="editable" contenteditable="plaintext-only" :spellcheck="props.spellcheck" @blur="blur" @input="input"
+      :class="cn(
+        'min-w-60 min-h-4 border-input rounded-md border text-base transition-[color] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        'my-0 px-2 ml-[calc(var(--spacing)*-2-1px)] hover:bg-input border-transparent hover:border-border', props.class)">
+    </div>
+  </div>
+
+</template>
\ No newline at end of file
diff --git a/resources/js/components/ui/crm-editable/editable.ts b/resources/js/components/ui/crm-editable/editable.ts
new file mode 100644
index 0000000..dc554fd
--- /dev/null
+++ b/resources/js/components/ui/crm-editable/editable.ts
@@ -0,0 +1 @@
+export { default as Editable } from "./Editable.vue"
diff --git a/resources/js/components/ui/crm-input/Input.vue b/resources/js/components/ui/crm-input/Input.vue
index 142a5a2..daeda88 100644
--- a/resources/js/components/ui/crm-input/Input.vue
+++ b/resources/js/components/ui/crm-input/Input.vue
@@ -20,14 +20,10 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </script>
 
 <template>
-  <input
-    v-model="modelValue"
-    data-slot="input"
-    :class="cn(
-      'file:text-foreground placeholder:text-muted-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-input px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-      props.class,
-    )"
-  >
+  <input v-model="modelValue" data-slot="input" :class="cn(
+    'file:text-foreground placeholder:text-muted-foreground border-input flex h-9 w-full min-w-0 rounded-md border bg-input px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+    'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+    'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+    props.class,
+  )">
 </template>
diff --git a/resources/js/components/ui/crm-number-input/NumberInput.vue b/resources/js/components/ui/crm-number-input/NumberInput.vue
new file mode 100644
index 0000000..b67e68b
--- /dev/null
+++ b/resources/js/components/ui/crm-number-input/NumberInput.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { isNumeric } from '@/lib/utils';
+import { component as VueNumber } from '@coders-tm/vue-number-format'
+import { computed } from 'vue'
+
+const props = defineProps<{
+    modelValue: number | string
+    decimal?: string
+    separator?: string
+    precision?: number
+    minimumFractionDigits?: number
+    maximumFractionDigits?: number
+    prefix?: string
+    suffix?: string
+}>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: number): void }>()
+
+const value = computed<number>({
+    get() {
+        if (typeof props.modelValue === 'string') {
+            const parsedValue = parseFloat(props.modelValue.replace(',', '.'))
+            return isNaN(parsedValue) ? 0 : parsedValue
+        }
+        return (props.modelValue as number) || 0
+    },
+    set(val: any) {
+        const newVal = parseFloat(String(val));
+        const current = typeof props.modelValue === 'string'
+            ? parseFloat(props.modelValue.replace(',', '.'))
+            : (props.modelValue as number) || 0;
+
+        if (isNaN(newVal) && isNaN(current)) return;
+        if (newVal === current) return;
+
+        emit('update:modelValue', newVal);
+    }
+})
+
+const number = {
+    decimal: props.decimal || ',',
+    separator: props.separator || '.',
+    prefix: props.prefix || '',
+    suffix: props.suffix || '',
+    precision: props.precision || 2,
+    minimumFractionDigits: isNumeric(props.minimumFractionDigits) ? props.minimumFractionDigits : 2,
+    maximumFractionDigits: isNumeric(props.maximumFractionDigits) ? props.maximumFractionDigits : 2,
+    masked: false,
+} as {
+    decimal: string
+    separator: string
+    prefix: string
+    suffix: string
+    precision: number
+    minimumFractionDigits: number
+    maximumFractionDigits: number
+    masked: boolean
+}
+</script>
+
+<template>
+    <div class="flex items-center gap-2">
+        <vue-number class="file:text-foreground border-input flex min-w-4 rounded-lg transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive tabular-nums h-6 py-0 px-1 m-0 bg-transparent border-none dark:bg-transparent hover:border
+dark:hover:border placeholder:text-muted-foreground/30 shadow-none w-full text-right" v-model="value" v-bind="number" />
+    </div>
+</template>
\ No newline at end of file
diff --git a/resources/js/components/ui/crm-sidebar/Sidebar.vue b/resources/js/components/ui/crm-sidebar/Sidebar.vue
new file mode 100644
index 0000000..77f65a8
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/Sidebar.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import type { SidebarProps } from '.'
+import { cn } from '@/lib/utils'
+import { Sheet, SheetContent } from '@/components/ui/sheet'
+import SheetDescription from '@/components/ui/sheet/SheetDescription.vue'
+import SheetHeader from '@/components/ui/sheet/SheetHeader.vue'
+import SheetTitle from '@/components/ui/sheet/SheetTitle.vue'
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  side: 'left',
+  variant: 'sidebar',
+  collapsible: 'offcanvas',
+})
+
+const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+</script>
+
+<template>
+  <div
+    v-if="collapsible === 'none'"
+    data-slot="sidebar"
+    :class="cn('text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+
+  <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
+    <SheetContent
+      data-sidebar="sidebar"
+      data-slot="sidebar"
+      data-mobile="true"
+      :side="side"
+      class="text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+      }"
+    >
+      <SheetHeader class="sr-only">
+        <SheetTitle>Sidebar</SheetTitle>
+        <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+      </SheetHeader>
+      <div class="flex h-full w-full flex-col">
+        <slot />
+      </div>
+    </SheetContent>
+  </Sheet>
+
+  <div
+    v-else
+    class="group peer bg-sidebar text-sidebar-foreground hidden md:block"
+    data-slot="sidebar"
+    :data-state="state"
+    :data-collapsible="state === 'collapsed' ? collapsible : ''"
+    :data-variant="variant"
+    :data-side="side"
+  >
+    <!-- This is what handles the sidebar gap on desktop  -->
+    <div
+      :class="cn(
+        'relative w-(--sidebar-width) bg-transparent transition-[width] duration-100 ease-linear',
+        'group-data-[collapsible=offcanvas]:w-0',
+        'group-data-[side=right]:rotate-180',
+        variant === 'floating' || variant === 'inset'
+          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+      )"
+    />
+    <div
+      :class="cn(
+        'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-100 ease-linear md:flex',
+        side === 'left'
+          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+        // Adjust the padding for floating and inset variants.
+        variant === 'floating' || variant === 'inset'
+          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+          : 'p-2 group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-0 group-data-[side=right]:border-0',
+        props.class,
+      )"
+      v-bind="$attrs"
+    >
+      <div
+        data-sidebar="sidebar"
+        class="group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarContent.vue b/resources/js/components/ui/crm-sidebar/SidebarContent.vue
new file mode 100644
index 0000000..72214da
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarContent.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-content"
+    data-sidebar="content"
+    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarFooter.vue b/resources/js/components/ui/crm-sidebar/SidebarFooter.vue
new file mode 100644
index 0000000..7616ee8
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarFooter.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-footer"
+    data-sidebar="footer"
+    :class="cn('flex flex-col gap-2 p-2 overflow-x-hidden', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarGroup.vue b/resources/js/components/ui/crm-sidebar/SidebarGroup.vue
new file mode 100644
index 0000000..57a099f
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarGroup.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-group"
+    data-sidebar="group"
+    :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarGroupAction.vue b/resources/js/components/ui/crm-sidebar/SidebarGroupAction.vue
new file mode 100644
index 0000000..35713bb
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarGroupAction.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'reka-ui'
+
+const props = defineProps<PrimitiveProps & {
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-group-action"
+    data-sidebar="group-action"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(
+      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'after:absolute after:-inset-2 md:after:hidden',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarGroupContent.vue b/resources/js/components/ui/crm-sidebar/SidebarGroupContent.vue
new file mode 100644
index 0000000..5d5e2dd
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarGroupContent.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-group-content"
+    data-sidebar="group-content"
+    :class="cn('w-full text-sm', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarGroupLabel.vue b/resources/js/components/ui/crm-sidebar/SidebarGroupLabel.vue
new file mode 100644
index 0000000..19e1117
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarGroupLabel.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'reka-ui'
+
+const props = defineProps<PrimitiveProps & {
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-group-label"
+    data-sidebar="group-label"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(
+      'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+      props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarHeader.vue b/resources/js/components/ui/crm-sidebar/SidebarHeader.vue
new file mode 100644
index 0000000..00673f7
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarHeader.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-header"
+    data-sidebar="header"
+    :class="cn('flex flex-col gap-2 p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarInput.vue b/resources/js/components/ui/crm-sidebar/SidebarInput.vue
new file mode 100644
index 0000000..ecaa977
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarInput.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Input } from '@/components/ui/input'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Input
+    data-slot="sidebar-input"
+    data-sidebar="input"
+    :class="cn(
+      'bg-background h-8 w-full shadow-none',
+      props.class,
+    )"
+  >
+    <slot />
+  </Input>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarInset.vue b/resources/js/components/ui/crm-sidebar/SidebarInset.vue
new file mode 100644
index 0000000..947331a
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarInset.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <main
+    data-slot="sidebar-inset"
+    :class="cn(
+      'bg-background relative flex w-full flex-1 flex-col',
+      'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-0',
+      props.class,
+    )"
+  >
+    <slot />
+  </main>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarMenu.vue b/resources/js/components/ui/crm-sidebar/SidebarMenu.vue
new file mode 100644
index 0000000..59ec071
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarMenu.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ul
+    data-slot="sidebar-menu"
+    data-sidebar="menu"
+    :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)"
+  >
+    <slot />
+  </ul>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarMenuAction.vue b/resources/js/components/ui/crm-sidebar/SidebarMenuAction.vue
new file mode 100644
index 0000000..2429433
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarMenuAction.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
+
+const props = withDefaults(defineProps<PrimitiveProps & {
+  showOnHover?: boolean
+  class?: HTMLAttributes['class']
+}>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-menu-action"
+    data-sidebar="menu-action"
+    :class="cn(
+      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'after:absolute after:-inset-2 md:after:hidden',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      showOnHover
+        && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+      props.class,
+    )"
+    :as="as"
+    :as-child="asChild"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarMenuBadge.vue b/resources/js/components/ui/crm-sidebar/SidebarMenuBadge.vue
new file mode 100644
index 0000000..3984b33
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarMenuBadge.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-menu-badge"
+    data-sidebar="menu-badge"
+    :class="cn(
+      'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarMenuButton.vue b/resources/js/components/ui/crm-sidebar/SidebarMenuButton.vue
new file mode 100644
index 0000000..ac6926b
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarMenuButton.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { type Component, computed } from 'vue'
+import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
+import { useSidebar } from './utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SidebarMenuButtonProps & {
+  tooltip?: string | Component
+}>(), {
+  as: 'button',
+  variant: 'default',
+  size: 'default',
+})
+
+const { isMobile, state } = useSidebar()
+
+const delegatedProps = computed(() => {
+  const { tooltip, ...delegated } = props
+  return delegated
+})
+</script>
+
+<template>
+  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+    <slot />
+  </SidebarMenuButtonChild>
+
+  <Tooltip v-else>
+    <TooltipTrigger as-child>
+      <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
+        <slot />
+      </SidebarMenuButtonChild>
+    </TooltipTrigger>
+    <TooltipContent
+      side="right"
+      align="center"
+      :hidden="state !== 'collapsed' || isMobile"
+    >
+      <template v-if="typeof tooltip === 'string'">
+        {{ tooltip }}
+      </template>
+      <component :is="tooltip" v-else />
+    </TooltipContent>
+  </Tooltip>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarMenuButtonChild.vue b/resources/js/components/ui/crm-sidebar/SidebarMenuButtonChild.vue
new file mode 100644
index 0000000..0b8979c
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarMenuButtonChild.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
+import { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'
+
+export interface SidebarMenuButtonProps extends PrimitiveProps {
+  variant?: SidebarMenuButtonVariants['variant']
+  size?: SidebarMenuButtonVariants['size']
+  isActive?: boolean
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
+  as: 'button',
+  variant: 'default',
+  size: 'default',
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-menu-button"
+    data-sidebar="menu-button"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
+    :as="as"
+    :as-child="asChild"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarMenuItem.vue b/resources/js/components/ui/crm-sidebar/SidebarMenuItem.vue
new file mode 100644
index 0000000..b7b4d3f
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarMenuItem.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    data-slot="sidebar-menu-item"
+    data-sidebar="menu-item"
+    :class="cn('group/menu-item relative', props.class)"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarMenuSkeleton.vue b/resources/js/components/ui/crm-sidebar/SidebarMenuSkeleton.vue
new file mode 100644
index 0000000..6be4243
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarMenuSkeleton.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Skeleton } from '@/components/ui/skeleton'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  showIcon?: boolean
+  class?: HTMLAttributes['class']
+}>()
+
+const width = computed(() => {
+  return `${Math.floor(Math.random() * 40) + 50}%`;
+})
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-menu-skeleton"
+    data-sidebar="menu-skeleton"
+    :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)"
+  >
+    <Skeleton
+      v-if="showIcon"
+      class="size-4 rounded-md"
+      data-sidebar="menu-skeleton-icon"
+    />
+
+    <Skeleton
+      class="h-4 max-w-(--skeleton-width) flex-1"
+      data-sidebar="menu-skeleton-text"
+      :style="{ '--skeleton-width': width }"
+    />
+  </div>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarMenuSub.vue b/resources/js/components/ui/crm-sidebar/SidebarMenuSub.vue
new file mode 100644
index 0000000..11aec64
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarMenuSub.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ul
+    data-slot="sidebar-menu-sub"
+    data-sidebar="menu-badge"
+    :class="cn(
+      'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </ul>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarMenuSubButton.vue b/resources/js/components/ui/crm-sidebar/SidebarMenuSubButton.vue
new file mode 100644
index 0000000..98e8e56
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarMenuSubButton.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(defineProps<PrimitiveProps & {
+  size?: 'sm' | 'md'
+  isActive?: boolean
+  class?: HTMLAttributes['class']
+}>(), {
+  as: 'a',
+  size: 'md',
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-menu-sub-button"
+    data-sidebar="menu-sub-button"
+    :as="as"
+    :as-child="asChild"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(
+      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+      size === 'sm' && 'text-xs',
+      size === 'md' && 'text-sm',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarMenuSubItem.vue b/resources/js/components/ui/crm-sidebar/SidebarMenuSubItem.vue
new file mode 100644
index 0000000..f0c35bc
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarMenuSubItem.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    data-slot="sidebar-menu-sub-item"
+    data-sidebar="menu-sub-item"
+    :class="cn('group/menu-sub-item relative', props.class)"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarProvider.vue b/resources/js/components/ui/crm-sidebar/SidebarProvider.vue
new file mode 100644
index 0000000..85e4198
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarProvider.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'
+import { TooltipProvider } from 'reka-ui'
+import { computed, type HTMLAttributes, type Ref, ref } from 'vue'
+import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'
+
+const props = withDefaults(defineProps<{
+  defaultOpen?: boolean
+  open?: boolean
+  class?: HTMLAttributes['class']
+}>(), {
+  defaultOpen: true,
+  open: undefined,
+})
+
+const emits = defineEmits<{
+  'update:open': [open: boolean]
+}>()
+
+const isMobile = useMediaQuery('(max-width: 768px)')
+const openMobile = ref(false)
+
+const open = useVModel(props, 'open', emits, {
+  defaultValue: props.defaultOpen ?? false,
+  passive: (props.open === undefined) as false,
+}) as Ref<boolean>
+
+function setOpen(value: boolean) {
+  open.value = value // emits('update:open', value)
+
+  // This sets the cookie to keep the sidebar state.
+  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+}
+
+function setOpenMobile(value: boolean) {
+  openMobile.value = value
+}
+
+// Helper to toggle the sidebar.
+function toggleSidebar() {
+  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
+}
+
+useEventListener('keydown', (event: KeyboardEvent) => {
+  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+    event.preventDefault()
+    toggleSidebar()
+  }
+})
+
+// We add a state so that we can do data-state="expanded" or "collapsed".
+// This makes it easier to style the sidebar with Tailwind classes.
+const state = computed(() => open.value ? 'expanded' : 'collapsed')
+
+provideSidebarContext({
+  state,
+  open,
+  setOpen,
+  isMobile,
+  openMobile,
+  setOpenMobile,
+  toggleSidebar,
+})
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="0">
+    <!-- :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)" -->
+    <!-- :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-linear-45 from-orange-200 to-orange-300 flex min-h-svh w-full', props.class)" -->
+    <!-- linear-[45deg,rgb(235,217,178)_0%,_rgb(237,183,83)_100%] -->
+    <div
+      data-slot="sidebar-wrapper"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH,
+        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+      }"
+      :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
+      v-bind="$attrs"
+      >
+      <slot />
+    </div>
+  </TooltipProvider>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarRail.vue b/resources/js/components/ui/crm-sidebar/SidebarRail.vue
new file mode 100644
index 0000000..07e59be
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarRail.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useSidebar } from './utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { toggleSidebar } = useSidebar()
+</script>
+
+<template>
+  <button
+    data-sidebar="rail"
+    data-slot="sidebar-rail"
+    aria-label="Toggle Sidebar"
+    :tabindex="-1"
+    title="Toggle Sidebar"
+    :class="cn(
+      'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+      'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+      'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+      props.class,
+    )"
+    @click="toggleSidebar"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarSeparator.vue b/resources/js/components/ui/crm-sidebar/SidebarSeparator.vue
new file mode 100644
index 0000000..1803bff
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarSeparator.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Separator } from '@/components/ui/separator'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Separator
+    data-slot="sidebar-separator"
+    data-sidebar="separator"
+    :class="cn('bg-sidebar-border mx-2 w-auto', props.class)"
+  >
+    <slot />
+  </Separator>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/SidebarTrigger.vue b/resources/js/components/ui/crm-sidebar/SidebarTrigger.vue
new file mode 100644
index 0000000..8ce34ac
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/SidebarTrigger.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { PanelLeft } from 'lucide-vue-next'
+import { useSidebar } from './utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { toggleSidebar, open } = useSidebar()
+</script>
+
+<template>
+  <Button
+    data-sidebar="trigger"
+    data-slot="sidebar-trigger"
+    variant="ghost"
+    size="icon"
+    :class="cn('h-7 w-7', props.class)"
+    @click="toggleSidebar"
+  >
+    <PanelLeft  :class="open ? 'text-primary' : 'text-sidebar-icon'" />
+    <span class="sr-only">Toggle Sidebar</span>
+  </Button>
+</template>
diff --git a/resources/js/components/ui/crm-sidebar/index.ts b/resources/js/components/ui/crm-sidebar/index.ts
new file mode 100644
index 0000000..accd624
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/index.ts
@@ -0,0 +1,60 @@
+import type { VariantProps } from 'class-variance-authority'
+import type { HTMLAttributes } from 'vue'
+import { cva } from 'class-variance-authority'
+
+export interface SidebarProps {
+  side?: 'left' | 'right'
+  variant?: 'sidebar' | 'floating' | 'inset'
+  collapsible?: 'offcanvas' | 'icon' | 'none'
+  class?: HTMLAttributes['class']
+}
+
+export { default as Sidebar } from './Sidebar.vue'
+export { default as SidebarContent } from './SidebarContent.vue'
+export { default as SidebarFooter } from './SidebarFooter.vue'
+export { default as SidebarGroup } from './SidebarGroup.vue'
+export { default as SidebarGroupAction } from './SidebarGroupAction.vue'
+export { default as SidebarGroupContent } from './SidebarGroupContent.vue'
+export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'
+export { default as SidebarHeader } from './SidebarHeader.vue'
+export { default as SidebarInput } from './SidebarInput.vue'
+export { default as SidebarInset } from './SidebarInset.vue'
+export { default as SidebarMenu } from './SidebarMenu.vue'
+export { default as SidebarMenuAction } from './SidebarMenuAction.vue'
+export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'
+export { default as SidebarMenuButton } from './SidebarMenuButton.vue'
+export { default as SidebarMenuItem } from './SidebarMenuItem.vue'
+export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'
+export { default as SidebarMenuSub } from './SidebarMenuSub.vue'
+export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'
+export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'
+export { default as SidebarProvider } from './SidebarProvider.vue'
+export { default as SidebarRail } from './SidebarRail.vue'
+export { default as SidebarSeparator } from './SidebarSeparator.vue'
+export { default as SidebarTrigger } from './SidebarTrigger.vue'
+
+export { useSidebar } from './utils'
+
+export const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:pr-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>
diff --git a/resources/js/components/ui/crm-sidebar/utils.ts b/resources/js/components/ui/crm-sidebar/utils.ts
new file mode 100644
index 0000000..ee8f5b8
--- /dev/null
+++ b/resources/js/components/ui/crm-sidebar/utils.ts
@@ -0,0 +1,19 @@
+import type { ComputedRef, Ref } from 'vue'
+import { createContext } from 'reka-ui'
+
+export const SIDEBAR_COOKIE_NAME = 'sidebar_state'
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+export const SIDEBAR_WIDTH = '14rem'
+export const SIDEBAR_WIDTH_MOBILE = '18rem'
+export const SIDEBAR_WIDTH_ICON = '4rem'
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+
+export const [useSidebar, provideSidebarContext] = createContext<{
+  state: ComputedRef<'expanded' | 'collapsed'>
+  open: Ref<boolean>
+  setOpen: (value: boolean) => void
+  isMobile: Ref<boolean>
+  openMobile: Ref<boolean>
+  setOpenMobile: (value: boolean) => void
+  toggleSidebar: () => void
+}>('Sidebar')
diff --git a/resources/js/components/ui/crm-table/Table.vue b/resources/js/components/ui/crm-table/Table.vue
new file mode 100644
index 0000000..4327d50
--- /dev/null
+++ b/resources/js/components/ui/crm-table/Table.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <!-- <div class="relative w-full overflow-auto"> -->
+    <table :class="cn('w-full relative caption-bottom', props.class)">
+      <slot />
+    </table>
+  <!-- </div> -->
+</template>
diff --git a/resources/js/components/ui/crm-table/TableBody.vue b/resources/js/components/ui/crm-table/TableBody.vue
new file mode 100644
index 0000000..190faad
--- /dev/null
+++ b/resources/js/components/ui/crm-table/TableBody.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <tbody :class="cn('[&_tr:last-child]:border-0 overflow-clip rounded-lg print:rounded-none shadow print:shadow-none', props.class)">
+    <slot />
+  </tbody>
+</template>
diff --git a/resources/js/components/ui/crm-table/TableCaption.vue b/resources/js/components/ui/crm-table/TableCaption.vue
new file mode 100644
index 0000000..a2bf57f
--- /dev/null
+++ b/resources/js/components/ui/crm-table/TableCaption.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)">
+    <slot />
+  </caption>
+</template>
diff --git a/resources/js/components/ui/crm-table/TableCell.vue b/resources/js/components/ui/crm-table/TableCell.vue
new file mode 100644
index 0000000..4a86e3a
--- /dev/null
+++ b/resources/js/components/ui/crm-table/TableCell.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <td
+    :class="
+      cn(
+        'p-4 align-middle [&:has([role=checkbox])]:pr-0',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </td>
+</template>
diff --git a/resources/js/components/ui/crm-table/TableEmpty.vue b/resources/js/components/ui/crm-table/TableEmpty.vue
new file mode 100644
index 0000000..9519328
--- /dev/null
+++ b/resources/js/components/ui/crm-table/TableEmpty.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+import TableCell from "./TableCell.vue"
+import TableRow from "./TableRow.vue"
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes["class"]
+  colspan?: number
+}>(), {
+  colspan: 1,
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <TableRow>
+    <TableCell
+      :class="
+        cn(
+          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+          props.class,
+        )
+      "
+      v-bind="delegatedProps"
+    >
+      <div class="flex items-center justify-center py-10">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>
diff --git a/resources/js/components/ui/crm-table/TableFooter.vue b/resources/js/components/ui/crm-table/TableFooter.vue
new file mode 100644
index 0000000..c5e5056
--- /dev/null
+++ b/resources/js/components/ui/crm-table/TableFooter.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <tfoot :class="cn('font-medium [&>tr]:border-none [&>tr]:bg-transparent [&>tr]:hover:bg-transparent [&_tr]:dark:hover:bg-transparent', props.class)">
+    <slot />
+  </tfoot>
+</template>
diff --git a/resources/js/components/ui/crm-table/TableHead.vue b/resources/js/components/ui/crm-table/TableHead.vue
new file mode 100644
index 0000000..ddf635c
--- /dev/null
+++ b/resources/js/components/ui/crm-table/TableHead.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <th :class="cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
+    <slot />
+  </th>
+</template>
diff --git a/resources/js/components/ui/crm-table/TableHeader.vue b/resources/js/components/ui/crm-table/TableHeader.vue
new file mode 100644
index 0000000..1af186b
--- /dev/null
+++ b/resources/js/components/ui/crm-table/TableHeader.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <thead :class="cn('[&_tr]:border-none [&_tr]:bg-main [&_tr]:hover:bg-transparent [&_tr]:dark:hover:bg-transparent', props.class)">
+    <slot />
+  </thead>
+</template>
diff --git a/resources/js/components/ui/crm-table/TableRow.vue b/resources/js/components/ui/crm-table/TableRow.vue
new file mode 100644
index 0000000..c92fbab
--- /dev/null
+++ b/resources/js/components/ui/crm-table/TableRow.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <tr :class="cn('hover:bg-accent hover:dark:bg-background/75 border-b transition-colors data-[state=selected]:bg-muted select-none md:select-auto cursor-default bg-background', props.class)">
+    <slot />
+  </tr>
+</template>
diff --git a/resources/js/components/ui/crm-table/index.ts b/resources/js/components/ui/crm-table/index.ts
new file mode 100644
index 0000000..3be308b
--- /dev/null
+++ b/resources/js/components/ui/crm-table/index.ts
@@ -0,0 +1,9 @@
+export { default as Table } from "./Table.vue"
+export { default as TableBody } from "./TableBody.vue"
+export { default as TableCaption } from "./TableCaption.vue"
+export { default as TableCell } from "./TableCell.vue"
+export { default as TableEmpty } from "./TableEmpty.vue"
+export { default as TableFooter } from "./TableFooter.vue"
+export { default as TableHead } from "./TableHead.vue"
+export { default as TableHeader } from "./TableHeader.vue"
+export { default as TableRow } from "./TableRow.vue"
diff --git a/resources/js/components/ui/crm-table/utils.ts b/resources/js/components/ui/crm-table/utils.ts
new file mode 100644
index 0000000..3d4fd12
--- /dev/null
+++ b/resources/js/components/ui/crm-table/utils.ts
@@ -0,0 +1,10 @@
+import type { Updater } from "@tanstack/vue-table"
+
+import type { Ref } from "vue"
+import { isFunction } from "@tanstack/vue-table"
+
+export function valueUpdater<T>(updaterOrValue: Updater<T>, ref: Ref<T>) {
+  ref.value = isFunction(updaterOrValue)
+    ? updaterOrValue(ref.value)
+    : updaterOrValue
+}
diff --git a/resources/js/components/ui/dialog/DialogOverlay.vue b/resources/js/components/ui/dialog/DialogOverlay.vue
index 7790077..bbd6f0b 100644
--- a/resources/js/components/ui/dialog/DialogOverlay.vue
+++ b/resources/js/components/ui/dialog/DialogOverlay.vue
@@ -14,7 +14,7 @@ const delegatedProps = reactiveOmit(props, "class")
   <DialogOverlay
     data-slot="dialog-overlay"
     v-bind="delegatedProps"
-    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/20 dark:bg-black/50', props.class)"
   >
     <slot />
   </DialogOverlay>
diff --git a/resources/js/components/ui/number-input/NumberInput.vue b/resources/js/components/ui/number-input/NumberInput.vue
deleted file mode 100644
index 8de4ad0..0000000
--- a/resources/js/components/ui/number-input/NumberInput.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script lang="ts">
-import { component as VueNumber } from '@coders-tm/vue-number-format'
-import { defineComponent, HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-
-export default defineComponent({
-    components: {
-        VueNumber,
-    },
-
-    props: {
-        modelValue: {
-            type: [Number, String],
-            required: true,
-        }
-    },
-
-    emits: ['update:modelValue'],
-
-    computed: {
-        value: {
-            get(): number {
-                if (typeof this.modelValue === 'string') {
-                    const parsedValue = parseFloat(this.modelValue.replace(',', '.'))
-                    return isNaN(parsedValue) ? 0 : parsedValue
-                }
-                return this.modelValue || 0
-            },
-            set(value: number) {
-                this.$emit('update:modelValue', value)
-            },
-        },
-    },
-
-    data() {
-        return {
-            number: {
-                decimal: ',',
-                separator: '.',
-                prefix: '',
-                suffix: ' €',
-                precision: 2,
-                minimumFractionDigits: 2,
-                maximumFractionDigits: 2,
-                masked: false,
-            } as {
-                decimal: string;
-                separator: string;
-                prefix: string;
-                suffix: string;
-                precision: number;
-                minimumFractionDigits: number;
-                maximumFractionDigits: number;
-                masked: boolean;
-            },
-        }
-    },
-})
-</script>
-
-<template>
-    <div class="flex items-center gap-2">
-        <vue-number class="file:text-foreground border-input flex min-w-4 rounded-lg text-base transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive tabular-nums h-6 py-0 px-1 m-0 bg-transparent border-none dark:bg-transparent hover:border-1
-dark:hover:border-1 placeholder:text-muted-foreground/30 shadow-none w-28 text-right" v-model="value"
-            v-bind="number" />
-    </div>
-</template>
\ No newline at end of file
diff --git a/resources/js/components/ui/progress/Progress.vue b/resources/js/components/ui/progress/Progress.vue
index 005940d..a7b9773 100644
--- a/resources/js/components/ui/progress/Progress.vue
+++ b/resources/js/components/ui/progress/Progress.vue
@@ -29,7 +29,7 @@ const delegatedProps = reactiveOmit(props, "class")
     "
   >
     <ProgressIndicator
-      class="h-full w-full flex-1 bg-primary-foreground transition-all"
+      class="h-full w-full flex-1 bg-current transition-all"
       :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
     />
   </ProgressRoot>
diff --git a/resources/js/components/ui/separator/Separator.vue b/resources/js/components/ui/separator/Separator.vue
index 5429089..3daf562 100644
--- a/resources/js/components/ui/separator/Separator.vue
+++ b/resources/js/components/ui/separator/Separator.vue
@@ -17,11 +17,11 @@ const delegatedProps = reactiveOmit(props, "class")
 
 <template>
   <Separator
-    data-slot="separator-root"
     v-bind="delegatedProps"
     :class="
       cn(
-        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        'shrink-0 bg-border',
+        props.orientation === 'horizontal' ? 'h-px w-full' : 'w-px h-full',
         props.class,
       )
     "
diff --git a/resources/js/components/ui/sheet/Sheet.vue b/resources/js/components/ui/sheet/Sheet.vue
index 47b0968..8522f84 100644
--- a/resources/js/components/ui/sheet/Sheet.vue
+++ b/resources/js/components/ui/sheet/Sheet.vue
@@ -9,7 +9,11 @@ const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <DialogRoot v-bind="forwarded">
-    <slot />
+  <DialogRoot
+    v-slot="slotProps"
+    data-slot="sheet"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
   </DialogRoot>
 </template>
diff --git a/resources/js/components/ui/sheet/SheetClose.vue b/resources/js/components/ui/sheet/SheetClose.vue
index 0295976..39a942c 100644
--- a/resources/js/components/ui/sheet/SheetClose.vue
+++ b/resources/js/components/ui/sheet/SheetClose.vue
@@ -6,7 +6,10 @@ const props = defineProps<DialogCloseProps>()
 </script>
 
 <template>
-  <DialogClose v-bind="props">
+  <DialogClose
+    data-slot="sheet-close"
+    v-bind="props"
+  >
     <slot />
   </DialogClose>
 </template>
diff --git a/resources/js/components/ui/sheet/SheetContent.vue b/resources/js/components/ui/sheet/SheetContent.vue
index b11d102..e0c4b8f 100644
--- a/resources/js/components/ui/sheet/SheetContent.vue
+++ b/resources/js/components/ui/sheet/SheetContent.vue
@@ -1,31 +1,29 @@
 <script setup lang="ts">
 import type { DialogContentEmits, DialogContentProps } from "reka-ui"
 import type { HTMLAttributes } from "vue"
-import type { SheetVariants } from "."
 import { reactiveOmit } from "@vueuse/core"
 import { X } from "lucide-vue-next"
 import {
   DialogClose,
   DialogContent,
-
-  DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
 } from "reka-ui"
 import { cn } from "@/lib/utils"
-import { sheetVariants } from "."
+import SheetOverlay from "./SheetOverlay.vue"
 
 interface SheetContentProps extends DialogContentProps {
   class?: HTMLAttributes["class"]
-  side?: SheetVariants["side"]
+  side?: "top" | "right" | "bottom" | "left"
 }
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps<SheetContentProps>()
-
+const props = withDefaults(defineProps<SheetContentProps>(), {
+  side: "right",
+})
 const emits = defineEmits<DialogContentEmits>()
 
 const delegatedProps = reactiveOmit(props, "class", "side")
@@ -35,19 +33,29 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
 <template>
   <DialogPortal>
-    <DialogOverlay
-      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-    />
+    <SheetOverlay />
     <DialogContent
-      :class="cn(sheetVariants({ side }), props.class)"
-      v-bind="{ ...forwarded, ...$attrs }"
+      data-slot="sheet-content"
+      :class="cn(
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+        side === 'right'
+          && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+        side === 'left'
+          && 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+        side === 'top'
+          && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+        side === 'bottom'
+          && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+        props.class)"
+      v-bind="{ ...$attrs, ...forwarded }"
     >
       <slot />
 
       <DialogClose
-        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
       >
-        <X class="w-4 h-4 text-muted-foreground" />
+        <X class="size-4" />
+        <span class="sr-only">Close</span>
       </DialogClose>
     </DialogContent>
   </DialogPortal>
diff --git a/resources/js/components/ui/sheet/SheetDescription.vue b/resources/js/components/ui/sheet/SheetDescription.vue
index 455c2f4..6c8ba0a 100644
--- a/resources/js/components/ui/sheet/SheetDescription.vue
+++ b/resources/js/components/ui/sheet/SheetDescription.vue
@@ -12,7 +12,8 @@ const delegatedProps = reactiveOmit(props, "class")
 
 <template>
   <DialogDescription
-    :class="cn('text-sm text-muted-foreground', props.class)"
+    data-slot="sheet-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
     v-bind="delegatedProps"
   >
     <slot />
diff --git a/resources/js/components/ui/sheet/SheetFooter.vue b/resources/js/components/ui/sheet/SheetFooter.vue
index 5f481e5..5fcf751 100644
--- a/resources/js/components/ui/sheet/SheetFooter.vue
+++ b/resources/js/components/ui/sheet/SheetFooter.vue
@@ -7,11 +7,8 @@ const props = defineProps<{ class?: HTMLAttributes["class"] }>()
 
 <template>
   <div
-    :class="
-      cn(
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
-        props.class,
-      )
+    data-slot="sheet-footer"
+    :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)
     "
   >
     <slot />
diff --git a/resources/js/components/ui/sheet/SheetHeader.vue b/resources/js/components/ui/sheet/SheetHeader.vue
index f97d24a..b6305ab 100644
--- a/resources/js/components/ui/sheet/SheetHeader.vue
+++ b/resources/js/components/ui/sheet/SheetHeader.vue
@@ -7,9 +7,8 @@ const props = defineProps<{ class?: HTMLAttributes["class"] }>()
 
 <template>
   <div
-    :class="
-      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
-    "
+    data-slot="sheet-header"
+    :class="cn('flex flex-col gap-1.5 p-4', props.class)"
   >
     <slot />
   </div>
diff --git a/resources/js/components/ui/sheet/SheetOverlay.vue b/resources/js/components/ui/sheet/SheetOverlay.vue
index 61fd8db..220452a 100644
--- a/resources/js/components/ui/sheet/SheetOverlay.vue
+++ b/resources/js/components/ui/sheet/SheetOverlay.vue
@@ -1,15 +1,13 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { DialogOverlay, type DialogOverlayProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import type { DialogOverlayProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogOverlay } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, "class")
 </script>
 
 <template>
diff --git a/resources/js/components/ui/sheet/SheetTitle.vue b/resources/js/components/ui/sheet/SheetTitle.vue
index 5870787..889ae54 100644
--- a/resources/js/components/ui/sheet/SheetTitle.vue
+++ b/resources/js/components/ui/sheet/SheetTitle.vue
@@ -12,7 +12,8 @@ const delegatedProps = reactiveOmit(props, "class")
 
 <template>
   <DialogTitle
-    :class="cn('text-lg font-semibold text-foreground', props.class)"
+    data-slot="sheet-title"
+    :class="cn('text-foreground font-semibold', props.class)"
     v-bind="delegatedProps"
   >
     <slot />
diff --git a/resources/js/components/ui/sheet/SheetTrigger.vue b/resources/js/components/ui/sheet/SheetTrigger.vue
index a4fc3ee..41b121d 100644
--- a/resources/js/components/ui/sheet/SheetTrigger.vue
+++ b/resources/js/components/ui/sheet/SheetTrigger.vue
@@ -6,7 +6,10 @@ const props = defineProps<DialogTriggerProps>()
 </script>
 
 <template>
-  <DialogTrigger v-bind="props">
+  <DialogTrigger
+    data-slot="sheet-trigger"
+    v-bind="props"
+  >
     <slot />
   </DialogTrigger>
 </template>
diff --git a/resources/js/components/ui/sheet/index.ts b/resources/js/components/ui/sheet/index.ts
index a370633..7c70e5d 100644
--- a/resources/js/components/ui/sheet/index.ts
+++ b/resources/js/components/ui/sheet/index.ts
@@ -1,6 +1,3 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
-
 export { default as Sheet } from "./Sheet.vue"
 export { default as SheetClose } from "./SheetClose.vue"
 export { default as SheetContent } from "./SheetContent.vue"
@@ -9,24 +6,3 @@ export { default as SheetFooter } from "./SheetFooter.vue"
 export { default as SheetHeader } from "./SheetHeader.vue"
 export { default as SheetTitle } from "./SheetTitle.vue"
 export { default as SheetTrigger } from "./SheetTrigger.vue"
-
-export const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
-            "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
-            "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: {
-      side: "right",
-    },
-  },
-)
-
-export type SheetVariants = VariantProps<typeof sheetVariants>
diff --git a/resources/js/components/ui/sidebar/SidebarContent.vue b/resources/js/components/ui/sidebar/SidebarContent.vue
index 72214da..8ca2782 100644
--- a/resources/js/components/ui/sidebar/SidebarContent.vue
+++ b/resources/js/components/ui/sidebar/SidebarContent.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <div
-    data-slot="sidebar-content"
     data-sidebar="content"
-    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden', props.class)"
+    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
   >
     <slot />
   </div>
diff --git a/resources/js/components/ui/sidebar/SidebarFooter.vue b/resources/js/components/ui/sidebar/SidebarFooter.vue
index 7616ee8..f41ea98 100644
--- a/resources/js/components/ui/sidebar/SidebarFooter.vue
+++ b/resources/js/components/ui/sidebar/SidebarFooter.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <div
-    data-slot="sidebar-footer"
     data-sidebar="footer"
-    :class="cn('flex flex-col gap-2 p-2 overflow-x-hidden', props.class)"
+    :class="cn('flex flex-col gap-2 p-2', props.class)"
   >
     <slot />
   </div>
diff --git a/resources/js/components/ui/sidebar/SidebarGroup.vue b/resources/js/components/ui/sidebar/SidebarGroup.vue
index 57a099f..874c393 100644
--- a/resources/js/components/ui/sidebar/SidebarGroup.vue
+++ b/resources/js/components/ui/sidebar/SidebarGroup.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <div
-    data-slot="sidebar-group"
     data-sidebar="group"
     :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)"
   >
diff --git a/resources/js/components/ui/sidebar/SidebarGroupAction.vue b/resources/js/components/ui/sidebar/SidebarGroupAction.vue
index 35713bb..b2de508 100644
--- a/resources/js/components/ui/sidebar/SidebarGroupAction.vue
+++ b/resources/js/components/ui/sidebar/SidebarGroupAction.vue
@@ -1,23 +1,22 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive } from 'reka-ui'
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<PrimitiveProps & {
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <Primitive
-    data-slot="sidebar-group-action"
     data-sidebar="group-action"
     :as="as"
     :as-child="asChild"
     :class="cn(
-      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'after:absolute after:-inset-2 md:after:hidden',
+      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'after:absolute after:-inset-2 after:md:hidden',
       'group-data-[collapsible=icon]:hidden',
       props.class,
     )"
diff --git a/resources/js/components/ui/sidebar/SidebarGroupContent.vue b/resources/js/components/ui/sidebar/SidebarGroupContent.vue
index 5d5e2dd..3ab938d 100644
--- a/resources/js/components/ui/sidebar/SidebarGroupContent.vue
+++ b/resources/js/components/ui/sidebar/SidebarGroupContent.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <div
-    data-slot="sidebar-group-content"
     data-sidebar="group-content"
     :class="cn('w-full text-sm', props.class)"
   >
diff --git a/resources/js/components/ui/sidebar/SidebarGroupLabel.vue b/resources/js/components/ui/sidebar/SidebarGroupLabel.vue
index 19e1117..4f7f398 100644
--- a/resources/js/components/ui/sidebar/SidebarGroupLabel.vue
+++ b/resources/js/components/ui/sidebar/SidebarGroupLabel.vue
@@ -1,22 +1,21 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive } from 'reka-ui'
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<PrimitiveProps & {
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <Primitive
-    data-slot="sidebar-group-label"
     data-sidebar="group-label"
     :as="as"
     :as-child="asChild"
     :class="cn(
-      'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
       'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
       props.class)"
   >
diff --git a/resources/js/components/ui/sidebar/SidebarHeader.vue b/resources/js/components/ui/sidebar/SidebarHeader.vue
index 00673f7..4d188bc 100644
--- a/resources/js/components/ui/sidebar/SidebarHeader.vue
+++ b/resources/js/components/ui/sidebar/SidebarHeader.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <div
-    data-slot="sidebar-header"
     data-sidebar="header"
     :class="cn('flex flex-col gap-2 p-2', props.class)"
   >
diff --git a/resources/js/components/ui/sidebar/SidebarInput.vue b/resources/js/components/ui/sidebar/SidebarInput.vue
index ecaa977..187fd70 100644
--- a/resources/js/components/ui/sidebar/SidebarInput.vue
+++ b/resources/js/components/ui/sidebar/SidebarInput.vue
@@ -1,19 +1,18 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 import { Input } from '@/components/ui/input'
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <Input
-    data-slot="sidebar-input"
     data-sidebar="input"
     :class="cn(
-      'bg-background h-8 w-full shadow-none',
+      'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
       props.class,
     )"
   >
diff --git a/resources/js/components/ui/sidebar/SidebarInset.vue b/resources/js/components/ui/sidebar/SidebarInset.vue
index 947331a..8941c2b 100644
--- a/resources/js/components/ui/sidebar/SidebarInset.vue
+++ b/resources/js/components/ui/sidebar/SidebarInset.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <main
-    data-slot="sidebar-inset"
     :class="cn(
-      'bg-background relative flex w-full flex-1 flex-col',
-      'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-0',
+      'relative flex min-h-svh flex-1 flex-col bg-background',
+      'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
       props.class,
     )"
   >
diff --git a/resources/js/components/ui/sidebar/SidebarMenu.vue b/resources/js/components/ui/sidebar/SidebarMenu.vue
index 59ec071..5971286 100644
--- a/resources/js/components/ui/sidebar/SidebarMenu.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenu.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <ul
-    data-slot="sidebar-menu"
     data-sidebar="menu"
     :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)"
   >
diff --git a/resources/js/components/ui/sidebar/SidebarMenuAction.vue b/resources/js/components/ui/sidebar/SidebarMenuAction.vue
index 2429433..0e21fcf 100644
--- a/resources/js/components/ui/sidebar/SidebarMenuAction.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenuAction.vue
@@ -1,29 +1,29 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'reka-ui'
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
 
 const props = withDefaults(defineProps<PrimitiveProps & {
   showOnHover?: boolean
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>(), {
-  as: 'button',
+  as: "button",
 })
 </script>
 
 <template>
   <Primitive
-    data-slot="sidebar-menu-action"
     data-sidebar="menu-action"
     :class="cn(
-      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'after:absolute after:-inset-2 md:after:hidden',
+      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
+      'after:absolute after:-inset-2 after:md:hidden',
       'peer-data-[size=sm]/menu-button:top-1',
       'peer-data-[size=default]/menu-button:top-1.5',
       'peer-data-[size=lg]/menu-button:top-2.5',
       'group-data-[collapsible=icon]:hidden',
       showOnHover
-        && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
       props.class,
     )"
     :as="as"
diff --git a/resources/js/components/ui/sidebar/SidebarMenuBadge.vue b/resources/js/components/ui/sidebar/SidebarMenuBadge.vue
index 3984b33..26cf916 100644
--- a/resources/js/components/ui/sidebar/SidebarMenuBadge.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenuBadge.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <div
-    data-slot="sidebar-menu-badge"
     data-sidebar="menu-badge"
     :class="cn(
-      'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
       'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
       'peer-data-[size=sm]/menu-button:top-1',
       'peer-data-[size=default]/menu-button:top-1.5',
diff --git a/resources/js/components/ui/sidebar/SidebarMenuButton.vue b/resources/js/components/ui/sidebar/SidebarMenuButton.vue
index ac6926b..502d395 100644
--- a/resources/js/components/ui/sidebar/SidebarMenuButton.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenuButton.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import type { Component } from "vue"
+import type { SidebarMenuButtonProps } from "./SidebarMenuButtonChild.vue"
+import { reactiveOmit } from "@vueuse/core"
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import { type Component, computed } from 'vue'
-import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
-import { useSidebar } from './utils'
+import SidebarMenuButtonChild from "./SidebarMenuButtonChild.vue"
+import { useSidebar } from "./utils"
 
 defineOptions({
   inheritAttrs: false,
@@ -11,17 +13,14 @@ defineOptions({
 const props = withDefaults(defineProps<SidebarMenuButtonProps & {
   tooltip?: string | Component
 }>(), {
-  as: 'button',
-  variant: 'default',
-  size: 'default',
+  as: "button",
+  variant: "default",
+  size: "default",
 })
 
 const { isMobile, state } = useSidebar()
 
-const delegatedProps = computed(() => {
-  const { tooltip, ...delegated } = props
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, "tooltip")
 </script>
 
 <template>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuButtonChild.vue b/resources/js/components/ui/sidebar/SidebarMenuButtonChild.vue
index 0b8979c..c652acf 100644
--- a/resources/js/components/ui/sidebar/SidebarMenuButtonChild.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenuButtonChild.vue
@@ -1,26 +1,27 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive, type PrimitiveProps } from 'reka-ui'
-import { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { SidebarMenuButtonVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { sidebarMenuButtonVariants } from "."
 
 export interface SidebarMenuButtonProps extends PrimitiveProps {
-  variant?: SidebarMenuButtonVariants['variant']
-  size?: SidebarMenuButtonVariants['size']
+  variant?: SidebarMenuButtonVariants["variant"]
+  size?: SidebarMenuButtonVariants["size"]
   isActive?: boolean
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }
 
 const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
-  as: 'button',
-  variant: 'default',
-  size: 'default',
+  as: "button",
+  variant: "default",
+  size: "default",
 })
 </script>
 
 <template>
   <Primitive
-    data-slot="sidebar-menu-button"
     data-sidebar="menu-button"
     :data-size="size"
     :data-active="isActive"
diff --git a/resources/js/components/ui/sidebar/SidebarMenuItem.vue b/resources/js/components/ui/sidebar/SidebarMenuItem.vue
index b7b4d3f..42e5fda 100644
--- a/resources/js/components/ui/sidebar/SidebarMenuItem.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenuItem.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <li
-    data-slot="sidebar-menu-item"
     data-sidebar="menu-item"
     :class="cn('group/menu-item relative', props.class)"
   >
diff --git a/resources/js/components/ui/sidebar/SidebarMenuSkeleton.vue b/resources/js/components/ui/sidebar/SidebarMenuSkeleton.vue
index 6be4243..c3a92ce 100644
--- a/resources/js/components/ui/sidebar/SidebarMenuSkeleton.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenuSkeleton.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { computed } from "vue"
+import { cn } from "@/lib/utils"
 import { Skeleton } from '@/components/ui/skeleton'
-import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<{
   showIcon?: boolean
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 
 const width = computed(() => {
-  return `${Math.floor(Math.random() * 40) + 50}%`;
+  return `${Math.floor(Math.random() * 40) + 50}%`
 })
 </script>
 
 <template>
   <div
-    data-slot="sidebar-menu-skeleton"
     data-sidebar="menu-skeleton"
-    :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)"
+    :class="cn('rounded-md h-8 flex gap-2 px-2 items-center', props.class)"
   >
     <Skeleton
       v-if="showIcon"
@@ -26,7 +26,7 @@ const width = computed(() => {
     />
 
     <Skeleton
-      class="h-4 max-w-(--skeleton-width) flex-1"
+      class="h-4 flex-1 max-w-[--skeleton-width]"
       data-sidebar="menu-skeleton-text"
       :style="{ '--skeleton-width': width }"
     />
diff --git a/resources/js/components/ui/sidebar/SidebarMenuSub.vue b/resources/js/components/ui/sidebar/SidebarMenuSub.vue
index 11aec64..aee769c 100644
--- a/resources/js/components/ui/sidebar/SidebarMenuSub.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenuSub.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <ul
-    data-slot="sidebar-menu-sub"
     data-sidebar="menu-badge"
     :class="cn(
-      'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
       'group-data-[collapsible=icon]:hidden',
       props.class,
     )"
diff --git a/resources/js/components/ui/sidebar/SidebarMenuSubButton.vue b/resources/js/components/ui/sidebar/SidebarMenuSubButton.vue
index 98e8e56..d86a14c 100644
--- a/resources/js/components/ui/sidebar/SidebarMenuSubButton.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenuSubButton.vue
@@ -1,29 +1,28 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { Primitive } from 'reka-ui'
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
 
 const props = withDefaults(defineProps<PrimitiveProps & {
-  size?: 'sm' | 'md'
+  size?: "sm" | "md"
   isActive?: boolean
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>(), {
-  as: 'a',
-  size: 'md',
+  as: "a",
+  size: "md",
 })
 </script>
 
 <template>
   <Primitive
-    data-slot="sidebar-menu-sub-button"
     data-sidebar="menu-sub-button"
     :as="as"
     :as-child="asChild"
     :data-size="size"
     :data-active="isActive"
     :class="cn(
-      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
       'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
       size === 'sm' && 'text-xs',
       size === 'md' && 'text-sm',
diff --git a/resources/js/components/ui/sidebar/SidebarMenuSubItem.vue b/resources/js/components/ui/sidebar/SidebarMenuSubItem.vue
index f0c35bc..b04030b 100644
--- a/resources/js/components/ui/sidebar/SidebarMenuSubItem.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenuSubItem.vue
@@ -1,18 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
 </script>
 
 <template>
-  <li
-    data-slot="sidebar-menu-sub-item"
-    data-sidebar="menu-sub-item"
-    :class="cn('group/menu-sub-item relative', props.class)"
-  >
+  <li>
     <slot />
   </li>
 </template>
diff --git a/resources/js/components/ui/sidebar/SidebarProvider.vue b/resources/js/components/ui/sidebar/SidebarProvider.vue
index 85e4198..6776fac 100644
--- a/resources/js/components/ui/sidebar/SidebarProvider.vue
+++ b/resources/js/components/ui/sidebar/SidebarProvider.vue
@@ -1,27 +1,28 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'
-import { TooltipProvider } from 'reka-ui'
-import { computed, type HTMLAttributes, type Ref, ref } from 'vue'
-import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'
+import type { HTMLAttributes, Ref } from "vue"
+import { defaultDocument, useEventListener, useMediaQuery, useVModel } from "@vueuse/core"
+import { TooltipProvider } from "reka-ui"
+import { computed, ref } from "vue"
+import { cn } from "@/lib/utils"
+import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from "./utils"
 
 const props = withDefaults(defineProps<{
   defaultOpen?: boolean
   open?: boolean
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>(), {
-  defaultOpen: true,
+  defaultOpen: !defaultDocument?.cookie.includes(`${SIDEBAR_COOKIE_NAME}=false`),
   open: undefined,
 })
 
 const emits = defineEmits<{
-  'update:open': [open: boolean]
+  "update:open": [open: boolean]
 }>()
 
-const isMobile = useMediaQuery('(max-width: 768px)')
+const isMobile = useMediaQuery("(max-width: 768px)")
 const openMobile = ref(false)
 
-const open = useVModel(props, 'open', emits, {
+const open = useVModel(props, "open", emits, {
   defaultValue: props.defaultOpen ?? false,
   passive: (props.open === undefined) as false,
 }) as Ref<boolean>
@@ -42,7 +43,7 @@ function toggleSidebar() {
   return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
 }
 
-useEventListener('keydown', (event: KeyboardEvent) => {
+useEventListener("keydown", (event: KeyboardEvent) => {
   if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
     event.preventDefault()
     toggleSidebar()
@@ -51,7 +52,7 @@ useEventListener('keydown', (event: KeyboardEvent) => {
 
 // We add a state so that we can do data-state="expanded" or "collapsed".
 // This makes it easier to style the sidebar with Tailwind classes.
-const state = computed(() => open.value ? 'expanded' : 'collapsed')
+const state = computed(() => open.value ? "expanded" : "collapsed")
 
 provideSidebarContext({
   state,
@@ -66,18 +67,14 @@ provideSidebarContext({
 
 <template>
   <TooltipProvider :delay-duration="0">
-    <!-- :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)" -->
-    <!-- :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-linear-45 from-orange-200 to-orange-300 flex min-h-svh w-full', props.class)" -->
-    <!-- linear-[45deg,rgb(235,217,178)_0%,_rgb(237,183,83)_100%] -->
     <div
-      data-slot="sidebar-wrapper"
       :style="{
         '--sidebar-width': SIDEBAR_WIDTH,
         '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
       }"
-      :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
+      :class="cn('group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar', props.class)"
       v-bind="$attrs"
-      >
+    >
       <slot />
     </div>
   </TooltipProvider>
diff --git a/resources/js/components/ui/sidebar/SidebarRail.vue b/resources/js/components/ui/sidebar/SidebarRail.vue
index 07e59be..85fe930 100644
--- a/resources/js/components/ui/sidebar/SidebarRail.vue
+++ b/resources/js/components/ui/sidebar/SidebarRail.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { useSidebar } from './utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { useSidebar } from "./utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 
 const { toggleSidebar } = useSidebar()
@@ -13,15 +13,14 @@ const { toggleSidebar } = useSidebar()
 <template>
   <button
     data-sidebar="rail"
-    data-slot="sidebar-rail"
     aria-label="Toggle Sidebar"
     :tabindex="-1"
     title="Toggle Sidebar"
     :class="cn(
-      'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
-      'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
       '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-      'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
       '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
       '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
       props.class,
diff --git a/resources/js/components/ui/sidebar/SidebarSeparator.vue b/resources/js/components/ui/sidebar/SidebarSeparator.vue
index 1803bff..2cf214d 100644
--- a/resources/js/components/ui/sidebar/SidebarSeparator.vue
+++ b/resources/js/components/ui/sidebar/SidebarSeparator.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 import { Separator } from '@/components/ui/separator'
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
   <Separator
-    data-slot="sidebar-separator"
     data-sidebar="separator"
-    :class="cn('bg-sidebar-border mx-2 w-auto', props.class)"
+    :class="cn('mx-2 w-auto bg-sidebar-border', props.class)"
   >
     <slot />
   </Separator>
diff --git a/resources/js/components/ui/sidebar/SidebarTrigger.vue b/resources/js/components/ui/sidebar/SidebarTrigger.vue
index eeffaa6..51fec83 100644
--- a/resources/js/components/ui/sidebar/SidebarTrigger.vue
+++ b/resources/js/components/ui/sidebar/SidebarTrigger.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { PanelLeft } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
 import { Button } from '@/components/ui/button'
-import { PanelLeft } from 'lucide-vue-next'
-import { useSidebar } from './utils'
+import { useSidebar } from "./utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 
 const { toggleSidebar } = useSidebar()
@@ -15,13 +15,12 @@ const { toggleSidebar } = useSidebar()
 <template>
   <Button
     data-sidebar="trigger"
-    data-slot="sidebar-trigger"
     variant="ghost"
     size="icon"
     :class="cn('h-7 w-7', props.class)"
     @click="toggleSidebar"
   >
-    <PanelLeft stroke-width="1.5" />
+    <PanelLeft />
     <span class="sr-only">Toggle Sidebar</span>
   </Button>
 </template>
diff --git a/resources/js/components/ui/sidebar/index.ts b/resources/js/components/ui/sidebar/index.ts
index accd624..d9023e5 100644
--- a/resources/js/components/ui/sidebar/index.ts
+++ b/resources/js/components/ui/sidebar/index.ts
@@ -1,58 +1,58 @@
-import type { VariantProps } from 'class-variance-authority'
-import type { HTMLAttributes } from 'vue'
-import { cva } from 'class-variance-authority'
+import type { VariantProps } from "class-variance-authority"
+import type { HTMLAttributes } from "vue"
+import { cva } from "class-variance-authority"
 
 export interface SidebarProps {
-  side?: 'left' | 'right'
-  variant?: 'sidebar' | 'floating' | 'inset'
-  collapsible?: 'offcanvas' | 'icon' | 'none'
-  class?: HTMLAttributes['class']
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+  class?: HTMLAttributes["class"]
 }
 
-export { default as Sidebar } from './Sidebar.vue'
-export { default as SidebarContent } from './SidebarContent.vue'
-export { default as SidebarFooter } from './SidebarFooter.vue'
-export { default as SidebarGroup } from './SidebarGroup.vue'
-export { default as SidebarGroupAction } from './SidebarGroupAction.vue'
-export { default as SidebarGroupContent } from './SidebarGroupContent.vue'
-export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'
-export { default as SidebarHeader } from './SidebarHeader.vue'
-export { default as SidebarInput } from './SidebarInput.vue'
-export { default as SidebarInset } from './SidebarInset.vue'
-export { default as SidebarMenu } from './SidebarMenu.vue'
-export { default as SidebarMenuAction } from './SidebarMenuAction.vue'
-export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'
-export { default as SidebarMenuButton } from './SidebarMenuButton.vue'
-export { default as SidebarMenuItem } from './SidebarMenuItem.vue'
-export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'
-export { default as SidebarMenuSub } from './SidebarMenuSub.vue'
-export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'
-export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'
-export { default as SidebarProvider } from './SidebarProvider.vue'
-export { default as SidebarRail } from './SidebarRail.vue'
-export { default as SidebarSeparator } from './SidebarSeparator.vue'
-export { default as SidebarTrigger } from './SidebarTrigger.vue'
+export { default as Sidebar } from "./Sidebar.vue"
+export { default as SidebarContent } from "./SidebarContent.vue"
+export { default as SidebarFooter } from "./SidebarFooter.vue"
+export { default as SidebarGroup } from "./SidebarGroup.vue"
+export { default as SidebarGroupAction } from "./SidebarGroupAction.vue"
+export { default as SidebarGroupContent } from "./SidebarGroupContent.vue"
+export { default as SidebarGroupLabel } from "./SidebarGroupLabel.vue"
+export { default as SidebarHeader } from "./SidebarHeader.vue"
+export { default as SidebarInput } from "./SidebarInput.vue"
+export { default as SidebarInset } from "./SidebarInset.vue"
+export { default as SidebarMenu } from "./SidebarMenu.vue"
+export { default as SidebarMenuAction } from "./SidebarMenuAction.vue"
+export { default as SidebarMenuBadge } from "./SidebarMenuBadge.vue"
+export { default as SidebarMenuButton } from "./SidebarMenuButton.vue"
+export { default as SidebarMenuItem } from "./SidebarMenuItem.vue"
+export { default as SidebarMenuSkeleton } from "./SidebarMenuSkeleton.vue"
+export { default as SidebarMenuSub } from "./SidebarMenuSub.vue"
+export { default as SidebarMenuSubButton } from "./SidebarMenuSubButton.vue"
+export { default as SidebarMenuSubItem } from "./SidebarMenuSubItem.vue"
+export { default as SidebarProvider } from "./SidebarProvider.vue"
+export { default as SidebarRail } from "./SidebarRail.vue"
+export { default as SidebarSeparator } from "./SidebarSeparator.vue"
+export { default as SidebarTrigger } from "./SidebarTrigger.vue"
 
-export { useSidebar } from './utils'
+export { useSidebar } from "./utils"
 
 export const sidebarMenuButtonVariants = cva(
-  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:pr-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
         outline:
-          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
       },
       size: {
-        default: 'h-8 text-sm',
-        sm: 'h-7 text-xs',
-        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
       },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
     },
   },
 )
diff --git a/resources/js/components/ui/sidebar/utils.ts b/resources/js/components/ui/sidebar/utils.ts
index ee8f5b8..6e57eeb 100644
--- a/resources/js/components/ui/sidebar/utils.ts
+++ b/resources/js/components/ui/sidebar/utils.ts
@@ -1,19 +1,19 @@
-import type { ComputedRef, Ref } from 'vue'
-import { createContext } from 'reka-ui'
+import type { ComputedRef, Ref } from "vue"
+import { createContext } from "reka-ui"
 
-export const SIDEBAR_COOKIE_NAME = 'sidebar_state'
+export const SIDEBAR_COOKIE_NAME = "sidebar_state"
 export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-export const SIDEBAR_WIDTH = '14rem'
-export const SIDEBAR_WIDTH_MOBILE = '18rem'
-export const SIDEBAR_WIDTH_ICON = '4rem'
-export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+export const SIDEBAR_WIDTH = "16rem"
+export const SIDEBAR_WIDTH_MOBILE = "18rem"
+export const SIDEBAR_WIDTH_ICON = "3rem"
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 
 export const [useSidebar, provideSidebarContext] = createContext<{
-  state: ComputedRef<'expanded' | 'collapsed'>
+  state: ComputedRef<"expanded" | "collapsed">
   open: Ref<boolean>
   setOpen: (value: boolean) => void
   isMobile: Ref<boolean>
   openMobile: Ref<boolean>
   setOpenMobile: (value: boolean) => void
   toggleSidebar: () => void
-}>('Sidebar')
+}>("Sidebar")
diff --git a/resources/js/components/ui/skeleton/Skeleton.vue b/resources/js/components/ui/skeleton/Skeleton.vue
index 153fe2c..0dadcef 100644
--- a/resources/js/components/ui/skeleton/Skeleton.vue
+++ b/resources/js/components/ui/skeleton/Skeleton.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 interface SkeletonProps {
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }
 
 const props = defineProps<SkeletonProps>()
diff --git a/resources/js/components/ui/skeleton/index.ts b/resources/js/components/ui/skeleton/index.ts
index be21fad..e5ce72c 100644
--- a/resources/js/components/ui/skeleton/index.ts
+++ b/resources/js/components/ui/skeleton/index.ts
@@ -1 +1 @@
-export { default as Skeleton } from './Skeleton.vue'
+export { default as Skeleton } from "./Skeleton.vue"
diff --git a/resources/js/components/ui/social-icon/SocialIcon.vue b/resources/js/components/ui/social-icon/SocialIcon.vue
index 6000e37..35b9910 100644
--- a/resources/js/components/ui/social-icon/SocialIcon.vue
+++ b/resources/js/components/ui/social-icon/SocialIcon.vue
@@ -19,7 +19,7 @@ const currentVariant = computed<SocialIconVariant>(() => {
 
 <template>
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-supported-dps="24x24" stroke="currentColor"
-        fill="transparent" stroke-width="1.5" :class="cn(props.class)" width="24" height="24" focusable="false">
+        fill="transparent"  :class="cn(props.class)" width="24" height="24" focusable="false">
         <g v-html="socialIconVariants[currentVariant]"></g>
     </svg>
 </template>
\ No newline at end of file
diff --git a/resources/js/components/ui/table/Table.vue b/resources/js/components/ui/table/Table.vue
index 0d0cd9b..26c7c45 100644
--- a/resources/js/components/ui/table/Table.vue
+++ b/resources/js/components/ui/table/Table.vue
@@ -8,8 +8,8 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div data-slot="table-container" class="relative w-full overflow-auto">
-    <table data-slot="table" :class="cn('w-full caption-bottom text-sm', props.class)">
+  <div class="relative w-full overflow-auto">
+    <table :class="cn('w-full caption-bottom text-sm', props.class)">
       <slot />
     </table>
   </div>
diff --git a/resources/js/components/ui/table/TableBody.vue b/resources/js/components/ui/table/TableBody.vue
index d14a2d3..fadb9a7 100644
--- a/resources/js/components/ui/table/TableBody.vue
+++ b/resources/js/components/ui/table/TableBody.vue
@@ -8,10 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <tbody
-    data-slot="table-body"
-    :class="cn('[&_tr:last-child]:border-0', props.class)"
-  >
+  <tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
     <slot />
   </tbody>
 </template>
diff --git a/resources/js/components/ui/table/TableCaption.vue b/resources/js/components/ui/table/TableCaption.vue
index 3630084..a2bf57f 100644
--- a/resources/js/components/ui/table/TableCaption.vue
+++ b/resources/js/components/ui/table/TableCaption.vue
@@ -8,10 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <caption
-    data-slot="table-caption"
-    :class="cn('text-muted-foreground mt-4 text-sm', props.class)"
-  >
+  <caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)">
     <slot />
   </caption>
 </template>
diff --git a/resources/js/components/ui/table/TableCell.vue b/resources/js/components/ui/table/TableCell.vue
index d6e9ed2..4a86e3a 100644
--- a/resources/js/components/ui/table/TableCell.vue
+++ b/resources/js/components/ui/table/TableCell.vue
@@ -9,10 +9,9 @@ const props = defineProps<{
 
 <template>
   <td
-    data-slot="table-cell"
     :class="
       cn(
-        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        'p-4 align-middle [&:has([role=checkbox])]:pr-0',
         props.class,
       )
     "
diff --git a/resources/js/components/ui/table/TableFooter.vue b/resources/js/components/ui/table/TableFooter.vue
index 29e0ce9..7f3bf64 100644
--- a/resources/js/components/ui/table/TableFooter.vue
+++ b/resources/js/components/ui/table/TableFooter.vue
@@ -8,10 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <tfoot
-    data-slot="table-footer"
-    :class="cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class)"
-  >
+  <tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
     <slot />
   </tfoot>
 </template>
diff --git a/resources/js/components/ui/table/TableHead.vue b/resources/js/components/ui/table/TableHead.vue
index 06d0022..ddf635c 100644
--- a/resources/js/components/ui/table/TableHead.vue
+++ b/resources/js/components/ui/table/TableHead.vue
@@ -8,10 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <th
-    data-slot="table-head"
-    :class="cn('text-muted-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)"
-  >
+  <th :class="cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
     <slot />
   </th>
 </template>
diff --git a/resources/js/components/ui/table/TableHeader.vue b/resources/js/components/ui/table/TableHeader.vue
index b4ab5cf..66e1e60 100644
--- a/resources/js/components/ui/table/TableHeader.vue
+++ b/resources/js/components/ui/table/TableHeader.vue
@@ -8,10 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <thead
-    data-slot="table-header"
-    :class="cn('[&_tr]:border-b', props.class)"
-  >
+  <thead :class="cn('[&_tr]:border-b', props.class)">
     <slot />
   </thead>
 </template>
diff --git a/resources/js/components/ui/table/TableRow.vue b/resources/js/components/ui/table/TableRow.vue
index 7c29a3a..036db30 100644
--- a/resources/js/components/ui/table/TableRow.vue
+++ b/resources/js/components/ui/table/TableRow.vue
@@ -8,10 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <tr
-    data-slot="table-row"
-    :class="cn('hover:bg-accent data-[state=selected]:bg-muted border-b transition-colors', props.class)"
-  >
+  <tr :class="cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)">
     <slot />
   </tr>
 </template>
diff --git a/resources/js/layouts/AppLayout.vue b/resources/js/layouts/AppLayout.vue
index f11f2d4..770fc26 100644
--- a/resources/js/layouts/AppLayout.vue
+++ b/resources/js/layouts/AppLayout.vue
@@ -6,7 +6,7 @@ import 'vue-sonner/style.css'
 import { Toaster } from 'vue-sonner'
 import { Info, CircleAlert, CircleCheck, LoaderCircle, Ban } from "lucide-vue-next"
 import { Button } from '@/components/ui/crm-button'
-import { SidebarProvider } from '@/components/ui/sidebar';
+import { SidebarProvider } from '@/components/ui/crm-sidebar';
 import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '@/components/ui/alert-dialog'
 import { alertStore } from '@/stores/alertStore';
 import { webcronStore } from '@/stores/webcronStore';
@@ -70,12 +70,12 @@ onMounted(() => {
         </template>
     </Toaster>
 
-    <div class="overflow-x-auto p-4 lg:p-8 lg:pl-4 print:bg-transparent print:p-0 print:m-0">
+    <div class="overflow-hidden print:bg-transparent">
 
         <SidebarProvider :default-open="isOpen">
             <AppSidebar />
 
-            <main class="w-full overflow-x-hidden">
+            <main class="w-full h-lvh overflow-auto bg-main print:bg-transparent border-l print:border-0 border-sidebar-border/50 p-4 md:p-6 lg:p-8">
                 <slot />
             </main>
         </SidebarProvider>
@@ -115,12 +115,5 @@ onMounted(() => {
         background-color: transparent;
     }
 
-    main {
-        margin: 0;
-        background-color: transparent;
-        border-radius: 0;
-        box-shadow: none;
-        outline: none;
-    }
 }
 </style>
\ No newline at end of file
diff --git a/resources/js/layouts/auth/AuthSplitLayout.vue b/resources/js/layouts/auth/AuthSplitLayout.vue
index e24e5a1..a4246a7 100644
--- a/resources/js/layouts/auth/AuthSplitLayout.vue
+++ b/resources/js/layouts/auth/AuthSplitLayout.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import AppLogoIcon from '@/components/AppLogoIcon.vue';
-import { home } from '@/routes';
 import { usePage } from '@inertiajs/vue3';
 
 const page = usePage();
@@ -26,7 +25,7 @@ defineProps<{
             <div class="mx-auto flex w-full flex-col justify-center space-y-12 sm:w-[350px]">
                 <div class="flex flex-col space-y-2">
 
-                    <div :href="home()" class="flex items-center gap-4">
+                    <div class="flex items-center gap-4">
                         <AppLogoIcon />
                         <div>
                             <h1 class="text-xl font-medium tracking-wide text-amber-50">{{ name }}</h1>
diff --git a/resources/js/layouts/settings/Layout.vue b/resources/js/layouts/settings/Layout.vue
index 41df118..830b494 100644
--- a/resources/js/layouts/settings/Layout.vue
+++ b/resources/js/layouts/settings/Layout.vue
@@ -44,10 +44,10 @@ const currentPath = typeof window !== undefined ? window.location.pathname : '';
             <Heading title="Einstellungen" description="Manage your profile and account settings" />
         </div>
 
-        <div class="flex flex-row flex-wrap gap-4 bg-background shadow rounded-lg p-6">
+        <div class="flex flex-row flex-wrap gap-4 bg-background shadow rounded-lg p-6 max-w-4xl">
 
-            <div class="flex flex-col lg:flex-row lg:space-x-12">
-                <aside class="w-full max-w-xl lg:w-48">
+            <div class="flex flex-col grow lg:flex-row lg:space-x-12">
+                <aside class="w-full max-w-xl lg:w-64">
                     <nav class="flex flex-col space-y-1 space-x-0">
                         <Button v-for="item in sidebarNavItems" :key="toUrl(item.href)" variant="ghost"
                             :class="['w-full justify-start', { 'bg-muted': urlIsActive(item.href, currentPath) }]"
@@ -61,8 +61,8 @@ const currentPath = typeof window !== undefined ? window.location.pathname : '';
 
                 <Separator class="my-6 lg:hidden" />
 
-                <div class="flex-1 md:max-w-2xl">
-                    <section class="max-w-xl space-y-12">
+                <div class="flex-1">
+                    <section class="space-y-12">
                         <slot />
                     </section>
                 </div>
diff --git a/resources/js/lib/utils.ts b/resources/js/lib/utils.ts
index 302a6b1..09d8a2c 100644
--- a/resources/js/lib/utils.ts
+++ b/resources/js/lib/utils.ts
@@ -3,10 +3,40 @@ import { clsx, type ClassValue } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 import { toast } from 'vue-sonner'
 
+
+// -----------------------------------------------------------------------------
+// Attributes, classes
+// -----------------------------------------------------------------------------
+
+// #region Clöasses
+
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
 }
 
+const randomColors = [
+    'bg-rose-200 dark:bg-rose-700',
+    'bg-lime-200 dark:bg-lime-700',
+    'bg-orange-200 dark:bg-orange-700',
+    'bg-sky-200 dark:bg-sky-700',
+    'bg-amber-200 dark:bg-amber-700',
+    'bg-blue-200 dark:bg-blue-700',
+    'bg-purple-200 dark:bg-purple-700'
+]
+
+export function bgColorForString(input: string): string {
+    let charCodeSum = 0;
+    for (let i = 0; i < input.length; i++) {
+        charCodeSum += input.charCodeAt(i)
+    }
+    return randomColors[charCodeSum % randomColors.length];
+}
+
+
+// -----------------------------------------------------------------------------
+// URLs
+// -----------------------------------------------------------------------------
+
 export function urlIsActive(urlToCheck: NonNullable<InertiaLinkProps['href']>, currentUrl: string) {
     return currentUrl.indexOf(toUrl(urlToCheck)) >= 0
 }
@@ -16,6 +46,25 @@ export function toUrl(href: NonNullable<InertiaLinkProps['href']>) {
 }
 
 
+// -----------------------------------------------------------------------------
+// Number helpers and formatting
+// -----------------------------------------------------------------------------
+
+export function toFixedRounded(num: number, precision: number): number {
+    return Number((Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision)).toFixed(precision))
+}
+
+export function randomInt(max: number) {
+    return Math.floor(Math.random() * max);
+}
+
+export function isNumeric(value: any) {
+    return !isNaN(parseFloat(value))
+}
+
+
+// Currency
+
 const currencyFormatter = new Intl.NumberFormat('de-DE', {
     style: 'currency',
     currency: 'EUR',
@@ -39,86 +88,122 @@ export function toRoundedCurrency(value: number | undefined) {
     return roundedCurrencyFormatter.format(toFixedRounded(value, 0));
 }
 
-export function toFixedRounded(num: number, precision: number): number {
-    return Number((Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision)).toFixed(precision))
+
+// Dates
+
+const locale = "de-De"
+const closeDaysThreshhold = 2
+const rtf = new Intl.RelativeTimeFormat(locale, {
+    numeric: "auto", // "always" | "auto"
+    style: "long", // "long" | "short" | "narrow"
+});
+
+export function isToday(value: string | Date): boolean {
+    return daysFromNow(value) === 0
+}
+
+export function isBefore(value: string | Date, comparison: string | Date): boolean {
+    let date = (typeof value === 'string') ? new Date(value) : value
+    let comparisonDate = (typeof comparison === 'string') ? new Date(comparison) : comparison
+    return date.getTime() < comparisonDate.getTime()
+}
+
+export function isAfter(value: string | Date, comparison: string | Date) {
+    let date = (typeof value === 'string') ? new Date(value) : value
+    let comparisonDate = (typeof comparison === 'string') ? new Date(comparison) : comparison
+    return date.getTime() > comparisonDate.getTime()
+}
+
+export function millisFromNow(value: string | Date): number {
+    let date = (typeof value === 'string') ? new Date(value) : value
+    return date.getTime() - new Date().getTime()
+}
+
+export function minutesFromNow(value: string | Date): number {
+    return Math.round(millisFromNow(value) / (1000 * 60))
+}
+
+export function hoursFromNow(value: string | Date): number {
+    return Math.round(millisFromNow(value) / (1000 * 60 * 60))
+}
+
+export function daysFromNow(value: string | Date): number {
+    return Math.round(millisFromNow(value) / (1000 * 60 * 60 * 24))
+}
+
+export function isThisHour(value: Date | string): boolean {
+    if (!isToday(value)) return false
+    return Math.abs(hoursFromNow(value)) <= 1
+}
+
+export function isCloseDays(value: Date | string): boolean {
+    return Math.abs(daysFromNow(value)) <= closeDaysThreshhold
+}
+
+export function isSoon(value: Date | string): boolean {
+    const days = daysFromNow(value)
+    return days > 0 && days <= closeDaysThreshhold
+}
+
+export function isThisYear(value: Date | string): boolean {
+    return new Date().getFullYear() == new Date(value).getFullYear()
+}
+
+export function toDuration(value: string | Date): string {
+    if (isThisHour(value)) return rtf.format(minutesFromNow(value), 'minute')
+    else if (isCloseDays(value)) return rtf.format(daysFromNow(value), 'day')
+    else if (isThisYear(value)) return toShortLocalDate(value)
+    else return toLocalDate(value)
 }
 
 export function toLocalDate(value: string | Date) {
-    const date = new Date(value);
-    return date.toLocaleDateString('de-DE', { day: '2-digit', month: 'short', year: 'numeric' });
-    // return date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric'  });
-    // return date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: '2-digit'  });
+    let date = (typeof value === 'string') ? new Date(value) : value
+    return date.toLocaleDateString(locale, { day: '2-digit', month: 'short', year: 'numeric' });
 }
 
-export function toShortISOString(date: Date | string) {
-    let tempDate = (typeof date === 'string') ? new Date(date) : date
-    return tempDate.toISOString().split('T')[0]
+export function toShortLocalDate(value: string | Date) {
+    let date = (typeof value === 'string') ? new Date(value) : value
+    return date.toLocaleDateString(locale, { day: 'numeric', month: 'short' });
 }
 
-export function calcDueDate(date: Date, daysAfterInvoice: number): Date {
+export function toShortISOString(value: Date | string) {
+    let date = (typeof value === 'string') ? new Date(value) : value
+    return date.toISOString().split('T')[0]
+}
+
+export function toDatetimeLocal(value: Date | string) {
+    let date = (typeof value === 'string') ? new Date(value) : value
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+
+    return `${year}-${month}-${day}T${hours}:${minutes}`;
+}
+
+export function calcDueDate(date: Date | string, daysAfterInvoice: number): Date {
     let dueDate = new Date(date);
-    dueDate.setDate(date.getDate() + daysAfterInvoice);
+    dueDate.setDate(dueDate.getDate() + daysAfterInvoice);
     return dueDate;
 }
 
-export function randomInt(max: number) {
-    return Math.floor(Math.random() * max);
+export function randomDate(): Date {
+    let date = new Date()
+    date.setDate(date.getDate() - Math.random() * 20)
+    return date
 }
 
-const randomColors = [
-    'bg-rose-200 dark:bg-rose-700',
-    'bg-lime-200 dark:bg-lime-700',
-    'bg-orange-200 dark:bg-orange-700',
-    'bg-sky-200 dark:bg-sky-700',
-    'bg-amber-200 dark:bg-amber-700',
-    'bg-blue-200 dark:bg-blue-700',
-    'bg-purple-200 dark:bg-purple-700'
-]
 
-export function bgColorForString(input: string): string {
-    let charCodeSum = 0;
-    for (let i = 0; i < input.length; i++) {
-        charCodeSum += input.charCodeAt(i)
-    }
-    return randomColors[charCodeSum % randomColors.length];
-}
+
+// -----------------------------------------------------------------------------
+// Text and strings
+// -----------------------------------------------------------------------------
 
 export function clearSelection() {
     window.getSelection()?.removeAllRanges();
 };
 
-const promise = () => new Promise((resolve) => setTimeout(resolve, 2000))
-export function testToast() {
-    let delay = 150
-    toast('Toast', {
-        description: "Description bjksad fkjlhsd fkjhsdf jkshdf jkashdf adskljhf ", action: {
-            label: 'Undo',
-            onClick: () => console.log('Undo')
-        }
-    })
-    setTimeout(() => {
-        toast.info('Info', {
-            action: {
-                label: 'Undo',
-                onClick: () => console.log('Undo')
-            }
-        })
-    }, delay * 1)
-    setTimeout(() => { toast.success('Success', { description: "description" }) }, delay * 2)
-    setTimeout(() => { toast.warning('Warning', { description: "description" }) }, delay * 3)
-    setTimeout(() => { toast.error('Error', { description: "description" }) }, delay * 4)
-    setTimeout(() => {
-        toast.promise(promise, {
-            loading: 'Loading...',
-            success: (data) => {
-                return `${data.name} toast has been added`;
-            },
-            error: (data: any) => 'Error',
-        })
-    }, delay * 5)
-
-}
-
 export function loremIpsum(numWords: number): string {
     let text = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
@@ -130,15 +215,9 @@ Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming
     return text.split(" ").splice(0, numWords).join(" ");
 }
 
-export function randomDate(): Date {
-    let d = new Date()
-    d.setDate(d.getDate() - Math.random() * 20)
-    return d
-}
-
 
 // -----------------------------------------------------------------------------
-// Hotkeys
+// Keyboard shortcuts
 // -----------------------------------------------------------------------------
 
 // Füge diese Typdefinitionen am Anfang der Datei hinzu
@@ -209,11 +288,6 @@ export function hotkey(
         .map(key => normalizeKeyName(key))
         .join('+')
 
-    // Überprüfen, ob der Shortcut bereits registriert ist
-    if (registeredHotkeys.has(normalizedCombination)) {
-        console.warn(`Hotkey '${keyCombination}' is already registered. Overwriting existing hotkey.`)
-    }
-
     // Speichern der Hotkey-Informationen
     registeredHotkeys.set(normalizedCombination, {
         callback,
@@ -319,4 +393,41 @@ window.addEventListener('keydown', handleKeyboardEvent);
 // Füge die Funktion zum Entfernen aller Hotkeys hinzu
 export function removeAllHotkeys() {
     registeredHotkeys.clear()
+}
+
+
+// -----------------------------------------------------------------------------
+// Misc
+// -----------------------------------------------------------------------------
+
+const promise = () => new Promise((resolve) => setTimeout(resolve, 2000))
+export function testToast() {
+    let delay = 150
+    toast('Toast', {
+        description: "Description bjksad fkjlhsd fkjhsdf jkshdf jkashdf adskljhf ", action: {
+            label: 'Undo',
+            onClick: () => console.log('Undo')
+        }
+    })
+    setTimeout(() => {
+        toast.info('Info', {
+            action: {
+                label: 'Undo',
+                onClick: () => console.log('Undo')
+            }
+        })
+    }, delay * 1)
+    setTimeout(() => { toast.success('Success', { description: "description" }) }, delay * 2)
+    setTimeout(() => { toast.warning('Warning', { description: "description" }) }, delay * 3)
+    setTimeout(() => { toast.error('Error', { description: "description" }) }, delay * 4)
+    setTimeout(() => {
+        toast.promise(promise, {
+            loading: 'Loading...',
+            success: (data) => {
+                return `${data.name} toast has been added`;
+            },
+            error: (data: any) => 'Error',
+        })
+    }, delay * 5)
+
 }
\ No newline at end of file
diff --git a/resources/js/pages/CRM.vue b/resources/js/pages/CRM.vue
deleted file mode 100644
index dbf2313..0000000
--- a/resources/js/pages/CRM.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import AppLayout from '@/layouts/AppLayout.vue';
-import { Head } from '@inertiajs/vue3';
-</script>
-
-<template>
-
-    <Head title="Dashboard" />
-
-    <AppLayout title="Dashboard">
-    </AppLayout>
-</template>
diff --git a/resources/js/pages/Customers.vue b/resources/js/pages/Customers.vue
index 946aa65..083b0a5 100644
--- a/resources/js/pages/Customers.vue
+++ b/resources/js/pages/Customers.vue
@@ -5,7 +5,7 @@ import AppLayout from '@/layouts/AppLayout.vue'
 import AppHeader from '@/components/AppHeader.vue'
 import { Address, Customer } from '@/types'
 import { newCustomer } from '@/types/index.d'
-import { bgColorForString } from '@/lib/utils'
+import { hotkey, bgColorForString } from '@/lib/utils'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Input } from '@/components/ui/crm-input'
 import { Button } from '@/components/ui/crm-button'
@@ -40,6 +40,9 @@ onMounted(() => {
     customersData.value = props.customersData.toSorted((a, b) => (a.companyName ?? '').localeCompare(b.companyName ?? ''));
     searchField.value = document.getElementById('search')
     searchField.value.focus()
+
+    // Register hotkeys
+    hotkey('mod+f', () => { searchField.value.focus() })
 })
 
 watch(activeCustomer, () => {
@@ -156,10 +159,10 @@ const call = (number: string, event: Event) => {
             <template #left>
                 <!-- <ButtonGroup aria-label="Button group">
                     <Button variant="pressed" size="sm">
-                        <LayoutGrid stroke-width="1.5" />
+                        <LayoutGrid  />
                     </Button>
                     <Button variant="outline" size="sm">
-                        <Rows3 stroke-width="1.5" />
+                        <Rows3  />
                     </Button>
                 </ButtonGroup> -->
             </template>
@@ -170,11 +173,11 @@ const call = (number: string, event: Event) => {
                 <Input ref="search-field" id="search" type="text" placeholder="Filtern" class="px-8 bg-background"
                     v-model="searchQuery" />
                 <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
-                    <Search class="size-4 text-muted-foreground" :stroke-width="1.5" />
+                    <Search class="size-4 text-muted-foreground" />
                 </span>
                 <span class="absolute end-0 inset-y-0 flex items-center justify-center px-0 mr-1">
                     <Button :size="'sm'" :variant="'ghost'" @click="searchQuery = ''; searchField.focus()">
-                        <Delete class="size-4 text-muted-foreground" :stroke-width="1.5" />
+                        <Delete class="size-4 text-muted-foreground" />
                     </Button>
                 </span>
             </template>
@@ -184,7 +187,7 @@ const call = (number: string, event: Event) => {
                 <TooltipProvider>
                     <Tooltip>
                         <TooltipTrigger>
-                            <Button size="sm" variant="action" @click="createCustomer">
+                            <Button @click="createCustomer">
                                 <Plus />
                                 Neu
                             </Button>
@@ -207,7 +210,7 @@ const call = (number: string, event: Event) => {
         <div class="columns-xs gap-6">
 
             <Card v-for="customer in filteredCustomers" :key="customer.id"
-                class="relative mb-6 break-inside-avoid hover:border-slate-300 dark:hover:bg-neutral-800/90 dark:hover:border-neutral-600 overflow-clip"
+                class="relative mb-6 break-inside-avoid hover:ring-ring/75 hover:ring-[3px] overflow-clip"
                 @click="editCustomer(customer)">
 
                 <CardHeader v-if="customer.logo" class="z-0">
@@ -232,7 +235,7 @@ const call = (number: string, event: Event) => {
                             <Tooltip v-if="customer.url">
                                 <TooltipTrigger>
                                     <Button variant="ghost" size="sm" @click="browse(customer.url as string, $event)">
-                                        <Globe stroke-width="1.5" />
+                                        <Globe  />
                                     </Button>
                                 </TooltipTrigger>
                                 <TooltipContent>{{ customer.url }}</TooltipContent>
@@ -241,7 +244,7 @@ const call = (number: string, event: Event) => {
                                 <TooltipTrigger>
                                     <Button variant="ghost" size="sm"
                                         @click="showPhoneNumber(customer.phone as string, $event)">
-                                        <Phone stroke-width="1.5" />
+                                        <Phone  />
                                     </Button>
                                 </TooltipTrigger>
                                 <TooltipContent>{{ customer.phone }}</TooltipContent>
@@ -250,7 +253,7 @@ const call = (number: string, event: Event) => {
                                 <TooltipTrigger>
                                     <Button variant="ghost" size="sm"
                                         @click="addressToClipbard(customer.companyName, customer.billingAddress as Address | null, $event)">
-                                        <House stroke-width="1.5" />
+                                        <House  />
                                     </Button>
                                 </TooltipTrigger>
                                 <TooltipContent>
@@ -276,9 +279,9 @@ const call = (number: string, event: Event) => {
                                     </AvatarFallback>
                                 </Avatar>
                             </TooltipTrigger>
-                            <TooltipContent class="p-4 -mr-2" :side-offset="-1">
+                            <TooltipContent class="p-4 -mr-2 text-base" :side-offset="-1">
                                 <p class="font-bold">
-                                    <span v-if="contact.academicTitle">{{ contact.academicTitle }}</span>
+                                    <span v-if="contact.academicTitle">{{ contact.academicTitle }}&nbsp;</span>
                                     <span>{{ contact.firstName + ' ' + contact.lastName }}</span>
                                 </p>
                                 <p v-if="contact.jobTitle" class="text-muted-foreground">{{ contact.jobTitle }}</p>
@@ -287,17 +290,17 @@ const call = (number: string, event: Event) => {
                                     <!-- E-mail -->
                                     <Button size="sm" v-if="contact.email"
                                         @click="mail(contact.email as string, $event)">
-                                        <Mail stroke-width="1.5" @click="" />
+                                        <Mail  @click="" />
                                     </Button>
                                     <!-- Phone -->
                                     <Button size="sm" v-if="contact.phone"
                                         @click="showPhoneNumber(contact.phone as string, $event)">
-                                        <Phone stroke-width="1.5" @click="" />
+                                        <Phone  @click="" />
                                     </Button>
                                     <!-- Mobile phone -->
                                     <Button size="sm" v-if="contact.mobilePhone"
                                         @click="showPhoneNumber(contact.mobilePhone as string, $event)">
-                                        <Smartphone stroke-width="1.5" @click="" />
+                                        <Smartphone  @click="" />
                                     </Button>
                                     <!-- Online accounts -->
                                     <Button size="sm" v-for="account in contact.onlineAccounts"
@@ -322,24 +325,24 @@ const call = (number: string, event: Event) => {
         <!-- Phone number display -->
         <Dialog :open="phoneNumber !== ''">
 
-            <DialogContent class="w-fit sm:max-w-auto sm:p-8 md:p-9 gap-6 lg:ps-12 lg:gap-9 xl:p-14 xl:gap-12"
-                @escapeKeyDown="closePhoneNumberDisplay" @interactOutside="closePhoneNumberDisplay">
-                <DialogTitle class="screen-reader-only hidden">
+            <!-- sm:p-8 -->
+            <DialogContent class="w-fit sm:max-w-auto" @escapeKeyDown="closePhoneNumberDisplay"
+                @interactOutside="closePhoneNumberDisplay">
+                <DialogTitle class="
+                    md:p-9 lg:ps-12 xl:p-14
+                    text-md sm:text-2xl md:text-3xl lg:text-6xl xl:text-8xl
+                    transition-all whitespace-nowrap proportional-nums lg:tracking-wide font-medium">
                     <h1>{{ phoneNumber }}</h1>
                 </DialogTitle>
                 <DialogDescription class="screen-reader-only hidden">Anrufen</DialogDescription>
 
-                <div
-                    class="transition-all text-md sm:text-2xl md:text-3xl lg:text-6xl xl:text-8xl whitespace-nowrap proportional-nums lg:tracking-wide font-medium">
-                    {{ phoneNumber }}</div>
-
                 <DialogFooter>
                     <DialogClose as-child>
                         <Button @click="closePhoneNumberDisplay">
                             Schließen
                         </Button>
                         <Button @click="call(phoneNumber, $event)" variant="action">
-                            <Phone stroke-width="1.5" />
+                            <Phone  />
                             Anrufen
                         </Button>
                     </DialogClose>
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
index 7d8d80f..4fdbe7e 100644
--- a/resources/js/pages/Dashboard.vue
+++ b/resources/js/pages/Dashboard.vue
@@ -1,19 +1,22 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue"
-
+import Heading from '@/components/Heading.vue';
+import { onMounted, ref, computed } from "vue"
 import AppLayout from '@/layouts/AppLayout.vue';
-import { Trophy, ArrowRight, UserCheck2, Repeat, ClipboardCheck } from 'lucide-vue-next';
+import { Trophy, ArrowRight, UserCheck2, Repeat, ClipboardCheck, X, ChevronRight } from 'lucide-vue-next';
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '@/components/ui/card'
 import Button from '@/components/ui/crm-button/Button.vue';
 import { invoices } from '@/routes';
-import { toCurrency, toLocalDate, toRoundedCurrency } from '@/lib/utils'
-import { Check, Mail, PhoneCall } from "lucide-vue-next"
+import { toLocalDate, toRoundedCurrency } from '@/lib/utils'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@/components/ui/tooltip'
+import { Label } from '@/components/ui/label'
+import { Switch } from '@/components/ui/switch'
+import { Badge } from '@/components/ui/crm-badge'
 import { Link, usePage } from '@inertiajs/vue3';
 import axios, { AxiosError } from "axios";
 import { toast } from "vue-sonner";
 import { Todo } from "@/types";
+import Todos from '@/components/Todos.vue';
 
 const salesStatistics = ref({
     year: new Date().getFullYear(),
@@ -25,16 +28,18 @@ const salesStatistics = ref({
     reminded: 0,
 })
 
-// TODO: aus settings
-const salesTarget = ref(60000)
+const salesTarget = ref(60000) // TODO: aus settings
+const todos = ref<Todo[]>([])
+const showCompleted = ref(false)
 const page = usePage();
 const token = page.props.flash?.token
 if (token) {
     localStorage.setItem('sanctum_token', token)
 }
 
+
 onMounted(async () => {
-    // Load sales statistics
+    // Load Todos
     try {
         let response = await axios.get('/api/todos')
         todos.value = response.data
@@ -42,6 +47,7 @@ onMounted(async () => {
         toast.error('Fehler beim Laden der Daten', { description: (error as AxiosError).message })
     }
 
+    // Load sales statistics
     try {
         let response = await axios.get('/api/invoices/salesStatistics')
         salesStatistics.value = response.data
@@ -50,95 +56,73 @@ onMounted(async () => {
     }
 })
 
-
-const todos = ref<Todo[]>([])
-
 </script>
 
 <template>
 
     <AppLayout title="Dashboard">
+        <Heading title="Tooloop Multimedia" description="Kundenpflege und Rechnungswesen" />
+
         <div class="columns-1 lg:columns-2 xl:columns-3 gap-8">
 
 
+
             <!-- Nachrichten -->
-            <div class="break-inside-avoid mb-8 flex flex-col gap-3">
-                <Alert class="bg-muted">
-                    <Trophy class="h-4 w-4 stroke-amber-600" />
-                    <AlertTitle>Du hast zwei neue Erfolge</AlertTitle>
-                    <AlertDescription class="text-sky-600">
-                        Weiter so
-                    </AlertDescription>
-                </Alert>
-
-                <Alert class="bg-muted">
-                    <UserCheck2 class="h-4 w-4 stroke-lime-600" />
-                    <AlertTitle>Du hast länger keine Bestandskunden mehr kontaktiert</AlertTitle>
-                    <AlertDescription class="text-sky-600">
-                        <a href="">Hier sind ein paar Vorschläge für Dich
-                            <ArrowRight class="inline h-4 w-4" />
-                        </a>
-                    </AlertDescription>
-                </Alert>
-            </div>
-
-
-            <!-- TODO: make widget component -->
-            <!-- Aufgaben -->
-            <Card class="break-inside-avoid mb-8">
+            <Card class="break-inside-avoid mb-12">
                 <CardHeader>
-                    <CardTitle>Aufgaben</CardTitle>
+                    <CardTitle>Benachrichtigungen</CardTitle>
                     <CardDescription>Card Description</CardDescription>
                 </CardHeader>
+                <CardContent class="flex flex-col gap-4">
+
+                    <Alert class="bg-muted pr-8">
+                        <Trophy class="h-4 w-4 stroke-amber-600" />
+                        <AlertTitle>Du hast zwei neue Erfolge</AlertTitle>
+                        <AlertDescription class="text-sky-600">
+                            Weiter so
+                        </AlertDescription>
+
+                        <Button variant="ghost" class="rounded-full w-6 h-6 absolute top-0.5 right-0.5">
+                            <X  />
+                        </Button>
+                    </Alert>
+
+                    <Alert class="bg-muted pr-8">
+                        <UserCheck2 class="h-4 w-4 stroke-lime-600" />
+                        <AlertTitle>Du hast länger keine Bestandskunden mehr kontaktiert</AlertTitle>
+                        <AlertDescription class="text-sky-600">
+                            <a href="">Hier sind ein paar Vorschläge für Dich
+                                <ChevronRight class="inline h-4 w-4" />
+                            </a>
+                        </AlertDescription>
+
+                        <Button variant="ghost" class="rounded-full w-6 h-6 absolute top-0.5 right-0.5">
+                            <X  />
+                        </Button>
+                    </Alert>
+
+                </CardContent>
+                <CardFooter>
+                    <Button>Alles leeren</Button>
+                </CardFooter>
+            </Card>
+
+
+            <!-- Aufgaben -->
+            <Card class="break-inside-avoid mb-8">
+                <CardHeader class="flex justify-between flex-wrap">
+                    <div>
+                        <CardTitle class="mb-1.5">Aufgaben</CardTitle>
+                        <CardDescription class="mb-3">Card Description</CardDescription>
+                    </div>
+
+                    <div class="flex items-center gap-2">
+                        <Switch id="show-completed" v-model="showCompleted" />
+                        <Label for="show-completed" class="text-muted-foreground">Erledigte</Label>
+                    </div>
+                </CardHeader>
                 <CardContent>
-                    <!-- <h3 class="mb-4 font-bold text-md">Verspätet</h3> -->
-
-                    <!-- TODO: make TodoList component -->
-                    <ul>
-                        <li v-for="todo in todos"
-                            class="flex gap-3 items-baseline border-b-1 last:border-0 border-foreground/20 py-2.5 pl-1 pr-2">
-                            <!-- TODO: make Todo component -->
-
-                            <!-- Check mark -->
-                            <div
-                                class="relative top-0.75 shrink-0 h-4 aspect-square rounded-full border-muted-foreground has-[input:checked]:border-primary-foreground border flex items-center justify-center">
-                                <div
-                                    class="absolute inset-[2px] rounded-full bg-transparent has-[input:checked]:bg-primary-foreground">
-                                    <input type="checkbox" class="absolute -inset-2 opacity-0"
-                                        :checked="todo.status?.toLowerCase() == 'completed'" :id="todo.id">
-                                </div>
-                            </div>
-
-                            <!-- Text -->
-                            <div class="grow overflow-hidden truncate">
-                                <!-- Priority -->
-                                <span v-if="todo.priority < 5 && todo.priority > 0"
-                                    class="mr-2 text-destructive">!!!</span>
-                                <span v-if="todo.priority == 5" class="mr-2 text-warning-foreground">!!</span>
-                                <span v-if="todo.priority > 5" class="mr-2 text-muted-foreground">!</span>
-                                <!-- Title -->
-                                <label :for="todo.id" class="my-0 px-0 text-base! border-0 outline-0 shadow-none"
-                                    :class="{ 'line-through text-muted-foreground': todo.status?.toLowerCase() == 'completed' }">{{
-                                        todo.title
-                                    }}</label>
-
-                                <!-- Date -->
-                                <div class="text-sm text-muted-foreground flex gap-3 items-center mt-1">
-                                    <span v-if="todo.dueDate">{{ toLocalDate(todo.dueDate) }}</span>
-                                    <Repeat v-if="todo.recurring" stroke-width="2" :size="14" />
-                                </div>
-                            </div>
-
-                            <!-- Icon -->
-                            <div class="relative top-0.75 text-muted-foreground shrink-0">
-                                <PhoneCall v-if="todo.type?.name === 'phoneCall'" stroke-width="1.5" :size="18" />
-                                <ClipboardCheck v-else-if="todo.type?.name === 'todo'" stroke-width="1.5" :size="18" />
-                                <Mail v-else-if="todo.type?.name === 'mail'" stroke-width="1.5" :size="18" />
-                            </div>
-
-                        </li>
-                    </ul>
-
+                    <Todos :modelValue="todos" :show-completed="showCompleted" />
                 </CardContent>
             </Card>
 
@@ -168,14 +152,11 @@ const todos = ref<Todo[]>([])
                     <CardContent class="relative flex flex-col gap-3">
 
                         <div class="flex items-baseline justify-between">
-                            <span class="text-xl font-bold text-primary-foreground">{{
+                            <span class="text-xl font-bold text-primary">{{
                                 toRoundedCurrency(salesStatistics?.paid) || '' }}</span>
                             <span>{{ toRoundedCurrency(salesTarget) }}</span>
                         </div>
 
-                        <!-- <Progress :model-value="66" class="w-full h-10 rounded-lg text-primary-foreground"
-                        data-state="indeterminate" /> -->
-
                         <div class="w-full h-8 bg-secondary dark:bg-neutral-900 rounded-md overflow-clip relative flex">
                             <TooltipProvider :delay-duration="0" v-if="salesStatistics">
                                 <!-- Paid -->
diff --git a/resources/js/pages/Invoices.vue b/resources/js/pages/Invoices.vue
index 8f4b10e..38618b0 100644
--- a/resources/js/pages/Invoices.vue
+++ b/resources/js/pages/Invoices.vue
@@ -5,6 +5,7 @@ import { type Invoice } from '@/types'
 import { newInvoice } from '@/types/index.d'
 import axios from 'axios'
 import AppLayout from '@/layouts/AppLayout.vue'
+import AppHeader from '@/components/AppHeader.vue'
 import { Button } from '@/components/ui/crm-button'
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, } from '@/components/ui/select'
 import DocumentTable from '@/components/documents/DocumentTable.vue'
@@ -15,11 +16,10 @@ import SelectSeparator from '@/components/ui/select/SelectSeparator.vue'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { Kbd, KbdGroup } from '@/components/ui/kbd'
 import { statusBadgeLabels } from '@/components/ui/status-badge'
-import AppHeader from '@/components/AppHeader.vue'
 import InvoiceDialog from '@/components/documents/InvoiceDialog.vue'
 import { hotkey, getPlatformModifierSymbol } from '@/lib/utils'
 
-// initial invoice data from inertia
+// Initial invoice data from inertia (see InvoiceController::show)
 interface Props {
     invoicesData: Invoice[];
 }
@@ -49,7 +49,7 @@ onMounted(async () => {
 
     searchField.value = document.getElementById('search')
 
-    // register hotkeys
+    // Register hotkeys
     hotkey('n', createInvoice)
     hotkey('mod+leftarrow', () => {
         if (selectedYearIndex.value < (years.value.length - 1)) {
@@ -87,6 +87,7 @@ const fuse = computed(() => {
             'title',
             'nr'
         ],
+        useExtendedSearch: true,
         threshold: 0.3,
     }
 
@@ -211,11 +212,11 @@ const onDeleteInvoice = async (id: number) => {
                 <Input ref="search-field" id="search" type="text" placeholder="Filtern" class="px-8 bg-background"
                     v-model="searchQuery" />
                 <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
-                    <Search class="size-4 text-muted-foreground" :stroke-width="1.5" />
+                    <Search class="size-4 text-muted-foreground" />
                 </span>
                 <span class="absolute end-0 inset-y-0 flex items-center justify-center px-0 mr-1">
                     <Button :size="'sm'" :variant="'ghost'" @click="searchQuery = ''; searchField.focus()">
-                        <Delete class="size-4 text-muted-foreground" :stroke-width="1.5" />
+                        <Delete class="size-4 text-muted-foreground" />
                     </Button>
                 </span>
             </template>
@@ -225,7 +226,7 @@ const onDeleteInvoice = async (id: number) => {
                 <TooltipProvider>
                     <Tooltip>
                         <TooltipTrigger>
-                            <Button size="sm" variant="action" @click="createInvoice">
+                            <Button @click="createInvoice">
                                 <Plus />
                                 Neu
                             </Button>
diff --git a/resources/js/pages/Pipeline.vue b/resources/js/pages/Pipeline.vue
new file mode 100644
index 0000000..db98e8e
--- /dev/null
+++ b/resources/js/pages/Pipeline.vue
@@ -0,0 +1,354 @@
+<script setup lang="ts">
+import Heading from '@/components/Heading.vue'
+import { Badge } from '@/components/ui/crm-badge/'
+import AppLayout from '@/layouts/AppLayout.vue'
+import { daysFromNow, isSoon, isToday, toCurrency, toDuration } from '@/lib/utils'
+import { Head } from '@inertiajs/vue3'
+import { Calendar, ClipboardCheck, MessageCircle, CircleHelp, Plus, Trash2 } from 'lucide-vue-next'
+import { ref, computed } from 'vue'
+import axios from 'axios'
+import draggable from 'vuedraggable'
+import { PipelineLane, PipelineItem, Todo } from '@/types'
+import { toast } from 'vue-sonner'
+import Button from '@/components/ui/crm-button/Button.vue'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { DropdownMenuItem } from '@/components/ui/dropdown-menu'
+import EditorDialog from '@/components/EditorDialog/EditorDialog.vue'
+import TextEditor from '@/components/TextEditor.vue'
+import Todos from '@/components/Todos.vue';
+import Notes from '@/components/Notes.vue'
+import NotesService from '@/services/NotesService'
+import NumberInput from '@/components/ui/crm-number-input/NumberInput.vue';
+import { alertStore } from '@/stores/alertStore'
+import PipelineService from '@/services/PipelineService'
+
+interface Props {
+    pipeline: PipelineLane[]
+}
+const props = defineProps<Props>()
+const pipeline = ref<PipelineLane[]>(props.pipeline)
+const selectedItem = ref<PipelineItem>()
+const drag = ref(false)
+const dragOptions = ref({
+    delay: 100, // only start after 100 ms, so we can click items without dragging
+    delayOnTouchOnly: true,
+
+    animation: 200,
+    easing: "cubic-bezier(0.33, 1, 0.68, 1)", // out quart
+    group: "cards",
+
+    ghostClass: "ghost",  // Class name for the drop placeholder
+    chosenClass: "chosen",  // Class name for the chosen item
+    dragClass: "drag",  // Class name for the dragging item
+})
+const editorDialogOpen = ref(false)
+const todos = ref<Todo[]>([])
+const alert = alertStore()
+
+const laneSums = computed(() => {
+    const map: Record<number, number> = {}
+    pipeline.value.forEach((lane: any) => {
+        const sum = (lane.items || []).reduce((acc: number, it: any) => {
+            const v = Number(it.expectedRevenue ?? 0)
+            return acc + (isNaN(v) ? 0 : v)
+        }, 0)
+        map[lane.id] = sum
+    })
+    return map
+})
+
+// onMounted(() => {
+//     if (pipeline.value[2] && pipeline.value[2].items)
+//         editItem(pipeline.value[2].items[1])
+// })
+
+const onEndDrag = async function (e: any) {
+    drag.value = false
+
+    const changed: Array<{ id: number; pipelineLaneId: number; position: number }> = []
+
+    // Prefer payloads moved/added/removed to decide which lanes to recalc
+    const laneIds = new Set<number>()
+
+    const fromLane = getLaneIdFromEl(e.from)
+    const toLane = getLaneIdFromEl(e.to)
+    if (fromLane !== null) laneIds.add(fromLane)
+    if (toLane !== null) laneIds.add(toLane)
+
+    // Recompute positions for affected lanes only
+    laneIds.forEach((laneId) => {
+        const lane = pipeline.value.find((l: any) => l.id === laneId)
+        if (!lane || !Array.isArray(lane.items)) return
+
+        lane.items.forEach((item: any, idx: number) => {
+            const newPos = idx
+            const newLaneId = laneId
+            if (item.position !== newPos || item.pipelineLaneId !== newLaneId) {
+                // update in-memory model
+                item.position = newPos
+                item.pipelineLaneId = newLaneId
+                changed.push({ id: item.id, pipelineLaneId: newLaneId, position: newPos })
+            }
+        })
+    })
+
+    if (changed.length === 0) return
+
+    try {
+        await persistPositions(changed)
+    } catch (e) {
+        // on failure, consider reloading or informing the user
+        // simple approach: reload canonical data
+        toast.error('Could not save positions, reload recommended', { description: (e as Error).message })
+    }
+}
+
+const persistPositions = async (changed: Array<{ id: number; pipelineLaneId: number; position: number }>) => {
+    if (!changed.length) return
+    try {
+        await axios.post('/api/pipeline/positions', changed)
+    } catch (err: Error) {
+        toast.error('Failed to persist pipeline positions', { description: err.message })
+        throw err
+    }
+}
+
+const getLaneIdFromEl = (el: any): number | null => {
+    try {
+        const v = el?.dataset?.laneId
+        return v ? Number(v) : null
+    } catch (e) {
+        return null
+    }
+}
+
+const cardClasses = (item: PipelineItem): string => {
+    // Due date
+    if (item.dueDate && daysFromNow(item.dueDate) < 0) return "border-l-4 border-destructive"
+    else if (item.dueDate && isSoon(item.dueDate)) return "border-l-4 border-warning"
+    return ""
+}
+
+const badgeVariant = (item: PipelineItem): "default" | "secondary" | "destructive" | "warning" | "outline" | null | undefined => {
+    // Due date
+    if (item.dueDate && daysFromNow(item.dueDate) < 0) return "destructive"
+    else if (item.dueDate && isSoon(item.dueDate)) return "warning"
+    return "secondary"
+}
+
+const editItem = async (item: PipelineItem) => {
+    // Load Todos
+    // try {
+    //     let response = await axios.get('/api/todos')
+    //     todos.value = response.data
+    // } catch (error) {
+    //     toast.error('Fehler beim Laden der Daten', { description: (error as AxiosError).message })
+    // }
+
+    // Load notes lazily
+    if (item.id !== 0 && (item.notes === undefined || item.notes.length === 0)) {
+        NotesService.getAllNotes('PipelineItem', item.id).then(notes => {
+            if (notes) item.notes = notes
+        })
+    }
+
+    selectedItem.value = item
+    editorDialogOpen.value = true
+}
+
+const deleteItem = (item: PipelineItem | undefined) => {
+    if (item === undefined) return
+
+    alert.show(
+        "Möchtest Du diese Karte wirklich löschen?", null,
+        {
+            actionText: "Löschen",
+            actionVariant: "destructive",
+            onAction: async () => {
+                PipelineService.deletePipelineItem(item.id).then(deleted => {
+                    if (deleted) {
+                        let lane = pipeline.value.findIndex(lane => lane.id === item.pipelineLaneId)
+                        if (lane === -1) return
+                        pipeline.value[lane].items = pipeline.value[lane].items?.filter(i => i.id !== item.id)
+                        editorDialogOpen.value = false
+                    }
+                })
+            }
+        }
+    )
+}
+</script>
+
+
+<template>
+
+    <Head title="Vertriebspipeline" />
+
+    <AppLayout title="Vertriebspipeline">
+        <div class="flex flex-col h-full">
+
+            <!-- Header -->
+            <div class="flex items-start justify-between">
+                <div class="flex items-center gap-2">
+                    <Heading title="Vertriebspipeline" description="Mache interessante Kontakte zu Kunden"
+                        icon="Heading" />
+                    <TooltipProvider :delay-duration="0">
+                        <Tooltip>
+                            <TooltipTrigger as-child>
+                                <CircleHelp class="size-4 text-muted-foreground" />
+                            </TooltipTrigger>
+                            <TooltipContent class="max-w-100">
+                                <p>Eine Vetriebspipeline ist ein visuelles und strukturelles System, das den Fortschritt
+                                    potenzieller Kunden – von der ersten Kontaktaufnahme (Akquise) bis zum
+                                    abgeschlossenen
+                                    Verkauf (Projekt) – abbildet. Sie hilft Teams, Chancen zu priorisieren, nächste
+                                    Schritte
+                                    zu planen und den Vertriebsprozess transparent zu gestalten.</p>
+
+                                <p class="mt-2">Mehr zum Thema <a href="#"
+                                        class="text-blue-500 underline hover:text-blue-700">Vertrieb in Caramel</a></p>
+                            </TooltipContent>
+                        </Tooltip>
+                    </TooltipProvider>
+                </div>
+                <Button>
+                    <Plus /> Neue Karte
+                </Button>
+            </div>
+
+
+            <!-- Horizontal scroll container -->
+            <div class="overflow-x-auto overflow-y-hidden grow flex flex-col max-h-full relative">
+
+                <!-- ------------------------------------------------------- -->
+                <!-- Pipeline -->
+                <!-- ------------------------------------------------------- -->
+                <div
+                    class="flex items-center h-16 font-semibold border shadow-md bg-background rounded-lg z-10 absolute min-w-full">
+
+                    <div v-for="(lane, index) in pipeline"
+                        class="flex items-center justify-between min-w-64 relative pl-6 pr-6"
+                        :style="'width: ' + 100 / pipeline.length + '%'">
+                        <div class="flex flex-col grow">
+                            <h3 class="text-primary font-semibold">{{ lane.title }}</h3>
+                            <span class="text-sm">{{ toCurrency(laneSums[lane.id] || 0) }}</span>
+                        </div>
+                        <Badge class="rounded-full text-tiny aspect-square p-2.5 h-lh" variant="secondary">
+                            {{ lane.items?.length }}</Badge>
+
+                        <svg v-if="index < pipeline.length - 1" viewBox="0 0 19 48" xmlns="http://www.w3.org/2000/svg"
+                            class="h-16 absolute -right-2 z-1">
+                            <path style="fill:none;stroke:var(--border);stroke-width:1;" d="M 0,0 18,24 0,48" />
+                        </svg>
+                    </div>
+                </div>
+
+
+                <!-- ------------------------------------------------------- -->
+                <!-- Card lanes -->
+                <!-- ------------------------------------------------------- -->
+                <div class="flex max-h-full">
+
+                    <draggable v-for="(lane, index) in pipeline"
+                        class="list-group flex flex-col gap-4 px-4 pt-22 pb-8 overflow-y-auto flex-1 min-w-64 border-x-4 border-main"
+                        :class="{ 'bg-sidebar/40': index % 2 > 0 }" :list="lane.items" v-bind="dragOptions"
+                        :data-lane-id="lane.id" @start="" @change="" @end="onEndDrag" itemKey="id">
+
+                        <template #item="{ element: item }">
+
+                            <div class="list-group-item bg-background shadow rounded-lg flex flex-col gap-3 p-3 hover:ring-ring hover:ring-[3px] active:bg-accent"
+                                :class="cardClasses(item)" @click="editItem(item)" @dblclick="">
+                                <h4 class="text font-semibold">{{ item.title }}</h4>
+                                <p class="text-sm text-muted-foreground" v-if="item.expectedRevenue > 0">{{
+                                    toCurrency(item.expectedRevenue) }}</p>
+
+                                <div class="flex items-center gap-2 flex-wrap">
+                                    <Badge variant="secondary" v-if="item.actions">
+                                        <ClipboardCheck /> {{ item.actions }}
+                                    </Badge>
+
+                                    <Badge v-if="item.dueDate" :variant="badgeVariant(item)">
+                                        <Calendar />
+                                        <span v-if="isToday(item.dueDate)">Heute</span>
+                                        <span v-else>{{ toDuration(item.dueDate) }}</span>
+                                    </Badge>
+
+                                    <Badge variant="secondary" v-if="item.notes && item.notes.length > 0">
+                                        <MessageCircle /> {{ item.notes.length }}
+                                    </Badge>
+                                    <Badge variant="secondary" v-else-if="item.notesCount > 0">
+                                        <MessageCircle /> {{ item.notesCount }}
+                                    </Badge>
+                                </div>
+
+                            </div>
+
+                        </template>
+
+                    </draggable>
+
+                </div>
+
+            </div>
+
+        </div>
+
+
+        <!-- --------------------------------------------------------------- -->
+        <!-- Editor dialog -->
+        <!-- --------------------------------------------------------------- -->
+        <EditorDialog :title="selectedItem?.title" v-model="editorDialogOpen">
+            <!-- <template v-slot:description>
+                Welt
+            </template> -->
+
+            <!-- <template v-slot:buttons>
+            </template> -->
+
+            <template v-slot:ellipsisMenuItems>
+                <DropdownMenuItem
+                    class="flex justify-between text-destructive! hover:bg-destructive! hover:text-destructive-foreground!"
+                    @click="deleteItem(selectedItem)">
+                    <div class="flex items-center gap-3">
+                        <Trash2 class="text-current" />
+                        <span class="mr-2">Löschen</span>
+                    </div>
+                </DropdownMenuItem>
+            </template>
+
+            <template v-slot:content>
+                <TextEditor :model-value="selectedItem?.description" @change:model-value="console.log"
+                    ref="description-editor" />
+                <Notes v-if="selectedItem" title="Protokoll" :notableId="selectedItem.id" notableType="PipelineItem"
+                    :modelValue="selectedItem.notes" />
+            </template>
+
+            <template v-slot:sidebar>
+                <NumberInput label="Erwarteter Umsatz" :modelValue="selectedItem?.expectedRevenue as number" suffix=" €"
+                    @update:model-value="console.log" />
+                <Todos :modelValue="todos" :show-completed="false" />
+            </template>
+
+        </EditorDialog>
+
+    </AppLayout>
+</template>
+
+
+<style scoped>
+.list-group-item {
+    cursor: default;
+}
+
+.ghost {
+    visibility: hidden;
+}
+
+.chosen {
+    transition: transform 200ms, box-shadow 200ms;
+    transition-delay: 200ms;
+    box-shadow: var(--shadow-xl);
+    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
+    transform: rotate(-1deg) scale(1.05);
+}
+</style>
\ No newline at end of file
diff --git a/resources/js/pages/ProceduralDocumentation.vue b/resources/js/pages/ProceduralDocumentation.vue
index c150511..0c38a1d 100644
--- a/resources/js/pages/ProceduralDocumentation.vue
+++ b/resources/js/pages/ProceduralDocumentation.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import AppLayout from '@/layouts/AppLayout.vue';
-import { Table, TableCell, TableFooter, TableBody, TableHead, TableHeader, TableRow, } from '@/components/ui/table';
+import { Table, TableCell, TableFooter, TableBody, TableHead, TableHeader, TableRow, } from '@/components/ui/crm-table';
 </script>
 
 <template>
diff --git a/resources/js/pages/Products.vue b/resources/js/pages/Products.vue
index b023e2d..499de7e 100644
--- a/resources/js/pages/Products.vue
+++ b/resources/js/pages/Products.vue
@@ -124,11 +124,11 @@ const toggleAllCategories = () => {
                 <Input ref="search-field" id="search" type="text" placeholder="Filtern" class="px-8 bg-background"
                     v-model="searchQuery" />
                 <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
-                    <Search class="size-4 text-muted-foreground" :stroke-width="1.5" />
+                    <Search class="size-4 text-muted-foreground" />
                 </span>
                 <span class="absolute end-0 inset-y-0 flex items-center justify-center px-0 mr-1">
                     <Button :size="'sm'" :variant="'ghost'" @click="searchQuery = ''; searchField.focus()">
-                        <Delete class="size-4 text-muted-foreground" :stroke-width="1.5" />
+                        <Delete class="size-4 text-muted-foreground" />
                     </Button>
                 </span>
             </template>
@@ -137,7 +137,7 @@ const toggleAllCategories = () => {
                 <TooltipProvider>
                     <Tooltip>
                         <TooltipTrigger>
-                            <Button size="sm" variant="action" @click="">
+                            <Button @click="">
                                 <Plus />
                                 Neu
                             </Button>
diff --git a/resources/js/pages/Timesheets.vue b/resources/js/pages/Timesheets.vue
index ae269d8..a6ecddd 100644
--- a/resources/js/pages/Timesheets.vue
+++ b/resources/js/pages/Timesheets.vue
@@ -1,6 +1,199 @@
 <script setup lang="ts">
+
+import { onMounted, ref, computed } from 'vue'
+import Button from '@/components/ui/crm-button/Button.vue';
+import Input from '@/components/ui/crm-input/Input.vue';
+import Progress from '@/components/ui/progress/Progress.vue';
+import { Table, TableRow, TableBody, TableCell, TableFooter, TableHead, TableHeader } from '@/components/ui/crm-table';
+import { Avatar, AvatarFallback, AvatarImage, } from '@/components/ui/avatar'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'
+import { useInitials } from '@/composables/useInitials';
 import AppLayout from '@/layouts/AppLayout.vue';
-import { Head } from '@inertiajs/vue3';
+import { Head, usePage } from '@inertiajs/vue3';
+import { Ellipsis, Menu, Plus, ReceiptEuro, Trash2 } from 'lucide-vue-next';
+import { isAfter, isBefore, toLocalDate, toShortISOString, toShortLocalDate } from '@/lib/utils';
+import { Timesheet, TimesheetEntry, Invoice, LineItem } from '@/types'
+import { newTimesheet, newTimesheetEntry, newInvoice, newLineItem } from '@/types/index.d'
+import TimesheetService from '@/services/TimesheetService';
+import { toast } from 'vue-sonner';
+import { Checkbox } from '@/components/ui/crm-checkbox';
+import { alertStore } from "@/stores/alertStore"
+import Editable from '@/components/ui/crm-editable/Editable.vue';
+import NumberInput from '@/components/ui/crm-number-input/NumberInput.vue';
+import axios, { AxiosError } from "axios"
+
+interface Props {
+    timesheetData: Timesheet[];
+}
+const props = defineProps<Props>();
+const timesheets = ref([] as Timesheet[])
+const page = usePage();
+const auth = computed(() => page.props.auth);
+const alert = alertStore()
+const { getInitials } = useInitials();
+const selectedTimesheet = ref(-1);
+const hourFormatter = new Intl.NumberFormat('de-DE', {
+    style: 'decimal'
+})
+
+onMounted(() => {
+    timesheets.value = props.timesheetData
+    if (timesheets.value.length >= 0) selectTimesheet(timesheets.value[0])
+})
+
+const selectTimesheet = (timesheet: Timesheet) => {
+    if (timesheets.value.length == 0) return
+
+    selectedTimesheet.value = timesheets.value.findIndex(ts => ts.id === timesheet.id)
+
+    if (!timesheet.entries) {
+        TimesheetService.getTimesheetEntries(timesheet.id).then((entries) => {
+            timesheets.value[selectedTimesheet.value].entries = entries ?? []
+        }).catch((error) => {
+            toast.error('Fehler beim Laden der Einträge', { duration: 5000, description: error.message })
+        })
+    }
+}
+
+const createTimesheet = () => {
+    const timesheet = newTimesheet()
+    timesheets.value.unshift(timesheet)
+
+    TimesheetService.createTimesheet(timesheet).then((timesheet) => {
+        let index = timesheets.value.findIndex(ts => ts.id == 0)
+        timesheets.value[index] = timesheet
+    }).catch((error) => {
+        timesheets.value = timesheets.value.filter(t => t.id == 0)
+        toast.error('Fehler beim Erstellen des Stundenzettels', { duration: 5000, description: error.message })
+    })
+}
+
+const updateTimesheet = () => {
+    if (selectedTimesheet.value < 0) return
+    TimesheetService.updateTimesheet(timesheets.value[selectedTimesheet.value]).catch((error) => {
+        toast.error('Fehler beim Speichern des Stundenzettels', { duration: 5000, description: error.message })
+    })
+}
+
+const deleteTimesheet = (timesheet: Timesheet) => {
+    alert.show(
+        "Möchtest Du diesen Stundenzettel wirklich löschen?",
+        "Alle Einträge gehen dann ebenfalls verloren.",
+        {
+            actionText: "Löschen",
+            actionVariant: "destructive",
+            onAction: async () => {
+                TimesheetService.deleteTimesheet(timesheet.id).then(() => {
+                    timesheets.value = timesheets.value.filter(t => t.id != timesheet.id)
+                    selectedTimesheet.value = timesheets.value.length > 0 ? 0 : -1
+                }).catch((error) => {
+                    toast.error('Fehler beim Löschen des Stundenzettels', { duration: 5000, description: error.message })
+                })
+            }
+        }
+    )
+}
+
+const addEntry = () => {
+    const entry = newTimesheetEntry();
+    entry.user = auth.value.user
+    entry.timesheetId = timesheets.value[selectedTimesheet.value].id
+    entry.userId = page.props.auth.user.id
+    TimesheetService.createEntry(entry).then((response) => {
+        timesheets.value[selectedTimesheet.value].entries?.push(response)
+    }).catch((error) => {
+        toast.error('Fehler beim Erstellen des Eintrags', { duration: 5000, description: error.message })
+    })
+}
+
+const deleteEntry = (entry: TimesheetEntry) => {
+    TimesheetService.deleteEntry(entry.id).then((response) => {
+        timesheets.value[selectedTimesheet.value].entries?.splice(timesheets.value[selectedTimesheet.value].entries?.indexOf(entry), 1)
+    }).catch((error) => {
+        toast.error('Fehler beim Löschen des Eintrags', { duration: 5000, description: error.message })
+    })
+}
+
+const updateEntry = (entry: TimesheetEntry) => {
+    TimesheetService.updateEntry(entry).then(() => {
+    }).catch((error) => {
+        toast.error('Fehler beim Speichern des Eintrags', { duration: 5000, description: error.message })
+    })
+}
+
+const timesheetSummary = computed(() => {
+    return (ts: Timesheet) => {
+        const entries = ts.entries ?? []
+
+        if (entries.length > 0) {
+            const totalHours = entries.reduce((sum, e) => sum + (e.hours ?? 0), 0)
+            const hoursBilled = entries.reduce((sum, e) => sum + ((e.billed ? (e.hours ?? 0) : 0)), 0)
+
+            let earliestDate: string | null = null
+            let latestDate: string | null = null
+            for (const e of entries) {
+                if (!e.date) continue
+                if (!earliestDate || new Date(e.date) < new Date(earliestDate)) earliestDate = e.date
+                if (!latestDate || new Date(e.date) > new Date(latestDate)) latestDate = e.date
+            }
+
+            return {
+                totalHours,
+                hoursBilled,
+                earliestDate,
+                latestDate,
+            }
+        }
+
+        // Fallback to API-provided summary fields until entries are loaded
+        return {
+            totalHours: ts.totalHours ?? 0,
+            hoursBilled: ts.hoursBilled ?? 0,
+            earliestDate: ts.earliestDate ?? null,
+            latestDate: ts.latestDate ?? null,
+        }
+    }
+})
+
+const createInvoice = async () => {
+    let billedEntries: TimesheetEntry[] = []
+    let invoice: Invoice = newInvoice()
+    invoice.customer = null
+    invoice.billingData = null
+    timesheets.value[selectedTimesheet.value].entries?.forEach((entry => {
+        if (entry.billed) return
+
+        let lineItem: LineItem = newLineItem(false)
+        lineItem.title = toLocalDate(entry.date)
+        lineItem.description = entry.description || ''
+        lineItem.quantity = entry.hours
+        lineItem.price = 750 / 8 // TODO: get rate from settings
+
+        if (!invoice.serviceStartDate || isBefore(entry.date, invoice.serviceStartDate)) {
+            invoice.serviceStartDate = new Date(entry.date)
+        }
+        if (!invoice.serviceEndDate || isAfter(entry.date, invoice.serviceEndDate)) {
+            invoice.serviceEndDate = new Date(entry.date)
+        }
+
+        invoice.items.push(lineItem)
+        billedEntries.push(entry)
+    }))
+
+    try {
+        const response = await axios.post('/api/invoices', invoice).then();
+        billedEntries.forEach(entry => {
+            entry.billed = true
+            updateEntry(entry)
+        })
+        let newInvoice = response.data
+        // got to invoices?
+        console.log(newInvoice)
+    } catch (e) {
+        toast.error('Fehler beim erzeugen der Rechnung', { description: (e as AxiosError).message })
+    }
+}
+
 </script>
 
 <template>
@@ -8,5 +201,149 @@ import { Head } from '@inertiajs/vue3';
     <Head title="Zeiterfassung" />
 
     <AppLayout title="Zeiterfassung">
+
+        <div class="pl-90 print:pl-0">
+            <div class="flex items-center justify-between mb-8">
+                <Editable v-if="timesheets[selectedTimesheet]" v-model="timesheets[selectedTimesheet].title"
+                    @change:model-value="value => { timesheets[selectedTimesheet].title = value; updateTimesheet(); }"
+                    default-value="Zeiterfassung" placeholder="Zeiterfassung"
+                    class="text-lg! text-primary font-semibold" />
+                <h2 v-else class="text-lg text-primary font-semibold">Zeiterfassung</h2>
+
+                <DropdownMenu v-if="selectedTimesheet >= 0">
+                    <DropdownMenuTrigger as-child>
+                        <Button variant="ghost" size="icon" class="print:hidden">
+                            <Ellipsis class="visible-mac" />
+                            <Menu class="visible-pc" />
+                        </Button>
+                    </DropdownMenuTrigger>
+
+                    <DropdownMenuContent align="end">
+
+                        <!-- Delete -->
+                        <DropdownMenuItem class="flex justify-between" @click="createInvoice">
+                            <div class="flex items-center gap-3">
+                                <ReceiptEuro class="text-current" />
+                                <span class="mr-2">Rechnung stellen</span>
+                            </div>
+                        </DropdownMenuItem>
+
+                        <!-- Delete -->
+                        <DropdownMenuItem
+                            class="flex justify-between text-destructive! hover:bg-destructive! hover:text-destructive-foreground!"
+                            @click="deleteTimesheet(timesheets[selectedTimesheet])">
+                            <div class="flex items-center gap-3">
+                                <Trash2 class="text-current" />
+                                <span class="mr-2">Löschen</span>
+                            </div>
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
+
+
+            <Table class="relative">
+                <TableHeader>
+                    <TableRow>
+                        <TableHead class="w-1/100">Abger.</TableHead>
+                        <TableHead class="w-1/6">Datum</TableHead>
+                        <TableHead class="w-1/6">Mitarbeiter</TableHead>
+                        <TableHead class="w-1">Beschreibung</TableHead>
+                        <TableHead class="w-1/100 text-right">Dauer</TableHead>
+                        <TableHead class="w-1/100 print:hidden"></TableHead>
+                    </TableRow>
+                </TableHeader>
+
+                <TableBody>
+                    <TableRow v-if="selectedTimesheet >= 0 && timesheets[selectedTimesheet].entries"
+                        v-for="entry in timesheets[selectedTimesheet].entries" class="bg-background">
+                        <TableCell class="p-0">
+                            <Checkbox v-model="entry.billed" class="text-success mx-auto"
+                                @update:model-value="updateEntry(entry)" />
+                        </TableCell>
+                        <TableCell>
+                            <Input type="date" :model-value="toShortISOString(entry.date)"
+                                @update:model-value="value => { entry.date = value as string; updateEntry(entry); }" />
+                        </TableCell>
+                        <TableCell>
+                            <div class="flex items-center gap-2">
+                                <Avatar class="size-6">
+                                    <AvatarImage :src="'storage/uploads/users/' + entry.user?.avatar"
+                                        :alt="entry.user?.name" />
+                                    <AvatarFallback class="rounded-full bg-primary text-black dark:text-white">
+                                        {{ getInitials(entry.user?.name) }}
+                                    </AvatarFallback>
+                                </Avatar>
+                                {{ entry.user?.name }}
+                            </div>
+                        </TableCell>
+                        <TableCell>
+                            <Editable v-model="entry.description as string" placeholder="Beschreibung"
+                                @change:model-value="value => { entry.description = value; updateEntry(entry); }" />
+                        </TableCell>
+                        <TableCell class="text-right">
+                            <NumberInput v-model="entry.hours" suffix=" h" :minimumFractionDigits="0"
+                                @update:model-value="updateEntry(entry)" />
+                        </TableCell>
+                        <TableCell class="print:hidden">
+                            <Button size="icon" variant="ghost" @click="deleteEntry(entry)">
+                                <Trash2 class="size-4 text-muted-foreground" />
+                            </Button>
+                        </TableCell>
+                    </TableRow>
+
+                </TableBody>
+
+                <TableFooter>
+                    <TableRow class="font-bold">
+                        <TableCell colspan="4" class="text-center">
+                            <Button variant="ghost" @click="addEntry" class="print:hidden">
+                                <Plus class="text-muted-foreground" /> Zeile einfügen
+                            </Button>
+                        </TableCell>
+                        <TableCell class="text-right" v-if="selectedTimesheet >= 0">{{
+                            hourFormatter.format(timesheetSummary(timesheets[selectedTimesheet]).totalHours ?? 0) }} h
+                        </TableCell>
+                        <TableCell class="print:hidden"></TableCell>
+                    </TableRow>
+                </TableFooter>
+            </Table>
+
+        </div>
+
+        <aside id="timesheets"
+            class="fixed top-0 w-90 -ml-8 py-8 px-4 h-full overflow-y-auto border-r border-sidebar-border/30 print:hidden bg-sidebar/50">
+            <div class="flex w-full max-w-sm items-center space-x-2">
+                <Input placeholder="Suchen..." class="w-full sticky top-0 z-10 bg-background" />
+                <Button @click="createTimesheet">
+                    <Plus /> Neu
+                </Button>
+            </div>
+
+            <ul class="flex flex-col mt-6">
+                <li v-for="timesheet in timesheets" @click="selectTimesheet(timesheet)"
+                    :data-active="selectedTimesheet >= 0 && timesheets[selectedTimesheet].id === timesheet.id"
+                    class="data-[active=true]:bg-background data-[active=true]:rounded data-[active=true]:shadow border-sidebar-border/75 data-[active=true]:border-transparent data-[active=true]:z-10 border-b p-4 hover:bg-accent flex gap-2 flex-col -my-px">
+                    <h3 class="font-semibold">{{ timesheet.title }}</h3>
+                    <div class="text-sm flex items-center justify-between gap-3">
+                        <span v-if="timesheetSummary(timesheet).earliestDate" class="grow">
+                            <span class="text-muted-foreground">{{
+                                toShortLocalDate(timesheetSummary(timesheet).earliestDate!) }}</span>
+                            <span class="text-muted-foreground"
+                                v-if="timesheetSummary(timesheet).latestDate && timesheetSummary(timesheet).earliestDate && timesheetSummary(timesheet).latestDate! > timesheetSummary(timesheet).earliestDate!">
+                                –
+                                {{ toShortLocalDate(timesheetSummary(timesheet).latestDate!) }}</span>
+                        </span>
+                        <span v-if="timesheetSummary(timesheet).totalHours">{{ timesheetSummary(timesheet).totalHours }}
+                            Std.</span>
+                        <Progress
+                            v-if="timesheetSummary(timesheet).hoursBilled && timesheetSummary(timesheet).hoursBilled > 0 && timesheetSummary(timesheet).totalHours"
+                            :model-value="(timesheetSummary(timesheet).hoursBilled / timesheetSummary(timesheet).totalHours) * 100"
+                            class="h-1 w-10 text-muted-foreground" />
+                    </div>
+                </li>
+            </ul>
+        </aside>
+
     </AppLayout>
 </template>
diff --git a/resources/js/pages/auth/TwoFactorChallenge.vue b/resources/js/pages/auth/TwoFactorChallenge.vue
index 70687f9..3b07544 100644
--- a/resources/js/pages/auth/TwoFactorChallenge.vue
+++ b/resources/js/pages/auth/TwoFactorChallenge.vue
@@ -17,16 +17,16 @@ interface AuthConfigContent {
 const authConfigContent = computed<AuthConfigContent>(() => {
     if (showRecoveryInput.value) {
         return {
-            title: 'Recovery Code',
-            description: 'Please confirm access to your account by entering one of your emergency recovery codes.',
-            toggleText: 'login using an authentication code',
+            title: 'Wiederherstellungscode',
+            description: 'Bitte bestätige den Zugriff auf Dein Konto, indem Du einen Deiner Notfall-Wiederherstellungscodes eingeben.',
+            toggleText: 'mit Authentifizierungscode anmelden',
         };
     }
 
     return {
         title: 'Authentication Code',
-        description: 'Enter the authentication code provided by your authenticator application.',
-        toggleText: 'login using a recovery code',
+        description: 'Bitte gib das Einmalkennwort aus Deiner Authentifizierungs-App ein.',
+        toggleText: 'mit einem Wiederherstellungscode anmelden',
     };
 });
 
@@ -44,51 +44,46 @@ const codeValue = computed<string>(() => code.value.join(''));
 
 <template>
     <AuthLayout :title="authConfigContent.title" :description="authConfigContent.description">
+
         <Head title="Two-Factor Authentication" />
 
         <div class="space-y-6">
             <template v-if="!showRecoveryInput">
-                <Form v-bind="store.form()" class="space-y-4" reset-on-error @error="code = []" #default="{ errors, processing, clearErrors }">
+                <Form v-bind="store.form()" class="space-y-4" reset-on-error @error="code = []"
+                    #default="{ errors, processing, clearErrors }">
                     <input type="hidden" name="code" :value="codeValue" />
                     <div class="flex flex-col items-center justify-center space-y-3 text-center">
                         <div class="flex w-full items-center justify-center">
-                            <PinInput id="otp" placeholder="○" v-model="code" type="number" otp>
+                            <PinInput id="otp" placeholder="" v-model="code" type="number" otp>
                                 <PinInputGroup>
-                                    <PinInputSlot v-for="(id, index) in 6" :key="id" :index="index" :disabled="processing" autofocus />
+                                    <PinInputSlot v-for="(id, index) in 6" :key="id" :index="index"
+                                        :disabled="processing" autofocus class="bg-background" />
                                 </PinInputGroup>
                             </PinInput>
                         </div>
                         <InputError :message="errors.code" />
                     </div>
-                    <Button type="submit" class="w-full" :disabled="processing">Continue</Button>
+                    <Button type="submit" variant="action" class="w-full" :disabled="processing">Weiter</Button>
                     <div class="text-center text-sm text-muted-foreground">
-                        <span>or you can </span>
-                        <button
-                            type="button"
-                            class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
-                            @click="() => toggleRecoveryMode(clearErrors)"
-                        >
+                        <Button type="button" variant="link" @click="() => toggleRecoveryMode(clearErrors)">
                             {{ authConfigContent.toggleText }}
-                        </button>
+                        </Button>
                     </div>
                 </Form>
             </template>
 
             <template v-else>
-                <Form v-bind="store.form()" class="space-y-4" reset-on-error #default="{ errors, processing, clearErrors }">
-                    <Input name="recovery_code" type="text" placeholder="Enter recovery code" :autofocus="showRecoveryInput" required />
+                <Form v-bind="store.form()" class="space-y-4" reset-on-error
+                    #default="{ errors, processing, clearErrors }">
+                    <Input name="recovery_code" type="text" placeholder="Enter recovery code"
+                        :autofocus="showRecoveryInput" required />
                     <InputError :message="errors.recovery_code" />
-                    <Button type="submit" class="w-full" :disabled="processing">Continue</Button>
+                    <Button type="submit" class="w-full" :disabled="processing">Weiter</Button>
 
                     <div class="text-center text-sm text-muted-foreground">
-                        <span>or you can </span>
-                        <button
-                            type="button"
-                            class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
-                            @click="() => toggleRecoveryMode(clearErrors)"
-                        >
+                        <Button type="button" variant="link" @click="() => toggleRecoveryMode(clearErrors)">
                             {{ authConfigContent.toggleText }}
-                        </button>
+                        </Button>
                     </div>
                 </Form>
             </template>
diff --git a/resources/js/pages/settings/TwoFactor.vue b/resources/js/pages/settings/TwoFactor.vue
index 3eea054..d25414f 100644
--- a/resources/js/pages/settings/TwoFactor.vue
+++ b/resources/js/pages/settings/TwoFactor.vue
@@ -2,7 +2,7 @@
 import HeadingSmall from '@/components/HeadingSmall.vue';
 import TwoFactorRecoveryCodes from '@/components/TwoFactorRecoveryCodes.vue';
 import TwoFactorSetupModal from '@/components/TwoFactorSetupModal.vue';
-import { Badge } from '@/components/ui/badge';
+import { Badge } from '@/components/ui/crm-badge';
 import { Button } from '@/components/ui/crm-button';
 import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
 import AppLayout from '@/layouts/AppLayout.vue';
diff --git a/resources/js/services/NotesService.ts b/resources/js/services/NotesService.ts
new file mode 100644
index 0000000..389bf8e
--- /dev/null
+++ b/resources/js/services/NotesService.ts
@@ -0,0 +1,59 @@
+import axios, { AxiosError } from 'axios';
+import { Note, PipelineItem } from '@/types';
+import { toast } from 'vue-sonner';
+
+const API_URL = '/api/notes';
+
+export default {
+    /**
+     * Retrieves all notes
+     * @returns Promise<Note<PipelineItem>[] | null>
+     */
+    async getAllNotes(modelType: string, notableId: number): Promise<Note<PipelineItem>[] | null> {
+        try {
+            const response = await axios.get<Note<PipelineItem>[]>(`${API_URL}/${modelType}/${notableId}`)
+            return response.data;
+        } catch (error) {
+            toast.error('Fehler beim Laden der Notizen', { description: (error as AxiosError).message })
+            console.error(error)
+        }
+
+        return null
+    },
+
+    /**
+     * Creates a new note
+     * @param note - The note data to create
+     * @returns Promise<Note>
+     */
+    async createNote(note: Partial<Note>): Promise<Note> {
+        const response = await axios.post<Note>(API_URL, note);
+        return response.data;
+    },
+
+    /**
+     * Update an existing note
+     * @param note - The Note object to update
+     * @returns 
+     */
+    async updateNote(note: Partial<Note>): Promise<Note> {
+        const response = await axios.put<Note>(`${API_URL}/${note.id}`, note);
+        return response.data;
+    },
+
+    /**
+     * Deletes a note by ID
+     * @param noteId - The id of the note to delete
+     * @returns boolean - True if the note was deleted, false otherwise
+     */
+    async deleteNote(noteId: number): Promise<boolean> {
+        try {
+            const response = await axios.delete(`${API_URL}/${noteId}`);
+            return true;
+        } catch (error) {
+            toast.error('Fehler beim LÖschen der Notiz', { description: (error as AxiosError).message })
+            console.error(error)
+            return false;
+        }
+    },
+};
\ No newline at end of file
diff --git a/resources/js/services/PipelineService.ts b/resources/js/services/PipelineService.ts
new file mode 100644
index 0000000..db5fbff
--- /dev/null
+++ b/resources/js/services/PipelineService.ts
@@ -0,0 +1,24 @@
+import axios, { AxiosError } from 'axios';
+import { Note, PipelineItem } from '@/types';
+import { toast } from 'vue-sonner';
+
+const API_URL = '/api/pipeline';
+const ITEMS_API_URL = '/api/pipelineItems';
+
+export default {
+    /**
+     * Deletes an item by ID
+     * @param id - The id of the item to delete
+     * @returns boolean - True if the item was deleted, false otherwise
+     */
+    async deletePipelineItem(id: number): Promise<boolean> {
+        try {
+            const response = await axios.delete(`${ITEMS_API_URL}/${id}`);
+            return true;
+        } catch (error) {
+            toast.error('Fehler beim Löschen des Vorgangs', { description: (error as AxiosError).message })
+            console.error(error)
+            return false;
+        }
+    },
+};
\ No newline at end of file
diff --git a/resources/js/services/TimesheetService.ts b/resources/js/services/TimesheetService.ts
new file mode 100644
index 0000000..51e20c9
--- /dev/null
+++ b/resources/js/services/TimesheetService.ts
@@ -0,0 +1,106 @@
+// resources/js/services/TimesheetService.ts
+import axios, { AxiosResponse } from 'axios';
+import { Timesheet, TimesheetEntry } from '@/types';
+import { update } from '@/routes/password';
+
+const API_URL = '/api/timesheets';
+const ENTRY_API_URL = '/api/timesheet-entries';
+
+export default {
+    /**
+     * Retrieves all timesheets
+     * @returns Promise<Timesheet[]>
+     */
+    async getAllTimesheets(): Promise<Timesheet[]> {
+        const response = await axios.get<Timesheet[]>(API_URL);
+        return response.data;
+    },
+
+    /**
+     * Creates a new timesheet
+     * @param timesheet - The timesheet data to create
+     * @returns Promise<Timesheet>
+     */
+    async createTimesheet(timesheet: Partial<Timesheet>): Promise<Timesheet> {
+        const response = await axios.post<Timesheet>(API_URL, timesheet);
+        return response.data;
+    },
+
+    /**
+     * Update an existing timesheet
+     * @param timesheet - The Timesheet object to update
+     * @returns 
+     */
+    async updateTimesheet(timesheet: Partial<Timesheet>): Promise<Timesheet> {
+        const response = await axios.put<Timesheet>(`${API_URL}/${timesheet.id}`, timesheet);
+        return response.data;
+    },
+
+    /**
+     * Deletes a timesheet by ID
+     * @param timesheetId - The id of the timesheet to delete
+     * @returns Promise<AxiosResponse>
+     */
+    async deleteTimesheet(timesheetId: number): Promise<AxiosResponse> {
+        const response = await axios.delete(`${API_URL}/${timesheetId}`);
+        return response.data;
+    },
+
+    /**
+     * Retrieves all entries for a specific timesheet
+     * @param timesheetId - The ID of the timesheet
+     * @returns Promise<TimesheetEntry[]>
+     */
+    async getTimesheetEntries(timesheetId: number): Promise<TimesheetEntry[]> {
+        const response = await axios.get<TimesheetEntry[]>(`${API_URL}/${timesheetId}/entries`);
+        return response.data;
+    },
+
+    /**
+     * Retrieves all timesheet entries
+     * @returns Promise<TimesheetEntry[]>
+     */
+    async getAllEntries(): Promise<TimesheetEntry[]> {
+        const response = await axios.get<TimesheetEntry[]>(ENTRY_API_URL);
+        return response.data;
+    },
+
+    /**
+     * Creates a new timesheet entry
+     * @param entry - The entry data to create
+     * @returns Promise<TimesheetEntry>
+     */
+    async createEntry(entry: Partial<TimesheetEntry>): Promise<TimesheetEntry> {
+        const response = await axios.post<TimesheetEntry>(ENTRY_API_URL, entry);
+        return response.data;
+    },
+
+    /**
+     * Updates an existing timesheet entry
+     * @param entry - The TimesheetEntry object to update
+     * @returns Promise<TimesheetEntry>
+     */
+    async updateEntry(entry: Partial<TimesheetEntry>): Promise<TimesheetEntry> {
+        const response = await axios.put<TimesheetEntry>(`${ENTRY_API_URL}/${entry.id}`, entry);
+        return response.data;
+    },
+
+    /**
+     * Toggles the billed status of a timesheet entry
+     * @param entryId - The ID of the entry to toggle
+     * @returns Promise<TimesheetEntry>
+     */
+    async toggleBilled(entryId: number): Promise<TimesheetEntry> {
+        const response = await axios.patch<TimesheetEntry>(`${ENTRY_API_URL}/${entryId}/toggle-billed`);
+        return response.data;
+    },
+
+    /**
+     * Deletes a timesheet entry
+     * @param entryId - The ID of the entry to delete
+     * @returns Promise<void>
+     */
+    async deleteEntry(entryId: number): Promise<void> {
+        await axios.delete(`${ENTRY_API_URL}/${entryId}`);
+    }
+};
\ No newline at end of file
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
index aaacfba..505b470 100644
--- a/resources/js/types/index.d.ts
+++ b/resources/js/types/index.d.ts
@@ -39,8 +39,8 @@ export interface User {
     email: string;
     avatar?: string;
     email_verified_at: string | null;
-    created_at: string;
-    updated_at: string;
+    createdAt: string;
+    updatedAt: string;
 }
 
 
@@ -104,30 +104,28 @@ export function newContact(): Contact {
     }
 }
 
-export interface Notable {
-    id: number;
-    notes?: Note[];
-}
-
-export interface Note<T extends Notable = Notable> {
+export interface Note {
     id: number;
     user: User;
     text: string;
-    notable_id: number;
-    notable_type: string;
-    notable?: T;
-    createdAt: Date;
+    notableId: number;
+    notableType: NoteableType;
+    createdAt: string;
+    updatedAt: string;
 }
 
-export function newNote<T extends Notable>(user: User, notable: T): Note<T> {
+export type NoteableType = 'PipelineItem' | 'Customer'
+
+export function newNote(user: User, text: string, notableId: number, noteableType: NoteableType): Note {
     return {
         id: 0,
         user: user,
-        text: '',
-        notable_id: notable.id,
-        notable_type: notable.constructor.name,
-        notable: notable
-    };
+        text: text,
+        notableId: notableId,
+        notableType: noteableType,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString()
+    }
 }
 
 export interface Customer {
@@ -185,12 +183,12 @@ export interface Todo {
     typeId: number | null;
     type?: TodoType | null;
     url: string | null;
-    dueDate: Date | null;
+    dueDate: string | null;
     recurring: boolean;
     priority: number;
     status: string;
-    createdAt: Date;
-    lastModified: Date;
+    createdAt: string;
+    lastModified: string;
     parent: string | null;
     parentTodo?: Todo | null;
     children?: Todo[];
@@ -210,8 +208,8 @@ export function newTodo(): Todo {
         recurring: false,
         priority: 1,
         status: 'pending',
-        createdAt: new Date(),
-        lastModified: new Date(),
+        createdAt: new Date().toISOString(),
+        lastModified: new Date().toISOString(),
         parent: null,
         parentTodo: null,
         children: [],
@@ -251,7 +249,7 @@ export interface Invoice {
 export type InvoiceType = Invoice
 
 export function newInvoice(): Invoice {
-    const date = new Date();
+    const date = new Date().toISOString();
 
     return {
         id: 0,
@@ -340,16 +338,16 @@ export function newPaymentTerms(): PaymentTerms {
 export interface ProductCategory {
     id: number;
     name: string;
-    createdAt: Date;
-    updatedAt: Date;
+    createdAt: string;
+    updatedAt: string;
 }
 
 export function newProductCategory(): ProductCategory {
     return {
         id: 0,
         name: '',
-        createdAt: new Date(),
-        updatedAt: new Date()
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString()
     }
 }
 
@@ -357,8 +355,8 @@ export interface Unit {
     id: number;
     name: string;
     symbol: string | null;
-    createdAt: Date;
-    updatedAt: Date;
+    createdAt: string;
+    updatedAt: string;
 }
 
 export function newUnit(): Unit {
@@ -366,8 +364,8 @@ export function newUnit(): Unit {
         id: 2,
         name: 'Stunden',
         symbol: 'h',
-        createdAt: new Date(),
-        updatedAt: new Date()
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString()
     }
 }
 
@@ -384,8 +382,8 @@ export interface Product {
     unitId: number | null;
     unit: Unit | null;
     image: string | null;
-    createdAt: Date;
-    updatedAt: Date;
+    createdAt: string;
+    updatedAt: string;
 }
 
 export function newProduct(): Product {
@@ -402,7 +400,117 @@ export function newProduct(): Product {
         unitId: null,
         unit: null,
         image: null,
-        createdAt: new Date(),
-        updatedAt: new Date()
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString()
     }
+}
+
+
+// Pipeline item used by CRM pipeline
+export interface PipelineItem {
+    id: number;
+    pipelineLaneId: number;
+    title: string;
+    position: number;
+    expectedRevenue: number | null;
+    dueDate: string | null;
+    description: string | null;
+    notes?: Note<PipelineItem>[];
+    createdAt?: string;
+    updatedAt?: string;
+}
+
+export function newPipelineItem(): PipelineItem {
+    return {
+        id: 0,
+        title: 'Neue Spalte',
+        position: 0,
+        expectedRevenue: null,
+        dueDate: null,
+        description: null,
+        notes: [],
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+    }
+}
+
+// Pipeline lane used by CRM pipeline
+export interface PipelineLane {
+    id: number;
+    title: string;
+    position: number;
+    createdAt?: string;
+    updatedAt?: string;
+    items?: PipelineItem[];
+}
+
+export function newPipelineLane(): PipelineLane {
+    return {
+        id: 0,
+        title: '',
+        position: 0,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        items: [],
+    };
+}
+
+// Timesheet Types
+export interface Timesheet {
+    id: number;
+    title: string;
+    createdAt: string;
+    updatedAt: string;
+    entries?: TimesheetEntry[];
+    totalHours?: number;
+    hoursBilled?: number;
+    earliestDate?: string | null;
+    latestDate?: string | null;
+}
+
+export type TimesheetType = Timesheet;
+
+export function newTimesheet(): Timesheet {
+    return {
+        id: 0,
+        title: 'Neuer Stundenzettel',
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        entries: [],
+        totalHours: 0,
+        hoursBilled: 0,
+        earliestDate: null,
+        latestDate: null
+    };
+}
+
+// TimesheetEntry Types
+export interface TimesheetEntry {
+    id: number;
+    timesheetId: number;
+    date: string; // ISO format
+    userId: number;
+    description: string | null;
+    hours: number;
+    billed: boolean;
+    createdAt: string;
+    updatedAt: string;
+    timesheet?: Timesheet;
+    user?: User;
+}
+
+export type TimesheetEntryType = TimesheetEntry;
+
+export function newTimesheetEntry(): TimesheetEntry {
+    return {
+        id: 0,
+        timesheetId: 0,
+        date: new Date().toISOString(),
+        userId: 0,
+        description: null,
+        hours: 0,
+        billed: false,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString()
+    };
 }
\ No newline at end of file
diff --git a/routes/api.php b/routes/api.php
index f39b68f..d5e9a04 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -12,21 +12,29 @@
 use App\Http\Controllers\UnitController;
 use App\Mail\OrderConfirmation;
 use App\Services\CaldavService;
+use App\Http\Controllers\TimesheetController;
+use App\Http\Controllers\TimesheetEntryController;
+use App\Http\Controllers\PipelineController;
+use App\Http\Controllers\PipelineItemController;
+
+Route::get('/pipeline', [PipelineController::class, 'index']);
+Route::post('/pipeline/positions', [PipelineController::class, 'updatePositions']);
+
+Route::get('/pipelineItems', [PipelineItemController::class, 'index']);
+Route::get('/pipelineItems/{id}', [PipelineItemController::class, 'single']);
+Route::post('/pipelineItems', [PipelineItemController::class, 'store']);
+Route::put('/pipelineItems/{id}', [PipelineItemController::class, 'update']);
+Route::delete('/pipelineItems/{id}', [PipelineItemController::class, 'delete']);
 
 Route::get('/customers/{id}', [CustomerController::class, 'single']);
 Route::get('/customers', [CustomerController::class, 'index']);
 
-Route::get('/customers/{id}/notes', [NoteController::class, 'index'])
-    ->defaults('modelType', 'customer')
-    ->name('customers.notes.index');
-
-Route::post('/customers/{id}/notes', [NoteController::class, 'store'])
-    ->defaults('modelType', 'customer')
+Route::get('/notes/{modelType}/{notableId}', [NoteController::class, 'index']);
+Route::delete('/notes/{id}', [NoteController::class, 'delete']);
+Route::post('/notes', [NoteController::class, 'store'])
     ->name('customers.notes.store');
 
 
-Route::delete('/notes/{id}', [NoteController::class, 'delete']);
-
 Route::get('/todo-types', function () {
     return \App\Models\TodoType::all();
 });
@@ -99,3 +107,8 @@
 Route::post('/settings', [SettingController::class, 'update']);
 
 Route::apiResource('/units', UnitController::class);
+
+Route::apiResource('timesheets', TimesheetController::class);
+Route::get('timesheets/{timesheet}/entries', [TimesheetEntryController::class, 'getEntriesForTimesheet']);
+Route::apiResource('timesheet-entries', TimesheetEntryController::class);
+Route::patch('timesheet-entries/{timesheetEntry}/toggle-billed', [TimesheetEntryController::class, 'toggleBilled']);
diff --git a/routes/web.php b/routes/web.php
index c862a1f..8272cca 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -9,23 +9,20 @@
 use App\Http\Controllers\InvoiceController;
 use App\Http\Controllers\CustomerController;
 use App\Http\Controllers\ProductController;
-use App\Models\Setting;
+use App\Http\Controllers\TimesheetController;
+use App\Http\Controllers\PipelineController;
 
 Route::middleware('auth')->group(function () {
 
     // Dashboard
-    Route::get('/', function () {
-        return Inertia::render('Dashboard');
-    })->name('home');
+    Route::redirect('/', '/dashboard');
 
     Route::get('dashboard', function () {
         return Inertia::render('Dashboard');
     })->name('dashboard');
 
     // CRM
-    Route::get('crm', function () {
-        return Inertia::render('CRM');
-    })->name('crm');
+    Route::get('pipeline', [PipelineController::class, 'show'])->name('pipeline');
 
     // Offers
     Route::get('offers', function () {
@@ -55,9 +52,8 @@
     // Products
     Route::get('products', [ProductController::class, 'show'])->name('products');
 
-    Route::get('timesheets', function () {
-        return Inertia::render('Timesheets');
-    })->name('timesheets');
+    // Timesheets
+    Route::get('timesheets', [TimesheetController::class, 'show'])->name('timesheets');
 
     // Procedural Documentation
     Route::get('proceduralDocumentation', function () {