diff --git a/app/Concerns/BelongsToOrganization.php b/app/Concerns/BelongsToOrganization.php
new file mode 100644
index 00000000..143ea3d0
--- /dev/null
+++ b/app/Concerns/BelongsToOrganization.php
@@ -0,0 +1,40 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Concerns;
+
+use App\Models\Organization;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+trait BelongsToOrganization
+{
+    public function initializeBelongsToOrganization(): void
+    {
+        $this->fillable[] = 'organization_id';
+    }
+
+    public function organization(): BelongsTo
+    {
+        return $this->belongsTo(Organization::class);
+    }
+
+    public function belongsToOrganization(?Organization $organization = null): bool
+    {
+        if ($organization === null) {
+            return $this->organization_id !== null;
+        }
+
+        return $this->organization_id === $organization->getKey();
+    }
+
+    public function scopeWhereBelongsToOrganization(Builder $query, ?Organization $organization = null): Builder
+    {
+        if ($organization === null) {
+            return $query->whereNotNull('organization_id');
+        }
+
+        return $query->whereBelongsTo($organization);
+    }
+}
diff --git a/app/Concerns/ArrayableEnum.php b/app/Concerns/Enums/Arrayable.php
similarity index 62%
rename from app/Concerns/ArrayableEnum.php
rename to app/Concerns/Enums/Arrayable.php
index c58af5d5..4c952ef2 100644
--- a/app/Concerns/ArrayableEnum.php
+++ b/app/Concerns/Enums/Arrayable.php
@@ -2,9 +2,9 @@
 
 declare(strict_types=1);
 
-namespace App\Concerns;
+namespace App\Concerns\Enums;
 
-trait ArrayableEnum
+trait Arrayable
 {
     public static function names(): array
     {
@@ -28,18 +28,4 @@ public static function options(): array
             ])
             ->all();
     }
-
-    public function label(): string
-    {
-        $label = collect([$this->translationKeyPrefix(), $this->value])
-            ->filter()
-            ->implode('.');
-
-        return __($label);
-    }
-
-    protected function translationKeyPrefix(): ?string
-    {
-        return null;
-    }
 }
diff --git a/app/Concerns/Enums/Comparable.php b/app/Concerns/Enums/Comparable.php
new file mode 100644
index 00000000..efefc281
--- /dev/null
+++ b/app/Concerns/Enums/Comparable.php
@@ -0,0 +1,20 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Concerns\Enums;
+
+trait Comparable
+{
+    /**
+     * Check if this enum matches the given enum instance or value.
+     */
+    public function is(mixed $enum): bool
+    {
+        if ($enum instanceof static) {
+            return $this->value === $enum->value;
+        }
+
+        return $this->value === $enum;
+    }
+}
diff --git a/app/Concerns/Enums/HasLabel.php b/app/Concerns/Enums/HasLabel.php
new file mode 100644
index 00000000..b96a3ef4
--- /dev/null
+++ b/app/Concerns/Enums/HasLabel.php
@@ -0,0 +1,22 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Concerns\Enums;
+
+trait HasLabel
+{
+    protected function labelKeyPrefix(): ?string
+    {
+        return null;
+    }
+
+    public function label(): string
+    {
+        $label = collect([$this->labelKeyPrefix(), $this->value])
+            ->filter()
+            ->implode('.');
+
+        return __($label);
+    }
+}
diff --git a/app/Concerns/HasRole.php b/app/Concerns/HasRole.php
new file mode 100644
index 00000000..5aa8b7c6
--- /dev/null
+++ b/app/Concerns/HasRole.php
@@ -0,0 +1,83 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Concerns;
+
+use App\Enums\UserRole;
+use App\Models\Organization;
+use Illuminate\Database\Eloquent\Builder;
+
+trait HasRole
+{
+    public function initializeHasRole(): void
+    {
+        $this->casts['role'] = UserRole::class;
+    }
+
+    private function hasRole(UserRole $role): bool
+    {
+        return $this->role === $role;
+    }
+
+    public function isSuperUser(): bool
+    {
+        return $this->isSuperAdmin() || $this->isSuperManager();
+    }
+
+    public function isSuperAdmin(): bool
+    {
+        return $this->hasRole(UserRole::SUPERADMIN);
+    }
+
+    public function isSuperManager(): bool
+    {
+        return $this->hasRole(UserRole::SUPERMANAGER);
+    }
+
+    public function isOrganizationAdmin(?Organization $organization = null): bool
+    {
+        return $this->hasRole(UserRole::ADMIN) && $this->belongsToOrganization($organization);
+    }
+
+    public function isOrganizationManager(?Organization $organization = null): bool
+    {
+        return $this->hasRole(UserRole::USER) && $this->belongsToOrganization($organization);
+    }
+
+    // ========================================== //
+    public function scopeOnlySuperUsers(Builder $query): Builder
+    {
+        return $query->whereIn('role', [UserRole::SUPERADMIN, UserRole::SUPERMANAGER]);
+    }
+
+    public function scopeOnlySuperAdmins(Builder $query): Builder
+    {
+        return $query->where('role', UserRole::SUPERADMIN);
+    }
+
+    public function scopeOnlySuperManagers(Builder $query): Builder
+    {
+        return $query->where('role', UserRole::SUPERMANAGER);
+    }
+
+    public function scopeWithoutSuperUsers(Builder $query): Builder
+    {
+        return $query->whereNotIn('role', [UserRole::SUPERADMIN, UserRole::SUPERMANAGER]);
+    }
+
+    // ========================================== //
+
+    public function scopeOnlyOrganizationAdmins(Builder $query, ?Organization $organization = null): Builder
+    {
+        return $query->where('role', UserRole::ADMIN)
+            ->whereBelongsToOrganization($organization);
+    }
+
+    // ========================================== //
+
+    public function isDonor(): bool
+    {
+        return $this->role === UserRole::donor;
+    }
+}
diff --git a/app/Concerns/LogsActivityForApproval.php b/app/Concerns/LogsActivityForApproval.php
index 87c49eb5..3ddd1894 100644
--- a/app/Concerns/LogsActivityForApproval.php
+++ b/app/Concerns/LogsActivityForApproval.php
@@ -59,7 +59,7 @@ public function tapActivity(Activity $activity, string $eventName)
             return;
         }
 
-        if (auth()->user()->isBbAdmin() || auth()->user()->isBbManager()) {
+        if (auth()->user()->isSuperUser()) {
             activity()->disableLogging();
 
             if (! $activity->description) {
diff --git a/app/Concerns/MustSetInitialPassword.php b/app/Concerns/MustSetInitialPassword.php
index 30fe6707..85fd17c2 100644
--- a/app/Concerns/MustSetInitialPassword.php
+++ b/app/Concerns/MustSetInitialPassword.php
@@ -4,9 +4,8 @@
 
 namespace App\Concerns;
 
-use App\Enums\UserRole;
-use App\Notifications\Admin\WelcomeNotification as AdminWelcomeNotification;
-use App\Notifications\Ngo\WelcomeNotification;
+use App\Notifications\Admin;
+use App\Notifications\Ngo;
 use Illuminate\Support\Facades\Hash;
 use Illuminate\Support\Str;
 
@@ -21,10 +20,8 @@ protected static function bootMustSetInitialPassword(): void
         });
 
         static::created(function (self $user) {
-            if (! app()->runningInConsole()) {
-                if (! empty($user->created_by)) {
-                    $user->sendWelcomeNotification();
-                }
+            if (filled($user->created_by)) {
+                $user->sendWelcomeNotification();
             }
         });
     }
@@ -45,11 +42,10 @@ public function setPassword(string $password): bool
 
     public function sendWelcomeNotification(): void
     {
-        if ($this->role === UserRole::ngo_admin) {
-            $this->notify(new WelcomeNotification());
-
-            return;
-        }
-        $this->notify(new AdminWelcomeNotification());
+        $this->notify(
+            $this->isSuperUser()
+                ? new Admin\WelcomeNotification
+                : new Ngo\WelcomeNotification
+        );
     }
 }
diff --git a/app/Enums/ActivityDomain.php b/app/Enums/ActivityDomain.php
index 864061c5..89d6e63f 100644
--- a/app/Enums/ActivityDomain.php
+++ b/app/Enums/ActivityDomain.php
@@ -4,11 +4,12 @@
 
 namespace App\Enums;
 
-use App\Concerns\ArrayableEnum;
+use App\Concerns\Enums\Arrayable;
 
 enum ActivityDomain: string
 {
-    use ArrayableEnum;
+    use Arrayable;
+
     case environmental_protection = 'Protecția mediului';
     case education = 'Educație';
     case healthcare = 'Sănătate';
diff --git a/app/Enums/OrganizationStatus.php b/app/Enums/OrganizationStatus.php
index 1e787ec5..135bc66a 100644
--- a/app/Enums/OrganizationStatus.php
+++ b/app/Enums/OrganizationStatus.php
@@ -4,18 +4,23 @@
 
 namespace App\Enums;
 
-use App\Concerns\ArrayableEnum;
+use App\Concerns\Enums\Arrayable;
+use App\Concerns\Enums\Comparable;
+use App\Concerns\Enums\HasLabel;
 
 enum OrganizationStatus: string
 {
-    use ArrayableEnum;
+    use Arrayable;
+    use Comparable;
+    use HasLabel;
+
     case draft = 'draft';
     case pending = 'pending';
     case approved = 'active';
     case rejected = 'disabled';
     case pending_changes = 'pending_changes';
 
-    protected function translationKeyPrefix(): ?string
+    protected function labelKeyPrefix(): ?string
     {
         return 'organization.status_arr';
     }
diff --git a/app/Enums/ProjectStatus.php b/app/Enums/ProjectStatus.php
index a15282f5..47eaee8f 100644
--- a/app/Enums/ProjectStatus.php
+++ b/app/Enums/ProjectStatus.php
@@ -4,11 +4,16 @@
 
 namespace App\Enums;
 
-use App\Concerns\ArrayableEnum;
+use App\Concerns\Enums\Arrayable;
+use App\Concerns\Enums\Comparable;
+use App\Concerns\Enums\HasLabel;
 
 enum ProjectStatus: string
 {
-    use ArrayableEnum;
+    use Arrayable;
+    use Comparable;
+    use HasLabel;
+
     case draft = 'draft';
     case pending = 'pending';
     case change_request = 'change_request';
@@ -17,7 +22,7 @@ enum ProjectStatus: string
     case active = 'active';
     case disabled = 'disabled';
 
-    protected function translationKeyPrefix(): ?string
+    protected function labelKeyPrefix(): ?string
     {
         return 'project.status_arr';
     }
diff --git a/app/Enums/UserRole.php b/app/Enums/UserRole.php
index 5084a6fb..a22c69cd 100644
--- a/app/Enums/UserRole.php
+++ b/app/Enums/UserRole.php
@@ -4,17 +4,24 @@
 
 namespace App\Enums;
 
-use App\Concerns\ArrayableEnum;
+use App\Concerns\Enums\Arrayable;
+use App\Concerns\Enums\Comparable;
+use App\Concerns\Enums\HasLabel;
 
 enum UserRole: string
 {
-    use ArrayableEnum;
+    use Arrayable;
+    use Comparable;
+    use HasLabel;
+
+    case SUPERADMIN = 'superadmin';
+    case SUPERMANAGER = 'supermanager';
+    case ADMIN = 'admin';
+    case USER = 'user';
+
     case donor = 'donor';
-    case ngo_admin = 'ngo-admin';
-    case bb_manager = 'bb-manager';
-    case bb_admin = 'bb-admin';
 
-    public function translationKeyPrefix(): string
+    public function labelKeyPrefix(): string
     {
         return 'user.roles';
     }
diff --git a/app/Enums/VolunteerStatus.php b/app/Enums/VolunteerStatus.php
index 9383cf0b..cb170b09 100644
--- a/app/Enums/VolunteerStatus.php
+++ b/app/Enums/VolunteerStatus.php
@@ -4,15 +4,21 @@
 
 namespace App\Enums;
 
-use App\Concerns\ArrayableEnum;
+use App\Concerns\Enums\Arrayable;
+use App\Concerns\Enums\Comparable;
+use App\Concerns\Enums\HasLabel;
 
 enum VolunteerStatus: string
 {
-    use ArrayableEnum;
+    use Arrayable;
+    use Comparable;
+    use HasLabel;
+
     case PENDING = 'pending';
     case APPROVED = 'approved';
     case REJECTED = 'rejected';
-    public function translationKeyPrefix(): string
+
+    public function labelKeyPrefix(): string
     {
         return 'volunteer.statuses';
     }
diff --git a/app/Filament/Resources/OrganizationResource/Actions/Tables/ExportAction.php b/app/Filament/Resources/OrganizationResource/Actions/Tables/ExportAction.php
index b71d3d31..2a31c9a1 100644
--- a/app/Filament/Resources/OrganizationResource/Actions/Tables/ExportAction.php
+++ b/app/Filament/Resources/OrganizationResource/Actions/Tables/ExportAction.php
@@ -45,7 +45,6 @@ protected function setUp(): void
                         ->with([
                             'activityDomains',
                             'counties',
-                            'users' => fn ($q) => $q->onlyNGOAdmins(),
                             'projects' => fn ($q) => $q->select('id', 'organization_id', 'status')
                                 ->withCount('donations'),
                         ])
diff --git a/app/Filament/Resources/OrganizationResource/RelationManagers/UsersRelationManager.php b/app/Filament/Resources/OrganizationResource/RelationManagers/UsersRelationManager.php
index 00fb8542..7c76630a 100644
--- a/app/Filament/Resources/OrganizationResource/RelationManagers/UsersRelationManager.php
+++ b/app/Filament/Resources/OrganizationResource/RelationManagers/UsersRelationManager.php
@@ -1,14 +1,16 @@
 <?php
 
+declare(strict_types=1);
+
 namespace App\Filament\Resources\OrganizationResource\RelationManagers;
 
-use Filament\Forms;
+use App\Models\User;
+use Filament\Forms\Components\TextInput;
 use Filament\Resources\Form;
 use Filament\Resources\RelationManagers\RelationManager;
 use Filament\Resources\Table;
 use Filament\Tables;
-use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Database\Eloquent\SoftDeletingScope;
+use Filament\Tables\Columns\TextColumn;
 
 class UsersRelationManager extends RelationManager
 {
@@ -25,9 +27,16 @@ public static function form(Form $form): Form
     {
         return $form
             ->schema([
-                Forms\Components\TextInput::make('name')
+                TextInput::make('name')
+                    ->label(__('user.name'))
                     ->required()
                     ->maxLength(255),
+
+                TextInput::make('email')
+                    ->label(__('user.email'))
+                    ->email()
+                    ->unique('users', 'email')
+                    ->required(),
             ]);
     }
 
@@ -35,20 +44,34 @@ public static function table(Table $table): Table
     {
         return $table
             ->columns([
-                Tables\Columns\TextColumn::make('name'),
+                TextColumn::make('name')
+                    ->label(__('user.name'))
+                    ->sortable(),
+
+                TextColumn::make('email')
+                    ->label(__('user.email'))
+                    ->sortable(),
+
+                TextColumn::make('role')
+                    ->label(__('user.role'))
+                    ->getStateUsing(fn (User $record) => $record->role?->label())
+                    ->sortable(),
             ])
             ->filters([
                 //
             ])
             ->headerActions([
-                Tables\Actions\CreateAction::make(),
+                Tables\Actions\AttachAction::make()
+                    ->label(__('user.action.attach'))
+                    ->modalHeading(__('user.action.attach'))
+                    ->color('primary'),
             ])
             ->actions([
-                Tables\Actions\EditAction::make(),
-                Tables\Actions\DeleteAction::make(),
+                Tables\Actions\DetachAction::make()
+                    ->label(__('user.action.detach')),
             ])
             ->bulkActions([
-                Tables\Actions\DeleteBulkAction::make(),
+                //
             ]);
     }
 }
diff --git a/app/Filament/Resources/TicketResource/RelationManagers/MessagesRelationManager.php b/app/Filament/Resources/TicketResource/RelationManagers/MessagesRelationManager.php
index 23c78013..529d7ed6 100644
--- a/app/Filament/Resources/TicketResource/RelationManagers/MessagesRelationManager.php
+++ b/app/Filament/Resources/TicketResource/RelationManagers/MessagesRelationManager.php
@@ -41,7 +41,7 @@ public static function table(Table $table): Table
                             ->translateLabel()
                             ->weight('bold')
                             ->color(function (Component $livewire, TicketMessage $record) {
-                                if ($record->user->isBbAdmin()) {
+                                if ($record->user->isSuperUser()) {
                                     return 'warning';
                                 }
 
diff --git a/app/Filament/Resources/UserResource.php b/app/Filament/Resources/UserResource.php
index 8a3d1b72..07e1b64a 100644
--- a/app/Filament/Resources/UserResource.php
+++ b/app/Filament/Resources/UserResource.php
@@ -10,7 +10,6 @@
 use App\Filament\Resources\UserResource\RelationManagers\DonationsRelationManager;
 use App\Filament\Resources\UserResource\RelationManagers\VolunteersRelationManager;
 use App\Models\User;
-use Filament\Forms\Components\Fieldset;
 use Filament\Forms\Components\Select;
 use Filament\Forms\Components\TextInput;
 use Filament\Resources\Form;
@@ -30,6 +29,8 @@ class UserResource extends Resource
 
     protected static ?string $navigationIcon = 'heroicon-o-users';
 
+    protected static ?string $recordTitleAttribute = 'name';
+
     public static function getPluralLabel(): ?string
     {
         return __('user.label.plural');
@@ -47,55 +48,39 @@ protected static function getNavigationGroup(): ?string
 
     public static function form(Form $form): Form
     {
-        return $form->schema([
-            Fieldset::make(__('user.labels.general_data'))
-                ->columns(1)->schema([
-                    TextInput::make('name')
-                        ->label(__('user.name'))
-                        ->inlineLabel()
-                        ->required()
-                        ->maxLength(255),
-                    TextInput::make('email')
-                        ->label(__('user.email'))
-                        ->email()
-                        ->unique('users', 'email')
-                        ->inlineLabel()
-                        ->required(),
-                    Select::make('role')
-                        ->label(__('user.role'))
-                        ->options(
-                            collect(
-                                UserRole::options()
-                            )->only(
-                                [
-                                    UserRole::bb_admin->value,
-                                    UserRole::bb_manager->value,
-                                    UserRole::ngo_admin->value,
-                                ]
-                            )->toArray()
-                        )->reactive()
-                        ->inlineLabel()
-                        ->visibleOn(['edit', 'create'])
-                        ->required(),
-                    Select::make('role')
-                        ->label(__('user.role'))
-                        ->options(UserRole::options())
-                        ->reactive()
-                        ->inlineLabel()
-                        ->visibleOn(['view'])
-                        ->required(),
-                    Select::make('organization')
-                        ->label(__('user.organization'))
-                        ->relationship('organization', 'name')
-                        ->hidden(function (callable $get) {
-                            return $get('role') !== UserRole::ngo_admin->value;
-                        })
-                        ->searchable()
-                        ->preload()
-                        ->required(),
-                ]),
-
-        ]);
+        return $form
+            ->columns(1)
+            ->schema([
+                TextInput::make('name')
+                    ->label(__('user.name'))
+                    ->inlineLabel()
+                    ->required()
+                    ->maxLength(255),
+
+                TextInput::make('email')
+                    ->label(__('user.email'))
+                    ->email()
+                    ->unique('users', 'email', ignoreRecord: true)
+                    ->inlineLabel()
+                    ->required(),
+
+                Select::make('role')
+                    ->label(__('user.role'))
+                    ->options(UserRole::options())
+                    ->enum(UserRole::class)
+                    ->reactive()
+                    ->inlineLabel()
+                    ->required(),
+
+                Select::make('organization')
+                    ->label(__('user.organization'))
+                    ->relationship('organization', 'name')
+                    ->hidden(fn (callable $get) => UserRole::ADMIN->is($get('role')))
+                    ->searchable()
+                    ->inlineLabel()
+                    ->preload()
+                    ->required(),
+            ]);
     }
 
     public static function table(Table $table): Table
@@ -148,16 +133,16 @@ public static function table(Table $table): Table
                 Tables\Actions\DeleteBulkAction::make(),
             ]);
     }
+
     public static function getRelations(): array
     {
         return [
             DonationsRelationManager::class,
             VolunteersRelationManager::class,
-            BadgesRelationManager::class
+            BadgesRelationManager::class,
         ];
     }
 
-
     public static function getPages(): array
     {
         return [
diff --git a/app/Filament/Resources/UserResource/Pages/CreateUser.php b/app/Filament/Resources/UserResource/Pages/CreateUser.php
index e61952f2..ce4c16e9 100644
--- a/app/Filament/Resources/UserResource/Pages/CreateUser.php
+++ b/app/Filament/Resources/UserResource/Pages/CreateUser.php
@@ -4,11 +4,7 @@
 
 namespace App\Filament\Resources\UserResource\Pages;
 
-use App\Enums\UserRole;
 use App\Filament\Resources\UserResource;
-use Filament\Forms\Components\Select;
-use Filament\Forms\Components\TextInput;
-use Filament\Resources\Form;
 use Filament\Resources\Pages\CreateRecord;
 
 class CreateUser extends CreateRecord
@@ -17,45 +13,6 @@ class CreateUser extends CreateRecord
 
     protected static bool $canCreateAnother = false;
 
-    public function form(Form $form): Form
-    {
-        return $form
-            ->schema([
-                TextInput::make('name')
-                    ->label(__('user.name'))
-                    ->required(),
-                TextInput::make('email')
-                    ->label(__('user.email'))
-                    ->email()
-                    ->unique('users', 'email')
-                    ->required(),
-                Select::make('role')
-                    ->label(__('user.role'))
-                    ->options(
-                        collect(
-                            UserRole::options()
-                        )->only(
-                            [
-                                UserRole::bb_admin->value,
-                                UserRole::bb_manager->value,
-                                UserRole::ngo_admin->value,
-                            ]
-                        )->toArray()
-                    )->reactive()
-                    ->required(),
-                Select::make('organization')
-                    ->label(__('user.organization'))
-                    ->relationship('organization', 'name')
-                    ->hidden(function (callable $get) {
-                        return $get('role') !== UserRole::ngo_admin->value;
-                    })
-                    ->searchable()
-                    ->preload()
-                    ->required(),
-
-            ]);
-    }
-
     protected function mutateFormDataBeforeCreate(array $data): array
     {
         $data['created_by'] = auth()->id();
diff --git a/app/Filament/Resources/UserResource/Pages/EditUser.php b/app/Filament/Resources/UserResource/Pages/EditUser.php
index 59f144db..2e14c622 100644
--- a/app/Filament/Resources/UserResource/Pages/EditUser.php
+++ b/app/Filament/Resources/UserResource/Pages/EditUser.php
@@ -4,12 +4,8 @@
 
 namespace App\Filament\Resources\UserResource\Pages;
 
-use App\Enums\UserRole;
 use App\Filament\Resources\UserResource;
-use Filament\Forms\Components\Select;
-use Filament\Forms\Components\TextInput;
 use Filament\Pages\Actions;
-use Filament\Resources\Form;
 use Filament\Resources\Pages\EditRecord;
 
 class EditUser extends EditRecord
@@ -22,43 +18,4 @@ protected function getActions(): array
             Actions\DeleteAction::make(),
         ];
     }
-
-    public function form(Form $form): Form
-    {
-        return $form
-            ->schema([
-                TextInput::make('name')
-                    ->label(__('user.name'))
-                    ->required(),
-                TextInput::make('email')
-                    ->label(__('user.email'))
-                    ->email()
-                    ->unique('users', 'email')
-                    ->required(),
-                Select::make('role')
-                    ->label(__('user.role'))
-                    ->options(
-                        collect(
-                            UserRole::options()
-                        )->only(
-                            [
-                                UserRole::bb_admin->value,
-                                UserRole::bb_manager->value,
-                                UserRole::ngo_admin->value,
-                            ]
-                        )->toArray()
-                    )->reactive()
-                    ->required(),
-                Select::make('organization')
-                    ->label(__('user.organization'))
-                    ->relationship('organization', 'name')
-                    ->hidden(function (callable $get) {
-                        return $get('role') !== UserRole::ngo_admin->value;
-                    })
-                    ->searchable()
-                    ->preload()
-                    ->required(),
-
-            ]);
-    }
 }
diff --git a/app/Forms/Components/UserLink.php b/app/Forms/Components/UserLink.php
index 1dbfd1d5..9835d8b6 100644
--- a/app/Forms/Components/UserLink.php
+++ b/app/Forms/Components/UserLink.php
@@ -16,7 +16,7 @@ class UserLink extends Field
     public function getUsers(): Collection
     {
         return $this->getRecord()
-            ->getAdministrators()
+            ->users
             ->map(fn (User $user) => [
                 'name' => $user->name,
                 'url' => UserResource::getUrl('view', $user),
diff --git a/app/Http/Controllers/Auth/RegisteredUserController.php b/app/Http/Controllers/Auth/RegisteredUserController.php
index 46caacf7..43e690de 100644
--- a/app/Http/Controllers/Auth/RegisteredUserController.php
+++ b/app/Http/Controllers/Auth/RegisteredUserController.php
@@ -43,12 +43,13 @@ public function store(RegistrationRequest $request): RedirectResponse
             'name' => $attributes['user']['name'],
             'email' => $attributes['user']['email'],
             'password' => Hash::make($attributes['user']['password']),
-            'role' => UserRole::tryFrom($attributes['type']),
+            'role' => $attributes['type'] === 'organization' ? UserRole::ADMIN : UserRole::USER,
+
         ]);
 
         event(new Registered($user));
 
-        if ($user->isNgoAdmin()) {
+        if ($user->isOrganizationAdmin()) {
             $attributes['ngo']['status'] = OrganizationStatus::draft;
 
             $organization = $user->organization()->create($attributes['ngo']);
@@ -70,7 +71,7 @@ public function update(Request $request, $userId): RedirectResponse
     {
         try {
             $user = User::find($userId);
-            $user->source_of_information = $request->input('source_of_information');
+            $user->referrer = $request->input('referrer');
             $user->save();
 
             return redirect()->back()
diff --git a/app/Http/Controllers/Auth/VerifyEmailController.php b/app/Http/Controllers/Auth/VerifyEmailController.php
index d93a4a09..61234fd5 100644
--- a/app/Http/Controllers/Auth/VerifyEmailController.php
+++ b/app/Http/Controllers/Auth/VerifyEmailController.php
@@ -24,7 +24,8 @@ public function __invoke(EmailVerificationRequest $request): RedirectResponse
 
         if ($request->user()->markEmailAsVerified()) {
             event(new Verified($request->user()));
-            if ($request->user()->isNgoAdmin()) {
+
+            if ($request->user()->isOrganizationAdmin()) {
                 event(new SendOrganizationForApproval($request->user()->load('organization')->organization));
             }
         }
diff --git a/app/Http/Controllers/Dashboard/ProjectController.php b/app/Http/Controllers/Dashboard/ProjectController.php
index 5f622c27..7c0e2243 100644
--- a/app/Http/Controllers/Dashboard/ProjectController.php
+++ b/app/Http/Controllers/Dashboard/ProjectController.php
@@ -39,17 +39,9 @@ public function index(Request $request)
 
     public function create()
     {
-        $counties = cache()->remember('counties', 60 * 60 * 24, function () {
-            return \App\Models\County::get(['name', 'id']);
-        });
-
-        $projectCategories = cache()->remember('projectCategories', 60 * 60 * 24, function () {
-            return ProjectCategory::get(['name', 'id']);
-        });
-
         return Inertia::render('AdminOng/Projects/AddProject', [
-            'counties' => $counties,
-            'projectCategories' => $projectCategories,
+            'counties' => $this->getCounties(),
+            'projectCategories' => $this->getProjectCategories(),
         ]);
     }
 
diff --git a/app/Http/Controllers/Dashboard/RegionalProjectController.php b/app/Http/Controllers/Dashboard/RegionalProjectController.php
index 5051ddf3..60d60b77 100644
--- a/app/Http/Controllers/Dashboard/RegionalProjectController.php
+++ b/app/Http/Controllers/Dashboard/RegionalProjectController.php
@@ -6,7 +6,6 @@
 
 use App\Http\Controllers\Controller;
 use App\Http\Requests\RegionalProject\StoreRequest;
-use App\Models\ActivityDomain;
 use App\Models\County;
 use App\Models\ProjectCategory;
 use App\Models\RegionalProject;
@@ -33,17 +32,9 @@ public function index()
      */
     public function create()
     {
-        $counties = cache()->remember('counties', 60 * 60 * 24, function () {
-            return \App\Models\County::get(['name', 'id']);
-        });
-
-        $projectCategories = cache()->remember('activityDomains', 60 * 60 * 24, function () {
-            return ActivityDomain::get(['name', 'id']);
-        });
-
         return Inertia::render('AdminOng/Projects/AddRegionalProject', [
-            'counties' => $counties,
-            'projectCategories' => $projectCategories,
+            'counties' => $this->getCounties(),
+            'projectCategories' => $this->getProjectCategories(),
         ]);
     }
 
diff --git a/app/Http/Controllers/Dashboard/UserController.php b/app/Http/Controllers/Dashboard/UserController.php
new file mode 100644
index 00000000..2be3a4e3
--- /dev/null
+++ b/app/Http/Controllers/Dashboard/UserController.php
@@ -0,0 +1,69 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Controllers\Dashboard;
+
+use App\Http\Controllers\Controller;
+use App\Http\Resources\Collections\UserCollection;
+use App\Models\User;
+use App\Rules\UserDoesntBelongToAnOrganization;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Inertia\Response;
+use Spatie\QueryBuilder\QueryBuilder;
+
+class UserController extends Controller
+{
+    public function index(Request $request, ?string $status = null): Response
+    {
+        return Inertia::render('AdminOng/Users/Index', [
+            'collection' => UserCollection::make(
+                QueryBuilder::for(User::class)
+                    ->with('organization:id')
+                    ->where('organization_id', auth()->user()->organization_id)
+                    ->allowedSorts('name', 'email', 'created_at')
+                    ->defaultSorts('created_at')
+                    ->paginate(),
+            )->withPermissions(),
+        ]);
+    }
+
+    public function store(Request $request): RedirectResponse
+    {
+        $this->authorize('create', User::class);
+
+        $attributes = $request->validate([
+            'name' => ['required', 'string', 'max:200'],
+            'email' => ['required', 'string', 'email', new UserDoesntBelongToAnOrganization],
+        ]);
+
+        $user = User::firstOrNew(
+            ['email' => $attributes['email']],
+            [
+                'name' => $attributes['name'],
+                'created_by' => auth()->user()->id,
+            ]
+        );
+
+        $user->organization()
+            ->associate(auth()->user()->organization)
+            ->save();
+
+        return redirect()->back()
+            ->with('success', __('user.messages.created'));
+    }
+
+    public function destroy(Request $request, User $user): RedirectResponse
+    {
+        $this->authorize('delete', $user);
+
+        $user->organization()
+            ->dissociate()
+            ->save();
+
+        return redirect()->back()
+            ->with('success', __('user.messages.deleted'));
+    }
+}
diff --git a/app/Http/Controllers/Dashboard/VolunteerController.php b/app/Http/Controllers/Dashboard/VolunteerController.php
index 0404cdc8..0a409bdd 100644
--- a/app/Http/Controllers/Dashboard/VolunteerController.php
+++ b/app/Http/Controllers/Dashboard/VolunteerController.php
@@ -42,7 +42,7 @@ public function approve(Request $request, VolunteerRequest $volunteerRequest)
         $volunteerRequest->markAsApproved();
 
         return redirect()->back()
-            ->with('success', 'Voluntarul a fost aprobat cu succes');
+            ->with('success', __('volunteer.messages.approved'));
     }
 
     public function reject(Request $request, VolunteerRequest $volunteerRequest)
@@ -50,7 +50,7 @@ public function reject(Request $request, VolunteerRequest $volunteerRequest)
         $volunteerRequest->markAsRejected();
 
         return redirect()->back()
-            ->with('success', 'Voluntarul a fost respins cu succes');
+            ->with('success', __('volunteer.messages.rejected'));
     }
 
     public function delete(Request $request, VolunteerRequest $volunteerRequest)
@@ -58,6 +58,6 @@ public function delete(Request $request, VolunteerRequest $volunteerRequest)
         $volunteerRequest->delete();
 
         return redirect()->back()
-            ->with('success', 'Voluntarul a fost sters cu succes');
+            ->with('success', __('volunteer.messages.deleted'));
     }
 }
diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php
index a6d1de36..555e6c3e 100644
--- a/app/Http/Controllers/DashboardController.php
+++ b/app/Http/Controllers/DashboardController.php
@@ -12,7 +12,7 @@ class DashboardController extends Controller
 {
     public function __invoke(): Response|RedirectResponse
     {
-        if (auth()->user()->isNgoAdmin()) {
+        if (auth()->user()->belongsToOrganization()) {
             return redirect()->route('dashboard.organization.edit');
         }
         if (auth()->user()->isDonor()) {
diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
index b1490e48..eac22582 100644
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Http/Middleware/HandleInertiaRequests.php
@@ -28,7 +28,10 @@ public function share(Request $request): array
             'auth' => [
                 'user' => $request->user(),
             ],
-            'locales' => locales(),
+            'locales' => fn () => [
+                'available' => locales(),
+                'current' => app()->getLocale(),
+            ],
         ]);
     }
 
diff --git a/app/Http/Requests/RegionalProject/StoreRequest.php b/app/Http/Requests/RegionalProject/StoreRequest.php
index 4825af96..d740318e 100644
--- a/app/Http/Requests/RegionalProject/StoreRequest.php
+++ b/app/Http/Requests/RegionalProject/StoreRequest.php
@@ -14,7 +14,7 @@ class StoreRequest extends FormRequest
      */
     public function authorize(): bool
     {
-        return auth()->user()->isNgoAdmin();
+        return auth()->user()->isOrganizationAdmin();
     }
 
     /**
diff --git a/app/Http/Requests/RegistrationRequest.php b/app/Http/Requests/RegistrationRequest.php
index b21a45ed..b33226f0 100644
--- a/app/Http/Requests/RegistrationRequest.php
+++ b/app/Http/Requests/RegistrationRequest.php
@@ -24,7 +24,7 @@ public function rules(): array
             'user.password' => ['string', 'required', 'confirmed'],
         ];
 
-        if ($this->type === 'ngo-admin') {
+        if ($this->type === 'organization') {
             $rules = array_merge($rules, [
                 'ngo' => ['array', 'required'],
                 'ngo.name' => ['string', 'required'],
diff --git a/app/Http/Resources/Collections/ResourceCollection.php b/app/Http/Resources/Collections/ResourceCollection.php
index a02f73d3..5f1aec05 100644
--- a/app/Http/Resources/Collections/ResourceCollection.php
+++ b/app/Http/Resources/Collections/ResourceCollection.php
@@ -10,16 +10,18 @@
 
 abstract class ResourceCollection extends BaseCollection
 {
-    protected array $columns = [];
+    public string $model;
+
+    protected array $appends = [];
 
     public function toArray(Request $request): array
     {
-        return [
+        return array_merge([
             'columns' => $this->getColumns(),
             'filter' => $request->query('filter'),
             'sort' => $this->getSort($request),
             'data' => $this->collection,
-        ];
+        ], $this->appends);
     }
 
     abstract protected function getColumns(): array;
@@ -46,4 +48,18 @@ protected function getSort(Request $request): array
             'direction' => $direction,
         ];
     }
+
+    public function withPermissions(): static
+    {
+        $this->collects::withPermissions();
+
+        if (! \is_null($this->model)) {
+            $this->appends['can'] = collect(['viewAny', 'create'])
+                ->mapWithKeys(fn (string $ability) => [
+                    $ability => auth()->user()->can($ability, $this->model),
+                ]);
+        }
+
+        return $this;
+    }
 }
diff --git a/app/Http/Resources/Collections/UserCollection.php b/app/Http/Resources/Collections/UserCollection.php
new file mode 100644
index 00000000..b20e9724
--- /dev/null
+++ b/app/Http/Resources/Collections/UserCollection.php
@@ -0,0 +1,38 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Resources\Collections;
+
+use App\Http\Resources\Columns\TableColumn;
+use App\Http\Resources\UserResource;
+use App\Models\User;
+
+class UserCollection extends ResourceCollection
+{
+    public string $model = User::class;
+
+    public $collects = UserResource::class;
+
+    protected function getColumns(): array
+    {
+        return [
+            TableColumn::make('name')
+                ->label(__('user.column.name'))
+                ->sortable(),
+
+            TableColumn::make('email')
+                ->label(__('user.column.email')),
+
+            TableColumn::make('role')
+                ->label(__('user.column.role')),
+        ];
+    }
+
+    protected function permissions(): array
+    {
+        return [
+            'create' => auth()->user()->can('create', User::class),
+        ];
+    }
+}
diff --git a/app/Http/Resources/Resource.php b/app/Http/Resources/Resource.php
new file mode 100644
index 00000000..eaf70f0c
--- /dev/null
+++ b/app/Http/Resources/Resource.php
@@ -0,0 +1,49 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Resources\Json\JsonResource;
+
+abstract class Resource extends JsonResource
+{
+    /**
+     * The "data" wrapper that should be applied.
+     *
+     * @var string|null
+     */
+    public static $wrap = null;
+
+    /**
+     * Whether to include resource permissions props.
+     *
+     * @var bool
+     */
+    public static bool $withPermissions = false;
+
+    public static function withPermissions(): void
+    {
+        static::$withPermissions = true;
+    }
+
+    public function resolve($request = null): array
+    {
+        $data = parent::resolve($request);
+
+        if (static::$withPermissions) {
+            $data['can'] = collect(['view', 'update', 'delete', 'forceDelete', 'restore'])
+                ->mapWithKeys(fn (string $ability) => [
+                    $ability => auth()->user()->can($ability, $this->resource),
+                ])
+                ->merge($this->additionalPermissions());
+        }
+
+        return $data;
+    }
+
+    protected function additionalPermissions(): array
+    {
+        return [];
+    }
+}
diff --git a/app/Http/Resources/TicketMessageResource.php b/app/Http/Resources/TicketMessageResource.php
index 4d03e64f..be87f441 100644
--- a/app/Http/Resources/TicketMessageResource.php
+++ b/app/Http/Resources/TicketMessageResource.php
@@ -21,7 +21,7 @@ public function toArray(Request $request): array
             'user' => [
                 'id' => $this->user->id,
                 'name' => $this->user->name,
-                'is_bb_admin' => $this->user->isBbAdmin(),
+                'is_superuser' => $this->user->isSuperUser(),
             ],
         ];
     }
diff --git a/app/Http/Resources/UserResource.php b/app/Http/Resources/UserResource.php
new file mode 100644
index 00000000..e306ee75
--- /dev/null
+++ b/app/Http/Resources/UserResource.php
@@ -0,0 +1,23 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+
+class UserResource extends Resource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->id,
+            'name' => $this->name,
+            'email' => $this->email,
+            'is_admin' => $this->isOrganizationAdmin(),
+            'role' => $this->isOrganizationAdmin()
+                ? __('user.roles.admin')
+                : __('user.roles.manager'),
+        ];
+    }
+}
diff --git a/app/Listeners/Organization/SendOrganizationForApprovalListener.php b/app/Listeners/Organization/SendOrganizationForApprovalListener.php
index 10282089..2c5a7fc9 100644
--- a/app/Listeners/Organization/SendOrganizationForApprovalListener.php
+++ b/app/Listeners/Organization/SendOrganizationForApprovalListener.php
@@ -18,14 +18,14 @@ public function handle(SendOrganizationForApproval $event): void
 
         Notification::send(
             User::query()
-                ->onlyBBAdmins()
+                ->onlySuperUsers()
                 ->get(),
             new OrganizationCreatedAdmin($event->organization)
         );
 
         Notification::send(
             User::query()
-                ->onlyNGOAdmins($event->organization)
+                ->whereBelongsToOrganization($event->organization)
                 ->get(),
             new OrganizationCreated($event->organization)
         );
diff --git a/app/Listeners/Ticket/SendTicketCreatedNotification.php b/app/Listeners/Ticket/SendTicketCreatedNotification.php
index f3ea4ae0..1498a0ef 100644
--- a/app/Listeners/Ticket/SendTicketCreatedNotification.php
+++ b/app/Listeners/Ticket/SendTicketCreatedNotification.php
@@ -19,14 +19,14 @@ public function handle(TicketCreated $event): void
     {
         Notification::send(
             User::query()
-                ->onlyBBAdmins()
+                ->onlySuperUsers()
                 ->get(),
             new Admin\TicketCreatedNotification($event->ticket)
         );
 
         Notification::send(
             User::query()
-                ->onlyNGOAdmins($event->ticket->organization)
+                ->whereBelongsToOrganization($event->ticket->organization)
                 ->get(),
             new Ngo\TicketCreatedNotification($event->ticket)
         );
diff --git a/app/Listeners/Ticket/SendTicketReplyReceivedNotification.php b/app/Listeners/Ticket/SendTicketReplyReceivedNotification.php
index c2b684b9..99c850b3 100644
--- a/app/Listeners/Ticket/SendTicketReplyReceivedNotification.php
+++ b/app/Listeners/Ticket/SendTicketReplyReceivedNotification.php
@@ -19,14 +19,14 @@ public function handle(TicketReplyReceived $event): void
     {
         Notification::send(
             User::query()
-                ->onlyBBAdmins()
+                ->onlySuperUsers()
                 ->get(),
             new Admin\TicketReceivedReplyNotification($event->message)
         );
 
         Notification::send(
             User::query()
-                ->onlyNGOAdmins($event->message->ticket->organization)
+                ->whereBelongsToOrganization($event->message->ticket->organization)
                 ->get(),
             new Ngo\TicketReceivedReplyNotification($event->message)
         );
diff --git a/app/Listeners/Ticket/SendTicketStatusChangedNotification.php b/app/Listeners/Ticket/SendTicketStatusChangedNotification.php
index 9074254a..5c9edf01 100644
--- a/app/Listeners/Ticket/SendTicketStatusChangedNotification.php
+++ b/app/Listeners/Ticket/SendTicketStatusChangedNotification.php
@@ -25,14 +25,14 @@ public function handle(TicketUpdated $event): void
 
         Notification::send(
             User::query()
-                ->onlyBBAdmins()
+                ->onlySuperUsers()
                 ->get(),
             new Admin\TicketStatusChangedNotification($event->ticket, $ticketIsOpen)
         );
 
         Notification::send(
             User::query()
-                ->onlyNGOAdmins($event->ticket->organization)
+                ->whereBelongsToOrganization($event->ticket->organization)
                 ->get(),
             new Ngo\TicketStatusChangedNotification($event->ticket, $ticketIsOpen)
         );
diff --git a/app/Listeners/User/DeleteOrganization.php b/app/Listeners/User/DeleteOrganization.php
index 8fdcd629..757c7797 100644
--- a/app/Listeners/User/DeleteOrganization.php
+++ b/app/Listeners/User/DeleteOrganization.php
@@ -15,7 +15,7 @@ class DeleteOrganization
     public function handle(UserDeleting $event): void
     {
         if (
-            ! $event->user->isNgoAdmin() ||
+            ! $event->user->isOrganizationAdmin() ||
             $event->user->organization->users()->count() > 1
         ) {
             return;
diff --git a/app/Models/Organization.php b/app/Models/Organization.php
index ac86977c..b93d76da 100644
--- a/app/Models/Organization.php
+++ b/app/Models/Organization.php
@@ -17,7 +17,6 @@
 use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Database\Eloquent\Relations\MorphMany;
-use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Vite;
 use Spatie\Activitylog\LogOptions;
 use Spatie\Image\Manipulations;
@@ -189,13 +188,6 @@ public function scopeWhereDoesntHaveDonations(Builder $query): Builder
         return $query->whereDoesntHave('projects.donations');
     }
 
-    public function getAdministrators(): Collection
-    {
-        return $this->users()
-            ->onlyNGOAdmins()
-            ->get();
-    }
-
     public function getActivitylogOptions(): LogOptions
     {
         return LogOptions::defaults()
diff --git a/app/Models/User.php b/app/Models/User.php
index 93fba962..7253e93d 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -4,27 +4,25 @@
 
 namespace App\Models;
 
+use App\Concerns\BelongsToOrganization;
+use App\Concerns\HasRole;
 use App\Concerns\MustSetInitialPassword;
-use App\Enums\UserRole;
 use App\Events\User\UserDeleting;
-use App\Traits\HasRole;
 use Filament\Models\Contracts\FilamentUser;
 use Illuminate\Contracts\Auth\MustVerifyEmail;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Prunable;
-use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Database\Eloquent\Relations\HasManyThrough;
 use Illuminate\Database\Eloquent\Relations\HasOne;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
-use Laravel\Sanctum\HasApiTokens;
 
 class User extends Authenticatable implements FilamentUser, MustVerifyEmail
 {
-    use HasApiTokens;
+    use BelongsToOrganization;
     use HasFactory;
     use Notifiable;
     use HasRole;
@@ -42,8 +40,7 @@ class User extends Authenticatable implements FilamentUser, MustVerifyEmail
         'password',
         'role',
         'phone',
-        'organization_id',
-        'source_of_information',
+        'referrer',
         'created_by',
     ];
 
@@ -77,24 +74,14 @@ public function badges(): BelongsToMany
             ->orderByPivot('allocated_at', 'desc');
     }
 
-    public function organization(): BelongsTo
-    {
-        return $this->belongsTo(Organization::class);
-    }
-
     public function donations(): HasMany
     {
-        return  $this->hasMany(Donation::class);
-    }
-
-    public function currentOrganization(): Organization
-    {
-        return $this->organization()->first();
+        return $this->hasMany(Donation::class);
     }
 
     public function canAccessFilament(): bool
     {
-        return $this->isBBAdmin() || $this->isBBManager();
+        return $this->isSuperUser();
     }
 
     public function getFilamentName(): string
@@ -117,7 +104,7 @@ public function prunable(): Builder
         return static::query()
             ->with('organization:id,name')
             ->where('created_at', '<=', now()->subHours(48))
-            ->whereNotIn('role', [UserRole::bb_admin, UserRole::bb_manager])
+            ->withoutSuperUsers()
             ->whereNull('email_verified_at')
             ->whereNull('password_set_at');
     }
diff --git a/app/Policies/OrganizationPolicy.php b/app/Policies/OrganizationPolicy.php
index b6357ed2..e558bb5e 100644
--- a/app/Policies/OrganizationPolicy.php
+++ b/app/Policies/OrganizationPolicy.php
@@ -4,7 +4,6 @@
 
 namespace App\Policies;
 
-use App\Enums\UserRole;
 use App\Models\Organization;
 use App\Models\User;
 
@@ -46,15 +45,7 @@ public function update(User $user, Organization $organization): bool
          * An organization can be updated only by BB Admins, BB Managers
          *  and NGO Admins that belong to the organization.
          */
-        if (
-            (UserRole::bb_admin === $user->role) ||
-            (UserRole::bb_manager === $user->role) ||
-            ((UserRole::ngo_admin === $user->role) && ($user->organization_id === $organization->id))
-        ) {
-            return true;
-        } else {
-            return false;
-        }
+        return $user->isSuperUser() || $user->isOrganizationAdmin($organization);
     }
 
     /**
@@ -66,15 +57,7 @@ public function delete(User $user, Organization $organization): bool
          * An organization can be deleted only by BB Admins, BB Managers
          *  and NGO Admins that belong to the organization.
          */
-        if (
-            (UserRole::bb_admin === $user->role) ||
-            (UserRole::bb_manager === $user->role) ||
-            ((UserRole::ngo_admin === $user->role) && ($user->organization_id === $organization->id))
-        ) {
-            return true;
-        } else {
-            return false;
-        }
+        return $user->isSuperUser() || $user->isOrganizationAdmin($organization);
     }
 
     /**
@@ -85,11 +68,7 @@ public function restore(User $user, Organization $organization): bool
         /*
          * An organization can be restored only by BB Admins and BB Managers.
          */
-        if ((UserRole::bb_admin === $user->role) || (UserRole::bb_manager === $user->role)) {
-            return true;
-        } else {
-            return false;
-        }
+        return $user->isSuperUser();
     }
 
     /**
diff --git a/app/Policies/ProjectPolicy.php b/app/Policies/ProjectPolicy.php
index f6e5359e..02de06c7 100644
--- a/app/Policies/ProjectPolicy.php
+++ b/app/Policies/ProjectPolicy.php
@@ -4,8 +4,6 @@
 
 namespace App\Policies;
 
-use App\Enums\UserRole;
-use App\Models\Organization;
 use App\Models\Project;
 use App\Models\User;
 
@@ -18,20 +16,11 @@ public function viewAny(User $user): bool
 
     public function view(User $user, Project $project): bool
     {
-        if ($user->organization_id !== $project->organization_id) {
-            return false;
-        }
-
-        /* Anyone can see the details of an organization. */
-        return true;
+        return $user->belongsToOrganization($project->organization);
     }
 
     public function editAsNgo(User $user, Project $project): bool
     {
-        if ($user->organization_id !== $project->organization_id && $user->role !== UserRole::ngo_admin) {
-            return false;
-        }
-
-        return true;
+        return $user->belongsToOrganization($project->organization);
     }
 }
diff --git a/app/Policies/TicketPolicy.php b/app/Policies/TicketPolicy.php
index 53c59ac3..bbb8a627 100644
--- a/app/Policies/TicketPolicy.php
+++ b/app/Policies/TicketPolicy.php
@@ -16,17 +16,17 @@ public function viewAny(User $user): bool
 
     public function view(User $user, Ticket $ticket): bool
     {
-        return $user->isBbAdmin() || $user->organization->is($ticket->organization);
+        return $user->isSuperUser() || $user->organization->is($ticket->organization);
     }
 
     public function create(User $user): bool
     {
-        return $user->isNgoAdmin();
+        return $user->belongsToOrganization();
     }
 
     public function update(User $user, Ticket $ticket): bool
     {
-        return $user->isBbAdmin() || ($user->isNgoAdmin() && $user->organization->is($ticket->organization));
+        return $user->isSuperUser() || $user->belongsToOrganization($ticket->organization);
     }
 
     public function reply(User $user, Ticket $ticket): bool
diff --git a/app/Policies/UserPolicy.php b/app/Policies/UserPolicy.php
new file mode 100644
index 00000000..99b656f3
--- /dev/null
+++ b/app/Policies/UserPolicy.php
@@ -0,0 +1,45 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Policies;
+
+use App\Models\User;
+
+class UserPolicy
+{
+    public function viewAny(User $user): bool
+    {
+        return true;
+    }
+
+    public function view(User $user, User $model): bool
+    {
+        return $user->isSuperUser() || $user->belongstoOrganization($model->organization);
+    }
+
+    public function create(User $user): bool
+    {
+        return $user->isSuperAdmin() || $user->isOrganizationAdmin();
+    }
+
+    public function update(User $user, User $model): bool
+    {
+        return $user->isSuperAdmin() || $user->isOrganizationAdmin($model->organization);
+    }
+
+    public function delete(User $user, User $model): bool
+    {
+        return $user->isSuperAdmin() || $user->isOrganizationAdmin($model->organization);
+    }
+
+    public function restore(User $user, User $model): bool
+    {
+        return $user->isSuperAdmin() || $user->isOrganizationAdmin($model->organization);
+    }
+
+    public function forceDelete(User $user, User $model): bool
+    {
+        return $user->isSuperAdmin() || $user->isOrganizationAdmin($model->organization);
+    }
+}
diff --git a/app/Rules/UserDoesntBelongToAnOrganization.php b/app/Rules/UserDoesntBelongToAnOrganization.php
new file mode 100644
index 00000000..3e22e176
--- /dev/null
+++ b/app/Rules/UserDoesntBelongToAnOrganization.php
@@ -0,0 +1,29 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Rules;
+
+use App\Models\User;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+class UserDoesntBelongToAnOrganization implements ValidationRule
+{
+    /**
+     * Run the validation rule.
+     *
+     * @param \Closure(string): \Illuminate\Translation\PotentiallyTranslatedString $fail
+     */
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        $exists = User::query()
+            ->where($attribute, $value)
+            ->whereNotNull('organization_id')
+            ->exists();
+
+        if ($exists) {
+            $fail(__('validation.user_belongs_to_organization'));
+        }
+    }
+}
diff --git a/app/Traits/HasRole.php b/app/Traits/HasRole.php
deleted file mode 100644
index 2abac8be..00000000
--- a/app/Traits/HasRole.php
+++ /dev/null
@@ -1,61 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace App\Traits;
-
-use App\Enums\UserRole;
-use App\Models\Organization;
-use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Support\Collection;
-
-trait HasRole
-{
-    public function initializeHasRole()
-    {
-        $this->casts['role'] = UserRole::class;
-    }
-
-    public function hasRole(string $role): bool
-    {
-        return $this->role === UserRole::tryFrom($role);
-    }
-
-    public function isDonor(): bool
-    {
-        return $this->role === UserRole::donor;
-    }
-
-    public function isNgoAdmin(): bool
-    {
-        return $this->role === UserRole::ngo_admin;
-    }
-
-    public function isBbManager(): bool
-    {
-        return $this->role === UserRole::bb_manager;
-    }
-
-    public function isBbAdmin(): bool
-    {
-        return $this->role === UserRole::bb_admin;
-    }
-
-    public function scopeRole(Builder $query, array|string|Collection|UserRole $roles): Builder
-    {
-        return $query->whereIn('role', collect($roles));
-    }
-
-    public function scopeOnlyBBAdmins(Builder $query): Builder
-    {
-        return $query->role(UserRole::bb_admin);
-    }
-
-    public function scopeOnlyNGOAdmins(Builder $query, ?Organization $organization = null): Builder
-    {
-        return $query->role(UserRole::ngo_admin)
-            ->when($organization !== null, function (Builder $query) use ($organization) {
-                return $query->where('organization_id', $organization->id);
-            });
-    }
-}
diff --git a/app/helpers.php b/app/helpers.php
index a7616fd9..74668a09 100644
--- a/app/helpers.php
+++ b/app/helpers.php
@@ -4,16 +4,20 @@
 
 use Illuminate\Support\Collection;
 
-function locales(): Collection
-{
-    return collect(config('filament-spatie-laravel-translatable-plugin.default_locales'));
+if (! function_exists('locales')) {
+    function locales(): Collection
+    {
+        return collect(config('filament-spatie-laravel-translatable-plugin.default_locales'));
+    }
 }
 
-function money_format($number, $decimals = 0): string
-{
-    $formatter = new NumberFormatter(app()->getLocale(), NumberFormatter::CURRENCY);
+if (! function_exists('money_format')) {
+    function money_format($number, $decimals = 0): string
+    {
+        $formatter = new NumberFormatter(app()->getLocale(), NumberFormatter::CURRENCY);
 
-    $formatter->setAttribute(NumberFormatter::FRACTION_DIGITS, $decimals);
+        $formatter->setAttribute(NumberFormatter::FRACTION_DIGITS, $decimals);
 
-    return $formatter->formatCurrency((float) $number, 'RON');
+        return $formatter->formatCurrency((float) $number, 'RON');
+    }
 }
diff --git a/database/factories/OrganizationFactory.php b/database/factories/OrganizationFactory.php
index a1ab9a8a..37106cfc 100644
--- a/database/factories/OrganizationFactory.php
+++ b/database/factories/OrganizationFactory.php
@@ -15,6 +15,7 @@
 use App\Models\User;
 use App\Models\Volunteer;
 use Illuminate\Database\Eloquent\Factories\Factory;
+use Illuminate\Database\Eloquent\Factories\Sequence;
 
 /**
  * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Organization>
@@ -87,12 +88,23 @@ public function configure(): static
 
             $admin = User::factory()
                 ->for($organization)
-                ->ngoAdmin()
+                ->organizationAdmin()
                 ->state([
                     'email' => "admin-{$organization->id}@example.com",
                 ])
                 ->create();
 
+            $managers = User::factory()
+                ->count(3)
+                ->for($organization)
+                ->ngoManager()
+                ->state(new Sequence(
+                    ['email' => "manager-{$organization->id}@example.com"],
+                    ['email' => "manager-{$organization->id}@example.org"],
+                    ['email' => "manager-{$organization->id}@example.net"],
+                ))
+                ->create();
+
             if ($organization->isPending()) {
                 return;
             }
diff --git a/database/factories/TicketFactory.php b/database/factories/TicketFactory.php
index 2b16142c..9d58c238 100644
--- a/database/factories/TicketFactory.php
+++ b/database/factories/TicketFactory.php
@@ -4,7 +4,6 @@
 
 namespace Database\Factories;
 
-use App\Enums\UserRole;
 use App\Models\Organization;
 use App\Models\Ticket;
 use App\Models\TicketMessage;
@@ -35,23 +34,23 @@ public function definition(): array
     public function configure(): static
     {
         return $this->afterCreating(function (Ticket $ticket) {
-            $ngoAdmin = $ticket->organization
-                ->getAdministrators()
+            $organizationAdmin = $ticket->organization
+                ->users
                 ->first();
 
-            $bbAdmin = User::query()
-                ->role(UserRole::bb_admin)
+            $superAdmin = User::query()
+                ->onlySuperAdmins()
                 ->first();
 
             TicketMessage::factory()
                 ->for($ticket)
-                ->recycle($ngoAdmin)
+                ->recycle($organizationAdmin)
                 ->count(fake()->randomDigitNotNull())
                 ->create();
 
             TicketMessage::factory()
                 ->for($ticket)
-                ->recycle($bbAdmin)
+                ->recycle($superAdmin)
                 ->count(fake()->randomDigitNotNull())
                 ->create();
         });
diff --git a/database/factories/UserFactory.php b/database/factories/UserFactory.php
index 31b0c713..80a53d0f 100644
--- a/database/factories/UserFactory.php
+++ b/database/factories/UserFactory.php
@@ -4,6 +4,7 @@
 
 namespace Database\Factories;
 
+use App\Enums\UserRole;
 use Illuminate\Database\Eloquent\Factories\Factory;
 use Illuminate\Support\Str;
 
@@ -44,37 +45,47 @@ public function unverified(): static
     public function donor(): static
     {
         return $this->state(fn (array $attributes) => [
-            'role' => 'donor',
+            'role' => UserRole::donor,
         ]);
     }
 
     /**
      * Make a NGO Admin user.
      */
-    public function ngoAdmin(): static
+    public function organizationAdmin(): static
     {
         return $this->state(fn (array $attributes) => [
-            'role' => 'ngo-admin',
+            'role' => UserRole::ADMIN,
+        ]);
+    }
+
+    /**
+     * Make a NGO Manager user.
+     */
+    public function ngoManager(): static
+    {
+        return $this->state(fn (array $attributes) => [
+            // 'role' => UserRole::ngo_manager,
         ]);
     }
 
     /**
      * Make a BB Manager user.
      */
-    public function bbManager(): static
+    public function superManager(): static
     {
         return $this->state(fn (array $attributes) => [
-            'role' => 'bb-manager',
+            'role' => UserRole::SUPERMANAGER,
         ]);
     }
 
     /**
      * Make a BB Admin user.
      */
-    public function bbAdmin(): static
+    public function superAdmin(): static
     {
         return $this->state(fn (array $attributes) => [
-            'role' => 'bb-admin',
+            'role' => UserRole::SUPERADMIN,
         ]);
     }
 }
diff --git a/database/migrations/2014_10_12_000000_create_users_table.php b/database/migrations/2014_10_12_000000_create_users_table.php
index 2bec77ad..28dd810c 100644
--- a/database/migrations/2014_10_12_000000_create_users_table.php
+++ b/database/migrations/2014_10_12_000000_create_users_table.php
@@ -17,10 +17,14 @@ public function up(): void
             $table->id();
             $table->string('name');
             $table->string('email')->unique();
-            $table->timestamp('email_verified_at')->nullable();
+            $table->string('phone')->nullable();
             $table->string('password');
+            $table->string('role')->nullable();
             $table->rememberToken();
             $table->timestamps();
+            $table->timestamp('email_verified_at')->nullable();
+            $table->timestamp('password_set_at')->nullable();
+            $table->string('referrer')->nullable();
         });
     }
 
diff --git a/database/migrations/2023_05_05_142245_update_users.php b/database/migrations/2023_05_05_142245_add_organization_column_to_users_table.php
similarity index 62%
rename from database/migrations/2023_05_05_142245_update_users.php
rename to database/migrations/2023_05_05_142245_add_organization_column_to_users_table.php
index 93656ec7..4b7de09e 100644
--- a/database/migrations/2023_05_05_142245_update_users.php
+++ b/database/migrations/2023_05_05_142245_add_organization_column_to_users_table.php
@@ -15,11 +15,10 @@
     public function up(): void
     {
         Schema::table('users', function (Blueprint $table) {
-            $table->enum('role', ['donor', 'ngo-admin', 'bb-manager', 'bb-admin']);
-            $table->string('phone')->nullable();
-            $table->string('source_of_information')->nullable();
-            $table->timestamp('password_set_at')->nullable();
-            $table->foreignIdFor(Organization::class)->nullable()->constrained()->onDelete('cascade');
+            $table->foreignIdFor(Organization::class)
+                ->nullable()
+                ->constrained()
+                ->cascadeOnDelete();
         });
     }
 
@@ -31,7 +30,6 @@ public function down(): void
         Schema::table('users', function (Blueprint $table) {
             $table->dropForeign(['organization_id']);
             $table->dropColumn('organization_id');
-            $table->dropColumn('role');
         });
     }
 };
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 29674611..a507a846 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -30,13 +30,13 @@ public function run(): void
 
         Mail::fake();
 
-        User::factory(['email' => 'bb-admin@example.com'])
-            ->bbAdmin()
+        User::factory(['email' => 'superadmin@example.com'])
+            ->superAdmin()
             ->create();
 
-        User::factory(['email' => 'bb-manager@example.com'])
+        User::factory(['email' => 'supermanager@example.com'])
             ->count(1)
-            ->bbManager()
+            ->superManager()
             ->create();
 
         User::factory()
diff --git a/lang/ro.json b/lang/ro.json
index af499e6a..3a800202 100644
--- a/lang/ro.json
+++ b/lang/ro.json
@@ -172,8 +172,8 @@
     "organization_logo_label": "Logo-ul organizației",
     "change_image_label": "Schimbă imaginea",
     "delete_image_label": "Sterge imagine",
-    "active": "Activ",
-    "inactive": "Inactiv",
+    "active": "Deschis",
+    "inactive": "Închis",
     "become_volunter": "Fii voluntar",
     "target_amount": "Suma target",
     "share_project": "Distribuie acest proiect pe",
@@ -224,12 +224,10 @@
     "back": "Inapoi",
     "open_tickets": "Tichete deschise",
     "closed_tickets": "Tichete închise",
-    "close": "Inchide",
+    "close": "Închide",
     "ticket": "Ticket",
     "subject": "Subiect",
     "date": "Data",
-    "close_ticket": "Închide ticket",
-    "reopen_ticket": "Redeschide ticket",
     "answer": "Raspunde",
     "message": "Mesaj",
     "add_ticket": "Deschide un tichet nou",
@@ -391,9 +389,6 @@
     "ticket_subject": "Subiect",
     "ticket_created_at": "Data",
     "ticket_closed_at": "Închis la data",
-    "ticket_reply_header": "Trimite un răspuns",
-    "confirm_close_ticket": "Ești sigur că vrei să închizi acest tichet?",
-    "confirm_reopen_ticket": "Ești sigur că vrei să redeschizi acest tichet?",
     "add_regional_project": "Adaugă un proiect regional",
     "field_has_pending_changes": "Acest câmp are modificări neaprobare. Dacă il editezi, modificările vor fi pierdute.",
     "verify_email_title": "Îți mulțumim că te-ai înregistrat pe platforma Bursa Binelui !",
@@ -405,5 +400,36 @@
     "sort.end_date": "Data sfârșit proiect",
     "sort.target": "Target",
     "sort.donations_total": "Suma donată",
-    "sort.donations_count": "Număr donații"
+    "sort.donations_count": "Număr donații",
+
+    "users.add_manager": "Adaugă manager",
+    "users.remove.title": "Șterge utilizator",
+    "users.remove.content": "Ești sigur că vrei să ștergi utilizatorul \":name\"?",
+
+    "volunteers.accept.trigger": "Acceptă",
+    "volunteers.accept.title": "Acceptă voluntar",
+    "volunteers.accept.content": "Ești sigur că vrei să accepți voluntarul \":name\"?",
+
+    "volunteers.reject.trigger": "Respinge",
+    "volunteers.reject.title": "Respinge voluntar",
+    "volunteers.reject.content": "Ești sigur că vrei să respingi voluntarul \":name\"?",
+
+    "volunteers.delete.trigger": "Șterge",
+    "volunteers.delete.title": "Șterge voluntar",
+    "volunteers.delete.content": "Ești sigur că vrei să ștergi voluntarul \":name\"?",
+
+    "tickets.reply.trigger": "Răspunde",
+    "tickets.reply.title": "Trimite un răspuns",
+
+    "tickets.close.title": "Închide ticket",
+    "tickets.close.content": "Ești sigur că vrei să închizi acest tichet?",
+
+    "tickets.reopen.title": "Redeschide ticket",
+    "tickets.reopen.content": "Ești sigur că vrei să redeschizi acest tichet?",
+
+    "navigation.users": "Utilizatori",
+    "navigation.volunteers": "Voluntari",
+
+    "locales.ro": "Română",
+    "locales.en": "English"
 }
diff --git a/lang/ro/user.php b/lang/ro/user.php
index d9863e9e..a6a7275e 100644
--- a/lang/ro/user.php
+++ b/lang/ro/user.php
@@ -4,14 +4,18 @@
 
 return [
     'roles' => [
+        'superadmin' => 'Administrator Bursa Binelui',
+        'supermanager' => 'Manager Bursa Binelui',
+        'admin' => 'Administrator ONG',
+        'manager' => 'Manager ONG',
+
         'donor' => 'Donator/Voluntar',
-        'ngo-admin' => 'Administrator ONG',
-        'bb-manager' => 'Manager Bursa Binelui',
-        'bb-admin' => 'Administrator Bursa Binelui',
     ],
+
     'label' => [
         'singular' => 'Utilizator',
-        'plural' => 'Utilizatori', ],
+        'plural' => 'Utilizatori',
+    ],
     'labels' => [
         'general_data' => 'Date generale',
         'volunteer_for_organization' => 'Voluntar in organizatie',
@@ -32,6 +36,8 @@
     'role' => 'Rol',
     'organization' => 'Organizație',
     'messages' => [
+        'created' => 'Utilizatorul a fost adăugat.',
+        'deleted' => 'Utilizatorul a fost șters.',
         'set_initial_password_success' => 'Parola a fost setată cu succes!',
     ],
     'filters' => [
@@ -40,4 +46,15 @@
         'has_donations' => 'Are donații',
         'is_volunteer' => 'Este voluntar',
     ],
+
+    'column' => [
+        'name' => 'Nume',
+        'email' => 'Email',
+        'role' => 'Rol',
+    ],
+
+    'action' => [
+        'attach' => 'Alocă utilizator',
+        'detach' => 'Elimină',
+    ],
 ];
diff --git a/lang/ro/volunteer.php b/lang/ro/volunteer.php
index 007d23ee..f58e3786 100644
--- a/lang/ro/volunteer.php
+++ b/lang/ro/volunteer.php
@@ -18,10 +18,16 @@
     ],
 
     'statuses' => [
-        'pending' => 'In asteptare',
+        'pending' => 'În așteptare',
         'approved' => 'Aprobat',
         'rejected' => 'Respins',
     ],
 
     'model' => 'Proiect',
+
+    'messages' => [
+        'approved' => 'Voluntarul a fost aprobat.',
+        'rejected' => 'Voluntarul a fost respins.',
+        'deleted' => 'Voluntarul a fost șters.',
+    ],
 ];
diff --git a/public/images/svg/default_avatar.svg b/public/images/svg/default_avatar.svg
deleted file mode 100644
index 81b71c36..00000000
--- a/public/images/svg/default_avatar.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1100_31238)">
-<rect width="40" height="40" rx="20" fill="#F3F4F6"/>
-<path d="M40 34.99V40.0017H0V35.0084C2.32658 31.8991 5.34651 29.3756 8.81965 27.6385C12.2928 25.9013 16.1233 24.9985 20.0067 25.0017C28.18 25.0017 35.44 28.925 40 34.99ZM26.67 15C26.67 16.7681 25.9676 18.4638 24.7174 19.7141C23.4671 20.9643 21.7714 21.6667 20.0033 21.6667C18.2352 21.6667 16.5395 20.9643 15.2893 19.7141C14.039 18.4638 13.3367 16.7681 13.3367 15C13.3367 13.2319 14.039 11.5362 15.2893 10.286C16.5395 9.03575 18.2352 8.33337 20.0033 8.33337C21.7714 8.33337 23.4671 9.03575 24.7174 10.286C25.9676 11.5362 26.67 13.2319 26.67 15Z" fill="#D1D5DB"/>
-</g>
-<defs>
-<clipPath id="clip0_1100_31238">
-<rect width="40" height="40" rx="20" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/resources/js/Components/Footer.vue b/resources/js/Components/Footer.vue
index 942a31fa..8098e6ae 100644
--- a/resources/js/Components/Footer.vue
+++ b/resources/js/Components/Footer.vue
@@ -116,15 +116,7 @@
                         />
 
                         <div class="mt-4 sm:ml-4 sm:mt-0 sm:flex-shrink-0">
-                            <PrimaryButton
-                                background="primary-500"
-                                hover="primary-400"
-                                color="white"
-                                :class="{ 'opacity-25': form.processing }"
-                                :disabled="form.processing"
-                            >
-                                {{ $t('subscribe') }}
-                            </PrimaryButton>
+                            <PrimaryButton type="submit" :disabled="form.processing" :label="$t('subscribe')" />
                         </div>
                     </form>
                 </div>
diff --git a/resources/js/Components/LanguageSwitcher.vue b/resources/js/Components/LanguageSwitcher.vue
new file mode 100644
index 00000000..8ed0d77a
--- /dev/null
+++ b/resources/js/Components/LanguageSwitcher.vue
@@ -0,0 +1,64 @@
+<template>
+    <Menu v-if="locales.length > 1" as="div" class="relative inline-block text-left">
+        <div>
+            <MenuButton
+                class="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 hover:text-primary-500"
+            >
+                {{ locales[currentLocale] }}
+                <ChevronDownIcon class="w-5 h-5 -mr-1 text-gray-400" aria-hidden="true" />
+            </MenuButton>
+        </div>
+
+        <transition
+            enter-active-class="transition duration-100 ease-out"
+            enter-from-class="transform scale-95 opacity-0"
+            enter-to-class="transform scale-100 opacity-100"
+            leave-active-class="transition duration-75 ease-in"
+            leave-from-class="transform scale-100 opacity-100"
+            leave-to-class="transform scale-95 opacity-0"
+        >
+            <MenuItems
+                class="absolute right-0 z-10 w-32 mt-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+            >
+                <div class="py-1">
+                    <MenuItem v-for="(name, code) in locales" :key="code" v-slot="{ active }">
+                        <Link
+                            href="#"
+                            :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']"
+                        >
+                            {{ name }}
+                        </Link>
+                    </MenuItem>
+                </div>
+            </MenuItems>
+        </transition>
+    </Menu>
+</template>
+
+<script setup>
+    import { computed } from 'vue';
+    import { usePage } from '@inertiajs/vue3';
+    import { trans } from 'laravel-vue-i18n';
+
+    import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
+    import { ChevronDownIcon } from '@heroicons/vue/solid';
+
+    const currentLocale = computed(() => usePage().props.locales?.current);
+
+    const locales = computed(() => {
+        let available = usePage().props.locales?.available || [];
+
+        return available
+            .map((locale) => ({
+                name: trans(`locales.${locale}`),
+                code: locale,
+            }))
+            .reduce(
+                (acc, current) => ({
+                    ...acc,
+                    [current.code]: current.name,
+                }),
+                {}
+            );
+    });
+</script>
diff --git a/resources/js/Components/Modal.vue b/resources/js/Components/Modal.vue
deleted file mode 100644
index bb5bb382..00000000
--- a/resources/js/Components/Modal.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<script setup>
-import { computed, onMounted, onUnmounted, watch } from 'vue';
-
-const props = defineProps({
-    show: {
-        type: Boolean,
-        default: false,
-    },
-    maxWidth: {
-        type: String,
-        default: '2xl',
-    },
-    closeable: {
-        type: Boolean,
-        default: true,
-    },
-});
-
-const emit = defineEmits(['close']);
-
-watch(
-    () => props.show,
-    () => {
-        if (props.show) {
-            document.body.style.overflow = 'hidden';
-        } else {
-            document.body.style.overflow = null;
-        }
-    }
-);
-
-const close = () => {
-    if (props.closeable) {
-        emit('close');
-    }
-};
-
-const closeOnEscape = (e) => {
-    if (e.key === 'Escape' && props.show) {
-        close();
-    }
-};
-
-onMounted(() => document.addEventListener('keydown', closeOnEscape));
-
-onUnmounted(() => {
-    document.removeEventListener('keydown', closeOnEscape);
-    document.body.style.overflow = null;
-});
-
-const maxWidthClass = computed(() => {
-    return {
-        sm: 'sm:max-w-sm',
-        md: 'sm:max-w-md',
-        lg: 'sm:max-w-lg',
-        xl: 'sm:max-w-xl',
-        '2xl': 'sm:max-w-2xl',
-    }[props.maxWidth];
-});
-</script>
-
-<template>
-    <teleport to="body">
-        <transition leave-active-class="duration-200">
-            <div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50" scroll-region>
-                <transition
-                    enter-active-class="ease-out duration-300"
-                    enter-from-class="opacity-0"
-                    enter-to-class="opacity-100"
-                    leave-active-class="ease-in duration-200"
-                    leave-from-class="opacity-100"
-                    leave-to-class="opacity-0"
-                >
-                    <div v-show="show" class="fixed inset-0 transform transition-all" @click="close">
-                        <div class="absolute inset-0 bg-gray-500 opacity-75" />
-                    </div>
-                </transition>
-
-                <transition
-                    enter-active-class="ease-out duration-300"
-                    enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                    enter-to-class="opacity-100 translate-y-0 sm:scale-100"
-                    leave-active-class="ease-in duration-200"
-                    leave-from-class="opacity-100 translate-y-0 sm:scale-100"
-                    leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                >
-                    <div
-                        v-show="show"
-                        class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto"
-                        :class="maxWidthClass"
-                    >
-                        <slot v-if="show" />
-                    </div>
-                </transition>
-            </div>
-        </transition>
-    </teleport>
-</template>
diff --git a/resources/js/Components/Navbar.vue b/resources/js/Components/Navbar.vue
index 3bb84eb0..ba3382bb 100644
--- a/resources/js/Components/Navbar.vue
+++ b/resources/js/Components/Navbar.vue
@@ -1,137 +1,121 @@
 <template>
-    <Disclosure as="nav" class="relative bg-white shadow z-110" v-slot="{ open }">
-        <div class="px-4 mx-auto max-w-7xl xl:px-0 lg:py-2">
-            <div class="flex justify-between h-16">
-                <!-- Logo -->
-                <Link href="/" class="flex items-center flex-shrink-0">
-                    <img class="block w-auto h-10 lg:h-full" src="/images/bursa_binelui_logo.png" />
-                </Link>
+    <Disclosure as="nav" class="relative bg-white shadow" v-slot="{ open }">
+        <div class="container flex items-center justify-between h-16 gap-4 lg:gap-6 lg:my-2">
+            <Link href="/" class="flex items-center flex-shrink-0">
+                <img class="block w-auto h-10 lg:h-full" src="/images/bursa_binelui_logo.png" />
+            </Link>
+
+            <!-- Desktop main links -->
+            <div class="hidden lg:flex lg:items-center sm:space-x-4 xl:space-x-8">
+                <!-- Explore menu -->
+                <FlyoutMenu :name="$t('explore_navbar_menu')" :links="explore" />
 
-                <!-- Desktop main links -->
-                <div class="hidden lg:ml-6 lg:flex lg:items-center sm:space-x-4 xl:space-x-8">
-                    <!-- Explore menu -->
-                    <FlyoutMenu :name="$t('explore_navbar_menu')" :links="explore" />
+                <!-- Articles link -->
+                <NavLink :href="route('articles')" :active="route().current('articles')">
+                    {{ $t('articles_link') }}
+                </NavLink>
 
-                    <!-- Articles link -->
-                    <NavLink :href="route('articles')" :active="route().current('articles')">
-                        {{ $t('articles_link') }}
-                    </NavLink>
+                <!-- About menu -->
+                <FlyoutMenu :name="$t('about_navbar_menu')" :links="about" />
 
-                    <!-- About menu -->
-                    <FlyoutMenu :name="$t('about_navbar_menu')" :links="about" />
+                <!-- Contact link -->
+                <NavLink :href="route('contact')" :active="route().current('contact')">
+                    {{ $t('contact_link') }}
+                </NavLink>
+            </div>
 
-                    <!-- Contact link -->
-                    <NavLink :href="route('contact')" :active="route().current('contact')">
-                        {{ $t('contact_link') }}
-                    </NavLink>
-                </div>
+            <div class="hidden lg:flex lg:items-center lg:space-x-4">
+                <!-- Auth -->
+                <Menu v-if="$page.props.auth?.user" as="div" class="relative">
+                    <MenuButton
+                        class="flex items-center text-sm font-medium text-gray-500 bg-white rounded-full gap-x-2 focus:outline-none"
+                    >
+                        <span v-text="$page.props.auth.user.name" />
+                        <UserCircleIcon class="w-8 h-8 text-gray-400" />
+                    </MenuButton>
+
+                    <transition
+                        enter-active-class="transition duration-200 ease-out"
+                        enter-from-class="transform scale-95 opacity-0"
+                        enter-to-class="transform scale-100 opacity-100"
+                        leave-active-class="transition duration-75 ease-in"
+                        leave-from-class="transform scale-100 opacity-100"
+                        leave-to-class="transform scale-95 opacity-0"
+                    >
+                        <MenuItems
+                            class="absolute right-0 z-10 w-48 py-1 mt-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+                        >
+                            <!-- Administrate Link -->
+                            <NavLink
+                                class="w-full px-3 py-2 text-base"
+                                :href="route('donor.index')"
+                                :active="route().current('donor.index')"
+                            >
+                                {{ $t('dashbord') }}
+                            </NavLink>
+                            <NavLink
+                                v-if="['admin', 'manager'].includes($page.props.auth.user.role)"
+                                class="w-full px-3 py-2 text-base"
+                                :href="route('dashboard.main')"
+                                :active="route().current('dashboard.main')"
+                            >
+                                {{ $t('administrate_link') }}
+                            </NavLink>
 
-                <!-- Desktop account links. -->
-                <div class="hidden lg:ml-6 lg:flex lg:items-center lg:space-x-4">
+                            <NavLink
+                                class="w-full px-3 py-2 text-base"
+                                :href="route('donor.donations')"
+                                :active="route().current('donor.donations')"
+                            >
+                                {{ $t('my_donations') }}
+                            </NavLink>
+
+                            <!-- Account settings -->
+                            <NavLink
+                                class="w-full px-3 py-2 text-base"
+                                :href="route('profile.edit')"
+                                :active="route().current('profile.edit')"
+                            >
+                                {{ $t('account_settings') }}
+                            </NavLink>
+
+                            <!-- Log out -->
+                            <NavLink
+                                class="w-full px-3 py-2 text-base"
+                                :href="route('logout')"
+                                method="post"
+                                as="button"
+                            >
+                                {{ $t('log_out_link') }}
+                            </NavLink>
+                        </MenuItems>
+                    </transition>
+                </Menu>
+
+                <!-- Guest -->
+                <template v-else>
                     <!-- Login link -->
-                    <NavLink v-if="!$page.props.auth?.user" :href="route('login')" :active="route().current('login')">
+                    <NavLink :href="route('login')" :active="route().current('login')">
                         {{ $t('login_link') }}
                     </NavLink>
 
                     <!-- Register link -->
                     <Link
-                        v-if="!$page.props.auth?.user"
                         :href="route('register')"
                         class="relative inline-flex items-center gap-x-1.5 rounded-md bg-primary-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500"
                     >
                         {{ $t('register_link') }}
                     </Link>
+                </template>
 
-                    <!-- Notification icon -->
-                    <!-- <button
-                        v-if="$page.props.auth.user"
-                        type="button"
-                        class="p-1 text-gray-400 bg-white rounded-full hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
-                    >
-                        <BellIcon class="w-6 h-6" aria-hidden="true" />
-                    </button> -->
-
-                    <!-- User links -->
-                    <Menu v-if="$page.props.auth?.user" as="div" class="relative ml-3">
-                        <MenuButton class="flex items-center gap-4 text-sm bg-white rounded-full focus:outline-none">
-                            {{ $page.props.auth.user.name }}
-                            <img
-                                v-if="$page.props.auth.user.avatar"
-                                class="w-8 h-8 rounded-full"
-                                :src="$page.props.auth.user.avatar"
-                                alt="avatar"
-                            />
-                            <SvgLoader class="shrink-0" name="default_avatar" />
-                        </MenuButton>
-
-                        <transition
-                            enter-active-class="transition duration-200 ease-out"
-                            enter-from-class="transform scale-95 opacity-0"
-                            enter-to-class="transform scale-100 opacity-100"
-                            leave-active-class="transition duration-75 ease-in"
-                            leave-from-class="transform scale-100 opacity-100"
-                            leave-to-class="transform scale-95 opacity-0"
-                        >
-                            <MenuItems
-                                class="absolute right-0 z-10 w-48 py-1 mt-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-                            >
-                                <!-- Administrate Link -->
-                                <NavLink
-                                    v-if="$page.props.auth.user && 'donor' === $page.props.auth.user.role"
-                                    class="w-full px-3 py-2"
-                                    :href="route('donor.index')"
-                                    :active="route().current('donor.index')"
-                                >
-                                    {{ $t('dashbord') }}
-                                </NavLink>
-                                <NavLink
-                                    v-if="$page.props.auth.user && 'ngo-admin' === $page.props.auth.user.role"
-                                    class="w-full px-3 py-2"
-                                    :href="route('dashboard.main')"
-                                    :active="route().current('dashboard.main')"
-                                >
-                                    {{ $t('administrate_link') }}
-                                </NavLink>
-
-                                <NavLink
-                                    v-if="$page.props.auth.user && 'donor' === $page.props.auth.user.role"
-                                    class="w-full px-3 py-2"
-                                    :href="route('donor.donations')"
-                                    :active="route().current('donor.donations')"
-                                >
-                                    {{ $t('my_donations') }}
-                                </NavLink>
-
-                                <!-- Account settings -->
-                                <NavLink
-                                    class="w-full px-3 py-2"
-                                    :href="route('profile.edit')"
-                                    :active="route().current('profile.edit')"
-                                >
-                                    {{ $t('account_settings') }}
-                                </NavLink>
-
-                                <!-- Log out -->
-                                <NavLink class="w-full px-3 py-2" :href="route('logout')" method="post" as="button">
-                                    {{ $t('log_out_link') }}
-                                </NavLink>
-                            </MenuItems>
-                        </transition>
-                    </Menu>
-
-                    <SelectNoBorder :options="languages" />
-                </div>
-
-                <div class="flex items-center -mr-2 lg:hidden">
-                    <!-- Mobile menu button -->
-                    <DisclosureButton
-                        class="inline-flex items-center justify-center p-2 text-gray-400 rounded-md hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500"
-                    >
-                        <MenuIcon v-if="!open" class="block w-6 h-6" aria-hidden="true" />
-                        <XIcon v-else class="block w-6 h-6" aria-hidden="true" />
-                    </DisclosureButton>
-                </div>
+                <LanguageSwitcher />
             </div>
+
+            <DisclosureButton
+                class="inline-flex justify-center p-2 -mr-2 text-gray-400 rounded-md hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500 lg:hidden"
+            >
+                <component :is="!open ? MenuIcon : XIcon" class="block w-6 h-6" aria-hidden="true" />
+            </DisclosureButton>
         </div>
 
         <!-- Mobile links -->
@@ -168,38 +152,24 @@
 
             <div class="pt-4 pb-3 border-t border-gray-200">
                 <div v-if="$page.props.auth.user" class="flex items-center px-4">
-                    <div class="flex items-center gap-4">
-                        <p class="text-base font-medium text-gray-500">{{ $page.props.auth.user.name }}</p>
-                        <!-- <img
-                            v-if="$page.props.auth.user.avatar"
-                            class="w-4 h-4 rounded-full"
-                            :src="$page.props.auth.user.avatar"
-                            alt="avatar"
-                        />
-                        <SvgLoader class="w-4 h-4" name="default_avatar" /> -->
+                    <div class="flex items-center font-medium text-gray-500 gap-x-2">
+                        <UserCircleIcon class="w-8 h-8 text-gray-400" />
+                        <span v-text="$page.props.auth.user.name" />
                     </div>
-
-                    <button
-                        type="button"
-                        class="flex-shrink-0 p-1 ml-auto text-gray-400 bg-white rounded-full hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
-                    >
-                        <span class="sr-only">View notifications</span>
-                        <BellIcon class="w-6 h-6" aria-hidden="true" />
-                    </button>
                 </div>
 
-                <div class="mt-3 space-y-1">
+                <div v-if="$page.props.auth.user" class="mt-3 space-y-1">
                     <!-- Administrate Link -->
                     <NavLink
-                        v-if="$page.props.auth.user && 'donor' === $page.props.auth.user.role"
                         class="w-full px-3 py-2"
                         :href="route('donor.index')"
                         :active="route().current('donor.index')"
                     >
                         {{ $t('dashbord') }}
                     </NavLink>
+
                     <NavLink
-                        v-if="$page.props.auth.user && 'ngo-admin' === $page.props.auth.user.role"
+                        v-if="['admin', 'manager'].includes($page.props.auth.user.role)"
                         class="w-full px-3 py-2"
                         :href="route('dashboard.main')"
                         :active="route().current('dashboard.main')"
@@ -208,7 +178,6 @@
                     </NavLink>
 
                     <NavLink
-                        v-if="$page.props.auth.user && 'donor' === $page.props.auth.user.role"
                         class="w-full px-3 py-2"
                         :href="route('donor.donations')"
                         :active="route().current('donor.donations')"
@@ -218,7 +187,6 @@
 
                     <!-- Account settings -->
                     <NavLink
-                        v-if="$page.props.auth.user"
                         class="w-full px-3 py-2"
                         :href="route('profile.edit')"
                         :active="route().current('profile.edit')"
@@ -227,36 +195,21 @@
                     </NavLink>
 
                     <!-- Log out -->
-                    <NavLink
-                        v-if="$page.props.auth.user"
-                        class="w-full px-3 py-2"
-                        :href="route('logout')"
-                        method="post"
-                        as="button"
-                    >
+                    <NavLink class="w-full px-3 py-2" :href="route('logout')" method="post" as="button">
                         {{ $t('log_out_link') }}
                     </NavLink>
-
-                    <NavLink
-                        class="w-full px-3 py-2"
-                        v-if="!$page.props.auth.user"
-                        :href="route('login')"
-                        :active="route().current('login')"
-                    >
+                </div>
+                <div v-else class="mt-3 space-y-1">
+                    <NavLink class="w-full px-3 py-2" :href="route('login')" :active="route().current('login')">
                         {{ $t('login_link') }}
                     </NavLink>
 
-                    <NavLink
-                        class="w-full px-3 py-2"
-                        v-if="!$page.props.auth.user"
-                        :href="route('register')"
-                        :active="route().current('register')"
-                    >
+                    <NavLink class="w-full px-3 py-2" :href="route('register')" :active="route().current('register')">
                         {{ $t('register_link') }}
                     </NavLink>
-
-                    <SelectNoBorder class="py-2" :options="languages" />
                 </div>
+
+                <LanguageSwitcher class="py-2" />
             </div>
         </DisclosurePanel>
     </Disclosure>
@@ -264,18 +217,15 @@
 
 <script setup>
     import { computed } from 'vue';
-    /** Import from inertia. */
-    import { Link, usePage } from '@inertiajs/vue3';
+    import { usePage } from '@inertiajs/vue3';
 
-    /** Import plugins. */
     import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
     import { MenuIcon, BellIcon, XIcon } from '@heroicons/vue/outline';
+    import { UserCircleIcon } from '@heroicons/vue/solid';
 
-    /** Import components. */
     import NavLink from '@/Components/links/NavLink.vue';
     import FlyoutMenu from '@/Components/dropdowns/FlyoutMenu.vue';
-    import SelectNoBorder from '@/Components/form/SelectNoBorder.vue';
-    import SvgLoader from './SvgLoader.vue';
+    import LanguageSwitcher from '@/Components/LanguageSwitcher.vue';
 
     /** Explore menu links. */
     const explore = [
@@ -327,7 +277,7 @@
     ];
 
     const languages = computed(() =>
-        usePage().props.locales.map((locale) => ({
+        usePage().props.locales.available.map((locale) => ({
             name: locale,
             id: locale,
         }))
diff --git a/resources/js/Components/Notification.vue b/resources/js/Components/Notification.vue
index b7f286db..cdc04f47 100644
--- a/resources/js/Components/Notification.vue
+++ b/resources/js/Components/Notification.vue
@@ -9,7 +9,7 @@
             leave-to-class="opacity-0"
         >
             <div
-                v-if="show"
+                v-if="isVisible"
                 class="w-full max-w-sm p-4 overflow-hidden bg-white rounded-lg shadow-lg pointer-events-auto ring-1 ring-black ring-opacity-5"
             >
                 <div class="flex items-center gap-3">
@@ -29,7 +29,7 @@
 
                     <button
                         type="button"
-                        @click="show = false"
+                        @click="hide"
                         class="inline-flex text-gray-400 bg-white rounded-md shrink-0 hover:text-gray-500"
                     >
                         <span class="sr-only">Close</span>
@@ -46,16 +46,20 @@
     import { usePage } from '@inertiajs/vue3';
     import { ExclamationCircleIcon, CheckCircleIcon, XIcon } from '@heroicons/vue/solid';
 
-    const show = ref(false);
+    const isSuccess = computed(() => new Boolean(usePage().props.flash?.success));
+    const message = computed(() => usePage().props.flash?.message || null);
 
-    const flash = computed(() => usePage().props.flash);
+    const isVisible = ref(false);
+    const show = () => (isVisible.value = true);
+    const hide = () => (isVisible.value = false);
 
-    const isSuccess = computed(() => new Boolean(flash.value?.success));
-    const message = computed(() => flash.value?.message);
+    watch(message, (message) => {
+        if (!message) {
+            hide();
+        } else {
+            show();
 
-    watch(flash, () => {
-        show.value = true;
-
-        setTimeout(() => (show.value = false), 5000);
+            setTimeout(hide, 5000);
+        }
     });
 </script>
diff --git a/resources/js/Components/ResponsiveNavLink.vue b/resources/js/Components/ResponsiveNavLink.vue
deleted file mode 100644
index 917d2dad..00000000
--- a/resources/js/Components/ResponsiveNavLink.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { Link } from '@inertiajs/vue3';
-
-const props = defineProps({
-    href: {
-        type: String,
-        required: true,
-    },
-    active: {
-        type: Boolean,
-    },
-});
-
-const classes = computed(() =>
-    props.active
-        ? 'block w-full pl-3 pr-4 py-2 border-l-4 border-indigo-400 text-left text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition duration-150 ease-in-out'
-        : 'block w-full pl-3 pr-4 py-2 border-l-4 border-transparent text-left text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out'
-);
-</script>
-
-<template>
-    <Link :href="href" :class="classes">
-        <slot />
-    </Link>
-</template>
diff --git a/resources/js/Components/Title.vue b/resources/js/Components/Title.vue
index 57417f0d..d71a46f6 100644
--- a/resources/js/Components/Title.vue
+++ b/resources/js/Components/Title.vue
@@ -19,8 +19,8 @@
             required: null,
         },
         icon: {
-            type: Object,
-            default: () => ViewListIcon,
+            type: Function,
+            default: ViewListIcon,
         },
     });
 </script>
diff --git a/resources/js/Components/buttons/PrimaryButton.vue b/resources/js/Components/buttons/PrimaryButton.vue
index e9be9212..94e0261f 100644
--- a/resources/js/Components/buttons/PrimaryButton.vue
+++ b/resources/js/Components/buttons/PrimaryButton.vue
@@ -1,22 +1,40 @@
 <template>
     <button
-        :class="[
-            `bg-${background}
-            hover:bg-${hover}
-            text-${color}
-            focus-visible:outline-${background}
-            rounded-md px-3.5 py-2.5 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2`
-        ]"
+        :type="type"
+        class="rounded-md px-3.5 py-2.5 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-default"
+        :class="[color]"
     >
-        <slot />
+        <slot>{{ label }}</slot>
     </button>
 </template>
 
 <script setup>
-    /** Component props. */
-    defineProps({
-        background: { type: String },
-        hover: { type: String },
-        color: {type: String }
+    import { computed } from 'vue';
+
+    const props = defineProps({
+        type: {
+            type: String,
+            default: 'button',
+        },
+        label: {
+            type: String,
+            default: null,
+        },
+        color: {
+            type: String,
+            default: 'primary',
+            validator: (color) => ['primary', 'success', 'danger', 'warning', 'gray'].includes(color),
+        },
     });
+
+    const color = computed(
+        () =>
+            ({
+                primary: 'bg-primary-500 hover:bg-primary-400 text-white focus-visible:outline-primary-500',
+                success: 'bg-success-500 hover:bg-success-400 text-white focus-visible:outline-success-500',
+                danger: 'bg-danger-500 hover:bg-danger-400 text-white focus-visible:outline-danger-500',
+                warning: 'bg-warning-500 hover:bg-warning-400 text-white focus-visible:outline-warning-500',
+                gray: 'bg-gray-100 hover:bg-gray-200 text-gray-700 focus-visible:outline-gray-100',
+            }[props.color])
+    );
 </script>
diff --git a/resources/js/Components/buttons/SecondaryButton.vue b/resources/js/Components/buttons/SecondaryButton.vue
index f2c73418..c8c8ccb9 100644
--- a/resources/js/Components/buttons/SecondaryButton.vue
+++ b/resources/js/Components/buttons/SecondaryButton.vue
@@ -1,9 +1,9 @@
 <template>
     <button
         :type="type"
-        class="px-3 py-2 text-sm font-semibold text-gray-900 bg-white rounded-md shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+        class="rounded-md px-3.5 py-2.5 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-default text-gray-900 bg-white ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
     >
-        <slot />
+        <slot>{{ label }}</slot>
     </button>
 </template>
 
@@ -13,5 +13,9 @@
             type: String,
             default: 'button',
         },
+        label: {
+            type: String,
+            default: null,
+        },
     });
 </script>
diff --git a/resources/js/Components/cards/ProjectCard.vue b/resources/js/Components/cards/ProjectCard.vue
index 13f39e3c..7fde0f18 100644
--- a/resources/js/Components/cards/ProjectCard.vue
+++ b/resources/js/Components/cards/ProjectCard.vue
@@ -111,17 +111,15 @@
                 v-if="'admin' == cardType && 'pending' == project.status"
                 class="w-full mt-4 py-2.5"
                 @click="changeProjectStatus(project.id, 'draft', project.type)"
-            >
-                {{ $t('draft') }}
-            </SecondaryButton>
+                :label="$t('draft')"
+            />
 
             <SecondaryButton
                 v-if="'admin' == cardType && 'draft' == project.status"
                 class="w-full mt-4 py-2.5 text-primary-500 ring-1 ring-inset ring-primary-500 hover:bg-primary-400"
                 @click="changeProjectStatus(project.id, 'pending', project.type)"
-            >
-                {{ $t('publish') }}
-            </SecondaryButton>
+                :label="$t('publish')"
+            />
 
             <!-- Donate modal -->
             <DonateModal
diff --git a/resources/js/Components/cards/ProjectSummaryCard.vue b/resources/js/Components/cards/ProjectSummaryCard.vue
index 1a72b6db..0b2e6477 100644
--- a/resources/js/Components/cards/ProjectSummaryCard.vue
+++ b/resources/js/Components/cards/ProjectSummaryCard.vue
@@ -1,43 +1,26 @@
 <template>
-    <li
-        class="flex flex-col col-span-1 pb-4 bg-white border-b border-primary-500"
-    >
+    <li class="flex flex-col col-span-1 pb-4 bg-white border-b border-primary-500">
         <div class="flex flex-col flex-1 space-y-4">
-
-            <Link
-                :href="route('project', data.slug)"
-                class="relative sm:h-52"
-            >
+            <Link :href="route('project', data.slug)" class="relative sm:h-52">
                 <img
-                    :src="data.cover_image!=='' ?data.cover_image: '/images/no_image.jpg'"
+                    :src="data.cover_image !== '' ? data.cover_image : '/images/no_image.jpg'"
                     alt="imagine proiect"
                     class="object-cover object-center w-full h-full rounded-lg shadow sm:h-full sm:w-full"
                 />
             </Link>
 
-            <Link
-                :href="route('project', data.slug)"
-                class="text-2xl font-bold text-gray-700"
-            >
+            <Link :href="route('project', data.slug)" class="text-2xl font-bold text-gray-700">
                 {{ data.name }}
             </Link>
 
-            <PrimaryButton
-                background="primary-500"
-                hover="primary-400"
-                color="white"
-                class="w-full"
-                @click="$emit('choosed', data)"
-            >
-                {{ $t('register_project') }}
-            </PrimaryButton>
+            <PrimaryButton :label="$t('register_project')" class="w-full" @click="$emit('choosed', data)" />
         </div>
     </li>
 </template>
 
 <script setup>
     /** Import from inertia. */
-    import { Link } from "@inertiajs/vue3";
+    import { Link } from '@inertiajs/vue3';
 
     /** Import components. */
     import PrimaryButton from '@/Components/buttons/PrimaryButton.vue';
diff --git a/resources/js/Components/charts/ProjectsChart.vue b/resources/js/Components/charts/ProjectsChart.vue
index ee2e8ec0..4f71333b 100644
--- a/resources/js/Components/charts/ProjectsChart.vue
+++ b/resources/js/Components/charts/ProjectsChart.vue
@@ -6,24 +6,18 @@
         </h1>
         <div class="flex items-center justify-center gap-6">
             <PrimaryButton
-                :background="['time_evolution' === time_evolution_2 ? 'red-500' : 'gray-100']"
-                :hover="['time_evolution' === time_evolution_2 ? 'red-400' : 'gray-200']"
-                :color="['time_evolution' === time_evolution_2 ? 'white' : 'gray-700']"
+                :color="'time_evolution' === time_evolution_2 ? 'danger' : 'gray'"
                 class="px-6 py-1.5"
                 @click="time_evolution_2 = 'time_evolution'"
-            >
-                {{ $t('time_evolution') }}
-            </PrimaryButton>
+                :label="$t('time_evolution')"
+            />
 
             <PrimaryButton
-                :background="['projects_per_domain' === time_evolution_2 ? 'red-500' : 'gray-100']"
-                :hover="['projects_per_domain' === time_evolution_2 ? 'red-400' : 'gray-200']"
-                :color="['projects_per_domain' === time_evolution_2 ? 'white' : 'gray-700']"
+                :color="'projects_per_domain' === time_evolution_2 ? 'danger' : 'gray'"
                 class="px-6 py-1.5"
                 @click="time_evolution_2 = 'projects_per_domain'"
-            >
-                {{ $t('projects_per_domain') }}
-            </PrimaryButton>
+                :label="$t('projects_per_domain')"
+            />
         </div>
 
         <div v-if="'time_evolution' === time_evolution_2" class="border border-gray-200 rounded">
diff --git a/resources/js/Components/charts/TimeEvolution.vue b/resources/js/Components/charts/TimeEvolution.vue
index 42f84c2c..22c8cc65 100644
--- a/resources/js/Components/charts/TimeEvolution.vue
+++ b/resources/js/Components/charts/TimeEvolution.vue
@@ -7,24 +7,18 @@
         </h1>
         <div class="flex items-center justify-center gap-6">
             <PrimaryButton
-                :background="['time_evolution' === time_evolution_1 ? 'red-500' : 'gray-100']"
-                :hover="['time_evolution' === time_evolution_1 ? 'red-400' : 'gray-200']"
-                :color="['time_evolution' === time_evolution_1 ? 'white' : 'gray-700']"
+                :color="'time_evolution' === time_evolution_1 ? 'danger' : 'gray'"
                 class="px-6 py-1.5"
                 @click="time_evolution_1 = 'time_evolution'"
-            >
-                {{ $t('time_evolution') }}
-            </PrimaryButton>
+                :label="$t('time_evolution')"
+            />
 
             <PrimaryButton
-                :background="['donations_per_domain' === time_evolution_1 ? 'red-500' : 'gray-100']"
-                :hover="['donations_per_domain' === time_evolution_1 ? 'red-400' : 'gray-200']"
-                :color="['donations_per_domain' === time_evolution_1 ? 'white' : 'gray-700']"
+                :color="'donations_per_domain' === time_evolution_1 ? 'danger' : 'gray'"
                 class="px-6 py-1.5"
                 @click="time_evolution_1 = 'donations_per_domain'"
-            >
-                {{ $t('Donații per domenii') }}
-            </PrimaryButton>
+                :label="$t('donations_per_domain')"
+            />
         </div>
 
         <div v-if="'time_evolution' === time_evolution_1" class="border border-gray-200 rounded">
@@ -33,24 +27,18 @@
 
                 <div class="flex items-center justify-center gap-6">
                     <PrimaryButton
-                        :background="['nr_donations' === time_evolution_2 ? 'primary-500' : 'gray-100']"
-                        :hover="['nr_donations' === time_evolution_2 ? 'primary-400' : 'gray-200']"
-                        :color="['nr_donations' === time_evolution_2 ? 'white' : 'gray-700']"
+                        :color="'nr_donations' === time_evolution_2 ? 'primary' : 'gray'"
                         class="px-6 py-1.5"
                         @click="time_evolution_2 = 'nr_donations'"
-                    >
-                        {{ $t('donation_number') }}
-                    </PrimaryButton>
+                        :label="$t('donation_number')"
+                    />
 
                     <PrimaryButton
-                        :background="['amount_donations' === time_evolution_2 ? 'primary-500' : 'gray-100']"
-                        :hover="['amount_donations' === time_evolution_2 ? 'primary-400' : 'gray-200']"
-                        :color="['amount_donations' === time_evolution_2 ? 'white' : 'gray-700']"
+                        :color="'amount_donations' === time_evolution_2 ? 'primary' : 'gray'"
                         class="px-6 py-1.5"
                         @click="time_evolution_2 = 'amount_donations'"
-                    >
-                        {{ $t('donation_amount') }}
-                    </PrimaryButton>
+                        :label="$t('donation_amount')"
+                    />
                 </div>
             </div>
 
@@ -80,24 +68,18 @@
 
                 <div class="flex items-center justify-center gap-6">
                     <PrimaryButton
-                        :background="['nr_donations' === time_evolution_2 ? 'primary-500' : 'gray-100']"
-                        :hover="['nr_donations' === time_evolution_2 ? 'primary-400' : 'gray-200']"
-                        :color="['nr_donations' === time_evolution_2 ? 'white' : 'gray-700']"
+                        :color="'nr_donations' === time_evolution_2 ? 'primary' : 'gray'"
                         class="px-6 py-1.5"
                         @click="time_evolution_2 = 'nr_donations'"
-                    >
-                        {{ $t('donation_number') }}
-                    </PrimaryButton>
+                        :label="$t('donation_number')"
+                    />
 
                     <PrimaryButton
-                        :background="['amount_donations' === time_evolution_2 ? 'primary-500' : 'gray-100']"
-                        :hover="['amount_donations' === time_evolution_2 ? 'primary-400' : 'gray-200']"
-                        :color="['amount_donations' === time_evolution_2 ? 'white' : 'gray-700']"
+                        :color="'amount_donations' === time_evolution_2 ? 'primary' : 'gray'"
                         class="px-6 py-1.5"
                         @click="time_evolution_2 = 'amount_donations'"
-                    >
-                        {{ $t('donation_amount') }}
-                    </PrimaryButton>
+                        :label="$t('donation_amount')"
+                    />
                 </div>
             </div>
 
diff --git a/resources/js/Components/dropdowns/FlyoutMenu.vue b/resources/js/Components/dropdowns/FlyoutMenu.vue
index b1da3f29..4f8043e3 100644
--- a/resources/js/Components/dropdowns/FlyoutMenu.vue
+++ b/resources/js/Components/dropdowns/FlyoutMenu.vue
@@ -24,14 +24,15 @@
         >
             <PopoverPanel class="absolute z-50 flex w-screen px-4 -translate-x-1/2 left-1/2 lg:mt-5 max-w-max">
                 <div
-                    class="flex-auto w-screen max-w-sm p-4 text-sm leading-6 bg-white shadow-lg rounded-3xl ring-1 ring-gray-900/5"
+                    class="grid flex-auto w-screen max-w-sm gap-1 p-4 text-sm leading-6 bg-white shadow-lg rounded-3xl ring-1 ring-gray-900/5"
                 >
-                    <div v-for="link in links" :key="link.name" class="relative p-4 rounded-lg hover:bg-gray-50">
-                        <NavLink :href="link.href" class="flex-col items-start justify-start">
-                            <p class="w-full text-left">{{ link.name }}</p>
-                            <p v-if="link.description" :class="[`mt-2 text-gray-500 text-sm`]">
-                                {{ link.description }}
-                            </p>
+                    <div v-for="link in links" :key="link.name" class="relative">
+                        <NavLink
+                            :href="link.href"
+                            class="flex-col items-start justify-start block w-full gap-1 p-4 rounded-lg hover:bg-gray-50"
+                        >
+                            <p class="block w-full text-base font-medium text-left text-gray-900">{{ link.name }}</p>
+                            <p v-if="link.description" class="text-sm text-gray-500" v-text="link.description" />
                         </NavLink>
                     </div>
                 </div>
diff --git a/resources/js/Components/filters/Sort.vue b/resources/js/Components/filters/Sort.vue
index 10c5d6f0..1e25dfd1 100644
--- a/resources/js/Components/filters/Sort.vue
+++ b/resources/js/Components/filters/Sort.vue
@@ -1,5 +1,5 @@
 <template>
-    <Menu as="div" class="relative inline-block text-left z-101">
+    <Menu as="div" class="relative inline-block text-left">
         <div>
             <MenuButton
                 class="inline-flex items-center justify-center w-full px-3 py-2 text-sm font-semibold text-gray-900 bg-white rounded-md shadow-sm gap-x-1.5 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
@@ -19,7 +19,7 @@
         >
             <MenuItems
                 as="ul"
-                class="absolute right-0 w-56 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg z-101 ring-1 ring-black ring-opacity-5 focus:outline-none"
+                class="absolute right-0 z-50 w-56 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
             >
                 <div class="py-1">
                     <MenuItem as="li" v-for="(column, index) in items" :key="index" v-slot="{ active }">
@@ -48,7 +48,6 @@
     import { computed } from 'vue';
     import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
     import { MenuAlt1Icon, SortAscendingIcon, SortDescendingIcon } from '@heroicons/vue/solid';
-    import { trans } from 'laravel-vue-i18n';
     import route from 'ziggy-js';
     import useSort from '@/Helpers/useSort.js';
 
diff --git a/resources/js/Components/form/FileGroup.vue b/resources/js/Components/form/FileGroup.vue
index fc03b977..92f49beb 100644
--- a/resources/js/Components/form/FileGroup.vue
+++ b/resources/js/Components/form/FileGroup.vue
@@ -37,9 +37,8 @@
                 class="grid content-end grid-cols-2 gap-4 mx-2 my-2 w-60 h-60"
             >
                 <DangerButton @click="removeImage(index)">{{ $t('remove_image') }} </DangerButton>
-                <SecondaryButton class="col-start-2" @click="setCoverImage(index)"
-                    >{{ $t('set_cover_image') }}
-                </SecondaryButton>
+
+                <SecondaryButton class="col-start-2" @click="setCoverImage(index)" :label="$t('set_cover_image')" />
             </div>
         </div>
     </div>
diff --git a/resources/js/Components/form/SelectNoBorder.vue b/resources/js/Components/form/SelectNoBorder.vue
deleted file mode 100644
index 7593e19b..00000000
--- a/resources/js/Components/form/SelectNoBorder.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-    <Listbox as="div" v-model="selected">
-        <div class="relative text-base font-medium leading-5 text-gray-500">
-            <ListboxButton class="flex items-center px-3">
-                <span>{{ selected.name }}</span>
-                <SelectorIcon class="w-5 h-5" aria-hidden="true" />
-            </ListboxButton>
-
-            <transition
-                leave-active-class="transition duration-100 ease-in"
-                leave-from-class="opacity-100"
-                leave-to-class="opacity-0"
-            >
-                <ListboxOptions
-                    class="absolute z-10 w-full py-1 mt-1 overflow-auto bg-white rounded-md shadow-lg max-h-56 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
-                >
-                    <ListboxOption
-                        as="template"
-                        v-for="option in options"
-                        :key="option.id"
-                        :value="option"
-                        v-slot="{ active, selected }"
-                    >
-                        <li
-                            :class="[
-                                active ? 'bg-primary-500 text-white' : '',
-                                'relative cursor-default select-none py-2 pl-3 pr-9',
-                            ]"
-                        >
-                            <div class="flex items-center">
-                                <span :class="[selected ? 'text-primary-500 hover:text-white' : '', 'ml-3 block']">
-                                    {{ option.name }}
-                                </span>
-                            </div>
-                        </li>
-                    </ListboxOption>
-                </ListboxOptions>
-            </transition>
-        </div>
-    </Listbox>
-</template>
-
-<script setup>
-    /** Import form vue. */
-    import { ref } from 'vue';
-
-    /** Import plugins. */
-    import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue';
-    import { CheckIcon, SelectorIcon } from '@heroicons/vue/solid';
-
-    /** Component porps. */
-    const props = defineProps({
-        options: { type: Array },
-    });
-
-    /** Default option. */
-    const selected = ref(props.options[0]);
-</script>
diff --git a/resources/js/Components/links/NavLink.vue b/resources/js/Components/links/NavLink.vue
index d904ca0d..b2b0915a 100644
--- a/resources/js/Components/links/NavLink.vue
+++ b/resources/js/Components/links/NavLink.vue
@@ -1,32 +1,24 @@
 <template>
     <Link
         :href="href"
-        :class="[`${classes} inline-flex items-center text-base font-medium leading-5`]"
+        :class="[
+            'inline-flex font-medium leading-5',
+            active ? 'text-primary-600 hover:text-primary-500' : 'text-gray-500 hover:text-primary-600',
+        ]"
     >
         <slot />
     </Link>
 </template>
 
 <script setup>
-    /** Import from vue. */
-    import { computed } from 'vue';
-
-    /** Import from inertia. */
-    import { Link } from '@inertiajs/vue3';
-
-    /** Component props. */
-    const props = defineProps({
+    defineProps({
         href: {
             type: String,
             required: true,
         },
         active: {
             type: Boolean,
+            default: false,
         },
     });
-
-    /** Active link classes. */
-    const classes = computed(() =>
-        props.active ? 'text-primary-500 hover:text-primary-400' : 'text-gray-500 hover:text-primary-500'
-    );
 </script>
diff --git a/resources/js/Components/modals/ChampionshipModal.vue b/resources/js/Components/modals/ChampionshipModal.vue
index 2764d8d8..b82ea66c 100644
--- a/resources/js/Components/modals/ChampionshipModal.vue
+++ b/resources/js/Components/modals/ChampionshipModal.vue
@@ -1,15 +1,6 @@
 <template>
     <div>
-        <PrimaryButton
-            id="championship-modal"
-            background="primary-500"
-            hover="primary-400"
-            color="white"
-            class="w-full"
-            @click="show = !show"
-        >
-            {{ $t('register_project') }}
-        </PrimaryButton>
+        <PrimaryButton id="championship-modal" class="w-full" @click="show = !show" :label="$t('register_project')" />
 
         <div v-if="show" class="fixed top-0 left-0 right-0 w-full h-full bg-gray-500 bg-opacity-75 z-101">
             <div class="relative w-full mx-auto mt-16 bg-white lg:mt-24 lg:flex-row lg:max-w-7xl py-9">
diff --git a/resources/js/Components/modals/ConfirmationModal.vue b/resources/js/Components/modals/ConfirmationModal.vue
new file mode 100644
index 00000000..21920d6d
--- /dev/null
+++ b/resources/js/Components/modals/ConfirmationModal.vue
@@ -0,0 +1,188 @@
+<template>
+    <div>
+        <button
+            type="button"
+            @click="open"
+            class="block text-sm font-medium leading-5 hover:underline"
+            :class="triggerColor"
+            v-text="trigger"
+        />
+
+        <Teleport to="body">
+            <TransitionRoot as="template" :show="isOpen">
+                <Dialog as="div" class="relative z-10" @close="close">
+                    <TransitionChild
+                        as="template"
+                        enter="ease-out duration-300"
+                        enter-from="opacity-0"
+                        enter-to="opacity-100"
+                        leave="ease-in duration-200"
+                        leave-from="opacity-100"
+                        leave-to="opacity-0"
+                    >
+                        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
+                    </TransitionChild>
+
+                    <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+                        <div class="flex items-end justify-center min-h-full p-4 text-center sm:items-center sm:p-0">
+                            <TransitionChild
+                                as="template"
+                                enter="ease-out duration-300"
+                                enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                                enter-to="opacity-100 translate-y-0 sm:scale-100"
+                                leave="ease-in duration-200"
+                                leave-from="opacity-100 translate-y-0 sm:scale-100"
+                                leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                            >
+                                <DialogPanel
+                                    class="relative px-4 pt-5 pb-4 overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
+                                >
+                                    <div class="sm:flex sm:items-start">
+                                        <div
+                                            class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto rounded-full sm:mx-0 sm:h-10 sm:w-10"
+                                            :class="iconColor"
+                                        >
+                                            <component :is="icon" class="w-6 h-6" aria-hidden="true" />
+                                        </div>
+                                        <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                                            <DialogTitle
+                                                as="h3"
+                                                class="text-base font-semibold leading-6 text-gray-900"
+                                            >
+                                                {{ title }}
+                                            </DialogTitle>
+
+                                            <div class="mt-2 text-sm text-gray-500">
+                                                <slot name="content">
+                                                    {{ content }}
+                                                </slot>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                                        <button
+                                            type="button"
+                                            class="inline-flex justify-center w-full px-3 py-2 text-sm font-semibold rounded-md shadow-sm sm:ml-3 sm:w-auto"
+                                            :class="buttonColor"
+                                            @click="confirm"
+                                            v-text="confirmActionLabel || trigger"
+                                        />
+
+                                        <button
+                                            type="button"
+                                            class="inline-flex justify-center w-full px-3 py-2 mt-3 text-sm font-semibold text-gray-900 bg-white rounded-md shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
+                                            @click="close"
+                                            ref="cancelButtonRef"
+                                            v-text="cancelActionLabel || $t('cancel')"
+                                        />
+                                    </div>
+                                </DialogPanel>
+                            </TransitionChild>
+                        </div>
+                    </div>
+                </Dialog>
+            </TransitionRoot>
+        </Teleport>
+    </div>
+</template>
+
+<script setup>
+    import { computed, ref } from 'vue';
+    import { useForm } from '@inertiajs/vue3';
+    import { wTrans, trans } from 'laravel-vue-i18n';
+    import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
+    import { ExclamationIcon } from '@heroicons/vue/outline';
+
+    const props = defineProps({
+        title: {
+            type: String,
+            required: true,
+        },
+        content: {
+            type: String,
+            default: null,
+        },
+        trigger: {
+            type: String,
+            required: true,
+        },
+        icon: {
+            type: Function,
+            default: ExclamationIcon,
+        },
+        color: {
+            type: String,
+            default: 'primary',
+            validator: (color) => ['primary', 'success', 'danger', 'warning'].includes(color),
+        },
+        confirmActionLabel: {
+            type: String,
+            default: null,
+        },
+        cancelActionLabel: {
+            type: String,
+            default: null,
+        },
+        confirmActionUrl: {
+            type: String,
+            required: true,
+        },
+        confirmActionMethod: {
+            type: String,
+            default: 'post',
+            validator: (method) => ['post', 'put', 'delete'].includes(method),
+        },
+        confirmActionPayload: {
+            type: Object,
+            default: () => ({}),
+        },
+    });
+
+    const triggerColor = computed(
+        () =>
+            ({
+                primary: 'text-primary-600',
+                success: 'text-success-600',
+                danger: 'text-danger-600',
+                warning: 'text-warning-600',
+            }[props.color])
+    );
+
+    const iconColor = computed(
+        () =>
+            ({
+                primary: 'bg-primary-100 text-primary-600',
+                success: 'bg-success-100 text-success-600',
+                danger: 'bg-danger-100 text-danger-600',
+                warning: 'bg-warning-100 text-warning-600',
+            }[props.color])
+    );
+
+    const buttonColor = computed(
+        () =>
+            ({
+                primary: 'text-white bg-primary-500 hover:bg-primary-400',
+                success: 'text-white bg-success-500 hover:bg-success-400',
+                danger: 'text-white bg-danger-500 hover:bg-danger-400',
+                warning: 'text-white bg-warning-500 hover:bg-warning-400',
+            }[props.color])
+    );
+
+    const emit = defineEmits(['confirm']);
+
+    const isOpen = ref(false);
+
+    const open = () => {
+        isOpen.value = true;
+    };
+
+    const close = () => {
+        isOpen.value = false;
+    };
+
+    const confirm = () => {
+        useForm(props.confirmActionPayload).submit(props.confirmActionMethod, props.confirmActionUrl);
+
+        close();
+    };
+</script>
diff --git a/resources/js/Components/modals/DonateModal.vue b/resources/js/Components/modals/DonateModal.vue
index 94d34246..e269d646 100644
--- a/resources/js/Components/modals/DonateModal.vue
+++ b/resources/js/Components/modals/DonateModal.vue
@@ -138,13 +138,10 @@
                                                 <!-- Actions -->
                                                 <div class="w-full pt-6">
                                                     <PrimaryButton
-                                                        background="primary-500"
-                                                        hover="primary-400"
-                                                        color="white"
+                                                        type="submit"
                                                         class="w-full"
-                                                    >
-                                                        {{ $t('proceed_to_payment') }}
-                                                    </PrimaryButton>
+                                                        :label="$t('proceed_to_payment')"
+                                                    />
 
                                                     <div v-if="!$page.props.auth.user">
                                                         <p class="py-1 text-sm font-medium text-center text-gray-900">
diff --git a/resources/js/Components/modals/Modal.vue b/resources/js/Components/modals/Modal.vue
index f40d55bd..39d84d6b 100644
--- a/resources/js/Components/modals/Modal.vue
+++ b/resources/js/Components/modals/Modal.vue
@@ -1,12 +1,10 @@
 <template>
     <div>
-        <button :id="id" @click="open = !open" :class="triggerModalClasses">
-            {{ triggerModalText }}
-        </button>
+        <slot name="trigger" :open="open" />
 
         <Teleport to="body">
-            <TransitionRoot as="template" :show="open">
-                <Dialog as="div" class="relative z-101" @close="open = false">
+            <TransitionRoot as="template" :show="isOpen">
+                <Dialog as="div" class="relative" @close="close">
                     <TransitionChild
                         as="template"
                         enter="ease-out duration-300"
@@ -20,7 +18,10 @@
                     </TransitionChild>
 
                     <div class="fixed inset-0 z-50 overflow-y-auto">
-                        <div class="flex items-end justify-center min-h-full p-4 text-center sm:items-center sm:p-0">
+                        <form
+                            class="flex items-end justify-center min-h-full p-4 text-center sm:items-center sm:p-0"
+                            @submit.prevent="submit"
+                        >
                             <TransitionChild
                                 as="template"
                                 enter="ease-out duration-300"
@@ -31,30 +32,35 @@
                                 leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                             >
                                 <DialogPanel
-                                    :class="[
-                                        dialogClasses
-                                            ? `${dialogClasses}`
-                                            : 'bg-white rounded-lg shadow-xl sm:my-8 sm:w-full sm:max-w-lg sm:p-6',
-                                        'relative px-4 pt-5 pb-4 overflow-hidden text-left transition-all transform',
-                                    ]"
+                                    class="relative w-full overflow-hidden text-left transition-all transform bg-white divide-y divide-gray-100 rounded-lg shadow-xl sm:my-8 sm:max-w-lg"
                                 >
-                                    <div class="absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
-                                        <button
-                                            :id="closeId"
-                                            type="button"
-                                            class="text-gray-400 bg-white rounded-md hover:text-gray-500"
-                                            @click="open = false"
-                                        >
-                                            <span class="sr-only">Close</span>
-                                            <XIcon class="w-6 h-6" aria-hidden="true" />
-                                        </button>
-                                    </div>
-                                    <div class="sm:flex sm:items-start">
+                                    <button
+                                        type="button"
+                                        class="absolute text-gray-400 bg-white rounded-md top-4 right-4 hover:text-gray-500"
+                                        @click="close"
+                                    >
+                                        <span class="sr-only" v-text="$t('close')" />
+
+                                        <XIcon class="w-6 h-6" aria-hidden="true" />
+                                    </button>
+
+                                    <DialogTitle class="flex gap-4 px-4 py-3 sm:px-6">
+                                        <h3 class="text-lg font-semibold text-gray-900" v-text="title" />
+                                    </DialogTitle>
+
+                                    <div class="flex flex-col gap-4 px-4 py-3 bg-white sm:px-6 sm:pb-6">
                                         <slot />
                                     </div>
+
+                                    <div
+                                        v-if="$slots.actions"
+                                        class="flex gap-4 px-4 py-3 bg-gray-50 sm:flex-row-reverse ssm:justify-end sm:px-6"
+                                    >
+                                        <slot name="actions" :close="close" />
+                                    </div>
                                 </DialogPanel>
                             </TransitionChild>
-                        </div>
+                        </form>
                     </div>
                 </Dialog>
             </TransitionRoot>
@@ -63,27 +69,47 @@
 </template>
 
 <script setup>
-    import { ref } from 'vue';
-    import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue';
+    import { ref, nextTick } from 'vue';
+    import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
     import { XIcon } from '@heroicons/vue/outline';
 
-    const open = ref(false);
+    const isOpen = ref(false);
 
-    /** Component props. */
     const props = defineProps({
-        triggerModalText: String,
-        triggerModalClasses: String,
-        id: {
+        title: {
             type: String,
-            default: '',
+            required: true,
         },
-        closeId: {
+        form: {
+            type: Object,
+            required: true,
+        },
+        formUrl: {
             type: String,
-            default: '',
+            required: true,
         },
-        dialogClasses: {
+        formMethod: {
             type: String,
-            default: '',
+            default: 'post',
         },
     });
+
+    const emit = defineEmits(['submit']);
+
+    const open = () => {
+        isOpen.value = true;
+    };
+
+    const close = () => {
+        isOpen.value = false;
+
+        props.form.reset();
+    };
+
+    const submit = (event) => {
+        props.form.submit(props.formMethod, props.formUrl, {
+            preserveScroll: true,
+            onSuccess: close,
+        });
+    };
 </script>
diff --git a/resources/js/Components/modals/ToggleTicketStatusModal.vue b/resources/js/Components/modals/ToggleTicketStatusModal.vue
deleted file mode 100644
index f3b0c528..00000000
--- a/resources/js/Components/modals/ToggleTicketStatusModal.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-    <div>
-        <button @click="open = !open" class="block text-sm font-medium text-danger-500">
-            <span v-if="ticket.is_open" v-text="$t('close_ticket')" />
-            <span v-else v-text="$t('reopen_ticket')" />
-        </button>
-
-        <Teleport to="body">
-            <TransitionRoot as="template" :show="open">
-                <Dialog as="div" class="relative z-101" @close="open = false">
-                    <TransitionChild
-                        as="template"
-                        enter="ease-out duration-300"
-                        enter-from="opacity-0"
-                        enter-to="opacity-100"
-                        leave="ease-in duration-200"
-                        leave-from="opacity-100"
-                        leave-to="opacity-0"
-                    >
-                        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
-                    </TransitionChild>
-
-                    <div class="fixed inset-0 z-10 overflow-y-auto">
-                        <div class="flex items-end justify-center min-h-full p-4 text-center sm:items-center sm:p-0">
-                            <TransitionChild
-                                as="template"
-                                enter="ease-out duration-300"
-                                enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                                enter-to="opacity-100 translate-y-0 sm:scale-100"
-                                leave="ease-in duration-200"
-                                leave-from="opacity-100 translate-y-0 sm:scale-100"
-                                leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                            >
-                                <DialogPanel
-                                    class="relative px-4 pt-5 pb-4 overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
-                                >
-                                    <div>
-                                        <div
-                                            class="flex items-center justify-center w-12 h-12 mx-auto bg-green-100 rounded-full"
-                                        >
-                                            <CheckIcon class="w-6 h-6 text-green-500" aria-hidden="true" />
-                                        </div>
-
-                                        <div class="mt-3 text-center sm:mt-5">
-                                            <DialogTitle
-                                                as="h3"
-                                                class="text-base font-semibold leading-6 text-gray-900"
-                                            >
-                                                {{ $t('confirm') }}
-                                            </DialogTitle>
-
-                                            <p
-                                                class="mt-2 text-sm text-gray-500"
-                                                v-if="ticket.is_open"
-                                                v-text="$t('confirm_close_ticket')"
-                                            />
-                                            <p
-                                                class="mt-2 text-sm text-gray-500"
-                                                v-else
-                                                v-text="$t('confirm_reopen_ticket')"
-                                            />
-                                        </div>
-                                    </div>
-                                    <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
-                                        <button
-                                            type="button"
-                                            class="inline-flex justify-center w-full px-3 py-2 mt-3 text-sm font-semibold text-gray-900 bg-white rounded-md shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:col-start-1 sm:mt-0"
-                                            @click="open = false"
-                                        >
-                                            {{ $t('cancel') }}
-                                        </button>
-
-                                        <button
-                                            @click="action"
-                                            type="button"
-                                            class="inline-flex justify-center w-full px-3 py-2 text-sm font-semibold text-white rounded-md shadow-sm bg-primary-500 hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 sm:col-start-2"
-                                        >
-                                            <span v-if="ticket.is_open" v-text="$t('close_ticket')" />
-                                            <span v-else v-text="$t('reopen_ticket')" />
-                                        </button>
-                                    </div>
-                                </DialogPanel>
-                            </TransitionChild>
-                        </div>
-                    </div>
-                </Dialog>
-            </TransitionRoot>
-        </Teleport>
-    </div>
-</template>
-
-<script setup>
-    /** Import from vue. */
-    import { ref, computed } from 'vue';
-
-    /** Import from inertia */
-    import { useForm } from '@inertiajs/vue3';
-
-    /** Import plugins. */
-    import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
-    import { CheckIcon } from '@heroicons/vue/outline';
-
-    /** Component props. */
-    const props = defineProps({
-        ticket: Object,
-    });
-
-    /** Local state. */
-    const open = ref(false);
-
-    const form = useForm({});
-
-    /** Delete action. */
-    const action = () => {
-        open.value = false;
-
-        form.post(route('dashboard.tickets.status', props.ticket.id), {
-            preserveScroll: true,
-            onFinish: () => {
-                open.value = false;
-            },
-        });
-    };
-</script>
diff --git a/resources/js/Components/modals/VolunteerModal.vue b/resources/js/Components/modals/VolunteerModal.vue
index f5af9597..71060d86 100644
--- a/resources/js/Components/modals/VolunteerModal.vue
+++ b/resources/js/Components/modals/VolunteerModal.vue
@@ -141,13 +141,10 @@
                                                 <!-- Actions -->
                                                 <div class="w-full pt-6">
                                                     <PrimaryButton
-                                                        background="primary-500"
-                                                        hover="primary-400"
-                                                        color="white"
+                                                        type="submit"
                                                         class="w-full"
-                                                    >
-                                                        {{ $t('register_as_volunteer') }}
-                                                    </PrimaryButton>
+                                                        :label="$t('register_as_volunteer')"
+                                                    />
 
                                                     <div v-if="!$page.props.auth.user">
                                                         <p class="py-1 text-sm font-medium text-center text-gray-900">
diff --git a/resources/js/Layouts/DashboardLayout.vue b/resources/js/Layouts/DashboardLayout.vue
index f75ef651..822c3ffc 100644
--- a/resources/js/Layouts/DashboardLayout.vue
+++ b/resources/js/Layouts/DashboardLayout.vue
@@ -6,7 +6,6 @@
 
         <div class="flex items-start flex-1 gap-y-10">
             <div class="p-4 mt-1 overflow-y-auto bg-white border-r border-gray-200 lg:w-72 shrink-0">
-                <p class="mb-5 text-base font-medium text-gray-500">Administrează</p>
                 <nav>
                     <ul class="space-y-1">
                         <li v-for="item in navigation" :key="item.name">
@@ -71,16 +70,17 @@
     import Notification from '@/Components/Notification.vue';
 
     import {
-        CurrencyEuroIcon,
         AnnotationIcon,
+        CurrencyEuroIcon,
         FolderIcon,
-        HomeIcon,
-        UsersIcon,
         FolderOpenIcon,
         FolderRemoveIcon,
-        UserRemoveIcon,
+        HomeIcon,
+        OfficeBuildingIcon,
         UserAddIcon,
+        UserCircleIcon,
         UserGroupIcon,
+        UserRemoveIcon,
     } from '@heroicons/vue/outline';
 
     const props = defineProps({
@@ -91,10 +91,15 @@
     });
 
     const navigation = [
+        {
+            name: 'Panou de control',
+            route: route('dashboard.main'),
+            icon: HomeIcon,
+        },
         {
             name: 'Organizația mea',
             route: route('dashboard.organization.edit'),
-            icon: HomeIcon,
+            icon: OfficeBuildingIcon,
         },
         {
             name: 'Proiectele mele',
@@ -158,6 +163,11 @@
                 },
             ],
         },
+        {
+            name: 'Utilizatori',
+            route: route('dashboard.users.index'),
+            icon: UserCircleIcon,
+        },
         {
             name: 'Donații',
             route: route('dashboard.donations.index'),
diff --git a/resources/js/Pages/AdminOng/Projects/AddProject.vue b/resources/js/Pages/AdminOng/Projects/AddProject.vue
index 1eb33895..45c89f5f 100644
--- a/resources/js/Pages/AdminOng/Projects/AddProject.vue
+++ b/resources/js/Pages/AdminOng/Projects/AddProject.vue
@@ -238,9 +238,7 @@
                         {{ $t('preview') }}
                     </SecondaryButton>
 
-                    <PrimaryButton background="primary-500" hover="primary-400" color="white" @click="createProject">
-                        {{ $t('save') }}
-                    </PrimaryButton>
+                    <PrimaryButton @click="createProject" :label="$t('save')" />
                 </div>
             </div>
         </form>
diff --git a/resources/js/Pages/AdminOng/Projects/AddRegionalProject.vue b/resources/js/Pages/AdminOng/Projects/AddRegionalProject.vue
index 224251fc..e4ca6054 100644
--- a/resources/js/Pages/AdminOng/Projects/AddRegionalProject.vue
+++ b/resources/js/Pages/AdminOng/Projects/AddRegionalProject.vue
@@ -329,9 +329,7 @@
                         {{ $t('preview') }}
                     </SecondaryButton>
 
-                    <PrimaryButton background="primary-500" hover="primary-400" color="white" @click="createProject">
-                        {{ $t('save') }}
-                    </PrimaryButton>
+                    <PrimaryButton @click="createProject" :label="$t('save')" />
                 </div>
             </div>
         </form>
diff --git a/resources/js/Pages/AdminOng/Tickets/Index.vue b/resources/js/Pages/AdminOng/Tickets/Index.vue
index c4aa6ff7..b6456d30 100644
--- a/resources/js/Pages/AdminOng/Tickets/Index.vue
+++ b/resources/js/Pages/AdminOng/Tickets/Index.vue
@@ -35,48 +35,37 @@
         </div>
 
         <div v-if="isOpen">
-            <Modal
-                triggerModalClasses="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
-                :triggerModalText="$t('add_ticket')"
-                id="add_ticket"
-            >
-                <form class="w-full space-y-4" @submit.prevent="addTicket">
-                    <h3 class="w-full text-lg font-semibold text-gray-900">
-                        {{ $t('add_ticket') }}
-                    </h3>
-
-                    <Input
-                        class="w-full"
-                        :label="$t('subject')"
-                        color="gray-700"
-                        id="subject"
-                        type="text"
-                        v-model="form.subject"
-                        :error="form.errors.subject"
-                        is-required
-                    />
-
-                    <Textarea
-                        class="w-full"
-                        :label="$t('message')"
-                        id="content"
-                        color="gray-700"
-                        v-model="form.content"
-                        :error="form.errors.content"
-                        is-required
-                    />
-
-                    <!-- Actions -->
-                    <div class="flex items-center justify-end w-full gap-6 pt-6">
-                        <SecondaryButton @click="closeModal" class="py-2.5">
-                            {{ $t('cancel') }}
-                        </SecondaryButton>
-
-                        <PrimaryButton background="primary-500" hover="primary-400" color="white" class="w-auto">
-                            {{ $t('send') }}
-                        </PrimaryButton>
-                    </div>
-                </form>
+            <Modal :title="$t('add_ticket')" :form="form" :formUrl="route('dashboard.tickets.store')">
+                <template #trigger="{ open }">
+                    <SecondaryButton @click="open" :label="$t('add_ticket')" />
+                </template>
+
+                <Input
+                    class="w-full"
+                    :label="$t('subject')"
+                    color="gray-700"
+                    id="subject"
+                    type="text"
+                    v-model="form.subject"
+                    :error="form.errors.subject"
+                    is-required
+                />
+
+                <Textarea
+                    class="w-full"
+                    :label="$t('message')"
+                    id="content"
+                    color="gray-700"
+                    v-model="form.content"
+                    :error="form.errors.content"
+                    is-required
+                />
+
+                <template #actions="{ close }">
+                    <PrimaryButton type="submit" :label="$t('send')" />
+
+                    <SecondaryButton @click="close" class="py-2.5" :label="$t('cancel')" />
+                </template>
             </Modal>
         </div>
 
@@ -100,11 +89,9 @@
     /** Import from inertia. */
     import { useForm } from '@inertiajs/vue3';
 
-    /** Import components. */
     import DashboardLayout from '@/Layouts/DashboardLayout.vue';
     import Title from '@/Components/Title.vue';
     import Table from '@/Components/tables/Table.vue';
-    import ModalAction from '@/Components/modals/ModalAction.vue';
     import Modal from '@/Components/modals/Modal.vue';
     import SecondaryButton from '@/Components/buttons/SecondaryButton.vue';
     import PrimaryButton from '@/Components/buttons/PrimaryButton.vue';
@@ -113,11 +100,6 @@
 
     import { AnnotationIcon } from '@heroicons/vue/outline';
 
-    const form = useForm({
-        subject: '',
-        content: '',
-    });
-
     const props = defineProps({
         status: {
             type: String,
@@ -127,16 +109,10 @@
         },
     });
 
-    const closeModal = () => document.getElementById('add_ticket').click();
-
-    const addTicket = () => {
-        form.post(route('dashboard.tickets.store'), {
-            preserveScroll: true,
-            onSuccess: () => {
-                form.reset();
-            },
-        });
-    };
+    const form = useForm({
+        subject: '',
+        content: '',
+    });
 
     const isOpen = computed(() => props.status === 'open');
 </script>
diff --git a/resources/js/Pages/AdminOng/Tickets/Show.vue b/resources/js/Pages/AdminOng/Tickets/Show.vue
index 016c49fe..89317e84 100644
--- a/resources/js/Pages/AdminOng/Tickets/Show.vue
+++ b/resources/js/Pages/AdminOng/Tickets/Show.vue
@@ -33,7 +33,7 @@
                     <p
                         class="text-sm font-semibold"
                         :class="{
-                            'text-warning-600': message.user.is_bb_admin,
+                            'text-warning-600': message.user.is_superuser,
                         }"
                         v-text="message.user.name"
                     />
@@ -51,41 +51,52 @@
 
         <div class="flex items-center justify-end w-full gap-4 mt-8">
             <Modal
-                triggerModalClasses="whitespace-nowrap px-3 py-4 text-sm text-blue-500"
-                :triggerModalText="$t('answer')"
-                id="ticket-answer"
                 v-if="ticket.is_open"
+                :title="$t('tickets.reply.title')"
+                :form="form"
+                :formUrl="route('dashboard.tickets.reply', ticket.id)"
             >
-                <form class="w-full space-y-4" @submit.prevent="reply">
-                    <h3>
-                        <span class="block text-lg font-semibold to-gray-900">
-                            {{ $t('ticket_reply_header') }}
-                        </span>
-                        <span class="block text-base text-gray-500">{{ ticket.subject }}</span>
-                    </h3>
-
-                    <Textarea
-                        class="w-full"
-                        :label="$t('message')"
-                        id="project-scope"
-                        color="gray-700"
-                        v-model="form.content"
+                <template #trigger="{ open }">
+                    <button
+                        @click="open"
+                        class="block text-sm font-medium leading-5 text-blue-500 hover:underline whitespace-nowrap"
+                        v-text="$t('tickets.reply.trigger')"
                     />
-
-                    <!-- Actions -->
-                    <div class="flex items-center justify-end w-full gap-6 pt-6">
-                        <SecondaryButton @click="closeModal" class="py-2.5">
-                            {{ $t('cancel') }}
-                        </SecondaryButton>
-
-                        <PrimaryButton background="primary-500" hover="primary-400" color="white" class="w-auto">
-                            {{ $t('save') }}
-                        </PrimaryButton>
-                    </div>
-                </form>
+                </template>
+
+                <Textarea
+                    class="w-full"
+                    :label="$t('message')"
+                    color="gray-700"
+                    v-model="form.content"
+                    :error="form.errors.content"
+                    is-required
+                />
+
+                <template #actions="{ close }">
+                    <PrimaryButton type="submit" :label="$t('tickets.reply.trigger')" />
+
+                    <SecondaryButton @click="close" class="py-2.5" :label="$t('cancel')" />
+                </template>
             </Modal>
 
-            <ToggleTicketStatusModal :ticket="ticket" />
+            <ConfirmationModal
+                v-if="ticket.is_open"
+                :title="$t('tickets.close.title')"
+                :content="$t('tickets.close.content')"
+                :trigger="$t('tickets.close.title')"
+                :confirmActionUrl="route('dashboard.tickets.status', ticket.id)"
+                color="danger"
+            />
+
+            <ConfirmationModal
+                v-else
+                :title="$t('tickets.reopen.title')"
+                :content="$t('tickets.reopen.content')"
+                :trigger="$t('tickets.reopen.title')"
+                :confirmActionUrl="route('dashboard.tickets.status', ticket.id)"
+                color="warning"
+            />
         </div>
     </DashboardLayout>
 </template>
@@ -97,8 +108,8 @@
     /** Import components. */
     import DashboardLayout from '@/Layouts/DashboardLayout.vue';
     import Title from '@/Components/Title.vue';
-    import ToggleTicketStatusModal from '@/Components/modals/ToggleTicketStatusModal.vue';
     import Modal from '@/Components/modals/Modal.vue';
+    import ConfirmationModal from '@/Components/modals/ConfirmationModal.vue';
     import Textarea from '@/Components/form/Textarea.vue';
     import SecondaryButton from '@/Components/buttons/SecondaryButton.vue';
     import PrimaryButton from '@/Components/buttons/PrimaryButton.vue';
@@ -123,16 +134,4 @@
     });
 
     const isMessageHighlighted = (message) => window.location.hash === `#reply-${message.id}`;
-
-    const closeModal = () => document.getElementById('ticket-answer').click();
-
-    const reply = () => {
-        closeModal();
-        form.post(route('dashboard.tickets.reply', props.ticket.id), {
-            preserveScroll: true,
-            onSuccess: () => {
-                form.reset();
-            },
-        });
-    };
 </script>
diff --git a/resources/js/Pages/AdminOng/Users/Index.vue b/resources/js/Pages/AdminOng/Users/Index.vue
new file mode 100644
index 00000000..cb8ccd79
--- /dev/null
+++ b/resources/js/Pages/AdminOng/Users/Index.vue
@@ -0,0 +1,86 @@
+<template>
+    <DashboardLayout>
+        <Title :title="$t('navigation.users')" :icon="UserCircleIcon" />
+
+        <Modal
+            v-if="collection.can.create"
+            :title="$t('users.add_manager')"
+            :form="form"
+            :formUrl="route('dashboard.users.store')"
+        >
+            <template #trigger="{ open }">
+                <SecondaryButton @click="open" :label="$t('users.add_manager')" />
+            </template>
+
+            <Input
+                class="w-full"
+                :label="$t('name_last_name')"
+                color="gray-700"
+                type="text"
+                v-model="form.name"
+                :error="form.errors.name"
+                is-required
+            />
+
+            <Input
+                class="w-full"
+                :label="$t('email')"
+                type="email"
+                color="gray-700"
+                v-model="form.email"
+                :error="form.errors.email"
+                is-required
+            />
+
+            <template #actions="{ close }">
+                <PrimaryButton type="submit" :label="$t('add')" />
+
+                <SecondaryButton @click="close" class="py-2.5" :label="$t('cancel')" />
+            </template>
+        </Modal>
+
+        <Table :collection="collection">
+            <template #actions="{ row }">
+                <ConfirmationModal
+                    v-if="row.can.delete && !row.is_admin"
+                    :title="$t('users.remove.title')"
+                    :content="$t('users.remove.content', { name: row.name })"
+                    :trigger="$t('delete')"
+                    :confirmActionUrl="route('dashboard.users.destroy', row.id)"
+                    confirmActionMethod="delete"
+                    color="danger"
+                />
+            </template>
+        </Table>
+    </DashboardLayout>
+</template>
+
+<script setup>
+    import { useForm } from '@inertiajs/vue3';
+
+    import DashboardLayout from '@/Layouts/DashboardLayout.vue';
+    import Pagination from '@/Components/pagination/Pagination.vue';
+    import Title from '@/Components/Title.vue';
+    import Table from '@/Components/tables/Table.vue';
+    import Modal from '@/Components/modals/Modal.vue';
+    import ConfirmationModal from '@/Components/modals/ConfirmationModal.vue';
+    import PrimaryButton from '@/Components/buttons/PrimaryButton.vue';
+    import SecondaryButton from '@/Components/buttons/SecondaryButton.vue';
+    import Input from '@/Components/form/Input.vue';
+
+    import { UserCircleIcon } from '@heroicons/vue/outline';
+
+    const props = defineProps({
+        status: {
+            type: String,
+        },
+        collection: {
+            type: Object,
+        },
+    });
+
+    const form = useForm({
+        name: null,
+        email: null,
+    });
+</script>
diff --git a/resources/js/Pages/AdminOng/Volunteers/Index.vue b/resources/js/Pages/AdminOng/Volunteers/Index.vue
index d3929389..5f9b9f65 100644
--- a/resources/js/Pages/AdminOng/Volunteers/Index.vue
+++ b/resources/js/Pages/AdminOng/Volunteers/Index.vue
@@ -24,40 +24,33 @@
             </template>
 
             <template #actions="{ row }">
-                <ModalAction
+                <ConfirmationModal
                     v-if="status === 'pending'"
-                    triggerModalClasses="block text-sm font-medium leading-5 text-blue-600 hover:underline "
-                    :triggerModalText="$t('accept')"
-                    :cancelModalText="$t('cancel')"
-                    :actionModalText="$t('accept')"
-                    :title="$t('confirm')"
-                    :body="`${$t('confirm_accept_text')} ${row.name}`"
-                    :actionRoute="route('dashboard.volunteers.approve', row.id)"
-                    actionType="approve"
+                    :title="$t('volunteers.accept.title')"
+                    :content="$t('volunteers.accept.content', { name: row.name })"
+                    :trigger="$t('volunteers.accept.trigger')"
+                    :confirmActionUrl="route('dashboard.volunteers.approve', row.id)"
+                    color="primary"
                 />
 
-                <ModalAction
+                <ConfirmationModal
                     v-else-if="status === 'rejected'"
-                    triggerModalClasses="block text-sm font-medium leading-5 text-red-600  hover:underline "
-                    :triggerModalText="$t('delete')"
-                    :cancelModalText="$t('cancel')"
-                    :actionModalText="$t('delete')"
-                    :title="$t('confirm')"
-                    :body="`${$t('confirm_delete_text')} ${row.name}`"
-                    :actionRoute="route('dashboard.volunteers.delete', row.id)"
-                    actionType="delete"
+                    :title="$t('volunteers.delete.title')"
+                    :content="$t('volunteers.delete.content', { name: row.name })"
+                    :trigger="$t('volunteers.delete.trigger')"
+                    :confirmActionUrl="route('dashboard.volunteers.delete', row.id)"
+                    confirmActionMethod="delete"
+                    color="danger"
                 />
 
-                <ModalAction
+                <ConfirmationModal
                     v-if="status !== 'rejected'"
-                    triggerModalClasses="block text-sm font-medium leading-5 text-red-600 hover:underline "
-                    :triggerModalText="$t('reject')"
-                    :cancelModalText="$t('cancel')"
-                    :actionModalText="$t('reject')"
-                    :title="$t('confirm')"
-                    :body="`${$t('confirm_reject_text')} ${row.name}`"
-                    :actionRoute="route('dashboard.volunteers.reject', row.id)"
-                    actionType="reject"
+                    :title="$t('volunteers.reject.title')"
+                    :content="$t('volunteers.reject.content', { name: row.name })"
+                    :trigger="$t('volunteers.reject.trigger')"
+                    :confirmActionUrl="route('dashboard.volunteers.delete', row.id)"
+                    confirmActionMethod="delete"
+                    color="danger"
                 />
             </template>
         </Table>
@@ -70,6 +63,7 @@
     import Pagination from '@/Components/pagination/Pagination.vue';
     import Title from '@/Components/Title.vue';
     import Table from '@/Components/tables/Table.vue';
+    import ConfirmationModal from '@/Components/modals/ConfirmationModal.vue';
     import ModalAction from '@/Components/modals/ModalAction.vue';
     import SecondaryButton from '@/Components/buttons/SecondaryButton.vue';
 
diff --git a/resources/js/Pages/Auth/ConfirmPassword.vue b/resources/js/Pages/Auth/ConfirmPassword.vue
index 900da75c..43c520ad 100644
--- a/resources/js/Pages/Auth/ConfirmPassword.vue
+++ b/resources/js/Pages/Auth/ConfirmPassword.vue
@@ -16,15 +16,7 @@
             <!-- Action -->
             <div class="grid grid-cols-2 gap-4 mt-6">
                 <!-- Log in button -->
-                <PrimaryButton
-                    background="primary-500"
-                    hover="primary-400"
-                    color="white"
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                >
-                    {{ $t('confirm') }}
-                </PrimaryButton>
+                <PrimaryButton type="submit" :disabled="form.processing" :label="$t('confirm')" />
             </div>
         </form>
     </AuthLayout>
diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
index ca4a35aa..0e2e6062 100644
--- a/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -13,15 +13,7 @@
 
             <!-- Action -->
             <div class="grid grid-cols-1">
-                <PrimaryButton
-                    background="primary-500"
-                    hover="primary-400"
-                    color="white"
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                >
-                    {{ $t('password_reset') }}
-                </PrimaryButton>
+                <PrimaryButton type="submit" :disabled="form.processing" :label="$t('password_reset')" />
             </div>
         </form>
     </AuthLayout>
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index b8796bfa..fc7d8e14 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -51,15 +51,11 @@
             <div class="grid grid-cols-2 gap-4 mt-6">
                 <!-- Log in button -->
                 <PrimaryButton
-                    background="primary-500"
-                    hover="primary-400"
-                    color="white"
+                    type="submit"
                     class="col-span-2 md:col-span-1"
-                    :class="{ 'opacity-25': form.processing }"
                     :disabled="form.processing"
-                >
-                    {{ $t('log_in') }}
-                </PrimaryButton>
+                    :label="$t('log_in')"
+                />
 
                 <SecondaryButton
                     class="col-span-2 md:col-span-1 w-full flex items-center justify-center flex-1 gap-x-2 py-2.5"
diff --git a/resources/js/Pages/Auth/Register.vue b/resources/js/Pages/Auth/Register.vue
index 1fbac3ec..667f07fa 100644
--- a/resources/js/Pages/Auth/Register.vue
+++ b/resources/js/Pages/Auth/Register.vue
@@ -55,7 +55,7 @@
     });
 
     const social = useForm({
-        source_of_information: '',
+        referrer: '',
     });
 
     const props = defineProps({
@@ -81,7 +81,7 @@
         let components = [Step1, Step2];
 
         /** Check if registration is of type oragnization */
-        if ('ngo-admin' === form.type) {
+        if ('organization' === form.type) {
             components = [...components, Step3, Step4, Step5];
         }
 
@@ -114,7 +114,7 @@
     const next = () => {
         if ('donor' === form.type && current.value === 1) {
             submit();
-        } else if ('ngo-admin' === form.type && current.value === 4) {
+        } else if ('organization' === form.type && current.value === 4) {
             submit();
         } else if ('' !== form.type) {
             current.value++;
@@ -165,7 +165,7 @@
                 }
 
                 /** Repopulate array as objects. */
-                if (form.type === 'ngo-admin') {
+                if (form.type === 'organization') {
                     if (0 < form.ngo.activity_domains_ids.length) {
                         form.ngo.activity_domains_ids = props.activity_domains.filter((domain) =>
                             form.ngo.activity_domains_ids.includes(domain.id)
@@ -195,7 +195,7 @@
             finalize.value = true;
             social.patch(route('user.update', { id: usrid.value }), {
                 onSuccess: (data) => {
-                    social.source_of_information = '';
+                    social.referrer = '';
                 },
             });
         }
diff --git a/resources/js/Pages/Auth/Registration/Step1.vue b/resources/js/Pages/Auth/Registration/Step1.vue
index 48a3e6e9..9fae2e37 100644
--- a/resources/js/Pages/Auth/Registration/Step1.vue
+++ b/resources/js/Pages/Auth/Registration/Step1.vue
@@ -2,16 +2,7 @@
     <div>
         <RadioGroup :options="options" v-model="form.type" :error="form.errors?.type" />
 
-        <PrimaryButton
-            class="mt-6"
-            background="primary-500"
-            hover="primary-400"
-            color="white"
-            type="button"
-            @click="$emit('next', $event.target)"
-        >
-            {{ $t('continue') }}
-        </PrimaryButton>
+        <PrimaryButton class="mt-6" type="button" @click="$emit('next', $event.target)" :label="$t('continue')" />
     </div>
 </template>
 
@@ -31,12 +22,12 @@
     const options = ref([
         {
             label: 'Creează cont donator',
-            value: 'donor',
+            value: 'user',
             description: 'Dorești să donezi? Creează acum un cont și începe să faci fapte bune.',
         },
         {
             label: 'Creează cont organizație',
-            value: 'ngo-admin',
+            value: 'organization',
             description: 'Vrei ca ONG-ul din care faci parte să apară pe Bursa Binelui? Înscrie organizația acum.',
         },
     ]);
diff --git a/resources/js/Pages/Auth/Registration/Step2.vue b/resources/js/Pages/Auth/Registration/Step2.vue
index 9f1d56df..cd9b1832 100644
--- a/resources/js/Pages/Auth/Registration/Step2.vue
+++ b/resources/js/Pages/Auth/Registration/Step2.vue
@@ -1,10 +1,14 @@
 <template>
     <div class="space-y-6">
-        <h1 v-if="'ngo-admin' === form.type" class="text-2xl font-bold text-cyan-900" v-text="$t('account_details')" />
+        <h1
+            v-if="'organization' === form.type"
+            class="text-2xl font-bold text-cyan-900"
+            v-text="$t('account_details')"
+        />
 
         <!-- Name -->
         <Input
-            :label="'ngo-admin' === form.type ? $t('name_last_name_ong') : $t('name_last_name')"
+            :label="'organization' === form.type ? $t('name_last_name_ong') : $t('name_last_name')"
             id="name"
             type="text"
             v-model="form.user.name"
@@ -66,35 +70,19 @@
             <span class="text-sm text-gray-700">{{ $t('register_subscribe') }}</span>
         </label>
 
-        <div v-if="'ngo-admin' === form.type" class="flex items-center justify-between mt-6 gap-x-4">
+        <div v-if="'organization' === form.type" class="flex items-center justify-between mt-6 gap-x-4">
             <SecondaryButton @click="$emit('prev', $event.target)">
                 {{ $t('back') }}
             </SecondaryButton>
 
-            <PrimaryButton
-                background="primary-500"
-                hover="primary-400"
-                color="white"
-                type="button"
-                @click="$emit('next', $event.target)"
-            >
-                {{ $t('continue') }}
-            </PrimaryButton>
+            <PrimaryButton @click="$emit('next', $event.target)" :label="$t('continue')" />
         </div>
 
         <div
             v-if="'donor' === form.type"
             :class="['flex flex-col md:flex-row items-center gap-4 justify-between mt-6']"
         >
-            <PrimaryButton
-                class="flex-1 w-full"
-                background="primary-500"
-                hover="primary-400"
-                color="white"
-                @click="$emit('next', $event.target)"
-            >
-                {{ $t('register_link') }}
-            </PrimaryButton>
+            <PrimaryButton class="flex-1 w-full" @click="$emit('next', $event.target)" :label="$t('register_link')" />
 
             <SecondaryButton
                 class="w-full flex items-center justify-center flex-1 gap-x-2 py-2.5"
diff --git a/resources/js/Pages/Auth/Registration/Step3.vue b/resources/js/Pages/Auth/Registration/Step3.vue
index f6a83e4c..881ac76d 100644
--- a/resources/js/Pages/Auth/Registration/Step3.vue
+++ b/resources/js/Pages/Auth/Registration/Step3.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="space-y-6">
-        <h1 v-if="'ngo-admin' == form.type" class="text-2xl font-bold text-cyan-900">{{ $t('ong_profile') }}</h1>
+        <h1 v-if="'organization' == form.type" class="text-2xl font-bold text-cyan-900">{{ $t('ong_profile') }}</h1>
 
         <!-- Ong Name -->
         <Input
@@ -73,20 +73,12 @@
             <p class="block mt-1 text-xs font-medium leading-6 text-gray-500">{{ $t('file_description') }}</p>
         </div>
 
-        <div v-if="'ngo-admin' == form.type" class="flex items-center justify-between mt-6 gap-x-4">
+        <div v-if="'organization' == form.type" class="flex items-center justify-between mt-6 gap-x-4">
             <SecondaryButton @click="$emit('prev', $event.target)">
                 {{ $t('back') }}
             </SecondaryButton>
 
-            <PrimaryButton
-                background="primary-500"
-                hover="primary-400"
-                color="white"
-                type="button"
-                @click="$emit('next', $event.target)"
-            >
-                {{ $t('continue') }}
-            </PrimaryButton>
+            <PrimaryButton @click="$emit('next', $event.target)" :label="$t('continue')" />
         </div>
     </div>
 </template>
diff --git a/resources/js/Pages/Auth/Registration/Step4.vue b/resources/js/Pages/Auth/Registration/Step4.vue
index 48cf906c..a586912a 100644
--- a/resources/js/Pages/Auth/Registration/Step4.vue
+++ b/resources/js/Pages/Auth/Registration/Step4.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="space-y-6">
-        <h1 v-if="'ngo-admin' == form.type" class="text-2xl font-bold text-cyan-900" v-text="$t('contact_ong')" />
+        <h1 v-if="'organization' == form.type" class="text-2xl font-bold text-cyan-900" v-text="$t('contact_ong')" />
 
         <!-- County -->
 
@@ -80,20 +80,12 @@
             :error="form.errors['ngo.webiste']"
         />
 
-        <div v-if="'ngo-admin' == form.type" class="flex items-center justify-between mt-6 gap-x-4">
+        <div v-if="'organization' == form.type" class="flex items-center justify-between mt-6 gap-x-4">
             <SecondaryButton @click="$emit('prev', $event.target)">
                 {{ $t('back') }}
             </SecondaryButton>
 
-            <PrimaryButton
-                background="primary-500"
-                hover="primary-400"
-                color="white"
-                type="button"
-                @click="$emit('next', $event.target)"
-            >
-                {{ $t('continue') }}
-            </PrimaryButton>
+            <PrimaryButton @click="$emit('next', $event.target)" :label="$t('continue')" />
         </div>
     </div>
 </template>
diff --git a/resources/js/Pages/Auth/Registration/Step5.vue b/resources/js/Pages/Auth/Registration/Step5.vue
index c309f2db..edfbb9e8 100644
--- a/resources/js/Pages/Auth/Registration/Step5.vue
+++ b/resources/js/Pages/Auth/Registration/Step5.vue
@@ -1,6 +1,8 @@
 <template>
     <div class="space-y-6">
-        <h1 v-if="'ngo-admin' == form.type" class="text-2xl font-bold text-cyan-900">{{ $t('register_volunteer') }}</h1>
+        <h1 v-if="'organization' == form.type" class="text-2xl font-bold text-cyan-900">
+            {{ $t('register_volunteer') }}
+        </h1>
 
         <p class="text-sm text-gray-700">{{ $t('register_volunteer') }}</p>
 
@@ -24,20 +26,12 @@
             <p class="text-xs font-normal text-gray-500">{{ $t('why_volunteer_info') }}</p>
         </Textarea>
 
-        <div v-if="'ngo-admin' == form.type" class="flex items-center justify-between mt-6 gap-x-4">
+        <div v-if="'organization' == form.type" class="flex items-center justify-between mt-6 gap-x-4">
             <SecondaryButton @click="$emit('prev', $event.target)">
                 {{ $t('back') }}
             </SecondaryButton>
 
-            <PrimaryButton
-                background="primary-500"
-                hover="primary-400"
-                color="white"
-                type="button"
-                @click="$emit('next', $event.target)"
-            >
-                {{ $t('finish') }}
-            </PrimaryButton>
+            <PrimaryButton @click="$emit('next', $event.target)" :label="$t('finish')" />
         </div>
     </div>
 </template>
diff --git a/resources/js/Pages/Auth/Registration/Success.vue b/resources/js/Pages/Auth/Registration/Success.vue
index fa39c683..e88a1e53 100644
--- a/resources/js/Pages/Auth/Registration/Success.vue
+++ b/resources/js/Pages/Auth/Registration/Success.vue
@@ -12,7 +12,7 @@
                         :id="option.value"
                         name="info"
                         type="radio"
-                        v-model="social.source_of_information"
+                        v-model="social.referrer"
                         :value="option.value"
                         class="w-4 h-4 border-gray-300 text-primary-500 focus:ring-primary-500"
                     />
@@ -24,7 +24,7 @@
                 <!-- Other -->
                 <Input
                     @input="update"
-                    v-show="show && social.source_of_information"
+                    v-show="show && social.referrer"
                     id="other"
                     type="text"
                     v-model="other"
@@ -34,16 +34,7 @@
             </div>
         </fieldset>
 
-        <PrimaryButton
-            background="primary-500"
-            hover="primary-400"
-            color="white"
-            type="button"
-            class="mt-6"
-            @click="$emit('success', $event.target)"
-        >
-            {{ $t('send') }}
-        </PrimaryButton>
+        <PrimaryButton class="mt-6" @click="$emit('success', $event.target)" :label="$t('send')" />
     </div>
 </template>
 
@@ -100,5 +91,5 @@
         }
     };
 
-    const update = () => (props.social.source_of_information = other.value);
+    const update = () => (props.social.referrer = other.value);
 </script>
diff --git a/resources/js/Pages/Auth/ResetPassword.vue b/resources/js/Pages/Auth/ResetPassword.vue
index 9fa29085..313eb8b6 100644
--- a/resources/js/Pages/Auth/ResetPassword.vue
+++ b/resources/js/Pages/Auth/ResetPassword.vue
@@ -23,15 +23,7 @@
 
             <!-- Action -->
             <div class="grid grid-cols-1">
-                <PrimaryButton
-                    background="primary-500"
-                    hover="primary-400"
-                    color="white"
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                >
-                    {{ $t('save') }}
-                </PrimaryButton>
+                <PrimaryButton type="submit" :disabled="form.processing" :label="$t('save')" />
             </div>
         </form>
     </AuthLayout>
diff --git a/resources/js/Pages/Auth/Welcome.vue b/resources/js/Pages/Auth/Welcome.vue
index 7994d568..a0701dbc 100644
--- a/resources/js/Pages/Auth/Welcome.vue
+++ b/resources/js/Pages/Auth/Welcome.vue
@@ -23,15 +23,7 @@
 
             <!-- Action -->
             <div class="grid grid-cols-1">
-                <PrimaryButton
-                    background="primary-500"
-                    hover="primary-400"
-                    color="white"
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                >
-                    {{ $t('save') }}
-                </PrimaryButton>
+                <PrimaryButton type="submit" :disabled="form.processing" :label="$t('save')" />
             </div>
         </form>
     </AuthLayout>
diff --git a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
index 52ba3c29..493965dd 100644
--- a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
+++ b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
@@ -5,7 +5,6 @@
         </header>
 
         <form @submit.prevent="updatePassword" class="mt-6 mb-16 space-y-6">
-
             <!-- Current password. -->
             <Input
                 :label="$t('current_password')"
@@ -37,26 +36,13 @@
 
             <!-- Actions. -->
             <div class="flex items-center justify-end gap-4">
-
                 <!-- Cancel button -->
-                <SecondaryButton
-                    class="py-2.5"
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                >
+                <SecondaryButton class="py-2.5" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                     {{ $t('cancel') }}
                 </SecondaryButton>
 
                 <!-- Save button -->
-                <PrimaryButton
-                    background="primary-500"
-                    hover="primary-400"
-                    color="white"
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                >
-                    {{ $t('save') }}
-                </PrimaryButton>
+                <PrimaryButton type="submit" :disabled="form.processing" :label="$t('save')" />
 
                 <Transition enter-from-class="opacity-0" leave-to-class="opacity-0" class="transition ease-in-out">
                     <p v-if="form.recentlySuccessful" class="text-sm text-gray-600">{{ $t('saved') }}</p>
diff --git a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
index 88836de0..f32e710c 100644
--- a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
+++ b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
@@ -1,13 +1,11 @@
 <template>
     <section>
-
         <header class="flex items-center gap-4 mt-12">
-            <SvgLoader name="user" class="fill-white"/>
+            <SvgLoader name="user" class="fill-white" />
             <h2 class="text-2xl font-bold text-gray-900">{{ $t('account_settings') }}</h2>
         </header>
 
         <form @submit.prevent="form.patch(route('profile.update'))" class="space-y-6 mt-11">
-
             <!-- Name -->
             <Input
                 :label="$t('name_last_name')"
@@ -56,36 +54,20 @@
                     </Link>
                 </p>
 
-                <div
-                    v-show="status === 'verification-link-sent'"
-                    class="mt-2 text-sm font-medium text-green-600"
-                >
+                <div v-show="status === 'verification-link-sent'" class="mt-2 text-sm font-medium text-green-600">
                     {{ $t('verification_email') }}
                 </div>
             </div>
 
             <!-- Actions -->
             <div class="flex items-center justify-end gap-4">
-
                 <!-- Cancel button -->
-                <SecondaryButton
-                    class="py-2.5"
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                >
+                <SecondaryButton class="py-2.5" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                     {{ $t('cancel') }}
                 </SecondaryButton>
 
                 <!-- Save button -->
-                <PrimaryButton
-                    background="primary-500"
-                    hover="primary-400"
-                    color="white"
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                >
-                    {{ $t('save') }}
-                </PrimaryButton>
+                <PrimaryButton type="submit" :disabled="form.processing" :label="$t('save')" />
 
                 <Transition enter-from-class="opacity-0" leave-to-class="opacity-0" class="transition ease-in-out">
                     <p v-if="form.recentlySuccessful" class="text-sm text-gray-600">{{ $t('saved') }}</p>
diff --git a/resources/js/Pages/Public/Championship/Championship.vue b/resources/js/Pages/Public/Championship/Championship.vue
index 7937b11a..e6fc8303 100644
--- a/resources/js/Pages/Public/Championship/Championship.vue
+++ b/resources/js/Pages/Public/Championship/Championship.vue
@@ -59,16 +59,7 @@
                             <!-- Action -->
                             <div class="space-y-6">
                                 <!-- Log in button -->
-                                <PrimaryButton
-                                    background="primary-500"
-                                    hover="primary-400"
-                                    color="white"
-                                    class="w-full"
-                                    :class="{ 'opacity-25': form.processing }"
-                                    :disabled="form.processing"
-                                >
-                                    {{ $t('log_in') }}
-                                </PrimaryButton>
+                                <PrimaryButton type="submit" :disabled="form.processing" :label="$t('log_in')" />
 
                                 <SecondaryButton
                                     class="flex items-center w-full justify-center gap-x-2 py-2.5"
diff --git a/resources/js/Pages/Public/Regional/Edition.vue b/resources/js/Pages/Public/Regional/Edition.vue
index bac86da1..faef3ffe 100644
--- a/resources/js/Pages/Public/Regional/Edition.vue
+++ b/resources/js/Pages/Public/Regional/Edition.vue
@@ -78,15 +78,11 @@
                             <div class="space-y-6">
                                 <!-- Log in button -->
                                 <PrimaryButton
-                                    background="primary-500"
-                                    hover="primary-400"
-                                    color="white"
+                                    type="submit"
                                     class="w-full"
-                                    :class="{ 'opacity-25': form.processing }"
                                     :disabled="form.processing"
-                                >
-                                    {{ $t('log_in') }}
-                                </PrimaryButton>
+                                    :label="$t('log_in')"
+                                />
 
                                 <SecondaryButton
                                     class="flex items-center w-full justify-center gap-x-2 py-2.5"
diff --git a/resources/js/Pages/Public/Regional/Regional.vue b/resources/js/Pages/Public/Regional/Regional.vue
index 00340b43..de06f979 100644
--- a/resources/js/Pages/Public/Regional/Regional.vue
+++ b/resources/js/Pages/Public/Regional/Regional.vue
@@ -55,15 +55,11 @@
                             <div class="space-y-6">
                                 <!-- Log in button -->
                                 <PrimaryButton
-                                    background="primary-500"
-                                    hover="primary-400"
-                                    color="white"
+                                    type="submit"
                                     class="w-full"
-                                    :class="{ 'opacity-25': form.processing }"
                                     :disabled="form.processing"
-                                >
-                                    {{ $t('log_in') }}
-                                </PrimaryButton>
+                                    :label="$t('log_in')"
+                                />
 
                                 <SecondaryButton
                                     class="flex items-center w-full justify-center gap-x-2 py-2.5"
diff --git a/resources/js/Pages/Public/Website/Contact.vue b/resources/js/Pages/Public/Website/Contact.vue
index 95ebe0c9..50808ab3 100644
--- a/resources/js/Pages/Public/Website/Contact.vue
+++ b/resources/js/Pages/Public/Website/Contact.vue
@@ -42,15 +42,7 @@
                             :error="form.errors.text"
                         />
 
-                        <PrimaryButton
-                            background="primary-500"
-                            hover="primary-400"
-                            color="white"
-                            :class="{ 'opacity-25': form.processing }"
-                            :disabled="form.processing"
-                        >
-                            {{ $t('send') }}
-                        </PrimaryButton>
+                        <PrimaryButton type="submit" :disabled="form.processing" :label="$t('send')" />
                     </form>
                 </div>
 
diff --git a/routes/dashboard.php b/routes/dashboard.php
index fa94f0d9..2f7addfc 100644
--- a/routes/dashboard.php
+++ b/routes/dashboard.php
@@ -7,6 +7,7 @@
 use App\Http\Controllers\Dashboard\ProjectController;
 use App\Http\Controllers\Dashboard\RegionalProjectController;
 use App\Http\Controllers\Dashboard\TicketController;
+use App\Http\Controllers\Dashboard\UserController;
 use App\Http\Controllers\Dashboard\VolunteerController;
 use App\Http\Controllers\Dashboard\WelcomeController;
 use App\Http\Controllers\DashboardController;
@@ -63,7 +64,21 @@
 
     Route::post('/{volunteerRequest}/approve', 'approve')->name('approve');
     Route::post('/{volunteerRequest}/reject', 'reject')->name('reject');
-    Route::post('/{volunteerRequest}/delete', 'delete')->name('delete');
+    Route::delete('/{volunteerRequest}', 'delete')->name('delete');
+});
+
+Route::group([
+    'prefix' => 'users',
+    'as' => 'users.',
+    'controller' => UserController::class,
+], function () {
+    Route::get('/', 'index')->name('index');
+    Route::post('/', 'store')->name('store');
+
+    Route::delete('/{user}', 'destroy')->name('destroy');
+
+    // Route::post('/{volunteerRequest}/reject', 'reject')->name('reject');
+    // Route::post('/{volunteerRequest}/delete', 'delete')->name('delete');
 });
 
 Route::group([
diff --git a/tailwind.config.js b/tailwind.config.js
index 7a2d6641..11d17d1b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -21,7 +21,7 @@ module.exports = {
                 lg: '2rem',
             },
             screens: {
-                DEFAULT: theme('screens.xl')
+                DEFAULT: theme('screens.xl'),
             },
         }),
         extend: {
@@ -31,7 +31,17 @@ module.exports = {
 
             colors: {
                 red: {
-                    500: '#FA6F55'
+                    50: '#FFF2F0',
+                    100: '#FEE1DC',
+                    200: '#FDC4BA',
+                    300: '#FCA697',
+                    400: '#FB8D79',
+                    500: '#FA6F55',
+                    600: '#F83816',
+                    700: '#C12206',
+                    800: '#811704',
+                    900: '#400B02',
+                    950: '#230601',
                 },
                 primary: {
                     50: '#ECF8F8',
@@ -44,21 +54,22 @@ module.exports = {
                     700: '#2C7777',
                     800: '#1D4E4E',
                     900: '#0F2929',
+                    950: '#071313',
                 },
-                danger: colors.rose,
+                danger: colors.red,
                 success: colors.green,
                 warning: colors.yellow,
             },
             zIndex: {
-                '100': '1000',
-                '101': '1001',
-                '102': '1002',
-                '103': '1003',
-                '110': '1010',
-                '120': '1020'
+                100: '1000',
+                101: '1001',
+                102: '1002',
+                103: '1003',
+                110: '1010',
+                120: '1020',
             },
             spacing: {
-                '128': '32rem',
+                128: '32rem',
             },
         },
     },