diff --git a/app/Console/Commands/CertificatesIssues.php b/app/Console/Commands/CertificatesIssues.php
index da5f2c03b..00d998f81 100644
--- a/app/Console/Commands/CertificatesIssues.php
+++ b/app/Console/Commands/CertificatesIssues.php
@@ -31,7 +31,7 @@ public function handle(): int
     {
 
         $issues = Participation::whereNull('participation_url')
-            ->where('status', '=', 'PENDING')
+            ->where('status', 'PENDING')
             ->where('created_at', '<', Carbon::now()->subMinutes(5))->get();
 
         Log::info('certificate with issues: '.count($issues));
diff --git a/app/Console/Commands/CertificatesOfParticipationGeneration.php b/app/Console/Commands/CertificatesOfParticipationGeneration.php
index f6ea73224..e61d1f4c5 100644
--- a/app/Console/Commands/CertificatesOfParticipationGeneration.php
+++ b/app/Console/Commands/CertificatesOfParticipationGeneration.php
@@ -28,7 +28,7 @@ class CertificatesOfParticipationGeneration extends Command
     public function handle(): int
     {
 
-        $participations = Participation::whereNull('participation_url')->where('status', '=', 'PENDING')->orderByDesc('created_at')->get();
+        $participations = Participation::whereNull('participation_url')->where('status', 'PENDING')->orderByDesc('created_at')->get();
 
         $this->info(count($participations).' certificates of participation to generate');
 
diff --git a/app/Console/Commands/EventsIndexOptimize.php b/app/Console/Commands/EventsIndexOptimize.php
new file mode 100644
index 000000000..64822ce11
--- /dev/null
+++ b/app/Console/Commands/EventsIndexOptimize.php
@@ -0,0 +1,73 @@
+<?php
+
+namespace App\Console\Commands;
+
+use Illuminate\Console\Command;
+use Illuminate\Support\Facades\DB;
+
+class EventsIndexOptimize extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'events:index-optimize {--rollback : Drop the indexes instead of creating them}';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Add or drop recommended indexes on the events table for performance optimization';
+
+    /**
+     * Execute the console command.
+     */
+    public function handle()
+    {
+        $rollback = $this->option('rollback');
+
+        $this->info(($rollback ? 'Dropping' : 'Adding') . ' indexes on events table...');
+
+        $indexes = [
+            'idx_status' => 'CREATE INDEX idx_status ON events(status)',
+            'idx_country_iso' => 'CREATE INDEX idx_country_iso ON events(country_iso)',
+            'idx_status_country' => 'CREATE INDEX idx_status_country ON events(status, country_iso)',
+            'idx_start_date' => 'CREATE INDEX idx_start_date ON events(start_date)',
+            'idx_end_date' => 'CREATE INDEX idx_end_date ON events(end_date)',
+            'idx_activity_type' => 'CREATE INDEX idx_activity_type ON events(activity_type)',
+            'idx_highlighted_status' => 'CREATE INDEX idx_highlighted_status ON events(highlighted_status)',
+            'idx_lat_lon' => 'CREATE INDEX idx_lat_lon ON events(latitude, longitude)',
+            'idx_creator_id' => 'CREATE INDEX idx_creator_id ON events(creator_id)',
+            'idx_user_email' => 'CREATE INDEX idx_user_email ON events(user_email)',
+            'idx_status_start' => 'CREATE INDEX idx_status_start ON events(status, start_date)',
+        ];
+
+        foreach ($indexes as $name => $sql) {
+            try {
+                if ($rollback) {
+                    DB::statement("DROP INDEX {$name} ON events");
+                    $this->info("Dropped index: {$name}");
+                } else {
+                    $exists = DB::select(
+                        "SELECT COUNT(1) as count FROM information_schema.statistics WHERE table_schema = DATABASE() AND table_name = 'events' AND index_name = ?",
+                        [$name]
+                    );
+
+                    if (!empty($exists) && $exists[0]->count == 0) {
+                        DB::statement($sql);
+                        $this->info("Created index: {$name}");
+                    } else {
+                        $this->line("Index already exists: {$name}");
+                    }
+                }
+            } catch (\Throwable $e) {
+                $this->error("Failed to " . ($rollback ? 'drop' : 'create') . " index {$name}: " . $e->getMessage());
+            }
+        }
+
+        $this->info('Index operation completed.');
+        return 0;
+    }
+}
diff --git a/app/Console/Commands/Excellence.php b/app/Console/Commands/Excellence.php
index 647611feb..d564fc037 100644
--- a/app/Console/Commands/Excellence.php
+++ b/app/Console/Commands/Excellence.php
@@ -47,7 +47,7 @@ public function handle(): void
         //Select the winners from the Database
         $winners = [];
         foreach ($codeweek4all_codes as $codeweek4all_code) {
-            $creators = Event::whereYear('end_date', '=', $edition)->where('status', '=', 'APPROVED')->where('codeweek_for_all_participation_code', '=', $codeweek4all_code)->pluck('creator_id');
+            $creators = Event::whereYear('end_date', '=', $edition)->where('status', 'APPROVED')->where('codeweek_for_all_participation_code', '=', $codeweek4all_code)->pluck('creator_id');
             foreach ($creators as $creator) {
                 if (! in_array($creator, $winners)) {
                     $winners[] = $creator;
diff --git a/app/Console/Commands/LocationExtraction.php b/app/Console/Commands/LocationExtraction.php
index 2b59801aa..b6ebc31f1 100644
--- a/app/Console/Commands/LocationExtraction.php
+++ b/app/Console/Commands/LocationExtraction.php
@@ -32,7 +32,7 @@ public function handle(): void
         Event::whereNull('deleted_at')->
 //            where('id','=',163373)->
 //        where('creator_id',153701)->
-        where('status', '=', 'APPROVED')->
+        where('status', 'APPROVED')->
         whereNull('location_id')->chunkById($this->step, function ($events, $index) {
 
             $this->reportProgress($index);
diff --git a/app/Console/Commands/SyncEventAgesFromAudience.php b/app/Console/Commands/SyncEventAgesFromAudience.php
new file mode 100644
index 000000000..362c22a03
--- /dev/null
+++ b/app/Console/Commands/SyncEventAgesFromAudience.php
@@ -0,0 +1,83 @@
+<?php
+
+namespace App\Console\Commands;
+
+use App\Event;
+use Illuminate\Console\Command;
+use Illuminate\Support\Facades\DB;
+
+class SyncEventAgesFromAudience extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'events:sync-ages-from-audience';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Backfill the `ages` field in events based on audience_event using AGE_AUDIENCE_MAP';
+
+    /**
+     * Mapping from Event::AGES keys to audience IDs (from database seeder)
+     * This allows automatic linking between selected age ranges and appropriate audiences.
+     * Used for syncing Event.ages with Event.audiences via many-to-many relation.
+     */
+    public const AGE_AUDIENCE_MAP = [
+        'under-5' => [1],                      // Pre-school children
+        '6-9'     => [2],                      // Elementary school students
+        '10-12'   => [2],                      // Upper primary → still Elementary
+        '13-15'   => [3],                      // Lower secondary → High school
+        '16-18'   => [3],                      // Upper secondary → High school
+        '19-25'   => [4, 5],                   // Graduate & Post graduate students
+        'over-25' => [6, 7, 9],                // Employed + Unemployed adults + Teachers
+    ];
+
+    /**
+     * Execute the console command.
+     */
+    public function handle()
+    {
+        $this->info('Syncing event.ages from audience_event...');
+
+        $map = self::AGE_AUDIENCE_MAP;
+        
+        $audienceToAges = [];
+        foreach ($map as $ageKey => $audienceIds) {
+            foreach ($audienceIds as $audienceId) {
+                $audienceToAges[$audienceId][] = $ageKey;
+            }
+        }
+        
+        $links = DB::table('audience_event')
+            ->select('event_id', 'audience_id')
+            ->get()
+            ->groupBy('event_id');
+
+        $updated = 0;
+
+        foreach ($links as $eventId => $group) {
+            $ageKeys = collect($group)
+                ->flatMap(function ($row) use ($audienceToAges) {
+                    return $audienceToAges[$row->audience_id] ?? [];
+                })
+                ->unique()
+                ->values()
+                ->all();
+
+            if (!empty($ageKeys)) {
+                Event::where('id', $eventId)->update([
+                    'ages' => json_encode($ageKeys),
+                ]);
+                $updated++;
+            }
+        }
+
+        $this->info("Updated `ages` field for $updated events.");
+        return 0;
+    }
+}
diff --git a/app/Console/Commands/SyncThemesFromFinalList.php b/app/Console/Commands/SyncThemesFromFinalList.php
new file mode 100644
index 000000000..0e83d0c9f
--- /dev/null
+++ b/app/Console/Commands/SyncThemesFromFinalList.php
@@ -0,0 +1,267 @@
+<?php
+
+namespace App\Console\Commands;
+
+use Illuminate\Console\Command;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Storage;
+
+class SyncThemesFromFinalList extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'themes:sync-finalized {--restore : Restore event_theme from backup only}';
+
+    public const BACKUP_FILE = 'event_theme_backup.json';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Sync themes to finalized list, map existing event_theme, or restore backup if needed';
+
+    public const OLD_TO_NEW_THEME_MAP = [
+        // AI
+        'AI & Gen AI'                  => 'AI & Generative AI',
+        'Artificial intelligence'      => 'AI & Generative AI',
+
+        // Robotics, Drones, Devices
+        'Robotics'                     => 'Robotics, Drones & Smart Devices',
+        'Drones'                       => 'Robotics, Drones & Smart Devices',
+        'Hardware'                     => 'Robotics, Drones & Smart Devices',
+        'Digital Technologies'         => 'Robotics, Drones & Smart Devices',
+
+        // Web/App/Software Dev
+        'Mobile app development'       => 'Web, App & Software Development',
+        'Web development'              => 'Web, App & Software Development',
+        'Software development'         => 'Web, App & Software Development',
+
+        // Game Design
+        'Game design'                  => 'Game Design',
+
+        // Cybersecurity & Data
+        'Data manipulation and visualisation' => 'Cybersecurity & Data', // best match despite not direct
+
+        // Visual/Block Programming
+        'Basic programming concepts'   => 'Visual/Block Programming',
+        'Visual/Block programming'     => 'Visual/Block Programming',
+
+        // Art & Creative Coding
+        'Art and creativity'           => 'Art & Creative Coding',
+
+        // Internet of Things & Wearables
+        'Sensors'                      => 'Internet of Things & Wearables',
+        'Internet of things and wearable computing' => 'Internet of Things & Wearables',
+
+        // AR/VR/3D
+        '3D printing'                  => 'AR, VR & 3D Technologies',
+        'Augmented reality'           => 'AR, VR & 3D Technologies',
+
+        // Digital Careers
+        'Digital careers'              => 'Digital Careers & Learning Pathways',
+        'Digital learning pathways'    => 'Digital Careers & Learning Pathways',
+
+        // Soft Skills
+        'Soft Skills'                  => 'Digital Literacy & Soft Skills',
+
+        // Unplugged & Playful
+        'Unplugged activities'         => 'Unplugged & Playful Activities',
+        'Playful coding activities'    => 'Unplugged & Playful Activities',
+
+        // Diversity
+        'Promoting diversity'          => 'Promoting Diversity & Inclusion',
+
+        // Awareness
+        'Motivation and awareness raising' => 'Awareness & Inspiration',
+
+        // Other
+        'Other'                        => 'Other',
+    ];
+
+    protected $finalThemes = [
+        [17, 'AI & Generative AI', 15],
+        [6, 'Robotics, Drones & Smart Devices', 1],
+        [2, 'Web, App & Software Development', 4],
+        [13, 'Game Design', 10],
+        [5, 'Cybersecurity & Data', 2],
+        [1, 'Visual/Block Programming', 5],
+        [11, 'Art & Creative Coding', 8],
+        [14, 'Internet of Things & Wearables', 11],
+        [16, 'AR, VR & 3D Technologies', 12],
+        [3, 'Digital Careers & Learning Pathways', 13],
+        [4, 'Digital Literacy & Soft Skills', 14],
+        [9, 'Unplugged & Playful Activities', 6],
+        [19, 'Promoting Diversity & Inclusion', 17],
+        [18, 'Awareness & Inspiration', 16],
+        [8, 'Other', 18],
+    ];
+
+    /**
+     * Execute the console command.
+     */
+    public function handle()
+    {
+        $restoreOnly = $this->option('restore');
+
+        if ($restoreOnly) {
+            return $this->restoreBackup();
+        }
+
+        $this->info('Starting themes sync and migration...');
+
+        DB::beginTransaction();
+
+        try {
+            DB::statement('SET FOREIGN_KEY_CHECKS=0');
+            config(['database.connections.mysql.strict' => false]);
+            DB::reconnect();
+
+            $eventThemeOld = DB::table('event_theme')
+                ->join('themes', 'event_theme.theme_id', '=', 'themes.id')
+                ->select('event_theme.event_id', 'themes.name as old_theme_name', 'event_theme.theme_id')
+                ->get();
+
+            if ( !Storage::disk('excel')->exists(self::BACKUP_FILE)) {
+                Storage::disk('excel')->put(self::BACKUP_FILE, $eventThemeOld->toJson(JSON_PRETTY_PRINT));
+                $this->info('Backed up current event_theme to ' . self::BACKUP_FILE);
+            }
+            else {
+                $this->info('No update, Backed up current event_theme exist in ' . self::BACKUP_FILE);
+            }
+
+            DB::table('event_theme')->delete();
+            DB::table('themes')->delete();
+
+            $finalThemesMap = collect($this->finalThemes)->map(function ($theme) {
+                return [
+                    'id' => $theme[0],
+                    'name' => $theme[1],
+                    'order' => $theme[2],
+                ];
+            });
+            
+            DB::table('themes')->insert($finalThemesMap->toArray());
+            
+            // Set AUTO_INCREMENT to max(id) + 1
+            $maxId = collect($this->finalThemes)->max(fn($theme) => $theme[0]);
+            DB::statement('ALTER TABLE themes AUTO_INCREMENT = ' . ($maxId + 1));
+
+            $newThemes = DB::table('themes')->get()->keyBy('name');
+
+            $mappedRows = [];
+
+            foreach ($eventThemeOld as $item) {
+                $newName = self::OLD_TO_NEW_THEME_MAP[$item->old_theme_name] ?? null;
+                if ($newName && isset($newThemes[$newName])) {
+                    $mappedRows[] = [
+                        'event_id' => $item->event_id,
+                        'theme_id' => $newThemes[$newName]->id,
+                    ];
+                }
+            }
+
+            $validatedRows = [];
+
+            foreach (array_chunk($mappedRows, 500) as $chunk) {
+                $eventIds = array_column($chunk, 'event_id');
+
+                $existingIds = DB::table('events')
+                    ->whereIn('id', $eventIds)
+                    ->pluck('id')
+                    ->toArray();
+
+                $validatedRows = array_merge($validatedRows, array_filter($chunk, fn($row) => in_array($row['event_id'], $existingIds)));
+            }
+
+            $uniqueRows = collect($validatedRows)
+                ->unique(fn($row) => $row['event_id'] . '-' . $row['theme_id'])
+                ->values()
+                ->all();
+
+            foreach (array_chunk($uniqueRows, 1000) as $chunk) {
+                DB::table('event_theme')->insert($chunk);
+            }
+
+            DB::statement('SET FOREIGN_KEY_CHECKS=1');
+            config(['database.connections.mysql.strict' => true]);
+            DB::reconnect();
+
+            DB::commit();
+
+            $this->info("Themes synced and event_theme migrated successfully. Total migrated: " . count($uniqueRows));
+        } catch (\Throwable $e) {
+            DB::rollBack();
+            $this->error("Error syncing themes: " . $e->getMessage());
+        }
+
+        return 0;
+    }
+
+    protected function restoreBackup(): int
+    {
+        $this->info('Restoring event_theme from backup...');
+
+        if (!Storage::disk('excel')->exists(self::BACKUP_FILE)) {
+            $this->error('Backup file not found: ' . self::BACKUP_FILE);
+            return 1;
+        }
+
+        $raw = Storage::disk('excel')->get(self::BACKUP_FILE);
+        $data = json_decode($raw, true);
+        $data = collect($data)->map(function ($row) {
+            return [
+                'event_id' => $row['event_id'],
+                'theme_id' => $row['theme_id'],
+            ];
+        })->values()->all();
+
+        if (empty($data)) {
+            $this->error('Backup is empty or invalid.');
+            return 1;
+        }
+
+        try {
+            config(['database.connections.mysql.strict' => false]);
+            DB::reconnect();
+
+            DB::beginTransaction();
+            DB::statement('SET FOREIGN_KEY_CHECKS=0');
+
+            DB::table('event_theme')->delete();
+            DB::table('themes')->delete();
+
+            DB::statement('SET FOREIGN_KEY_CHECKS=1');
+            DB::commit();
+
+            $this->info('Running legacy ThemeTableSeeder...');
+            $this->callSilent('db:seed', [
+                '--class' => 'ThemeTableSeeder',
+            ]);
+
+            DB::beginTransaction();
+            DB::statement('SET FOREIGN_KEY_CHECKS=0');
+
+            foreach (array_chunk($data, 1000) as $chunk) {
+                DB::table('event_theme')->insert($chunk);
+            }
+
+            DB::statement('SET FOREIGN_KEY_CHECKS=1');
+            DB::commit();
+
+            config(['database.connections.mysql.strict' => true]);
+            DB::reconnect();
+
+            $this->info('Restored event_theme successfully: ' . count($data) . ' rows.');
+        } catch (\Throwable $e) {
+            DB::rollBack();
+            $this->error('Restore failed: ' . $e->getMessage());
+            return 1;
+        }
+
+        return 0;
+    }
+}
diff --git a/app/Event.php b/app/Event.php
index 75fd24aad..04efe209a 100644
--- a/app/Event.php
+++ b/app/Event.php
@@ -16,6 +16,7 @@
 use Illuminate\Database\Eloquent\SoftDeletes;
 use Illuminate\Support\Facades\Log;
 use Illuminate\Support\Facades\Mail;
+use Illuminate\Support\Facades\Storage;
 use Illuminate\Support\Str;
 use Spatie\Activitylog\LogOptions;
 use Stevebauman\Purify\Casts\PurifyHtmlOnGet;
@@ -67,6 +68,58 @@ class Event extends Model
         'location_id',
         'leading_teacher_tag',
         'mass_added_for',
+        'activity_format',
+        'duration',
+        'recurring_event',
+        'recurring_type',
+        'males_count',
+        'females_count',
+        'other_count',
+        'is_extracurricular_event',
+        'is_standard_school_curriculum',
+        'is_use_resource',
+        'ages'
+    ];
+
+    public const ACTIVITY_FORMATS = [
+        'coding-camp',
+        'summer-camp',
+        'weekend-course',
+        'evening-course',
+        'careerday',
+        'university-visit',
+        'coding-home',
+        'code-week-challenge',
+        'competition',
+        'other',
+    ];
+    
+    public const DURATIONS = [
+        '0-1',
+        '1-2',
+        '2-4',
+        'over-4',
+    ];
+    
+    public const RECURRING_TYPES = [
+        'consecutive',
+        'individual',
+    ];
+    
+    public const RECURRING_EVENTS = [
+        'daily',
+        'weekly',
+        'monthly',
+    ];
+    
+    public const AGES = [
+        'under-5',
+        '6-9',
+        '10-12',
+        '13-15',
+        '16-18',
+        '19-25',
+        'over-25',
     ];
 
     //    protected $policies = [
@@ -74,7 +127,7 @@ class Event extends Model
     //        Event::class => EventPolicy::class
     //    ];
 
-    //protected $appends = ['LatestModeration'];
+    protected $appends = ['picture_path'];
 
     public function getUrlAttribute() {
         if (!empty($this->slug)) {
@@ -109,6 +162,12 @@ protected function casts(): array
             'title' => PurifyHtmlOnGet::class,
             'location' => PurifyHtmlOnGet::class,
             'language' => PurifyHtmlOnGet::class,
+
+            'activity_format' => 'array',
+            'is_extracurricular_event' => 'boolean',
+            'is_standard_school_curriculum' => 'boolean',
+            'ages' => 'array',
+            'is_use_resource' => 'boolean',
         ];
     }
 
@@ -140,6 +199,8 @@ public function picture_path()
                 return $this->picture;
             }
 
+            // For local test
+            // return Storage::disk('public')->url($this->picture);
             return config('codeweek.aws_url').$this->picture;
         } else {
             return 'https://s3-eu-west-1.amazonaws.com/codeweek-dev/events/pictures/event_default_picture.png';
@@ -212,7 +273,7 @@ public function scopeFilter($query, EventFilters $filters)
 
     public static function getByYear($year)
     {
-        $events = Event::where('status', 'like', 'APPROVED')->where(
+        $events = Event::where('status', 'APPROVED')->where(
             'start_date',
             '>',
             Carbon::createFromDate($year, 1, 1)
diff --git a/app/Filters/EventFilters.php b/app/Filters/EventFilters.php
index 5686edfbb..c01cbd3cb 100755
--- a/app/Filters/EventFilters.php
+++ b/app/Filters/EventFilters.php
@@ -3,7 +3,6 @@
 namespace App\Filters;
 
 use App\Tag;
-use Carbon\Carbon;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Http\Request;
 use Illuminate\Support\Str;
@@ -15,7 +14,20 @@ class EventFilters extends Filters
      *
      * @var array
      */
-    protected $filters = ['countries', 'query', 'themes', 'audiences', 'types', 'year', 'creator_id', 'tag'];
+    protected $filters = [
+        'countries',
+        'query',
+        'themes',
+        'audiences',
+        'types',
+        'year',
+        'creator_id',
+        'tag',
+        'formats',
+        'ages',
+        'languages',
+        'start_date'
+    ];
 
     public function __construct(Request $request)
     {
@@ -50,13 +62,11 @@ protected function countries($countries): Builder
     protected function year($year)
     {
         return $this->builder->whereYear('end_date', '=', $year);
-
     }
 
     protected function creator_id($creator_id)
     {
         return $this->builder->where('creator_id', '=', $creator_id);
-
     }
 
     protected function query($query)
@@ -85,7 +95,6 @@ protected function themes($themes)
         return $this->builder
             ->leftJoin('event_theme', 'events.id', '=', 'event_theme.event_id')
             ->whereIn('event_theme.theme_id', $themesIds);
-
     }
 
     protected function tag($tag)
@@ -104,7 +113,6 @@ protected function tag($tag)
         return $this->builder
             ->leftJoin('event_tag', 'events.id', '=', 'event_tag.event_id')
             ->where('event_tag.tag_id', $selectedTag->id);
-
     }
 
     protected function audiences($audiences)
@@ -119,7 +127,6 @@ protected function audiences($audiences)
         return $this->builder
             ->leftJoin('audience_event', 'events.id', '=', 'audience_event.event_id')
             ->whereIn('audience_event.audience_id', $audiencesIds);
-
     }
 
     protected function types($types)
@@ -129,11 +136,62 @@ protected function types($types)
             return;
         }
 
-        $keys = collect($types)->pluck('key')->all();
+        $keys = collect($types)->pluck('id')->all();
 
         $result = $this->builder->whereIn('activity_type', $keys);
 
         return $result;
+    }
+
+    protected function start_date($start_date)
+    {
+        if (!empty($start_date)) {
+            return $this->builder->where('start_date', '>=', $start_date);
+        }
+        return;
+    }
+
+    protected function languages($languages)
+    {
+
+        if (empty($languages)) {
+            return;
+        }
+
+        $keys = collect($languages)->pluck('id')->all();
+
+        $result = $this->builder->whereIn('language', $keys);
+
+        return $result;
+    }
 
+    protected function formats($formats)
+    {
+        if (empty($formats)) {
+            return;
+        }
+
+        $keys = collect($formats)->pluck('id')->all();
+
+        $this->builder->where(function ($query) use ($keys) {
+            foreach ($keys as $key) {
+                $query->orWhereRaw("JSON_CONTAINS(activity_format, '\"$key\"')");
+            }
+        });
+    }
+
+    protected function ages($ages)
+    {
+        if (empty($ages)) {
+            return;
+        }
+
+        $keys = collect($ages)->pluck('id')->all();
+
+        $this->builder->where(function ($query) use ($keys) {
+            foreach ($keys as $key) {
+                $query->orWhereRaw("JSON_CONTAINS(ages, '\"$key\"')");
+            }
+        });
     }
 }
diff --git a/app/Helpers/Codeweek4AllHelper.php b/app/Helpers/Codeweek4AllHelper.php
index fe8745454..6500c58fa 100644
--- a/app/Helpers/Codeweek4AllHelper.php
+++ b/app/Helpers/Codeweek4AllHelper.php
@@ -17,7 +17,7 @@ public static function kpis($code, $edition = null)
 
         $result = Event::select(DB::raw('count(DISTINCT creator_id) as total_creators, sum(participants_count) as participants_count, count(id) as event_count,  codeweek_for_all_participation_code'))
             ->where([
-                ['status', 'like', 'APPROVED'],
+                ['status', 'APPROVED'],
                 ['codeweek_for_all_participation_code', '=', $code],
             ])
             ->whereYear('end_date', '=', $edition)
@@ -39,7 +39,7 @@ public static function countries($code, $edition = null)
 
         select(DB::raw('count(DISTINCT creator_id) as total_creators, sum(participants_count) as total_participants, codeweek_for_all_participation_code'))
             ->where([
-                ['status', 'like', 'APPROVED'],
+                ['status', 'APPROVED'],
             ])
             ->whereYear('end_date', '=', $edition)
             ->groupBy('codeweek_for_all_participation_code')
@@ -51,7 +51,7 @@ public static function countries($code, $edition = null)
 
         $result = Event::select(DB::raw('sum(participants_count) as participants_count, count(id) as event_count,  codeweek_for_all_participation_code'))
             ->where([
-                ['status', 'like', 'APPROVED'],
+                ['status', 'APPROVED'],
                 ['codeweek_for_all_participation_code', '=', $code],
             ])
             ->whereYear('end_date', '=', $edition)
@@ -71,7 +71,7 @@ public static function getDetailsByCodeweek4All(array $toArray, $edition = null)
 
         return Event::select(DB::raw('codeweek_for_all_participation_code, sum(participants_count) as total_participants, count(DISTINCT creator_id) as total_creators, count(DISTINCT country_iso) as total_countries,  count(id) as total_activities, ((100.0*count(reported_at))/count(*)) as reporting_percentage'))
             ->where([
-                ['status', 'like', 'APPROVED'],
+                ['status', 'APPROVED'],
             ])
             ->whereYear('end_date', '=', $edition)
             ->whereIn('codeweek_for_all_participation_code', $toArray)
@@ -88,7 +88,7 @@ public static function getCountriesByCodeweek4All($code, $edition = null)
         $result = Event::select(DB::raw('countries.name , count(events.id) as event_per_country'))
             ->join('countries', 'events.country_iso', '=', 'countries.iso')
             ->where([
-                ['status', 'like', 'APPROVED'],
+                ['status', 'APPROVED'],
                 ['codeweek_for_all_participation_code', 'like', $code],
             ])
             ->whereYear('end_date', '=', $edition)
@@ -103,7 +103,7 @@ public static function getInitiatorByCodeweek4All($code)
         $result = Event::select(DB::raw('users.email'))
             ->join('users', 'events.creator_id', '=', 'users.id')
             ->where([
-                ['status', 'like', 'APPROVED'],
+                ['status', 'APPROVED'],
                 ['codeweek_for_all_participation_code', 'like', $code],
             ])
             ->orderBy('events.created_at', 'asc')
diff --git a/app/Helpers/EventHelper.php b/app/Helpers/EventHelper.php
index 378b3cc71..59639afa5 100644
--- a/app/Helpers/EventHelper.php
+++ b/app/Helpers/EventHelper.php
@@ -20,7 +20,7 @@ public static function getCloseEvents($longitude, $latitude, $id = 0, $num = 3)
         }
 
         $events = Event::selectRaw(
-            'id, title, slug, start_date, end_date, picture, description, picture, creator_id, 
+            'id, title, slug, start_date, end_date, picture, description, picture, creator_id, highlighted_status, recurring_event, 
         ( 6371 *
          acos( cos( radians(?) ) *
          cos( radians( latitude ) ) *
@@ -31,7 +31,7 @@ public static function getCloseEvents($longitude, $latitude, $id = 0, $num = 3)
          AS distance',
             [$latitude, $longitude, $latitude]
         )
-            ->where('status', '=', 'APPROVED')
+            ->where('status', 'APPROVED')
             ->where('id', '<>', $id)
             ->where('end_date', '>', Carbon::now())
             ->orderBy('distance')
@@ -55,7 +55,7 @@ public static function getPendindEvents()
             array_push($countries, $country->country_iso);
         }
 
-        $events = Event::where('status', '=', 'PENDING')
+        $events = Event::where('status', 'PENDING')
             ->distinct()
             ->select('country_iso')
             ->where('start_date', '>', Carbon::createFromDate(2018, 1, 1))
@@ -67,7 +67,7 @@ public static function getPendindEvents()
 
     public static function getReportedEventsWithoutCertificates()
     {
-        $events = Event::where('status', '=', 'APPROVED')
+        $events = Event::where('status', 'APPROVED')
             ->whereNotNull('reported_at')
             ->whereNull('certificate_url')
             ->whereNotNull('approved_by')
@@ -81,7 +81,7 @@ public static function getReportedEventsWithoutCertificates()
     private static function getPendingEventsForCountry($country)
     {
 
-        $events = Event::where('status', '=', 'PENDING')
+        $events = Event::where('status', 'PENDING')
             ->where('start_date', '>', Carbon::createFromDate(2018, 1, 1))
             ->where('country_iso', $country)
             ->get();
@@ -92,7 +92,7 @@ private static function getPendingEventsForCountry($country)
     private static function getPendingEventsCountForCountry($country)
     {
 
-        $count = Event::where('status', '=', 'PENDING')
+        $count = Event::where('status', 'PENDING')
             ->select('country_iso')
             ->where('start_date', '>', Carbon::createFromDate(2018, 1, 1))
             ->where('country_iso', $country)
@@ -103,7 +103,7 @@ private static function getPendingEventsCountForCountry($country)
 
     private static function getEventsQuery()
     {
-        return Event::where('status', '=', 'PENDING')
+        return Event::where('status', 'PENDING')
             ->where('start_date', '>', Carbon::createFromDate(2018, 1, 1));
     }
 
@@ -140,7 +140,7 @@ public static function getNextPendingEvent(Event $event, ?string $country = null
             return self::getEventsQuery()->where('id', '>', $event->id)->limit(1)->first();
         } else {
             //Get pending events count for specific country
-            return Event::where('status', '=', 'PENDING')
+            return Event::where('status', 'PENDING')
                 ->where('country_iso', $country)
                 ->where('start_date', '>', Carbon::createFromDate(2018, 1, 1))
                 ->where('id', '<>', $event->id)->limit(1)->first();
diff --git a/app/Helpers/ExcellenceWinnersHelper.php b/app/Helpers/ExcellenceWinnersHelper.php
index 0c902cd48..e6a9b550b 100644
--- a/app/Helpers/ExcellenceWinnersHelper.php
+++ b/app/Helpers/ExcellenceWinnersHelper.php
@@ -33,7 +33,7 @@ public static function criteria1($edition)
 
         $codes = Event::select(DB::raw('sum(participants_count) as total_participants, codeweek_for_all_participation_code'))
             ->where([
-                ['status', 'like', 'APPROVED'],
+                ['status', 'APPROVED'],
             ])
             ->whereYear('end_date', '=', $edition)
             ->groupBy('codeweek_for_all_participation_code')
@@ -52,7 +52,7 @@ public static function criteria2($edition)
 
         $codes = Event::select(DB::raw('count(DISTINCT creator_id) as total_creators, sum(participants_count) as total_participants, codeweek_for_all_participation_code'))
             ->where([
-                ['status', 'like', 'APPROVED'],
+                ['status', 'APPROVED'],
             ])
             ->whereYear('end_date', '=', $edition)
             ->groupBy('codeweek_for_all_participation_code')
@@ -72,7 +72,7 @@ public static function criteria3($edition)
 
         $codes = Event::select(DB::raw('count(DISTINCT country_iso) as total_countries, sum(participants_count) as total_participants,codeweek_for_all_participation_code'))
             ->where([
-                ['status', 'like', 'APPROVED'],
+                ['status', 'APPROVED'],
             ])
             ->whereYear('end_date', '=', $edition)
             ->groupBy('codeweek_for_all_participation_code')
diff --git a/app/Helpers/MailingHelper.php b/app/Helpers/MailingHelper.php
index 443b0e3e1..9aad7f671 100644
--- a/app/Helpers/MailingHelper.php
+++ b/app/Helpers/MailingHelper.php
@@ -11,7 +11,7 @@ public static function getActiveCreators($country)
 
         $activeIds = DB::table('events')
             ->join('users', 'users.id', '=', 'events.creator_id')
-            ->where('status', '=', 'APPROVED')
+            ->where('status', 'APPROVED')
             ->where('users.receive_emails', true)
             ->where('events.country_iso', '=', $country)
             ->whereNull('users.deleted_at')
@@ -25,7 +25,7 @@ public static function getActiveCreators($country)
         return DB::table('events')
             ->join('users', 'users.id', '=', 'events.creator_id')
 
-            ->where('status', '=', 'APPROVED')
+            ->where('status', 'APPROVED')
             ->whereNull('events.deleted_at')
             ->whereIntegerInRaw('events.creator_id', $activeIds)
             ->groupBy('users.email')
diff --git a/app/Helpers/ReminderHelper.php b/app/Helpers/ReminderHelper.php
index 442fb665c..ee43f99cd 100644
--- a/app/Helpers/ReminderHelper.php
+++ b/app/Helpers/ReminderHelper.php
@@ -15,7 +15,7 @@ public static function getInactiveCreators($edition)
         $activeIds = DB::table('events')
             ->join('users', 'users.id', '=', 'events.creator_id')
             //->where('creator_id','=',$this->id)
-            ->where('status', '=', 'APPROVED')
+            ->where('status', 'APPROVED')
             ->where('users.receive_emails', true)
             ->whereNull('users.deleted_at')
             ->whereNull('events.deleted_at')
@@ -29,7 +29,7 @@ public static function getInactiveCreators($edition)
         return DB::table('events')
             ->join('users', 'users.id', '=', 'events.creator_id')
             //->where('creator_id','=',$this->id)
-            ->where('status', '=', 'APPROVED')
+            ->where('status', 'APPROVED')
             ->whereNull('events.deleted_at')
             ->where(function ($query) use ($edition) {
                 return $query->whereYear('events.end_date', '=', $edition - 1);
@@ -49,7 +49,7 @@ public static function getActiveCreators()
         $activeIds = DB::table('events')
             ->join('users', 'users.id', '=', 'events.creator_id')
 
-            ->where('status', '=', 'APPROVED')
+            ->where('status', 'APPROVED')
             ->where('users.receive_emails', true)
             ->whereNull('users.deleted_at')
             ->whereNull('events.deleted_at')
@@ -62,7 +62,7 @@ public static function getActiveCreators()
         return DB::table('events')
             ->join('users', 'users.id', '=', 'events.creator_id')
 
-            ->where('status', '=', 'APPROVED')
+            ->where('status', 'APPROVED')
             ->whereNull('events.deleted_at')
             ->whereIntegerInRaw('events.creator_id', $activeIds)
             ->groupBy('users.email')
diff --git a/app/Http/Controllers/Api/EventsController.php b/app/Http/Controllers/Api/EventsController.php
index 994df55ec..d80d1516d 100644
--- a/app/Http/Controllers/Api/EventsController.php
+++ b/app/Http/Controllers/Api/EventsController.php
@@ -105,7 +105,7 @@ public function germany(Request $request)
         ]);
 
         $collection = \App\Http\Resources\EventResource::collection(
-            Event::where('status', 'like', 'APPROVED')
+            Event::where('status', 'APPROVED')
                 ->where('country_iso', 'DE')
                 ->whereYear('end_date', '=', $validated['year'])
                 ->get()
@@ -158,7 +158,7 @@ public function geobox(Request $request)
         }
 
         $collection = \App\Http\Resources\EventResource::collection(
-            Event::where('status', 'like', 'APPROVED')
+            Event::where('status', 'APPROVED')
                 ->where($box)
                 ->whereYear('end_date', '=', $year)
                 ->get()
diff --git a/app/Http/Controllers/EventController.php b/app/Http/Controllers/EventController.php
index 6ae8701ca..76af99321 100755
--- a/app/Http/Controllers/EventController.php
+++ b/app/Http/Controllers/EventController.php
@@ -26,7 +26,7 @@ class EventController extends Controller
      */
     public function __construct()
     {
-        $this->middleware('auth')->except(['index', 'show', 'my']);
+        $this->middleware('auth')->except(['show', 'my']);
     }
 
     public function my(): View
@@ -49,40 +49,6 @@ public function my(): View
     //
     //    }
 
-    /**
-     * Display a listing of the resource.
-     */
-    public function index(Request $request): View
-    {
-        $years = range(Carbon::now()->year, 2014, -1);
-
-        $selectedYear = $request->input('year')
-            ? $request->input('year')
-            : Carbon::now()->year;
-
-        $iso_country_of_user = User::getGeoIPData()->iso_code;
-
-        $ambassadors = User::role('ambassador')
-            ->where('country_iso', '=', $iso_country_of_user)
-            ->get();
-
-        return view('events')->with([
-            'events' => $this->eventsNearMe(),
-            'years' => $years,
-            'selectedYear' => $selectedYear,
-            'countries' => Country::withActualYearEvents(),
-            'current_country_iso' => $iso_country_of_user,
-            'ambassadors' => $ambassadors,
-        ]);
-    }
-
-    private function eventsNearMe()
-    {
-        $geoip = User::getGeoIPData();
-
-        return EventHelper::getCloseEvents($geoip->lon, $geoip->lat);
-    }
-
     /**
      * Show the form for creating a new resource.
      */
@@ -186,7 +152,7 @@ public function edit(Event $event): View
             ->pluck('id')
             ->toArray();
         $selected_audiences = implode(',', $selected_audiences);
-        $selected_country = $event->country()->first()->iso;
+        $selected_country = optional($event->country()->first())->iso;
         $selected_language = is_null($event->language)
             ? 'en'
             : $event->language;
diff --git a/app/Http/Controllers/ExcellenceWinnersController.php b/app/Http/Controllers/ExcellenceWinnersController.php
index 1222f2770..dd68a311d 100644
--- a/app/Http/Controllers/ExcellenceWinnersController.php
+++ b/app/Http/Controllers/ExcellenceWinnersController.php
@@ -35,14 +35,14 @@ public function list(Request $request, $edition = 2024): View
         $details = ExcellenceWinnersHelper::query($edition, false);
 
         $total_events = DB::table('events')
-            ->where('status', '=', 'APPROVED')
+            ->where('status', 'APPROVED')
             //->where('codeweek_for_all_participation_code', '<>', 'cw19-apple-eu')
             ->whereYear('end_date', '=', $edition)
             ->whereNull('deleted_at')
             ->count();
 
         $total_reported = DB::table('events')
-            ->where('status', '=', 'APPROVED')
+            ->where('status', 'APPROVED')
             ->whereNotNull('reported_at')
             ->whereNull('deleted_at')
             ->whereYear('end_date', '=', $edition)
diff --git a/app/Http/Controllers/ScoreboardController.php b/app/Http/Controllers/ScoreboardController.php
index ecc6e62a0..9d802a7d2 100644
--- a/app/Http/Controllers/ScoreboardController.php
+++ b/app/Http/Controllers/ScoreboardController.php
@@ -38,7 +38,7 @@ public function index(Request $request)
         $total = Cache::remember('total_' . $edition, $cache_time, function () use ($edition) {
             Log::info("Setting cache for scoreboard total in " . $edition);
             return DB::table('events')
-                ->where('status', "=", "APPROVED")
+                ->where('status', "APPROVED")
                 ->whereNull('deleted_at')
                 ->whereYear('end_date', '=', $edition)
                 ->count();
@@ -52,7 +52,7 @@ public function index(Request $request)
             $events = DB::table('events')
                 ->join('countries', 'events.country_iso', '=', 'countries.iso')
                 ->select('countries.iso as country_iso', 'countries.name as country_name', 'countries.population as country_population', DB::raw('count(*) as total'))
-                ->where('status', "=", "APPROVED")
+                ->where('status', "APPROVED")
                 ->whereYear('end_date', '=', $edition)
                 ->whereNull('deleted_at')
                 ->where('countries.parent', "=", "")
@@ -63,7 +63,7 @@ public function index(Request $request)
             $eventsFromDependencies = DB::table('events')
                 ->join('countries', 'events.country_iso', '=', 'countries.iso')
                 ->select('countries.population as population', 'countries.parent as iso', DB::raw('count(*) as total'))
-                ->where('status', "=", "APPROVED")
+                ->where('status', "APPROVED")
                 ->whereNull('deleted_at')
                 ->whereYear('end_date', '=', $edition)
                 ->whereNotNull('countries.parent')
diff --git a/app/Http/Controllers/SearchController.php b/app/Http/Controllers/SearchController.php
index 9b59747a4..265e93fa7 100755
--- a/app/Http/Controllers/SearchController.php
+++ b/app/Http/Controllers/SearchController.php
@@ -60,74 +60,46 @@ public function search(Request $request): View
 
     public function searchPOST(EventFilters $filters, Request $request)
     {
-        $events = $this->getEvents($filters);
+        $paginatedEvents = $this->getPaginatedEvents($filters);
 
-        //Log::info($request->input('page'));
         if ($request->input('page')) {
-            $result = [$events];
-        } else {
-            Log::info('no page');
-            $eventsMap = $this->getAllEventsToMap($filters);
-            $result = [$events, $eventsMap];
+            return [$paginatedEvents];
         }
 
-        return $result;
+        $mapData = $this->transformEventsForMap($filters);
+
+        return [$paginatedEvents, $mapData];
     }
 
-    protected function getEvents(EventFilters $filters)
+    protected function getPaginatedEvents(EventFilters $filters)
     {
-
-        $events = Event::where('status', 'like', 'APPROVED')
+        return Event::where('status', 'APPROVED')
             ->filter($filters)
+            ->orderByRaw("start_date > ? desc", [Carbon::today()])
             ->orderBy('start_date')
-            ->get()
-            ->groupBy(function ($event) {
-                if ($event->start_date <= Carbon::today()) {
-                    return 'past';
-                }
-
-                return 'future';
-            });
-
-        if (is_null($events->get('future')) || is_null($events->get('past'))) {
-            return $events->flatten()->paginate(12);
-        }
-
-        return $events->get('future')->merge($events->get('past'))->paginate(12);
+            ->paginate(12);
     }
 
-    protected function getAllEventsToMap(EventFilters $filters)
+    protected function transformEventsForMap(EventFilters $filters)
     {
-
         $flattened = Arr::flatten($filters->getFilters());
         $filtered = array_filter($flattened, fn($v) => $v !== null && $v !== '');
-        $composed_key = implode(',', $filtered);
+        $composed_key = 'map_' . implode(',', $filtered);
 
-        if (empty($composed_key)) {
-            Log::info('Skipping cache due to empty composed_key');
-            return Event::where('status', 'APPROVED')
-                ->filter($filters)
-                ->get()
-                ->groupBy('country');
-        }
+        return Cache::remember($composed_key, 300, function () use ($filters) {
+            $grouped = [];
 
-        $value = Cache::get($composed_key, function () use ($composed_key, $filters) {
-            Log::info("Building cache [{$composed_key}]");
-            $events = Event::where('status', 'like', 'APPROVED')
+            Event::select('id', 'geoposition', 'country_iso') // Only required fields
+                ->where('status', 'APPROVED')
                 ->filter($filters)
-                ->get();
-
-            $events = $this->eventTransformer->transformCollection($events);
-
-            $events = $events->groupBy('country');
-
-            Cache::put($composed_key, $events, 5 * 60);
-
-            return $events;
+                ->cursor()
+                ->each(function ($event) use (&$grouped) {
+                    $transformed = app(\App\Http\Transformers\EventTransformer::class)->transform($event);
+                    $country = $transformed['country'] ?? 'unknown';
+                    $grouped[$country][] = $transformed;
+                });
+
+            return collect($grouped);
         });
-
-        Log::info("Serving from cache [{$composed_key}]");
-
-        return $value;
     }
 }
diff --git a/app/Http/Requests/EventRequest.php b/app/Http/Requests/EventRequest.php
index 3e37fd724..eb506c159 100644
--- a/app/Http/Requests/EventRequest.php
+++ b/app/Http/Requests/EventRequest.php
@@ -31,6 +31,7 @@ public function rules(): array
             'title' => 'required|min:5',
             'description' => 'required|min:5',
             'organizer' => 'required',
+            'duration' => 'required',
             'location' => 'required_unless:activity_type,open-online,invite-online',
             'event_url' => 'required_if:activity_type,open-online,invite-online',
             'language' => ['required', $this->in($languages)],
@@ -38,6 +39,9 @@ public function rules(): array
             'end_date' => 'required|after:start_date',
             'audience' => ['required', new ValidAudience],
             'theme' => ['required', new ValidTheme],
+            'participants_count' => 'required',
+            'ages' => 'required',
+            'is_extracurricular_event' => 'required|boolean',
             'country_iso' => 'required|exists:countries,iso',
             'user_email' => 'required',
             'organizer_type' => 'required',
@@ -50,14 +54,20 @@ public function rules(): array
     public function messages(): array
     {
         return [
+            'activity_type.required' => 'Please select an activity type.',
             'title.required' => 'Please enter a title for your event.',
             'description.required' => 'Please write a short description of what the event is about.',
             'organizer.required' => 'Please enter an organizer.',
+            'duration.required' => 'Please specify the event duration.',
             'location.required' => 'Please enter a location.',
             'start_date.required' => 'Please enter a valid date and time (example: 2014-10-22 18:00).',
             'end_date.required' => 'Please enter a valid date and time (example: 2014-10-22 18:00).',
             'audience.required' => 'If unsure, choose Other and provide more information in the description.',
             'theme.required' => 'If unsure, choose Other and provide more information in the description.',
+            'participants_count.required' => 'Please specify the expected number of participants.',
+            'ages.required' => 'Please select at least one age group.',
+            'is_extracurricular_event.required' => 'Please specify if this is an extracurricular event.',
+            'is_extracurricular_event.boolean' => 'The extracurricular event field must be true or false.',
             'country.required' => 'The event\'s location should be in Europe.',
             'event_url.url' => 'The activity\'s web page address should be a valid URL.',
             'event_url.required' => 'The activity\'s web page is required for online activities.',
diff --git a/app/Imports/AppleEventsImport.php b/app/Imports/AppleEventsImport.php
index 229afaa3c..91ea0b221 100644
--- a/app/Imports/AppleEventsImport.php
+++ b/app/Imports/AppleEventsImport.php
@@ -7,16 +7,9 @@
 use Maatwebsite\Excel\Concerns\ToModel;
 use Maatwebsite\Excel\Concerns\WithCustomValueBinder;
 use Maatwebsite\Excel\Concerns\WithHeadingRow;
-use PhpOffice\PhpSpreadsheet\Cell\DefaultValueBinder;
-use PhpOffice\PhpSpreadsheet\Shared\Date;
 
-class AppleEventsImport extends DefaultValueBinder implements ToModel, WithCustomValueBinder, WithHeadingRow
+class AppleEventsImport extends BaseEventsImport implements ToModel, WithCustomValueBinder, WithHeadingRow
 {
-    public function parseDate($date)
-    {
-        return Date::excelToDateTimeObject($date);
-    }
-
     public function model(array $row): ?Model
     {
 
@@ -45,6 +38,41 @@ public function model(array $row): ?Model
             'latitude' => $row['latitude'],
             'language' => strtolower(explode('_', $row['language'])[0]),
             'mass_added_for' => 'Excel',
+            'recurring_event' => isset($row['recurring_event'])
+                ? $this->validateSingleChoice($row['recurring_event'], Event::RECURRING_EVENTS)
+                : null,
+
+            'males_count' => isset($row['males_count']) ? (int) $row['males_count'] : null,
+            'females_count' => isset($row['females_count']) ? (int) $row['females_count'] : null,
+            'other_count' => isset($row['other_count']) ? (int) $row['other_count'] : null,
+
+            'is_extracurricular_event' => isset($row['is_extracurricular_event'])
+                ? $this->parseBool($row['is_extracurricular_event'])
+                : false,
+
+            'is_standard_school_curriculum' => isset($row['is_standard_school_curriculum'])
+                ? $this->parseBool($row['is_standard_school_curriculum'])
+                : false,
+
+            'is_use_resource' => isset($row['is_use_resource'])
+                ? $this->parseBool($row['is_use_resource'])
+                : false,
+
+            'activity_format' => isset($row['activity_format'])
+                ? $this->validateMultiChoice($row['activity_format'], Event::ACTIVITY_FORMATS)
+                : [],
+
+            'ages' => isset($row['ages'])
+                ? $this->validateMultiChoice($row['ages'], Event::AGES)
+                : [],
+
+            'duration' => isset($row['duration'])
+                ? $this->validateSingleChoice($row['duration'], Event::DURATIONS)
+                : null,
+
+            'recurring_type' => isset($row['recurring_type'])
+                ? $this->validateSingleChoice($row['recurring_type'], Event::RECURRING_TYPES)
+                : null,
         ]);
 
         $event->save();
diff --git a/app/Imports/AvandeEventsImport.php b/app/Imports/AvandeEventsImport.php
index 7ab7b435b..7d1d678e2 100644
--- a/app/Imports/AvandeEventsImport.php
+++ b/app/Imports/AvandeEventsImport.php
@@ -9,10 +9,9 @@
 use Maatwebsite\Excel\Concerns\ToModel;
 use Maatwebsite\Excel\Concerns\WithCustomValueBinder;
 use Maatwebsite\Excel\Concerns\WithHeadingRow;
-use PhpOffice\PhpSpreadsheet\Cell\DefaultValueBinder;
 use PhpOffice\PhpSpreadsheet\Shared\Date;
 
-class AvandeEventsImport extends DefaultValueBinder implements ToModel, WithCustomValueBinder, WithHeadingRow
+class AvandeEventsImport extends AppleEventsImport implements ToModel, WithCustomValueBinder, WithHeadingRow
 {
   public function parseDate($date)
   {
@@ -72,6 +71,41 @@ public function model(array $row): ?Model
         'language' => !empty($row['language']) ? strtolower(explode('_', $row['language'])[0]) : 'en',
         'approved_by' => 19588,
         'mass_added_for' => 'Excel',
+        'recurring_event' => isset($row['recurring_event'])
+            ? $this->validateSingleChoice($row['recurring_event'], Event::RECURRING_EVENTS)
+            : null,
+
+        'males_count' => isset($row['males_count']) ? (int) $row['males_count'] : null,
+        'females_count' => isset($row['females_count']) ? (int) $row['females_count'] : null,
+        'other_count' => isset($row['other_count']) ? (int) $row['other_count'] : null,
+
+        'is_extracurricular_event' => isset($row['is_extracurricular_event'])
+            ? $this->parseBool($row['is_extracurricular_event'])
+            : false,
+
+        'is_standard_school_curriculum' => isset($row['is_standard_school_curriculum'])
+            ? $this->parseBool($row['is_standard_school_curriculum'])
+            : false,
+
+        'is_use_resource' => isset($row['is_use_resource'])
+            ? $this->parseBool($row['is_use_resource'])
+            : false,
+
+        'activity_format' => isset($row['activity_format'])
+            ? $this->validateMultiChoice($row['activity_format'], Event::ACTIVITY_FORMATS)
+            : [],
+
+        'ages' => isset($row['ages'])
+            ? $this->validateMultiChoice($row['ages'], Event::AGES)
+            : [],
+
+        'duration' => isset($row['duration'])
+            ? $this->validateSingleChoice($row['duration'], Event::DURATIONS)
+            : null,
+
+        'recurring_type' => isset($row['recurring_type'])
+            ? $this->validateSingleChoice($row['recurring_type'], Event::RECURRING_TYPES)
+            : null,
       ]);
 
       $event->save();
diff --git a/app/Imports/BaseEventsImport.php b/app/Imports/BaseEventsImport.php
new file mode 100644
index 000000000..fbe106889
--- /dev/null
+++ b/app/Imports/BaseEventsImport.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Imports;
+
+use PhpOffice\PhpSpreadsheet\Cell\DefaultValueBinder;
+use PhpOffice\PhpSpreadsheet\Shared\Date;
+
+abstract class BaseEventsImport extends DefaultValueBinder
+{
+    protected function parseDate($value)
+    {
+        return is_numeric($value) ? Date::excelToDateTimeObject($value) : null;
+    }
+
+    protected function parseArray($value): array
+    {
+        if (is_array($value)) return $value;
+        if (is_string($value)) return array_filter(array_map('trim', explode(',', $value)));
+        return [];
+    }
+
+    protected function parseBool($value): bool
+    {
+        return in_array(strtolower(trim((string) $value)), ['1', 'true', 'yes', 'x'], true);
+    }
+
+    protected function validateMultiChoice(?string $input, array $valid): array
+    {
+        return collect(explode(',', $input))
+            ->map(fn($v) => trim($v))
+            ->filter(fn($v) => in_array($v, $valid, true))
+            ->values()
+            ->all();
+    }
+
+    protected function validateSingleChoice(?string $input, array $valid): ?string
+    {
+        return in_array($input, $valid, true) ? $input : null;
+    }
+}
diff --git a/app/Imports/BulgariaEventsImport.php b/app/Imports/BulgariaEventsImport.php
index 3f50d5184..cf34ed8aa 100644
--- a/app/Imports/BulgariaEventsImport.php
+++ b/app/Imports/BulgariaEventsImport.php
@@ -8,10 +8,9 @@
 use Maatwebsite\Excel\Concerns\ToModel;
 use Maatwebsite\Excel\Concerns\WithCustomValueBinder;
 use Maatwebsite\Excel\Concerns\WithHeadingRow;
-use PhpOffice\PhpSpreadsheet\Cell\DefaultValueBinder;
 use PhpOffice\PhpSpreadsheet\Shared\Date;
 
-class BulgariaEventsImport extends DefaultValueBinder implements ToModel, WithCustomValueBinder, WithHeadingRow
+class BulgariaEventsImport extends BaseEventsImport implements ToModel, WithCustomValueBinder, WithHeadingRow
 {
     public function parseDate($date)
     {
@@ -48,6 +47,41 @@ public function model(array $row): ?Model
             'longitude' => $row['longitude'],
             'latitude' => $row['latitude'],
             'mass_added_for' => 'Excel',
+            'recurring_event' => isset($row['recurring_event'])
+                ? $this->validateSingleChoice($row['recurring_event'], Event::RECURRING_EVENTS)
+                : null,
+
+            'males_count' => isset($row['males_count']) ? (int) $row['males_count'] : null,
+            'females_count' => isset($row['females_count']) ? (int) $row['females_count'] : null,
+            'other_count' => isset($row['other_count']) ? (int) $row['other_count'] : null,
+
+            'is_extracurricular_event' => isset($row['is_extracurricular_event'])
+                ? $this->parseBool($row['is_extracurricular_event'])
+                : false,
+
+            'is_standard_school_curriculum' => isset($row['is_standard_school_curriculum'])
+                ? $this->parseBool($row['is_standard_school_curriculum'])
+                : false,
+
+            'is_use_resource' => isset($row['is_use_resource'])
+                ? $this->parseBool($row['is_use_resource'])
+                : false,
+
+            'activity_format' => isset($row['activity_format'])
+                ? $this->validateMultiChoice($row['activity_format'], Event::ACTIVITY_FORMATS)
+                : [],
+
+            'ages' => isset($row['ages'])
+                ? $this->validateMultiChoice($row['ages'], Event::AGES)
+                : [],
+
+            'duration' => isset($row['duration'])
+                ? $this->validateSingleChoice($row['duration'], Event::DURATIONS)
+                : null,
+
+            'recurring_type' => isset($row['recurring_type'])
+                ? $this->validateSingleChoice($row['recurring_type'], Event::RECURRING_TYPES)
+                : null,
         ]);
 
         $event->save();
diff --git a/app/Imports/CoderDojoEventsImport.php b/app/Imports/CoderDojoEventsImport.php
index 367457081..cc213a98b 100644
--- a/app/Imports/CoderDojoEventsImport.php
+++ b/app/Imports/CoderDojoEventsImport.php
@@ -3,15 +3,13 @@
 namespace App\Imports;
 
 use App\Event;
-use Carbon\Carbon;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\Facades\Log;
 use Maatwebsite\Excel\Concerns\ToModel;
 use Maatwebsite\Excel\Concerns\WithCustomValueBinder;
 use Maatwebsite\Excel\Concerns\WithHeadingRow;
-use PhpOffice\PhpSpreadsheet\Cell\DefaultValueBinder;
 
-class CoderDojoEventsImport extends DefaultValueBinder implements ToModel, WithCustomValueBinder, WithHeadingRow
+class CoderDojoEventsImport extends BaseEventsImport implements ToModel, WithCustomValueBinder, WithHeadingRow
 {
     public function parseDate($date)
     {
@@ -65,6 +63,41 @@ public function model(array $row): ?Model
                 'language' => !empty($row['language']) ? trim($row['language']) : 'nl',
                 'approved_by' => 19588,
                 'mass_added_for' => 'Excel',
+                'recurring_event' => isset($row['recurring_event'])
+                    ? $this->validateSingleChoice($row['recurring_event'], Event::RECURRING_EVENTS)
+                    : null,
+
+                'males_count' => isset($row['males_count']) ? (int) $row['males_count'] : null,
+                'females_count' => isset($row['females_count']) ? (int) $row['females_count'] : null,
+                'other_count' => isset($row['other_count']) ? (int) $row['other_count'] : null,
+
+                'is_extracurricular_event' => isset($row['is_extracurricular_event'])
+                    ? $this->parseBool($row['is_extracurricular_event'])
+                    : false,
+
+                'is_standard_school_curriculum' => isset($row['is_standard_school_curriculum'])
+                    ? $this->parseBool($row['is_standard_school_curriculum'])
+                    : false,
+
+                'is_use_resource' => isset($row['is_use_resource'])
+                    ? $this->parseBool($row['is_use_resource'])
+                    : false,
+
+                'activity_format' => isset($row['activity_format'])
+                    ? $this->validateMultiChoice($row['activity_format'], Event::ACTIVITY_FORMATS)
+                    : [],
+
+                'ages' => isset($row['ages'])
+                    ? $this->validateMultiChoice($row['ages'], Event::AGES)
+                    : [],
+
+                'duration' => isset($row['duration'])
+                    ? $this->validateSingleChoice($row['duration'], Event::DURATIONS)
+                    : null,
+
+                'recurring_type' => isset($row['recurring_type'])
+                    ? $this->validateSingleChoice($row['recurring_type'], Event::RECURRING_TYPES)
+                    : null,
             ]);
 
             $event->save();
diff --git a/app/Imports/CodingActivitiesEUCodeWeekSiteImport.php b/app/Imports/CodingActivitiesEUCodeWeekSiteImport.php
index 413e1226b..9eb268af0 100644
--- a/app/Imports/CodingActivitiesEUCodeWeekSiteImport.php
+++ b/app/Imports/CodingActivitiesEUCodeWeekSiteImport.php
@@ -3,16 +3,13 @@
 namespace App\Imports;
 
 use App\Event;
-use Carbon\Carbon;
 use Illuminate\Database\Eloquent\Model;
-use Illuminate\Support\Facades\Log;
 use Maatwebsite\Excel\Concerns\ToModel;
 use Maatwebsite\Excel\Concerns\WithCustomValueBinder;
 use Maatwebsite\Excel\Concerns\WithHeadingRow;
-use PhpOffice\PhpSpreadsheet\Cell\DefaultValueBinder;
 use PhpOffice\PhpSpreadsheet\Shared\Date;
 
-class CodingActivitiesEUCodeWeekSiteImport extends DefaultValueBinder implements ToModel, WithCustomValueBinder, WithHeadingRow
+class CodingActivitiesEUCodeWeekSiteImport extends BaseEventsImport implements ToModel, WithCustomValueBinder, WithHeadingRow
 {
     public function parseDate($date)
     {
@@ -71,6 +68,41 @@ public function model(array $row): ?Model
             'language' => $row['language'],
             'approved_by' => 19588,
             'mass_added_for' => 'Excel',
+            'recurring_event' => isset($row['recurring_event'])
+                ? $this->validateSingleChoice($row['recurring_event'], Event::RECURRING_EVENTS)
+                : null,
+
+            'males_count' => isset($row['males_count']) ? (int) $row['males_count'] : null,
+            'females_count' => isset($row['females_count']) ? (int) $row['females_count'] : null,
+            'other_count' => isset($row['other_count']) ? (int) $row['other_count'] : null,
+
+            'is_extracurricular_event' => isset($row['is_extracurricular_event'])
+                ? $this->parseBool($row['is_extracurricular_event'])
+                : false,
+
+            'is_standard_school_curriculum' => isset($row['is_standard_school_curriculum'])
+                ? $this->parseBool($row['is_standard_school_curriculum'])
+                : false,
+
+            'is_use_resource' => isset($row['is_use_resource'])
+                ? $this->parseBool($row['is_use_resource'])
+                : false,
+
+            'activity_format' => isset($row['activity_format'])
+                ? $this->validateMultiChoice($row['activity_format'], Event::ACTIVITY_FORMATS)
+                : [],
+
+            'ages' => isset($row['ages'])
+                ? $this->validateMultiChoice($row['ages'], Event::AGES)
+                : [],
+
+            'duration' => isset($row['duration'])
+                ? $this->validateSingleChoice($row['duration'], Event::DURATIONS)
+                : null,
+
+            'recurring_type' => isset($row['recurring_type'])
+                ? $this->validateSingleChoice($row['recurring_type'], Event::RECURRING_TYPES)
+                : null,
         ]);
 
         $event->save();
diff --git a/app/Imports/DutchDanceEventsImport.php b/app/Imports/DutchDanceEventsImport.php
index f0231de4a..7524aab59 100644
--- a/app/Imports/DutchDanceEventsImport.php
+++ b/app/Imports/DutchDanceEventsImport.php
@@ -10,10 +10,9 @@
 use Maatwebsite\Excel\Concerns\ToModel;
 use Maatwebsite\Excel\Concerns\WithCustomValueBinder;
 use Maatwebsite\Excel\Concerns\WithHeadingRow;
-use PhpOffice\PhpSpreadsheet\Cell\DefaultValueBinder;
 use PhpOffice\PhpSpreadsheet\Shared\Date;
 
-class DutchDanceEventsImport extends DefaultValueBinder implements ToModel, WithCustomValueBinder, WithHeadingRow
+class DutchDanceEventsImport extends BaseEventsImport implements ToModel, WithCustomValueBinder, WithHeadingRow
 {
     public function parseDate($date)
     {
@@ -64,6 +63,41 @@ public function model(array $row): ?Model
             'latitude' => $row['longitude'],
             'language' => strtolower($row['language']),
             'mass_added_for' => 'Excel',
+            'recurring_event' => isset($row['recurring_event'])
+                ? $this->validateSingleChoice($row['recurring_event'], Event::RECURRING_EVENTS)
+                : null,
+
+            'males_count' => isset($row['males_count']) ? (int) $row['males_count'] : null,
+            'females_count' => isset($row['females_count']) ? (int) $row['females_count'] : null,
+            'other_count' => isset($row['other_count']) ? (int) $row['other_count'] : null,
+
+            'is_extracurricular_event' => isset($row['is_extracurricular_event'])
+                ? $this->parseBool($row['is_extracurricular_event'])
+                : false,
+
+            'is_standard_school_curriculum' => isset($row['is_standard_school_curriculum'])
+                ? $this->parseBool($row['is_standard_school_curriculum'])
+                : false,
+
+            'is_use_resource' => isset($row['is_use_resource'])
+                ? $this->parseBool($row['is_use_resource'])
+                : false,
+
+            'activity_format' => isset($row['activity_format'])
+                ? $this->validateMultiChoice($row['activity_format'], Event::ACTIVITY_FORMATS)
+                : [],
+
+            'ages' => isset($row['ages'])
+                ? $this->validateMultiChoice($row['ages'], Event::AGES)
+                : [],
+
+            'duration' => isset($row['duration'])
+                ? $this->validateSingleChoice($row['duration'], Event::DURATIONS)
+                : null,
+
+            'recurring_type' => isset($row['recurring_type'])
+                ? $this->validateSingleChoice($row['recurring_type'], Event::RECURRING_TYPES)
+                : null,
         ]);
 
         $event->save();
diff --git a/app/Imports/DutchMoorlagEventsImport.php b/app/Imports/DutchMoorlagEventsImport.php
index 344ea3465..5179f39b9 100644
--- a/app/Imports/DutchMoorlagEventsImport.php
+++ b/app/Imports/DutchMoorlagEventsImport.php
@@ -8,10 +8,9 @@
 use Maatwebsite\Excel\Concerns\ToModel;
 use Maatwebsite\Excel\Concerns\WithCustomValueBinder;
 use Maatwebsite\Excel\Concerns\WithHeadingRow;
-use PhpOffice\PhpSpreadsheet\Cell\DefaultValueBinder;
 use PhpOffice\PhpSpreadsheet\Shared\Date;
 
-class DutchMoorlagEventsImport extends DefaultValueBinder implements ToModel, WithCustomValueBinder, WithHeadingRow
+class DutchMoorlagEventsImport extends BaseEventsImport implements ToModel, WithCustomValueBinder, WithHeadingRow
 {
     public function parseDate($date)
     {
@@ -48,6 +47,41 @@ public function model(array $row): ?Model
             'latitude' => $row['longitude'],
             'language' => strtolower($row['language']),
             'mass_added_for' => 'Excel',
+            'recurring_event' => isset($row['recurring_event'])
+                ? $this->validateSingleChoice($row['recurring_event'], Event::RECURRING_EVENTS)
+                : null,
+
+            'males_count' => isset($row['males_count']) ? (int) $row['males_count'] : null,
+            'females_count' => isset($row['females_count']) ? (int) $row['females_count'] : null,
+            'other_count' => isset($row['other_count']) ? (int) $row['other_count'] : null,
+
+            'is_extracurricular_event' => isset($row['is_extracurricular_event'])
+                ? $this->parseBool($row['is_extracurricular_event'])
+                : false,
+
+            'is_standard_school_curriculum' => isset($row['is_standard_school_curriculum'])
+                ? $this->parseBool($row['is_standard_school_curriculum'])
+                : false,
+
+            'is_use_resource' => isset($row['is_use_resource'])
+                ? $this->parseBool($row['is_use_resource'])
+                : false,
+
+            'activity_format' => isset($row['activity_format'])
+                ? $this->validateMultiChoice($row['activity_format'], Event::ACTIVITY_FORMATS)
+                : [],
+
+            'ages' => isset($row['ages'])
+                ? $this->validateMultiChoice($row['ages'], Event::AGES)
+                : [],
+
+            'duration' => isset($row['duration'])
+                ? $this->validateSingleChoice($row['duration'], Event::DURATIONS)
+                : null,
+
+            'recurring_type' => isset($row['recurring_type'])
+                ? $this->validateSingleChoice($row['recurring_type'], Event::RECURRING_TYPES)
+                : null,
         ]);
 
         $event->save();
diff --git a/app/Imports/DutchSimoneEventsImport.php b/app/Imports/DutchSimoneEventsImport.php
index eed2bca19..fda1bd800 100644
--- a/app/Imports/DutchSimoneEventsImport.php
+++ b/app/Imports/DutchSimoneEventsImport.php
@@ -8,10 +8,9 @@
 use Maatwebsite\Excel\Concerns\ToModel;
 use Maatwebsite\Excel\Concerns\WithCustomValueBinder;
 use Maatwebsite\Excel\Concerns\WithHeadingRow;
-use PhpOffice\PhpSpreadsheet\Cell\DefaultValueBinder;
 use PhpOffice\PhpSpreadsheet\Shared\Date;
 
-class DutchSimoneEventsImport extends DefaultValueBinder implements ToModel, WithCustomValueBinder, WithHeadingRow
+class DutchSimoneEventsImport extends BaseEventsImport implements ToModel, WithCustomValueBinder, WithHeadingRow
 {
     public function parseDate($date)
     {
@@ -48,6 +47,41 @@ public function model(array $row): ?Model
             'latitude' => $row['latitude'],
             'language' => strtolower($row['language']),
             'mass_added_for' => 'Excel',
+            'recurring_event' => isset($row['recurring_event'])
+                ? $this->validateSingleChoice($row['recurring_event'], Event::RECURRING_EVENTS)
+                : null,
+
+            'males_count' => isset($row['males_count']) ? (int) $row['males_count'] : null,
+            'females_count' => isset($row['females_count']) ? (int) $row['females_count'] : null,
+            'other_count' => isset($row['other_count']) ? (int) $row['other_count'] : null,
+
+            'is_extracurricular_event' => isset($row['is_extracurricular_event'])
+                ? $this->parseBool($row['is_extracurricular_event'])
+                : false,
+
+            'is_standard_school_curriculum' => isset($row['is_standard_school_curriculum'])
+                ? $this->parseBool($row['is_standard_school_curriculum'])
+                : false,
+
+            'is_use_resource' => isset($row['is_use_resource'])
+                ? $this->parseBool($row['is_use_resource'])
+                : false,
+
+            'activity_format' => isset($row['activity_format'])
+                ? $this->validateMultiChoice($row['activity_format'], Event::ACTIVITY_FORMATS)
+                : [],
+
+            'ages' => isset($row['ages'])
+                ? $this->validateMultiChoice($row['ages'], Event::AGES)
+                : [],
+
+            'duration' => isset($row['duration'])
+                ? $this->validateSingleChoice($row['duration'], Event::DURATIONS)
+                : null,
+
+            'recurring_type' => isset($row['recurring_type'])
+                ? $this->validateSingleChoice($row['recurring_type'], Event::RECURRING_TYPES)
+                : null,
         ]);
 
         $event->save();
diff --git a/app/Imports/EventiEventsImport.php b/app/Imports/EventiEventsImport.php
index 6b7c7b566..c4bd15672 100644
--- a/app/Imports/EventiEventsImport.php
+++ b/app/Imports/EventiEventsImport.php
@@ -3,96 +3,129 @@
 namespace App\Imports;
 
 use App\Event;
-use Carbon\Carbon;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\Facades\Log;
 use Maatwebsite\Excel\Concerns\ToModel;
 use Maatwebsite\Excel\Concerns\WithCustomValueBinder;
 use Maatwebsite\Excel\Concerns\WithHeadingRow;
-use PhpOffice\PhpSpreadsheet\Cell\DefaultValueBinder;
 
-class EventiEventsImport extends DefaultValueBinder implements ToModel, WithCustomValueBinder, WithHeadingRow
+class EventiEventsImport extends BaseEventsImport implements ToModel, WithCustomValueBinder, WithHeadingRow
 {
-  public function parseDate($date)
-  {
-    $arr = explode(',', $date);
-    array_shift($arr);
-    return implode($arr);
-  }
-
-  public function model(array $row): ?Model
-  {
-    // Validate required fields
-    if (
-      empty($row['activity_title']) ||
-      empty($row['name_of_organisation']) ||
-      empty($row['description']) ||
-      empty($row['type_of_organisation']) ||
-      empty($row['activity_type']) ||
-      empty($row['country']) ||
-      empty($row['start_date']) ||
-      empty($row['end_date'])
-    ) {
-      Log::error('Missing required fields in row');
-      return null;
+    public function parseDate($date)
+    {
+        $arr = explode(',', $date);
+        array_shift($arr);
+        return implode($arr);
     }
 
-    try {
-      $event = new Event([
-        'status' => 'APPROVED',
-        'title' => trim($row['activity_title']),
-        'slug' => str_slug(trim($row['activity_title'])),
-        'organizer' => trim($row['name_of_organisation']),
-        'description' => trim($row['description']),
-        'organizer_type' => trim($row['type_of_organisation']),
-        'activity_type' => trim($row['activity_type']),
-        'location' => !empty($row['address']) ? trim($row['address']) : 'online',
-        'event_url' => !empty($row['organiser_website']) ? trim($row['organiser_website']) : '',
-        'contact_person' => !empty($row['contact_email']) ? trim($row['contact_email']) : '',
-        'user_email' => '',
-        'creator_id' => 132942,
-        'country_iso' => trim($row['country']),
-        'picture' => !empty($row['image_path']) ? trim($row['image_path']) : '',
-        'pub_date' => now(),
-        'created' => now(),
-        'updated' => now(),
-        'codeweek_for_all_participation_code' => 'cw20-coderdojo-eu',
-        'start_date' => \PhpOffice\PhpSpreadsheet\Shared\Date::excelToDateTimeObject($row['start_date']),
-        'end_date' => \PhpOffice\PhpSpreadsheet\Shared\Date::excelToDateTimeObject($row['end_date']),
-        'geoposition' => (!empty($row['latitude']) && !empty($row['longitude'])) ? $row['latitude'] . ',' . $row['longitude'] : '',
-        'longitude' => !empty($row['longitude']) ? trim($row['longitude']) : '',
-        'latitude' => !empty($row['latitude']) ? trim($row['latitude']) : '',
-        'language' => !empty($row['language']) ? trim($row['language']) : 'nl',
-        'approved_by' => 19588,
-        'mass_added_for' => 'Excel',
-      ]);
-
-      $event->save();
-
-      if (!empty($row['audience_comma_separated_ids'])) {
-        $audiences = array_unique(array_map('trim', explode(',', $row['audience_comma_separated_ids'])));
-        $audiences = array_filter($audiences, function ($id) {
-          return is_numeric($id) && $id > 0 && $id <= 100;
-        });
-        if (!empty($audiences)) {
-          $event->audiences()->attach($audiences);
+    public function model(array $row): ?Model
+    {
+        // Validate required fields
+        if (
+            empty($row['activity_title']) ||
+            empty($row['name_of_organisation']) ||
+            empty($row['description']) ||
+            empty($row['type_of_organisation']) ||
+            empty($row['activity_type']) ||
+            empty($row['country']) ||
+            empty($row['start_date']) ||
+            empty($row['end_date'])
+        ) {
+            Log::error('Missing required fields in row');
+            return null;
         }
-      }
-
-      if (!empty($row['theme_comma_separated_ids'])) {
-        $themes = array_unique(array_map('trim', explode(',', $row['theme_comma_separated_ids'])));
-        $themes = array_filter($themes, function ($id) {
-          return is_numeric($id) && $id > 0 && $id <= 100;
-        });
-        if (!empty($themes)) {
-          $event->themes()->attach($themes);
-        }
-      }
 
-      return $event;
-    } catch (\Exception $e) {
-      Log::error('Event import failed: ' . $e->getMessage());
-      return null;
+        try {
+            $event = new Event([
+                'status' => 'APPROVED',
+                'title' => trim($row['activity_title']),
+                'slug' => str_slug(trim($row['activity_title'])),
+                'organizer' => trim($row['name_of_organisation']),
+                'description' => trim($row['description']),
+                'organizer_type' => trim($row['type_of_organisation']),
+                'activity_type' => trim($row['activity_type']),
+                'location' => !empty($row['address']) ? trim($row['address']) : 'online',
+                'event_url' => !empty($row['organiser_website']) ? trim($row['organiser_website']) : '',
+                'contact_person' => !empty($row['contact_email']) ? trim($row['contact_email']) : '',
+                'user_email' => '',
+                'creator_id' => 132942,
+                'country_iso' => trim($row['country']),
+                'picture' => !empty($row['image_path']) ? trim($row['image_path']) : '',
+                'pub_date' => now(),
+                'created' => now(),
+                'updated' => now(),
+                'codeweek_for_all_participation_code' => 'cw20-coderdojo-eu',
+                'start_date' => \PhpOffice\PhpSpreadsheet\Shared\Date::excelToDateTimeObject($row['start_date']),
+                'end_date' => \PhpOffice\PhpSpreadsheet\Shared\Date::excelToDateTimeObject($row['end_date']),
+                'geoposition' => (!empty($row['latitude']) && !empty($row['longitude'])) ? $row['latitude'] . ',' . $row['longitude'] : '',
+                'longitude' => !empty($row['longitude']) ? trim($row['longitude']) : '',
+                'latitude' => !empty($row['latitude']) ? trim($row['latitude']) : '',
+                'language' => !empty($row['language']) ? trim($row['language']) : 'nl',
+                'approved_by' => 19588,
+                'mass_added_for' => 'Excel',
+                'recurring_event' => isset($row['recurring_event'])
+                    ? $this->validateSingleChoice($row['recurring_event'], Event::RECURRING_EVENTS)
+                    : null,
+
+                'males_count' => isset($row['males_count']) ? (int) $row['males_count'] : null,
+                'females_count' => isset($row['females_count']) ? (int) $row['females_count'] : null,
+                'other_count' => isset($row['other_count']) ? (int) $row['other_count'] : null,
+
+                'is_extracurricular_event' => isset($row['is_extracurricular_event'])
+                    ? $this->parseBool($row['is_extracurricular_event'])
+                    : false,
+
+                'is_standard_school_curriculum' => isset($row['is_standard_school_curriculum'])
+                    ? $this->parseBool($row['is_standard_school_curriculum'])
+                    : false,
+
+                'is_use_resource' => isset($row['is_use_resource'])
+                    ? $this->parseBool($row['is_use_resource'])
+                    : false,
+
+                'activity_format' => isset($row['activity_format'])
+                    ? $this->validateMultiChoice($row['activity_format'], Event::ACTIVITY_FORMATS)
+                    : [],
+
+                'ages' => isset($row['ages'])
+                    ? $this->validateMultiChoice($row['ages'], Event::AGES)
+                    : [],
+
+                'duration' => isset($row['duration'])
+                    ? $this->validateSingleChoice($row['duration'], Event::DURATIONS)
+                    : null,
+
+                'recurring_type' => isset($row['recurring_type'])
+                    ? $this->validateSingleChoice($row['recurring_type'], Event::RECURRING_TYPES)
+                    : null,
+            ]);
+
+            $event->save();
+
+            if (!empty($row['audience_comma_separated_ids'])) {
+                $audiences = array_unique(array_map('trim', explode(',', $row['audience_comma_separated_ids'])));
+                $audiences = array_filter($audiences, function ($id) {
+                    return is_numeric($id) && $id > 0 && $id <= 100;
+                });
+                if (!empty($audiences)) {
+                    $event->audiences()->attach($audiences);
+                }
+            }
+
+            if (!empty($row['theme_comma_separated_ids'])) {
+                $themes = array_unique(array_map('trim', explode(',', $row['theme_comma_separated_ids'])));
+                $themes = array_filter($themes, function ($id) {
+                    return is_numeric($id) && $id > 0 && $id <= 100;
+                });
+                if (!empty($themes)) {
+                    $event->themes()->attach($themes);
+                }
+            }
+
+            return $event;
+        } catch (\Exception $e) {
+            Log::error('Event import failed: ' . $e->getMessage());
+            return null;
+        }
     }
-  }
 }
diff --git a/app/Imports/EventsImport.php b/app/Imports/EventsImport.php
index a1c315d08..de16306ef 100644
--- a/app/Imports/EventsImport.php
+++ b/app/Imports/EventsImport.php
@@ -9,9 +9,8 @@
 use Maatwebsite\Excel\Concerns\ToModel;
 use Maatwebsite\Excel\Concerns\WithCustomValueBinder;
 use Maatwebsite\Excel\Concerns\WithHeadingRow;
-use PhpOffice\PhpSpreadsheet\Cell\DefaultValueBinder;
 
-class EventsImport extends DefaultValueBinder implements ToModel, WithCustomValueBinder, WithHeadingRow
+class EventsImport extends BaseEventsImport implements ToModel, WithCustomValueBinder, WithHeadingRow
 {
     public function parseDate($date)
     {
@@ -56,6 +55,41 @@ public function model(array $row): ?Model
             'longitude' => $row['longitude'],
             'latitude' => $row['latitude'],
             'mass_added_for' => 'Excel',
+            'recurring_event' => isset($row['recurring_event'])
+                ? $this->validateSingleChoice($row['recurring_event'], Event::RECURRING_EVENTS)
+                : null,
+
+            'males_count' => isset($row['males_count']) ? (int) $row['males_count'] : null,
+            'females_count' => isset($row['females_count']) ? (int) $row['females_count'] : null,
+            'other_count' => isset($row['other_count']) ? (int) $row['other_count'] : null,
+
+            'is_extracurricular_event' => isset($row['is_extracurricular_event'])
+                ? $this->parseBool($row['is_extracurricular_event'])
+                : false,
+
+            'is_standard_school_curriculum' => isset($row['is_standard_school_curriculum'])
+                ? $this->parseBool($row['is_standard_school_curriculum'])
+                : false,
+
+            'is_use_resource' => isset($row['is_use_resource'])
+                ? $this->parseBool($row['is_use_resource'])
+                : false,
+
+            'activity_format' => isset($row['activity_format'])
+                ? $this->validateMultiChoice($row['activity_format'], Event::ACTIVITY_FORMATS)
+                : [],
+
+            'ages' => isset($row['ages'])
+                ? $this->validateMultiChoice($row['ages'], Event::AGES)
+                : [],
+
+            'duration' => isset($row['duration'])
+                ? $this->validateSingleChoice($row['duration'], Event::DURATIONS)
+                : null,
+
+            'recurring_type' => isset($row['recurring_type'])
+                ? $this->validateSingleChoice($row['recurring_type'], Event::RECURRING_TYPES)
+                : null,
         ]);
 
         $event->save();
diff --git a/app/Imports/GenericEventsImport.php b/app/Imports/GenericEventsImport.php
index f5e86c8a8..72d5403be 100644
--- a/app/Imports/GenericEventsImport.php
+++ b/app/Imports/GenericEventsImport.php
@@ -10,10 +10,9 @@
 use Maatwebsite\Excel\Concerns\ToModel;
 use Maatwebsite\Excel\Concerns\WithCustomValueBinder;
 use Maatwebsite\Excel\Concerns\WithHeadingRow;
-use PhpOffice\PhpSpreadsheet\Cell\DefaultValueBinder;
 use PhpOffice\PhpSpreadsheet\Shared\Date;
 
-class GenericEventsImport extends DefaultValueBinder implements ToModel, WithCustomValueBinder, WithHeadingRow
+class GenericEventsImport extends BaseEventsImport implements ToModel, WithCustomValueBinder, WithHeadingRow
 {
     public function parseDate($date)
     {
@@ -64,6 +63,41 @@ public function model(array $row): ?Model
             'latitude' => $row['latitude'],
             'language' => strtolower($row['language']),
             'mass_added_for' => 'Excel',
+            'recurring_event' => isset($row['recurring_event'])
+                ? $this->validateSingleChoice($row['recurring_event'], Event::RECURRING_EVENTS)
+                : null,
+
+            'males_count' => isset($row['males_count']) ? (int) $row['males_count'] : null,
+            'females_count' => isset($row['females_count']) ? (int) $row['females_count'] : null,
+            'other_count' => isset($row['other_count']) ? (int) $row['other_count'] : null,
+
+            'is_extracurricular_event' => isset($row['is_extracurricular_event'])
+                ? $this->parseBool($row['is_extracurricular_event'])
+                : false,
+
+            'is_standard_school_curriculum' => isset($row['is_standard_school_curriculum'])
+                ? $this->parseBool($row['is_standard_school_curriculum'])
+                : false,
+
+            'is_use_resource' => isset($row['is_use_resource'])
+                ? $this->parseBool($row['is_use_resource'])
+                : false,
+
+            'activity_format' => isset($row['activity_format'])
+                ? $this->validateMultiChoice($row['activity_format'], Event::ACTIVITY_FORMATS)
+                : [],
+
+            'ages' => isset($row['ages'])
+                ? $this->validateMultiChoice($row['ages'], Event::AGES)
+                : [],
+
+            'duration' => isset($row['duration'])
+                ? $this->validateSingleChoice($row['duration'], Event::DURATIONS)
+                : null,
+
+            'recurring_type' => isset($row['recurring_type'])
+                ? $this->validateSingleChoice($row['recurring_type'], Event::RECURRING_TYPES)
+                : null,
         ]);
 
         $event->save();
diff --git a/app/Imports/HamburgEventsImport.php b/app/Imports/HamburgEventsImport.php
index 2ef82da0c..022200d37 100644
--- a/app/Imports/HamburgEventsImport.php
+++ b/app/Imports/HamburgEventsImport.php
@@ -9,10 +9,9 @@
 use Maatwebsite\Excel\Concerns\ToModel;
 use Maatwebsite\Excel\Concerns\WithCustomValueBinder;
 use Maatwebsite\Excel\Concerns\WithHeadingRow;
-use PhpOffice\PhpSpreadsheet\Cell\DefaultValueBinder;
 use PhpOffice\PhpSpreadsheet\Shared\Date;
 
-class HamburgEventsImport extends DefaultValueBinder implements ToModel, WithCustomValueBinder, WithHeadingRow
+class HamburgEventsImport extends BaseEventsImport implements ToModel, WithCustomValueBinder, WithHeadingRow
 {
     public function parseDate($date)
     {
@@ -49,6 +48,41 @@ public function model(array $row): ?Model
             'longitude' => $row['longitude'],
             'latitude' => $row['latitude'],
             'mass_added_for' => 'Excel',
+            'recurring_event' => isset($row['recurring_event'])
+                ? $this->validateSingleChoice($row['recurring_event'], Event::RECURRING_EVENTS)
+                : null,
+
+            'males_count' => isset($row['males_count']) ? (int) $row['males_count'] : null,
+            'females_count' => isset($row['females_count']) ? (int) $row['females_count'] : null,
+            'other_count' => isset($row['other_count']) ? (int) $row['other_count'] : null,
+
+            'is_extracurricular_event' => isset($row['is_extracurricular_event'])
+                ? $this->parseBool($row['is_extracurricular_event'])
+                : false,
+
+            'is_standard_school_curriculum' => isset($row['is_standard_school_curriculum'])
+                ? $this->parseBool($row['is_standard_school_curriculum'])
+                : false,
+
+            'is_use_resource' => isset($row['is_use_resource'])
+                ? $this->parseBool($row['is_use_resource'])
+                : false,
+
+            'activity_format' => isset($row['activity_format'])
+                ? $this->validateMultiChoice($row['activity_format'], Event::ACTIVITY_FORMATS)
+                : [],
+
+            'ages' => isset($row['ages'])
+                ? $this->validateMultiChoice($row['ages'], Event::AGES)
+                : [],
+
+            'duration' => isset($row['duration'])
+                ? $this->validateSingleChoice($row['duration'], Event::DURATIONS)
+                : null,
+
+            'recurring_type' => isset($row['recurring_type'])
+                ? $this->validateSingleChoice($row['recurring_type'], Event::RECURRING_TYPES)
+                : null,
         ]);
 
         $event->save();
diff --git a/app/Imports/IrelandDreamSpaceImport.php b/app/Imports/IrelandDreamSpaceImport.php
index 1dd8ebe24..adda2e679 100644
--- a/app/Imports/IrelandDreamSpaceImport.php
+++ b/app/Imports/IrelandDreamSpaceImport.php
@@ -5,14 +5,12 @@
 use App\Event;
 use Carbon\Carbon;
 use Illuminate\Database\Eloquent\Model;
-use Illuminate\Support\Facades\Log;
 use Maatwebsite\Excel\Concerns\ToModel;
 use Maatwebsite\Excel\Concerns\WithCustomValueBinder;
 use Maatwebsite\Excel\Concerns\WithHeadingRow;
-use PhpOffice\PhpSpreadsheet\Cell\DefaultValueBinder;
 use PhpOffice\PhpSpreadsheet\Shared\Date;
 
-class IrelandDreamSpaceImport extends DefaultValueBinder implements ToModel, WithCustomValueBinder, WithHeadingRow
+class IrelandDreamSpaceImport extends BaseEventsImport implements ToModel, WithCustomValueBinder, WithHeadingRow
 {
     public function parseDate($date)
     {
@@ -61,6 +59,41 @@ public function model(array $row): ?Model
             'language' => '',
             'approved_by' => 19588,
             'mass_added_for' => 'Excel',
+            'recurring_event' => isset($row['recurring_event'])
+                ? $this->validateSingleChoice($row['recurring_event'], Event::RECURRING_EVENTS)
+                : null,
+
+            'males_count' => isset($row['males_count']) ? (int) $row['males_count'] : null,
+            'females_count' => isset($row['females_count']) ? (int) $row['females_count'] : null,
+            'other_count' => isset($row['other_count']) ? (int) $row['other_count'] : null,
+
+            'is_extracurricular_event' => isset($row['is_extracurricular_event'])
+                ? $this->parseBool($row['is_extracurricular_event'])
+                : false,
+
+            'is_standard_school_curriculum' => isset($row['is_standard_school_curriculum'])
+                ? $this->parseBool($row['is_standard_school_curriculum'])
+                : false,
+
+            'is_use_resource' => isset($row['is_use_resource'])
+                ? $this->parseBool($row['is_use_resource'])
+                : false,
+
+            'activity_format' => isset($row['activity_format'])
+                ? $this->validateMultiChoice($row['activity_format'], Event::ACTIVITY_FORMATS)
+                : [],
+
+            'ages' => isset($row['ages'])
+                ? $this->validateMultiChoice($row['ages'], Event::AGES)
+                : [],
+
+            'duration' => isset($row['duration'])
+                ? $this->validateSingleChoice($row['duration'], Event::DURATIONS)
+                : null,
+
+            'recurring_type' => isset($row['recurring_type'])
+                ? $this->validateSingleChoice($row['recurring_type'], Event::RECURRING_TYPES)
+                : null,
         ]);
 
         $event->save();
diff --git a/app/Imports/IrelandEventsImport.php b/app/Imports/IrelandEventsImport.php
index 5cb2b36ef..ab8a5b62b 100644
--- a/app/Imports/IrelandEventsImport.php
+++ b/app/Imports/IrelandEventsImport.php
@@ -4,17 +4,15 @@
 
 use App\Event;
 use App\User;
-use Carbon\Carbon;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\Facades\Log;
 use Illuminate\Support\Str;
 use Maatwebsite\Excel\Concerns\ToModel;
 use Maatwebsite\Excel\Concerns\WithCustomValueBinder;
 use Maatwebsite\Excel\Concerns\WithHeadingRow;
-use PhpOffice\PhpSpreadsheet\Cell\DefaultValueBinder;
 use PhpOffice\PhpSpreadsheet\Shared\Date;
 
-class IrelandEventsImport extends DefaultValueBinder implements ToModel, WithCustomValueBinder, WithHeadingRow
+class IrelandEventsImport extends BaseEventsImport implements ToModel, WithCustomValueBinder, WithHeadingRow
 {
     //    public function parseDate($date, $time) {
     //        $time = Date::excelToDateTimeObject($time);
@@ -72,6 +70,41 @@ public function model(array $row): ?Model
             'latitude' => str_replace(',', '.', $row['latitude']),
             'language' => 'en',
             'mass_added_for' => 'Excel',
+            'recurring_event' => isset($row['recurring_event'])
+                ? $this->validateSingleChoice($row['recurring_event'], Event::RECURRING_EVENTS)
+                : null,
+
+            'males_count' => isset($row['males_count']) ? (int) $row['males_count'] : null,
+            'females_count' => isset($row['females_count']) ? (int) $row['females_count'] : null,
+            'other_count' => isset($row['other_count']) ? (int) $row['other_count'] : null,
+
+            'is_extracurricular_event' => isset($row['is_extracurricular_event'])
+                ? $this->parseBool($row['is_extracurricular_event'])
+                : false,
+
+            'is_standard_school_curriculum' => isset($row['is_standard_school_curriculum'])
+                ? $this->parseBool($row['is_standard_school_curriculum'])
+                : false,
+
+            'is_use_resource' => isset($row['is_use_resource'])
+                ? $this->parseBool($row['is_use_resource'])
+                : false,
+
+            'activity_format' => isset($row['activity_format'])
+                ? $this->validateMultiChoice($row['activity_format'], Event::ACTIVITY_FORMATS)
+                : [],
+
+            'ages' => isset($row['ages'])
+                ? $this->validateMultiChoice($row['ages'], Event::AGES)
+                : [],
+
+            'duration' => isset($row['duration'])
+                ? $this->validateSingleChoice($row['duration'], Event::DURATIONS)
+                : null,
+
+            'recurring_type' => isset($row['recurring_type'])
+                ? $this->validateSingleChoice($row['recurring_type'], Event::RECURRING_TYPES)
+                : null,
         ]);
 
         $event->save();
diff --git a/app/Imports/LuxembourgEventsImport.php b/app/Imports/LuxembourgEventsImport.php
index faaf2d34e..41649dfca 100644
--- a/app/Imports/LuxembourgEventsImport.php
+++ b/app/Imports/LuxembourgEventsImport.php
@@ -8,10 +8,9 @@
 use Maatwebsite\Excel\Concerns\ToModel;
 use Maatwebsite\Excel\Concerns\WithCustomValueBinder;
 use Maatwebsite\Excel\Concerns\WithHeadingRow;
-use PhpOffice\PhpSpreadsheet\Cell\DefaultValueBinder;
 use PhpOffice\PhpSpreadsheet\Shared\Date;
 
-class LuxembourgEventsImport extends DefaultValueBinder implements ToModel, WithCustomValueBinder, WithHeadingRow
+class LuxembourgEventsImport extends BaseEventsImport implements ToModel, WithCustomValueBinder, WithHeadingRow
 {
     public function parseDate($date)
     {
@@ -47,6 +46,41 @@ public function model(array $row): ?Model
             'latitude' => $row['latitude'],
             'language' => strtolower($row['language']),
             'mass_added_for' => 'Excel',
+            'recurring_event' => isset($row['recurring_event'])
+                ? $this->validateSingleChoice($row['recurring_event'], Event::RECURRING_EVENTS)
+                : null,
+
+            'males_count' => isset($row['males_count']) ? (int) $row['males_count'] : null,
+            'females_count' => isset($row['females_count']) ? (int) $row['females_count'] : null,
+            'other_count' => isset($row['other_count']) ? (int) $row['other_count'] : null,
+
+            'is_extracurricular_event' => isset($row['is_extracurricular_event'])
+                ? $this->parseBool($row['is_extracurricular_event'])
+                : false,
+
+            'is_standard_school_curriculum' => isset($row['is_standard_school_curriculum'])
+                ? $this->parseBool($row['is_standard_school_curriculum'])
+                : false,
+
+            'is_use_resource' => isset($row['is_use_resource'])
+                ? $this->parseBool($row['is_use_resource'])
+                : false,
+
+            'activity_format' => isset($row['activity_format'])
+                ? $this->validateMultiChoice($row['activity_format'], Event::ACTIVITY_FORMATS)
+                : [],
+
+            'ages' => isset($row['ages'])
+                ? $this->validateMultiChoice($row['ages'], Event::AGES)
+                : [],
+
+            'duration' => isset($row['duration'])
+                ? $this->validateSingleChoice($row['duration'], Event::DURATIONS)
+                : null,
+
+            'recurring_type' => isset($row['recurring_type'])
+                ? $this->validateSingleChoice($row['recurring_type'], Event::RECURRING_TYPES)
+                : null,
         ]);
 
         $event->save();
diff --git a/app/Imports/MagentaEventsImport.php b/app/Imports/MagentaEventsImport.php
index 256d0ac59..088d7858f 100644
--- a/app/Imports/MagentaEventsImport.php
+++ b/app/Imports/MagentaEventsImport.php
@@ -7,10 +7,9 @@
 use Maatwebsite\Excel\Concerns\ToModel;
 use Maatwebsite\Excel\Concerns\WithCustomValueBinder;
 use Maatwebsite\Excel\Concerns\WithHeadingRow;
-use PhpOffice\PhpSpreadsheet\Cell\DefaultValueBinder;
 use PhpOffice\PhpSpreadsheet\Shared\Date;
 
-class MagentaEventsImport extends DefaultValueBinder implements ToModel, WithCustomValueBinder, WithHeadingRow
+class MagentaEventsImport extends BaseEventsImport implements ToModel, WithCustomValueBinder, WithHeadingRow
 {
     public function parseDate($date)
     {
@@ -46,6 +45,41 @@ public function model(array $row): ?Model
             'latitude' => $row['latitude'],
             'language' => strtolower($row['language']),
             'mass_added_for' => 'Excel',
+            'recurring_event' => isset($row['recurring_event'])
+                ? $this->validateSingleChoice($row['recurring_event'], Event::RECURRING_EVENTS)
+                : null,
+
+            'males_count' => isset($row['males_count']) ? (int) $row['males_count'] : null,
+            'females_count' => isset($row['females_count']) ? (int) $row['females_count'] : null,
+            'other_count' => isset($row['other_count']) ? (int) $row['other_count'] : null,
+
+            'is_extracurricular_event' => isset($row['is_extracurricular_event'])
+                ? $this->parseBool($row['is_extracurricular_event'])
+                : false,
+
+            'is_standard_school_curriculum' => isset($row['is_standard_school_curriculum'])
+                ? $this->parseBool($row['is_standard_school_curriculum'])
+                : false,
+
+            'is_use_resource' => isset($row['is_use_resource'])
+                ? $this->parseBool($row['is_use_resource'])
+                : false,
+
+            'activity_format' => isset($row['activity_format'])
+                ? $this->validateMultiChoice($row['activity_format'], Event::ACTIVITY_FORMATS)
+                : [],
+
+            'ages' => isset($row['ages'])
+                ? $this->validateMultiChoice($row['ages'], Event::AGES)
+                : [],
+
+            'duration' => isset($row['duration'])
+                ? $this->validateSingleChoice($row['duration'], Event::DURATIONS)
+                : null,
+
+            'recurring_type' => isset($row['recurring_type'])
+                ? $this->validateSingleChoice($row['recurring_type'], Event::RECURRING_TYPES)
+                : null,
         ]);
 
         $event->save();
diff --git a/app/Imports/ReportedEventsImport.php b/app/Imports/ReportedEventsImport.php
index ee0b29534..3d2b0b2fc 100644
--- a/app/Imports/ReportedEventsImport.php
+++ b/app/Imports/ReportedEventsImport.php
@@ -10,10 +10,9 @@
 use Maatwebsite\Excel\Concerns\ToModel;
 use Maatwebsite\Excel\Concerns\WithCustomValueBinder;
 use Maatwebsite\Excel\Concerns\WithHeadingRow;
-use PhpOffice\PhpSpreadsheet\Cell\DefaultValueBinder;
 use PhpOffice\PhpSpreadsheet\Shared\Date;
 
-class ReportedEventsImport extends DefaultValueBinder implements ToModel, WithCustomValueBinder, WithHeadingRow
+class ReportedEventsImport extends BaseEventsImport implements ToModel, WithCustomValueBinder, WithHeadingRow
 {
     public function parseDate($date)
     {
@@ -67,6 +66,41 @@ public function model(array $row): ?Model
             'average_participant_age' => 10,
             'percentage_of_females' => 50,
             'mass_added_for' => 'Excel',
+            'recurring_event' => isset($row['recurring_event'])
+                ? $this->validateSingleChoice($row['recurring_event'], Event::RECURRING_EVENTS)
+                : null,
+
+            'males_count' => isset($row['males_count']) ? (int) $row['males_count'] : null,
+            'females_count' => isset($row['females_count']) ? (int) $row['females_count'] : null,
+            'other_count' => isset($row['other_count']) ? (int) $row['other_count'] : null,
+
+            'is_extracurricular_event' => isset($row['is_extracurricular_event'])
+                ? $this->parseBool($row['is_extracurricular_event'])
+                : false,
+
+            'is_standard_school_curriculum' => isset($row['is_standard_school_curriculum'])
+                ? $this->parseBool($row['is_standard_school_curriculum'])
+                : false,
+
+            'is_use_resource' => isset($row['is_use_resource'])
+                ? $this->parseBool($row['is_use_resource'])
+                : false,
+
+            'activity_format' => isset($row['activity_format'])
+                ? $this->validateMultiChoice($row['activity_format'], Event::ACTIVITY_FORMATS)
+                : [],
+
+            'ages' => isset($row['ages'])
+                ? $this->validateMultiChoice($row['ages'], Event::AGES)
+                : [],
+
+            'duration' => isset($row['duration'])
+                ? $this->validateSingleChoice($row['duration'], Event::DURATIONS)
+                : null,
+
+            'recurring_type' => isset($row['recurring_type'])
+                ? $this->validateSingleChoice($row['recurring_type'], Event::RECURRING_TYPES)
+                : null,
         ]);
 
         $event->save();
diff --git a/app/Imports/TelerikEventsImport.php b/app/Imports/TelerikEventsImport.php
index 58b3bb9ba..5662cd663 100644
--- a/app/Imports/TelerikEventsImport.php
+++ b/app/Imports/TelerikEventsImport.php
@@ -8,10 +8,9 @@
 use Maatwebsite\Excel\Concerns\ToModel;
 use Maatwebsite\Excel\Concerns\WithCustomValueBinder;
 use Maatwebsite\Excel\Concerns\WithHeadingRow;
-use PhpOffice\PhpSpreadsheet\Cell\DefaultValueBinder;
 use PhpOffice\PhpSpreadsheet\Shared\Date;
 
-class TelerikEventsImport extends DefaultValueBinder implements ToModel, WithCustomValueBinder, WithHeadingRow
+class TelerikEventsImport extends BaseEventsImport implements ToModel, WithCustomValueBinder, WithHeadingRow
 {
     public function parseDate($date)
     {
@@ -48,6 +47,41 @@ public function model(array $row): ?Model
             'longitude' => $row['longitude'],
             'latitude' => $row['latitude'],
             'mass_added_for' => 'Excel',
+            'recurring_event' => isset($row['recurring_event'])
+                ? $this->validateSingleChoice($row['recurring_event'], Event::RECURRING_EVENTS)
+                : null,
+
+            'males_count' => isset($row['males_count']) ? (int) $row['males_count'] : null,
+            'females_count' => isset($row['females_count']) ? (int) $row['females_count'] : null,
+            'other_count' => isset($row['other_count']) ? (int) $row['other_count'] : null,
+
+            'is_extracurricular_event' => isset($row['is_extracurricular_event'])
+                ? $this->parseBool($row['is_extracurricular_event'])
+                : false,
+
+            'is_standard_school_curriculum' => isset($row['is_standard_school_curriculum'])
+                ? $this->parseBool($row['is_standard_school_curriculum'])
+                : false,
+
+            'is_use_resource' => isset($row['is_use_resource'])
+                ? $this->parseBool($row['is_use_resource'])
+                : false,
+
+            'activity_format' => isset($row['activity_format'])
+                ? $this->validateMultiChoice($row['activity_format'], Event::ACTIVITY_FORMATS)
+                : [],
+
+            'ages' => isset($row['ages'])
+                ? $this->validateMultiChoice($row['ages'], Event::AGES)
+                : [],
+
+            'duration' => isset($row['duration'])
+                ? $this->validateSingleChoice($row['duration'], Event::DURATIONS)
+                : null,
+
+            'recurring_type' => isset($row['recurring_type'])
+                ? $this->validateSingleChoice($row['recurring_type'], Event::RECURRING_TYPES)
+                : null,
         ]);
 
         $event->save();
diff --git a/app/Imports/UKDigitAllCharityEventsImport.php b/app/Imports/UKDigitAllCharityEventsImport.php
index cfae5b1c8..1ec5fb084 100644
--- a/app/Imports/UKDigitAllCharityEventsImport.php
+++ b/app/Imports/UKDigitAllCharityEventsImport.php
@@ -8,10 +8,9 @@
 use Maatwebsite\Excel\Concerns\ToModel;
 use Maatwebsite\Excel\Concerns\WithCustomValueBinder;
 use Maatwebsite\Excel\Concerns\WithHeadingRow;
-use PhpOffice\PhpSpreadsheet\Cell\DefaultValueBinder;
 use PhpOffice\PhpSpreadsheet\Shared\Date;
 
-class UKDigitAllCharityEventsImport extends DefaultValueBinder implements ToModel, WithCustomValueBinder, WithHeadingRow
+class UKDigitAllCharityEventsImport extends BaseEventsImport implements ToModel, WithCustomValueBinder, WithHeadingRow
 {
     public function parseDate($date)
     {
@@ -48,6 +47,41 @@ public function model(array $row): ?Model
             'latitude' => $row['latitude'],
             'language' => strtolower($row['language']),
             'mass_added_for' => 'Excel',
+            'recurring_event' => isset($row['recurring_event'])
+                ? $this->validateSingleChoice($row['recurring_event'], Event::RECURRING_EVENTS)
+                : null,
+
+            'males_count' => isset($row['males_count']) ? (int) $row['males_count'] : null,
+            'females_count' => isset($row['females_count']) ? (int) $row['females_count'] : null,
+            'other_count' => isset($row['other_count']) ? (int) $row['other_count'] : null,
+
+            'is_extracurricular_event' => isset($row['is_extracurricular_event'])
+                ? $this->parseBool($row['is_extracurricular_event'])
+                : false,
+
+            'is_standard_school_curriculum' => isset($row['is_standard_school_curriculum'])
+                ? $this->parseBool($row['is_standard_school_curriculum'])
+                : false,
+
+            'is_use_resource' => isset($row['is_use_resource'])
+                ? $this->parseBool($row['is_use_resource'])
+                : false,
+
+            'activity_format' => isset($row['activity_format'])
+                ? $this->validateMultiChoice($row['activity_format'], Event::ACTIVITY_FORMATS)
+                : [],
+
+            'ages' => isset($row['ages'])
+                ? $this->validateMultiChoice($row['ages'], Event::AGES)
+                : [],
+
+            'duration' => isset($row['duration'])
+                ? $this->validateSingleChoice($row['duration'], Event::DURATIONS)
+                : null,
+
+            'recurring_type' => isset($row['recurring_type'])
+                ? $this->validateSingleChoice($row['recurring_type'], Event::RECURRING_TYPES)
+                : null,
         ]);
 
         $event->save();
diff --git a/app/Imports/UKDigitAllEventsImport.php b/app/Imports/UKDigitAllEventsImport.php
index 4811180ca..5f2041caf 100644
--- a/app/Imports/UKDigitAllEventsImport.php
+++ b/app/Imports/UKDigitAllEventsImport.php
@@ -8,10 +8,9 @@
 use Maatwebsite\Excel\Concerns\ToModel;
 use Maatwebsite\Excel\Concerns\WithCustomValueBinder;
 use Maatwebsite\Excel\Concerns\WithHeadingRow;
-use PhpOffice\PhpSpreadsheet\Cell\DefaultValueBinder;
 use PhpOffice\PhpSpreadsheet\Shared\Date;
 
-class UKDigitAllEventsImport extends DefaultValueBinder implements ToModel, WithCustomValueBinder, WithHeadingRow
+class UKDigitAllEventsImport extends BaseEventsImport implements ToModel, WithCustomValueBinder, WithHeadingRow
 {
     public function parseDate($date)
     {
@@ -46,6 +45,41 @@ public function model(array $row): ?Model
             'latitude' => $row['latitude'],
             'language' => strtolower($row['language']),
             'mass_added_for' => 'Excel',
+            'recurring_event' => isset($row['recurring_event'])
+                ? $this->validateSingleChoice($row['recurring_event'], Event::RECURRING_EVENTS)
+                : null,
+
+            'males_count' => isset($row['males_count']) ? (int) $row['males_count'] : null,
+            'females_count' => isset($row['females_count']) ? (int) $row['females_count'] : null,
+            'other_count' => isset($row['other_count']) ? (int) $row['other_count'] : null,
+
+            'is_extracurricular_event' => isset($row['is_extracurricular_event'])
+                ? $this->parseBool($row['is_extracurricular_event'])
+                : false,
+
+            'is_standard_school_curriculum' => isset($row['is_standard_school_curriculum'])
+                ? $this->parseBool($row['is_standard_school_curriculum'])
+                : false,
+
+            'is_use_resource' => isset($row['is_use_resource'])
+                ? $this->parseBool($row['is_use_resource'])
+                : false,
+
+            'activity_format' => isset($row['activity_format'])
+                ? $this->validateMultiChoice($row['activity_format'], Event::ACTIVITY_FORMATS)
+                : [],
+
+            'ages' => isset($row['ages'])
+                ? $this->validateMultiChoice($row['ages'], Event::AGES)
+                : [],
+
+            'duration' => isset($row['duration'])
+                ? $this->validateSingleChoice($row['duration'], Event::DURATIONS)
+                : null,
+
+            'recurring_type' => isset($row['recurring_type'])
+                ? $this->validateSingleChoice($row['recurring_type'], Event::RECURRING_TYPES)
+                : null,
         ]);
 
         $event->save();
diff --git a/app/MeetAndCodeRSSItem.php b/app/MeetAndCodeRSSItem.php
index bdff5460f..c8ac2afb6 100644
--- a/app/MeetAndCodeRSSItem.php
+++ b/app/MeetAndCodeRSSItem.php
@@ -60,6 +60,31 @@
  */
 class MeetAndCodeRSSItem extends Model
 {
+    protected $fillable = [
+        'activity_format',
+        'duration',
+        'recurring_event',
+        'recurring_type',
+        'males_count',
+        'females_count',
+        'other_count',
+        'is_extracurricular_event',
+        'is_standard_school_curriculum',
+        'is_use_resource',
+        'ages'
+    ];
+
+    protected function casts(): array
+    {
+        return [
+            'activity_format' => 'array',
+            'is_extracurricular_event' => 'boolean',
+            'is_standard_school_curriculum' => 'boolean',
+            'ages' => 'array',
+            'is_use_resource' => 'boolean',
+        ];
+    }
+
     public function getCountryIso()
     {
 
@@ -73,7 +98,6 @@ public function getCountryIso()
             default:
                 return Country::where('name', 'like', $this->country)->first()->iso;
         }
-
     }
 
     private function mapOrganisationTypes($organisation_type)
@@ -84,7 +108,6 @@ private function mapOrganisationTypes($organisation_type)
             default:
                 return 'other';
         }
-
     }
 
     private function mapActivityTypes($activity_type)
@@ -97,7 +120,6 @@ private function mapActivityTypes($activity_type)
             default:
                 return 'other';
         }
-
     }
 
     public function createEvent($user)
@@ -125,9 +147,20 @@ public function createEvent($user)
             'end_date' => $this->end_date,
             'longitude' => $this->lon,
             'latitude' => $this->lat,
-            'geoposition' => $this->lat.','.$this->lon,
+            'geoposition' => $this->lat . ',' . $this->lon,
             'language' => MeetAndCodeHelper::getLanguage($this->link),
             'mass_added_for' => 'RSS meet_and_code',
+            'activity_format' => is_array($this->activity_format) ? $this->activity_format : [],
+            'duration' => $this->duration,
+            'recurring_event' => $this->recurring_event,
+            'recurring_type' => $this->recurring_type,
+            'males_count' => $this->males_count,
+            'females_count' => $this->females_count,
+            'other_count' => $this->other_count,
+            'is_extracurricular_event' => $this->is_extracurricular_event,
+            'is_standard_school_curriculum' => $this->is_standard_school_curriculum,
+            'ages' => is_array($this->ages) ? $this->ages : [],
+            'is_use_resource' => $this->is_use_resource,
         ]);
 
         $event->save();
@@ -137,6 +170,5 @@ public function createEvent($user)
         $event->themes()->attach(8);
 
         return $event;
-
     }
 }
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 31366704c..0d22c7105 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -9,9 +9,11 @@
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Gate;
 use Illuminate\Support\Facades\View;
+use Illuminate\Support\Arr;
 use Illuminate\Support\ServiceProvider;
 use Illuminate\Validation\Rules\Password;
 use Illuminate\Support\Facades\Blade;
+use Illuminate\Support\Facades\Lang;
 
 class AppServiceProvider extends ServiceProvider
 {
@@ -40,6 +42,7 @@ function ($view) {
                 $view->with('audiences', \App\Audience::all());
                 $view->with('activity_types', \App\ActivityType::list());
                 $view->with('countries', \App\Country::translated());
+                $view->with('languages', Arr::sort(Lang::get('base.languages')));
                 $view->with('active_countries', \App\Country::withEvents());
                 $view->with(
                     'themes',
diff --git a/app/Queries/EventsQuery.php b/app/Queries/EventsQuery.php
index 1894ae1d1..fd153e194 100644
--- a/app/Queries/EventsQuery.php
+++ b/app/Queries/EventsQuery.php
@@ -37,6 +37,13 @@ public static function store(Request $request)
             abort(503, 'Title error');
         }
 
+        if (!isset($request['participants_count'])) {
+            $request['participants_count'] = (int) $request['males_count'] + (int) $request['females_count'] + (int) $request['other_count'];
+            if ($request['participants_count'] > 0) {
+                $request['percentage_of_females'] = number_format((int) $request['females_count'] / (int) $request['participants_count'] * 100, 2);
+            }
+        }
+
         $request['pub_date'] = Carbon::now();
         $request['created'] = Carbon::now();
         $request['updated'] = Carbon::now();
@@ -62,6 +69,14 @@ public static function store(Request $request)
             $request['codeweek_for_all_participation_code'] = $codeweek_4_all_generated_code;
         }
 
+        if (!empty($request['activity_format']) && is_string($request['activity_format'])) {
+            $request['activity_format'] = explode(',', $request['activity_format']);
+        }
+        
+        if (!empty($request['ages']) && is_string($request['ages'])) {
+            $request['ages'] = explode(',', $request['ages']);
+        }
+
         $event = Event::create($request->toArray());
 
         if (! empty($request['tags'])) {
@@ -101,11 +116,26 @@ public static function update(Request $request, Event $event)
         $request['latitude'] = explode(',', $request['geoposition'])[0];
         $request['longitude'] = explode(',', $request['geoposition'])[1];
 
+        if (!isset($request['participants_count'])) {
+            $request['participants_count'] = (int) $request['males_count'] + (int) $request['females_count'] + (int) $request['other_count'];
+            if ($request['participants_count'] > 0) {
+                $request['percentage_of_females'] = number_format((int) $request['females_count'] / (int) $request['participants_count'] * 100, 2);
+            }
+        }
+
         //In order to appear again in the list for the moderators
         if ($event->status == 'REJECTED') {
             $request['status'] = 'PENDING';
         }
 
+        if (!empty($request['activity_format']) && is_string($request['activity_format'])) {
+            $request['activity_format'] = explode(',', $request['activity_format']);
+        }
+        
+        if (!empty($request['ages']) && is_string($request['ages'])) {
+            $request['ages'] = explode(',', $request['ages']);
+        }
+
         $event->update($request->toArray());
 
         $request['theme'] = explode(',', $request['theme']);
diff --git a/app/Queries/SuperOrganiserQuery.php b/app/Queries/SuperOrganiserQuery.php
index ac8510d74..f10b52a90 100644
--- a/app/Queries/SuperOrganiserQuery.php
+++ b/app/Queries/SuperOrganiserQuery.php
@@ -20,7 +20,7 @@ public static function mine()
     public static function winners($edition)
     {
         $winners = DB::table('events')
-            ->where('status', '=', 'APPROVED')
+            ->where('status', 'APPROVED')
             ->whereNull('deleted_at')
             ->whereYear('end_date', '=', $edition)
             ->groupBy('creator_id')
diff --git a/app/User.php b/app/User.php
index 1f45713e1..f33e37b58 100644
--- a/app/User.php
+++ b/app/User.php
@@ -385,8 +385,8 @@ public function activities($edition)
     {
 
         return DB::table('events')
-            ->where('creator_id', '=', $this->id)
-            ->where('status', "=", "APPROVED")
+            ->where('creator_id', $this->id)
+            ->where('status', "APPROVED")
             ->whereNull('deleted_at')
             ->whereYear('end_date', '=', $edition)
             ->count();
@@ -397,7 +397,7 @@ public function reported($edition = null)
 
         $query = DB::table('events')
             ->where('creator_id', '=', $this->id)
-            ->where('status', "=", "APPROVED")
+            ->where('status', "APPROVED")
             ->whereNotNull('reported_at')
             ->whereNull('deleted_at');
 
@@ -429,7 +429,7 @@ public function influence($edition = null)
 //            Log::info("$nameInTag - $edition not in cache");
 
         $taggedActivities = $this->taggedActivities()
-            ->where('status', '=', 'APPROVED');
+            ->where('status', 'APPROVED');
 
         if (!is_null($edition)) {
             $taggedActivities->whereYear('events.created_at', '=', $edition);
diff --git a/database/migrations/2025_05_06_162855_add_new_fields_for_new_form_to_events_table.php b/database/migrations/2025_05_06_162855_add_new_fields_for_new_form_to_events_table.php
new file mode 100644
index 000000000..b7638eae4
--- /dev/null
+++ b/database/migrations/2025_05_06_162855_add_new_fields_for_new_form_to_events_table.php
@@ -0,0 +1,50 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('events', function (Blueprint $table) {
+            $table->json('activity_format')->nullable();
+            $table->string('duration')->nullable()->after('activity_format');
+            $table->string('recurring_event')->nullable()->after('duration');
+            $table->string('recurring_type')->nullable()->after('recurring_event');
+            $table->integer('males_count')->nullable()->after('recurring_type');
+            $table->integer('females_count')->nullable()->after('males_count');
+            $table->integer('other_count')->nullable()->after('females_count');
+            $table->boolean('is_extracurricular_event')->default(false)->after('other_count');
+            $table->boolean('is_standard_school_curriculum')->default(false)->after('is_extracurricular_event');
+            $table->json('ages')->nullable()->after('is_standard_school_curriculum');
+            $table->boolean('is_use_resource')->default(false)->after('ages');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('events', function (Blueprint $table) {
+            $table->dropColumn([
+                'activity_format',
+                'duration',
+                'recurring_event',
+                'recurring_type',
+                'males_count',
+                'females_count',
+                'other_count',
+                'is_extracurricular_event',
+                'is_standard_school_curriculum',
+                'ages',
+                'is_use_resource',
+            ]);
+        });
+    }
+};
diff --git a/database/migrations/2025_05_15_102937_add_new_fields_for_new_form_to_meet_and_code_r_s_s_items_table.php b/database/migrations/2025_05_15_102937_add_new_fields_for_new_form_to_meet_and_code_r_s_s_items_table.php
new file mode 100644
index 000000000..995db3c3c
--- /dev/null
+++ b/database/migrations/2025_05_15_102937_add_new_fields_for_new_form_to_meet_and_code_r_s_s_items_table.php
@@ -0,0 +1,38 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('meet_and_code_r_s_s_items', function (Blueprint $table) {
+            $table->json('activity_format')->nullable();
+            $table->string('duration')->nullable()->after('activity_format');
+            $table->string('recurring_event')->nullable()->after('duration');
+            $table->string('recurring_type')->nullable()->after('recurring_event');
+            $table->integer('males_count')->nullable()->after('recurring_type');
+            $table->integer('females_count')->nullable()->after('males_count');
+            $table->integer('other_count')->nullable()->after('females_count');
+            $table->boolean('is_extracurricular_event')->default(false)->after('other_count');
+            $table->boolean('is_standard_school_curriculum')->default(false)->after('is_extracurricular_event');
+            $table->json('ages')->nullable()->after('is_standard_school_curriculum');
+            $table->boolean('is_use_resource')->default(false)->after('ages');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('meet_and_code_r_s_s_items', function (Blueprint $table) {
+            //
+        });
+    }
+};
diff --git a/public/images/activity/banner.png b/public/images/activity/banner.png
new file mode 100644
index 000000000..4606ddf0d
Binary files /dev/null and b/public/images/activity/banner.png differ
diff --git a/public/images/check-white.svg b/public/images/check-white.svg
new file mode 100644
index 000000000..2edf088d0
--- /dev/null
+++ b/public/images/check-white.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="18" viewBox="0 0 25 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.49043 7.39941C3.60677 6.51576 2.17409 6.51576 1.29043 7.39941C0.406774 8.28307 0.406774 9.71576 1.29043 10.5994L7.40481 16.7138C8.44621 17.7552 10.1346 17.7552 11.176 16.7138L23.6904 4.19941C24.5741 3.31576 24.5741 1.88307 23.6904 0.999414C22.8068 0.115758 21.3741 0.115758 20.4904 0.999414L9.29043 12.1994L4.49043 7.39941Z" fill="white"/>
+</svg>
diff --git a/public/images/icon_error.svg b/public/images/icon_error.svg
new file mode 100644
index 000000000..de1cef492
--- /dev/null
+++ b/public/images/icon_error.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 15.5996H11V9.59961H9V15.5996ZM10 7.59961C10.2833 7.59961 10.521 7.50361 10.713 7.31161C10.905 7.11961 11.0007 6.88228 11 6.59961C10.9993 6.31694 10.9033 6.07961 10.712 5.88761C10.5207 5.69561 10.2833 5.59961 10 5.59961C9.71667 5.59961 9.47933 5.69561 9.288 5.88761C9.09667 6.07961 9.00067 6.31694 9 6.59961C8.99933 6.88228 9.09533 7.11994 9.288 7.31261C9.48067 7.50528 9.718 7.60094 10 7.59961ZM10 20.5996C8.61667 20.5996 7.31667 20.3369 6.1 19.8116C4.88334 19.2863 3.825 18.5739 2.925 17.6746C2.025 16.7753 1.31267 15.7169 0.788001 14.4996C0.263335 13.2823 0.000667933 11.9823 1.26582e-06 10.5996C-0.000665401 9.21694 0.262001 7.91694 0.788001 6.69961C1.314 5.48228 2.02633 4.42394 2.925 3.52461C3.82367 2.62528 4.882 1.91294 6.1 1.38761C7.318 0.862276 8.618 0.599609 10 0.599609C11.382 0.599609 12.682 0.862276 13.9 1.38761C15.118 1.91294 16.1763 2.62528 17.075 3.52461C17.9737 4.42394 18.6863 5.48228 19.213 6.69961C19.7397 7.91694 20.002 9.21694 20 10.5996C19.998 11.9823 19.7353 13.2823 19.212 14.4996C18.6887 15.7169 17.9763 16.7753 17.075 17.6746C16.1737 18.5739 15.1153 19.2866 13.9 19.8126C12.6847 20.3386 11.3847 20.6009 10 20.5996Z" fill="#E30519"/>
+</svg>
diff --git a/public/images/icon_image.svg b/public/images/icon_image.svg
new file mode 100644
index 000000000..cc27b798d
--- /dev/null
+++ b/public/images/icon_image.svg
@@ -0,0 +1,5 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32 63.999C49.6728 63.999 63.9995 49.6724 63.9995 31.9995C63.9995 14.3267 49.6728 0 32 0C14.3272 0 0.000488281 14.3267 0.000488281 31.9995C0.000488281 49.6724 14.3272 63.999 32 63.999Z" fill="#A4B8D9"/>
+<path d="M32.1129 45.8628C26.9044 45.8628 21.696 45.8628 16.4876 45.8628C16.2332 45.8628 15.9755 45.8628 15.72 45.836C14.416 45.7116 13.8918 44.8144 14.4478 43.6013C14.9304 42.554 15.4568 41.5335 15.9678 40.4974C18.3805 35.6189 20.7931 30.7411 23.2058 25.864C23.2803 25.7151 23.3582 25.5661 23.4448 25.4238C24.0524 24.4292 25.0394 24.2891 25.8169 25.1472C26.3653 25.7476 26.8291 26.4219 27.3183 27.0727C29.804 30.3905 32.2898 33.7098 34.7755 37.0306C35.8612 38.4756 37.2288 38.554 38.5042 37.2546C39.137 36.6095 39.7555 35.9475 40.3959 35.3079C41.5507 34.1541 42.8612 34.2236 43.8044 35.5688C45.6972 38.2684 47.5429 41.0037 49.3973 43.7301C49.5423 43.944 49.6533 44.1799 49.7263 44.4291C49.9062 45.0552 49.6518 45.5593 49.0299 45.7262C48.64 45.8215 48.2398 45.8656 47.839 45.8572C42.5999 45.8662 37.3578 45.8681 32.1129 45.8628Z" fill="white"/>
+<path d="M43.7934 19.131C43.792 20.1723 43.488 21.1897 42.9199 22.0543C42.3517 22.9189 41.545 23.5917 40.6021 23.9875C39.6591 24.3832 38.6223 24.4841 37.6232 24.2772C36.624 24.0704 35.7075 23.5652 34.9898 22.8257C34.272 22.0861 33.7855 21.1456 33.5917 20.1233C33.398 19.101 33.5058 18.0429 33.9015 17.0833C34.2972 16.1236 34.963 15.3056 35.8144 14.7329C36.6658 14.1602 37.6646 13.8586 38.684 13.8664C40.0415 13.884 41.3379 14.4457 42.2936 15.4305C43.2494 16.4153 43.788 17.7443 43.7934 19.131Z" fill="white"/>
+</svg>
diff --git a/public/images/marker-blue.svg b/public/images/marker-blue.svg
new file mode 100644
index 000000000..69337484a
--- /dev/null
+++ b/public/images/marker-blue.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="62" viewBox="0 0 44 62" fill="none">
+    <path d="M21.6982 0C9.71943 0 0 8.79472 0 19.6317C0 37.0821 21.6982 61.0764 21.6982 61.0764C21.6982 61.0764 43.3964 37.0821 43.3964 19.6317C43.3964 8.79472 33.6769 0 21.6982 0ZM21.6982 30.5382C19.9816 30.5382 18.3035 30.0265 16.8762 29.0677C15.4489 28.109 14.3365 26.7463 13.6796 25.152C13.0227 23.5577 12.8508 21.8033 13.1857 20.1108C13.5206 18.4183 14.3472 16.8636 15.561 15.6433C16.7748 14.4231 18.3213 13.5921 20.0049 13.2554C21.6886 12.9188 23.4337 13.0916 25.0196 13.752C26.6055 14.4123 27.961 15.5307 28.9147 16.9655C29.8684 18.4004 30.3775 20.0873 30.3775 21.813C30.3749 24.1263 29.4597 26.3441 27.8326 27.9798C26.2054 29.6156 23.9993 30.5357 21.6982 30.5382Z" fill="#1254C5"/>
+</svg>
\ No newline at end of file
diff --git a/public/images/marker-orange.svg b/public/images/marker-orange.svg
new file mode 100644
index 000000000..a58a8c519
--- /dev/null
+++ b/public/images/marker-orange.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="62" viewBox="0 0 44 62" fill="none">
+    <path d="M21.6982 0C9.71943 0 0 8.91045 0 19.89C0 37.57 21.6982 61.88 21.6982 61.88C21.6982 61.88 43.3964 37.57 43.3964 19.89C43.3964 8.91045 33.6769 0 21.6982 0ZM21.6982 30.94C19.9816 30.94 18.3035 30.4215 16.8762 29.4502C15.4489 28.4788 14.3365 27.0982 13.6796 25.4829C13.0227 23.8676 12.8508 22.0902 13.1857 20.3754C13.5206 18.6606 14.3472 17.0855 15.561 15.8492C16.7748 14.6129 18.3213 13.771 20.0049 13.4299C21.6886 13.0888 23.4337 13.2638 25.0196 13.9329C26.6055 14.602 27.961 15.735 28.9147 17.1888C29.8684 18.6425 30.3775 20.3516 30.3775 22.1C30.3749 24.4437 29.4597 26.6907 27.8326 28.348C26.2054 30.0053 23.9993 30.9374 21.6982 30.94Z" fill="#F95C22"/>
+</svg>
\ No newline at end of file
diff --git a/public/images/star.svg b/public/images/star.svg
new file mode 100644
index 000000000..26db2ca91
--- /dev/null
+++ b/public/images/star.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.74299 1.2328C6.08378 0.409306 7.25021 0.409307 7.591 1.2328L8.62736 3.7371C8.77197 4.08654 9.10135 4.32451 9.47853 4.35206L12.1959 4.5505C13.0932 4.61603 13.4543 5.74066 12.7629 6.31634L10.7011 8.03298C10.406 8.2787 10.2776 8.67169 10.3709 9.04422L11.0178 11.6297C11.2351 12.4979 10.2898 13.1924 9.52616 12.7256L7.18855 11.2967C6.86838 11.101 6.4656 11.101 6.14544 11.2967L3.80782 12.7256C3.0442 13.1924 2.09893 12.4979 2.31618 11.6297L2.96312 9.04422C3.05634 8.67169 2.928 8.2787 2.63288 8.03298L0.571108 6.31634C-0.12031 5.74066 0.240816 4.61603 1.13813 4.5505L3.85546 4.35206C4.23264 4.32451 4.56202 4.08654 4.70663 3.7371L5.74299 1.2328Z" fill="currentColor"/>
+</svg>
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
index 34fa24498..0e049f9ce 100644
--- a/resources/assets/sass/app.scss
+++ b/resources/assets/sass/app.scss
@@ -12,6 +12,7 @@
 @import "components/pagination";
 @import "components/calendar";
 @import "components/table";
+@import "components/tinymce";
 
 //Import pages
 @import "pages";
diff --git a/resources/assets/sass/components/forms.scss b/resources/assets/sass/components/forms.scss
index e79471a5e..90d8e2ae9 100644
--- a/resources/assets/sass/components/forms.scss
+++ b/resources/assets/sass/components/forms.scss
@@ -1,4 +1,18 @@
+.custom-geo-input {
+  input {
+    width: 100%;
+    border: 2px solid #a4b8d9;
+    border-radius: 24px;
+    height: 48px;
+    font-size: 20px;
+    line-height: 28px;
+    padding: 0 16px;
+    color: #20262C;
+  }
+}
+
 .multiselect.multi-select {
+
   &.multiselect--active {
     .multiselect--values {
       display: none;
@@ -9,6 +23,7 @@
   }
 
   .multiselect__tags{
+    cursor: pointer;
     border-radius: 24px;
     min-height: 46px;
     border: 2px solid #A4B8D9;
@@ -25,13 +40,13 @@
     height: 100%;
   }
   .multiselect__placeholder,
-  .multiselect__single{
+  .multiselect__tags .multiselect__single{
     padding: 0;
     margin: 0;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
-    color: #333E48;
+    color: #20262C;
   }
   .multiselect__placeholder {
     max-width: 100%;
@@ -41,6 +56,7 @@
     text-overflow: ellipsis;
     line-height: 18px;
   }
+
   .multiselect__single {
     padding-top: 6px;
     color: #333E48;
@@ -54,7 +70,7 @@
     height: 8px;
     width: 8px;
     border: none;
-    border-left: 2px solid #5F718A;
+    border-left: 2px solid #1C4DA1;
     transform: rotate(45deg) !important;
   }
   .multiselect__select:after {
@@ -66,7 +82,7 @@
     height: 8px;
     width: 8px;
     border: none;
-    border-left: 2px solid #5F718A;
+    border-left: 2px solid #1C4DA1;
     transform: rotate(-45deg);
   }
   .multiselect__tags-wrap{
@@ -78,6 +94,83 @@
       margin: 0;
     }
   }
+
+  &.large-text {
+    .multiselect__placeholder,
+    .multiselect__single{
+      font-size: 20px;
+      line-height: 24px;
+    }
+    .multiselect__placeholder {
+      line-height: 24px;
+    }
+    .multiselect__input {
+      line-height: 24px;
+    }
+    .multiselect__tags{
+      padding: 9px 40px 8px 16px;
+      min-height: 48px;
+    }
+  }
+
+  &.new-theme {
+    .multiselect__placeholder {
+      display: block;
+    }
+    .multiselect__tags {
+      border-radius: 24px !important;
+    }
+
+    .multiselect__content-wrapper {
+      border: 2px solid #ADB2B6;
+      border-radius: 12px;
+    }
+
+    &.multiple .multiselect__content-wrapper {
+      overflow: hidden;
+      padding: 16px 12px 16px 0;
+
+      .multiselect__content {
+        min-height: 1px;
+        max-height: calc(300px - 32px);
+        overflow: auto;
+
+        &::-webkit-scrollbar {
+          border-radius: 6px;
+          width: 12px;
+          display: block;
+        }
+
+        &::-webkit-scrollbar-track {
+            background: #E8EDF6;
+            border-radius: 8px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background: #1C4DA1;
+            border-radius: 6px;
+        }
+      }
+    }
+
+    .multiselect__option {
+      padding-left: 24px;
+      font-size: 20px;
+      &.multiselect__option--highlight {
+        background-color: #eee;
+        color: #20262C;
+      }
+      &.multiselect__option--selected {
+        background-color: transparent;
+        &:hover {
+          background-color: #eee;
+        }
+      }
+      &:after {
+        display: none;
+      }
+    }
+  }
 }
 
 .multiselect .multiselect__tags{
diff --git a/resources/assets/sass/components/tinymce.scss b/resources/assets/sass/components/tinymce.scss
new file mode 100644
index 000000000..518111cb8
--- /dev/null
+++ b/resources/assets/sass/components/tinymce.scss
@@ -0,0 +1,27 @@
+.custom-tinymce {
+  .tox-tinymce {
+    border: 2px solid #a4b8d9;
+    border-radius: 24px;
+  }
+
+  .tox-editor-container {
+    .tox-menubar {
+      padding: 0 12px;
+    }
+  }
+  .tox-toolbar-overlord {
+    .tox-toolbar__primary {
+      .tox-toolbar__group:first-child {
+        padding-left: 12px;
+      }
+      .tox-toolbar__group:last-child {
+        padding-right: 12px;
+      }
+    }
+  }
+
+  .tox .tox-statusbar {
+    height: 24px;
+    padding: 4px 16px 4px 16px;
+  }
+}
diff --git a/resources/excel/sample.xlsx b/resources/excel/sample.xlsx
index b62539dbe..a351ec147 100644
Binary files a/resources/excel/sample.xlsx and b/resources/excel/sample.xlsx differ
diff --git a/resources/js/app.js b/resources/js/app.js
index 53c4e4f73..7ef78419b 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,5 +1,6 @@
 import './bootstrap';
 import { createApp } from 'vue';
+import ActivityForm from './components/activity-form/index.vue';
 import ResourceForm from './components/ResourceForm.vue';
 import ResourceCard from './components/ResourceCard.vue';
 import ResourcePill from './components/ResourcePill.vue';
@@ -15,6 +16,8 @@ import PictureForm from "./components/PictureForm.vue";
 import Flash from "./components/Flash.vue";
 import InputTags from "./components/InputTags.vue";
 import ReportEvent from "./components/ReportEvent.vue";
+import EventCard from "./components/EventCard.vue";
+import EventDetail from "./components/EventDetail.vue";
 import SearchPageComponent from "./components/SearchPageComponent.vue";
 
 // import { createI18n } from 'vue-i18n';
@@ -34,6 +37,7 @@ app.use(i18nVue, {
         return await langs[`../lang/${lang}.json`]();
     }
 })
+app.component('ActivityForm', ActivityForm);
 app.component('ResourceForm', ResourceForm);
 app.component('ResourceCard', ResourceCard);
 app.component('ResourcePill', ResourcePill);
@@ -52,4 +56,6 @@ app.component('InputTags', InputTags);
 app.component('SearchPageComponent', SearchPageComponent);
 app.component('AvatarForm', AvatarForm);
 app.component('PartnerGallery', PartnerGallery);
+app.component('EventCard', EventCard);
+app.component('EventDetail', EventDetail);
 app.mount("#app");
diff --git a/resources/js/components/AutocompleteGeo.vue b/resources/js/components/AutocompleteGeo.vue
index 38a9562e8..f3619d443 100644
--- a/resources/js/components/AutocompleteGeo.vue
+++ b/resources/js/components/AutocompleteGeo.vue
@@ -37,21 +37,26 @@ export default {
     geoposition: String,
     location: String
   },
-  setup(props) {
+  emits: ['onChange'],
+  setup(props, { emit }) {
     const item = ref(props.value ? { name: props.value } : null);
     const items = ref(null);
     const template = ItemTemplate;
-    const inputAttrs = {
+    const inputAttrs = ref({
       placeholder: props.placeholder,
       name: props.name,
       autocomplete: "off"
-    };
+    });
     const localGeoposition = ref(props.geoposition);
     const initialLocation = props.location;
 
-
+    watch(() => props.placeholder, () => {
+      inputAttrs.value.placeholder = props.placeholder;
+    });
 
     const itemSelected = (selectedItem) => {
+      emit('onChange', { location: selectedItem?.name || '' });
+
       if (selectedItem && selectedItem.name && selectedItem.magicKey) {
         const baseURL = "/api/proxy/geocode"; // Update to your Laravel endpoint
         axios.get(baseURL, {
@@ -66,7 +71,16 @@ export default {
             window.map.setView([candidate.location.y, candidate.location.x], 16);
           }
           const countryIso2 = findCountry(candidate.attributes.Country).iso2;
-          document.getElementById('id_country').value = countryIso2;
+
+          emit('onChange', {
+            location: selectedItem?.name || '',
+            geoposition: [candidate.location.y, candidate.location.x],
+            country_iso: countryIso2 || '',
+          });
+
+          if (document.getElementById('id_country')) {
+            document.getElementById('id_country').value = countryIso2;
+          }
         }).catch(error => {
           console.error('Error:', error);
         });
diff --git a/resources/js/components/DateTime.vue b/resources/js/components/DateTime.vue
index f5a624413..6b13b9be6 100644
--- a/resources/js/components/DateTime.vue
+++ b/resources/js/components/DateTime.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="datepicker-wrapper">
     <!--        <date-picker :input-name="name" width="100%" :placeholder="placeholder" v-model="time1" type="datetime" format="yyyy-MM-dd HH:mm:ss" :time-picker-options="{start: '07:00',step: '00:30',end: '23:30'}" lang="en"></date-picker>-->
-    <VueDatePicker :name="name" v-model="time1" type="datetime" format="yyyy-MM-dd HH:mm" :time-picker-options="{start: '07:00',step: '00:30',end: '23:30'}" lang="en"></VueDatePicker>
+    <VueDatePicker :name="name" v-model="time1" type="datetime" :format="format || 'yyyy-MM-dd HH:mm'" :time-picker-options="{start: '07:00',step: '00:30',end: '23:30'}" lang="en" :placeholder="placeholder" @update:model-value="onChange"></VueDatePicker>
   </div>
 </template>
 
@@ -11,7 +11,7 @@ import '@vuepic/vue-datepicker/dist/main.css'
 
 export default {
   components: { VueDatePicker },
-  props: ['name','placeholder','value','lang'],
+  props: ['name','placeholder','value','lang', 'format', 'onClear'],
   data() {
     return {
       time1: this.value ? this.value : '',
@@ -24,6 +24,21 @@ export default {
         }
       ]
     }
+  },
+  methods: {
+    onChange(date) {
+      this.$emit('onClear');
+      if (!(date instanceof Date) || isNaN(date.getTime())) return '';
+      const pad = (n) => n.toString().padStart(2, '0');
+
+      const year = date.getFullYear();
+      const month = pad(date.getMonth() + 1);
+      const day = pad(date.getDate());
+      const hour = pad(date.getHours());
+      const minute = pad(date.getMinutes());
+
+      this.$emit('onChange', `${year}-${month}-${day} ${hour}:${minute}`);
+    }
   }
 }
 </script>
@@ -32,12 +47,13 @@ export default {
 :deep(.dp__input) {
   border: none;
   --tw-ring-color: none;
-  color: #00000080;
-  font-family: "PT Sans";
-  font-size: 16px;
+  color: #20262C;
+  font-family: "Blinker";
+  font-size: 20px;
   font-style: normal;
   font-weight: 400;
   line-height: 24px;
+  background-color: transparent;
 }
 
 :deep(.dp__icon) {
@@ -47,7 +63,7 @@ export default {
 
 :deep(.dp__menu_inner) {
   color: #00000080;
-  font-family: "PT Sans";
+  font-family: "Blinker";
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
diff --git a/resources/js/components/EventCard.vue b/resources/js/components/EventCard.vue
new file mode 100644
index 000000000..adb9f321d
--- /dev/null
+++ b/resources/js/components/EventCard.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="flex flex-col bg-white rounded-lg overflow-hidden">
+    <div class="flex-shrink-0">
+      <img :src="event.picture_path" class="w-full object-cover aspect-[1.5]" />
+    </div>
+
+    <div class="flex-grow flex flex-col gap-2 px-6 py-4">
+      <div v-if="eventTags.length" class="flex gap-2 flex-wrap mb-2">
+        <template v-for="{ title, highlight } in eventTags">
+          <span
+            class="flex items-center gap-2 py-1 px-3 text-sm font-semibold rounded-full whitespace-nowrap leading-4"
+            :class="[
+              highlight
+                ? 'bg-dark-blue text-white'
+                : 'bg-light-blue-100 text-slate-500',
+            ]"
+          >
+            <img
+              v-if="highlight"
+              class="inline-block w-4 h-4 text-white"
+              src="/images/star.svg"
+            />
+            <span>
+              <template v-for="text in title.split(' ')">
+                <span
+                  v-if="text"
+                  class="mr-[2px]"
+                  :class="{ 'font-sans': text === '&' }"
+                >
+                  {{ text }}
+                </span>
+              </template>
+            </span>
+          </span>
+        </template>
+      </div>
+
+      <div
+        class="text-dark-blue font-semibold font-['Montserrat'] text-base leading-6"
+      >
+        {{ event.title }}
+      </div>
+
+      <div class="text-slate-500 text-[16px] leading-[22px] font-semibold">
+        {{ eventStartDateText }}
+      </div>
+
+      <div
+        class="flex-grow text-slate-500 text-[16px] leading-[22px] mb-2 [&_p]:p-0"
+        v-html="limit(event.description)"
+      ></div>
+
+      <div class="">
+        <a
+          class="flex justify-center items-center gap-2 text-[#1C4DA1] border-solid border-2 border-[#1C4DA1] rounded-full py-3 px-8 font-semibold text-lg transition-all duration-300 hover:bg-[#E8EDF6] group"
+          :href="'/view/' + event.id + '/' + event.slug"
+        >
+          <span>View activity</span>
+          <div class="flex gap-2 w-4 overflow-hidden">
+            <img
+              src="/images/arrow-right-icon.svg"
+              class="min-w-4 duration-500 transform -translate-x-6 group-hover:translate-x-0 text-[#1C4DA1]"
+            />
+            <img
+              src="/images/arrow-right-icon.svg"
+              class="min-w-4 duration-500 transform -translate-x-6 group-hover:translate-x-0 text-[#1C4DA1]"
+            />
+          </div>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue';
+import { useDataOptions } from './activity-form/mixins.js';
+
+export default {
+  props: {
+    event: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const { recurringFrequentlyMap } = useDataOptions();
+
+    const eventTags = computed(() => {
+      const tags = [];
+
+      if (props.event.highlighted_status === 'FEATURED') {
+        tags.push({ title: 'Featured', highlight: true });
+      }
+
+      if (
+        ['daily', 'weekly', 'monthly'].includes(props.event?.recurring_event)
+      ) {
+        tags.push({
+          title: recurringFrequentlyMap.value[props.event?.recurring_event],
+        });
+      }
+
+      return tags;
+    });
+
+    const eventStartDateText = computed(() => {
+      const formatDate = (dateStr) => {
+        if (!dateStr) return '';
+
+        const date = new Date(dateStr);
+        const day = date.getDate();
+        const month = date.toLocaleString('en-US', { month: 'short' });
+        const year = date.getFullYear();
+        const hour = date.toLocaleString('en-US', {
+          hour: 'numeric',
+          hour12: true,
+        });
+
+        return `${day}, ${month} ${year}`;
+      };
+      const start_date = props.event.start_date;
+      if (!start_date) return '';
+
+      const date = new Date(start_date);
+      const day = date.getDate();
+      const month = date.toLocaleString('en-US', { month: 'short' });
+      const year = date.getFullYear();
+      const hour = date.toLocaleString('en-US', {
+        hour: 'numeric',
+        hour12: true,
+      });
+
+      return `${formatDate(props.event.start_date)} - ${formatDate(
+        props.event.end_date
+      )}`;
+    });
+
+    const limit = (text) => {
+      if (text.length > 400) {
+        return text.substring(0, 400) + '...';
+      }
+      return text;
+    };
+
+    return {
+      eventTags,
+      eventStartDateText,
+      limit,
+    };
+  },
+};
+</script>
diff --git a/resources/js/components/EventDetail.vue b/resources/js/components/EventDetail.vue
new file mode 100644
index 000000000..8ac0b9fef
--- /dev/null
+++ b/resources/js/components/EventDetail.vue
@@ -0,0 +1,436 @@
+<template>
+  <section class="relative z-10">
+    <div
+      class="relative z-10 py-10 md:py-20 codeweek-container-lg flex justify-center"
+    >
+      <div class="w-full max-w-[880px] gap-2 text-xl">
+        <h2
+          class="text-dark-blue text-[22px] md:text-4xl leading-7 md:leading-[44px] font-medium font-['Montserrat'] mb-2"
+        >
+          {{ event.title }}
+        </h2>
+        <p class="text-[#20262C] font-normal p-0 mb-6">
+          {{ fromText }} - {{ toText }}
+        </p>
+
+        <div v-if="event.activity_format" class="mb-6">
+          <p class="text-slate-500 font-semibold p-0 mb-2">
+            Format of the activity:
+          </p>
+          <div class="flex flex-wrap gap-2">
+            <div
+              v-for="format in event.activity_format"
+              class="w-fit px-4 py-1 bg-light-blue-100 rounded-full flex items-center gap-2"
+            >
+              <p class="text-slate-500 p-0 text-base font-semibold">
+                {{ activityFormatOptionsMap[format] }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div class="mb-6">
+          <p class="text-slate-500 font-semibold p-0 mb-2">
+            {{ $t('event.activitytype.label') }}:
+          </p>
+          <p class="text-[#20262C] font-normal p-0 mb-6">
+            <template v-if="event.activity_type">
+              {{ $t(`event.activitytype.${event.activity_type}`) }}
+            </template>
+          </p>
+        </div>
+
+        <div v-if="event.language" class="mb-6">
+          <p class="text-slate-500 font-semibold p-0 mb-2">
+            {{ $t('resources.Languages') }}:
+          </p>
+          <div
+            class="w-fit px-4 py-1 bg-light-blue-100 rounded-full flex items-center gap-2"
+          >
+            <p class="text-slate-500 p-0 text-base font-semibold">
+              {{ $t(`base.languages.${event.language}`) }}
+            </p>
+          </div>
+        </div>
+
+        <div v-if="event.recurring_event" class="mb-6">
+          <p class="text-slate-500 font-semibold p-0 mb-2">Recurring event:</p>
+          <div class="flex flex-wrap gap-2">
+            <div
+              class="w-fit px-4 py-1 bg-light-blue-100 rounded-full flex items-center gap-2"
+            >
+              <p class="text-slate-500 p-0 text-base font-semibold">
+                {{ recurringFrequentlyMap[event.recurring_event] }}
+              </p>
+            </div>
+            <div
+              v-if="event.duration"
+              class="w-fit px-4 py-1 bg-light-blue-100 rounded-full flex items-center gap-2"
+            >
+              <p class="text-slate-500 p-0 text-base font-semibold">
+                {{ durationOptionsMap[event.duration] }}
+              </p>
+            </div>
+            <div
+              v-if="event.recurring_type"
+              class="w-fit px-4 py-1 bg-light-blue-100 rounded-full flex items-center gap-2"
+            >
+              <p class="text-slate-500 p-0 text-base font-semibold">
+                {{ recurringTypeOptionsMap[event.recurring_type] }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="event.audiences?.length" class="mb-6">
+          <p class="text-slate-500 font-semibold p-0 mb-2">
+            {{ $t('event.audience_title') }}:
+          </p>
+          <div class="flex flex-wrap gap-2">
+            <div
+              v-for="audience in event.audiences"
+              class="w-fit px-4 py-1 bg-light-blue-100 rounded-full flex items-center gap-2"
+            >
+              <p class="text-slate-500 p-0 text-base font-semibold">
+                {{ $t(`event.audience.${audience.name}`) }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="event.ages?.length" class="mb-6">
+          <p class="text-slate-500 font-semibold p-0 mb-2">Age range:</p>
+          <div class="flex flex-wrap gap-2">
+            <div
+              v-for="ageId in event.ages"
+              class="w-fit px-4 py-1 bg-light-blue-100 rounded-full flex items-center gap-2"
+            >
+              <p class="text-slate-500 p-0 text-base font-semibold">
+                {{ ageOptionsMap[ageId] }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="event.themes?.length" class="mb-6">
+          <p class="text-slate-500 font-semibold p-0 mb-2">Themes:</p>
+          <div class="flex flex-wrap gap-2">
+            <div
+              v-for="theme in event.themes"
+              class="w-fit px-4 py-1 bg-light-blue-100 rounded-full flex items-center gap-2"
+            >
+              <p class="text-slate-500 p-0 text-base font-semibold">
+                {{ $t(`event.theme.${theme.name}`) }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div class="mb-6">
+          <p class="text-slate-500 font-semibold p-0 mb-2">
+            {{ $t('event.address.label') }}:
+          </p>
+          <p class="text-[#20262C] font-normal p-0 mb-6">
+            {{ event.location }}
+          </p>
+        </div>
+
+        <div class="mb-6 [&_p]:empty:hidden">
+          <p class="text-slate-500 font-semibold p-0 mb-2">
+            Activity description:
+          </p>
+          <div
+            class="text-[#20262C] font-normal p-0 mb-6 space-y-2 [&_p]:py-0"
+            v-html="event.description"
+          ></div>
+        </div>
+
+        <div class="mb-6">
+          <p class="text-slate-500 font-semibold p-0 mb-2">Email address:</p>
+          <p class="text-[#20262C] font-normal p-0 mb-6">
+            {{ event.contact_person }}
+          </p>
+        </div>
+
+        <div
+          ref="mapContainerRef"
+          class="w-full h-[520px] top-0 left-0 mb-6 rounded-lg overflow-hidden"
+        >
+          <div id="mapid" class="w-full h-full relative">
+            <div
+              style="z-index: 999"
+              id="map-controls"
+              class="absolute z-50 flex flex-col top-4 left-2"
+            >
+              <!-- Minimize screen -->
+              <button
+                class="pb-2 group"
+                @click="handleToggleMapFullScreen(false)"
+              >
+                <svg
+                  width="40"
+                  height="40"
+                  viewBox="0 0 40 40"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <rect
+                    width="40"
+                    height="40"
+                    rx="8"
+                    class="fill-white transition-colors duration-300 group-hover:fill-[#1C4DA1]"
+                  />
+                  <path
+                    d="M13 20H27"
+                    class="stroke-[#414141] group-hover:stroke-[#ffffff]"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </button>
+
+              <!-- Full screen -->
+              <button
+                class="pb-2 group"
+                @click="handleToggleMapFullScreen(true)"
+              >
+                <svg
+                  width="40"
+                  height="40"
+                  viewBox="0 0 40 40"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <rect
+                    width="40"
+                    height="40"
+                    rx="8"
+                    class="fill-white transition-colors duration-300 group-hover:fill-[#1C4DA1]"
+                  />
+                  <path
+                    class="stroke-[#414141] group-hover:stroke-[#ffffff]"
+                    d="M16 11H13C12.4696 11 11.9609 11.2107 11.5858 11.5858C11.2107 11.9609 11 12.4696 11 13V16M29 16V13C29 12.4696 28.7893 11.9609 28.4142 11.5858C28.0391 11.2107 27.5304 11 27 11H24M24 29H27C27.5304 29 28.0391 28.7893 28.4142 28.4142C28.7893 28.0391 29 27.5304 29 27V24M11 24V27C11 27.5304 11.2107 28.0391 11.5858 28.4142C11.9609 28.7893 12.4696 29 13 29H16"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- from old page -->
+
+        <!-- <div class="mb-6">
+          <p class="text-slate-500 font-semibold p-0 mb-2">
+            {{ $t('eventdetails.organised_by') }}
+          </p>
+          <p class="text-[#20262C] font-normal p-0 mb-6">
+            {{ event.organizer }}
+            <span v-if="canApprove">
+              (<a :href="`mailto:${event.user_email}`">{{ event.user_email }}</a
+              >)
+            </span>
+          </p>
+        </div> -->
+
+        <!-- <div class="mb-6">
+          <p class="text-slate-500 font-semibold p-0 mb-2">
+            {{ $t('eventdetails.more_info') }}
+          </p>
+          <a
+            :href="event.event_url"
+            class="text-dark-blue font-normal p-0 mb-6"
+          >
+            {{ event.event_url }}
+          </a>
+        </div> -->
+
+        <!-- <div v-if="event.tags?.length" class="mb-6">
+          <p class="text-slate-500 font-semibold p-0 mb-2">
+            {{ $t('eventdetails.tags') }}
+          </p>
+          <div class="flex flex-wrap gap-2">
+            <div
+              v-for="tag in event.tags"
+              class="w-fit px-4 py-1 bg-light-blue-100 rounded-full flex items-center gap-2"
+            >
+              <p class="text-slate-500 p-0 text-base font-semibold">
+                {{ tag.name }}
+              </p>
+            </div>
+          </div>
+        </div> -->
+
+        <!-- <div
+          v-if="canEdit && event.codeweek_for_all_participation_code"
+          class="mb-6"
+        >
+          <p class="text-slate-500 font-semibold p-0 mb-2">
+            {{ $t('event.codeweek_for_all_participation_code.title') }}:
+          </p>
+          <p class="text-[#20262C] font-normal p-0 mb-6">
+            {{ event.codeweek_for_all_participation_code }}
+          </p>
+        </div>
+
+        <div v-if="canEdit" class="mb-6">
+          <p class="text-slate-500 font-semibold p-0 mb-2">
+            {{ $t('event.last_update') }}:
+          </p>
+          <p class="text-[#20262C] font-normal p-0 mb-6">
+            {{ lastUpdateText }}
+          </p>
+        </div> -->
+
+        <div>
+          <p class="text-slate-500 font-semibold p-0 mb-2">
+            Share activity on:
+          </p>
+          <div class="flex items-center gap-4">
+            <div
+              class="fb-like"
+              :data-href="shareUrl"
+              data-layout="button_count"
+              data-action="recommend"
+              data-show-faces="false"
+              data-share="true"
+            ></div>
+
+            <a
+              href="https://twitter.com/share"
+              class="twitter-share-button"
+              :data-href="shareUrl"
+              :data-text="`Check out ${event.title} at`"
+              data-via="CodeWeekEU"
+              data-hashtags="codeEU"
+            >
+              <img src="/images/social/twitter.svg" />
+            </a>
+            <a
+              class="block [&_path]:!fill-dark-blue"
+              :title="$t('eventdetails.email.tooltip')"
+              :href="emailHref"
+            >
+              <img class="block" src="/images/mail.svg" />
+            </a>
+            <div class="g-plusone" data-size="medium" :data-href="appUrl"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="animation-element move-background duration-[1.5s] absolute z-0 bottom-10 md:bottom-auto md:top-48 -right-14 md:-right-40 w-28 md:w-72 h-28 md:h-72 bg-[#FFEF99] rounded-full hidden lg:block"
+      style="transform: translate(-16px, -24px)"
+    ></div>
+    <div
+      class="animation-element move-background duration-[1.5s] absolute z-0 lg:top-96 right-40 w-28 h-28 hidden lg:block bg-[#FFEF99] rounded-full"
+      style="transform: translate(-16px, -24px)"
+    ></div>
+  </section>
+</template>
+
+<script>
+import { computed, onMounted, ref } from 'vue';
+import { useDataOptions } from './activity-form/mixins';
+
+export default {
+  props: {
+    event: {
+      type: Object,
+      default: () => ({}),
+    },
+    mapTileUrl: String,
+    canApprove: Boolean,
+    canEdit: Boolean,
+
+    fromText: String,
+    toText: String,
+    lastUpdateText: String,
+    eventPath: String,
+    appUrl: String,
+    shareUrl: String,
+    emailHref: String,
+  },
+  setup(props) {
+    console.log(props.event);
+    const {
+      activityFormatOptionsMap,
+      durationOptionsMap,
+      ageOptions,
+      ageOptionsMap,
+      recurringFrequentlyMap,
+      recurringTypeOptionsMap,
+    } = useDataOptions();
+
+    const mapContainerRef = ref(null);
+
+    const eventAges = computed(() => {
+      return props.event.ages
+        ?.split(',')
+        .map((age) => ageOptions.value?.find(({ id }) => id === age)?.name);
+    });
+
+    const handleToggleMapFullScreen = (isFullScreen) => {
+      const el = mapContainerRef.value;
+      if (!el) return;
+
+      const className =
+        'fixed left-0 top-[139px] md:top-[123px] z-[110] h-[calc(100dvh-139px)] md:h-[calc(100dvh-123px)]';
+
+      if (isFullScreen) {
+        el.classList.add(...className.split(' '));
+      } else {
+        el.classList.remove(...className.split(' '));
+      }
+    };
+
+    const handleLoadMap = () => {
+      const mapInstance = L.map('mapid');
+      L.tileLayer(props.mapTileUrl, {
+        maxZoom: 18,
+        attribution: '© <a href="https://www.mapbox.com/">Mapbox</a>',
+        tileSize: 512,
+        zoomOffset: -1,
+        zoomControl: false,
+      }).addTo(mapInstance);
+      mapInstance.setView([51, 10], 5);
+
+      let center = [51, 10];
+      if (props.event.latitude && props.event.longitude) {
+        center = [props.event.latitude, props.event.longitude];
+      }
+
+      const icon = L.icon({
+        iconUrl: '/images/marker-orange.svg',
+        iconSize: [44, 62],
+        iconAnchor: [22, 62],
+        popupAnchor: [0, -60],
+      });
+      L.marker(center, { icon }).addTo(mapInstance);
+      mapInstance.setView(center, 5);
+    };
+
+    onMounted(() => {
+      document.addEventListener('leaflet-ready', () => {
+        handleLoadMap();
+      });
+    });
+
+    return {
+      activityFormatOptionsMap,
+      eventAges,
+
+      durationOptionsMap,
+      ageOptionsMap,
+      recurringFrequentlyMap,
+      recurringTypeOptionsMap,
+
+      mapContainerRef,
+      handleToggleMapFullScreen,
+    };
+  },
+};
+</script>
diff --git a/resources/js/components/Pagination.vue b/resources/js/components/Pagination.vue
index 88e5e7676..83279bdd2 100644
--- a/resources/js/components/Pagination.vue
+++ b/resources/js/components/Pagination.vue
@@ -16,7 +16,7 @@
       <li v-for="page in pages" class="flex items-center gap-1 whitespace-nowrap">
         <a
           v-if="pagination.current_page != page"
-          class="flex justify-center items-center w-12 h-12 text-xl hover:bg-[#1C4DA1]/10 rounded font-bold text-[#1C4DA1] underline duration-300"
+          class="flex justify-center items-center w-12 h-12 text-xl hover:bg-[#1C4DA1]/10 rounded font-bold text-[#1C4DA1] underline duration-300 cursor-pointer"
           @click.prevent="changePage(page)"
         >
           {{ page }}
diff --git a/resources/js/components/SearchPageComponent.vue b/resources/js/components/SearchPageComponent.vue
index 15afe7a7a..e9d64ea8b 100644
--- a/resources/js/components/SearchPageComponent.vue
+++ b/resources/js/components/SearchPageComponent.vue
@@ -1,285 +1,638 @@
 <template>
-    <section id="codeweek-searchpage-component" class="codeweek-page">
-
-
-        <div class="home-map">
-            <div class="add-button">
-                <a class="codeweek-action-link-button"
-                   href="/add">{{$t('menu.add_event')}}</a>
-            </div>
-            <div class="landing-wrapper">
-                <div class="events-map-wrapper">
-                    <div id="home-map"></div>
-                </div>
-            </div>
+  <section>
+    <div ref="mapContainerRef" class="w-full h-[520px] top-0 left-0">
+      <div id="mapid" class="w-full h-full relative">
+        <div
+          style="z-index: 999"
+          id="map-controls"
+          class="absolute z-50 flex flex-col top-4 left-2"
+        >
+          <!-- Full screen -->
+          <button class="pb-2 group" @click="handleToggleMapFullScreen(true)">
+            <svg
+              width="40"
+              height="40"
+              viewBox="0 0 40 40"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                width="40"
+                height="40"
+                rx="8"
+                class="fill-white transition-colors duration-300 group-hover:fill-[#1C4DA1]"
+              />
+              <path
+                class="stroke-[#414141] group-hover:stroke-[#ffffff]"
+                d="M16 11H13C12.4696 11 11.9609 11.2107 11.5858 11.5858C11.2107 11.9609 11 12.4696 11 13V16M29 16V13C29 12.4696 28.7893 11.9609 28.4142 11.5858C28.0391 11.2107 27.5304 11 27 11H24M24 29H27C27.5304 29 28.0391 28.7893 28.4142 28.4142C28.7893 28.0391 29 27.5304 29 27V24M11 24V27C11 27.5304 11.2107 28.0391 11.5858 28.4142C11.9609 28.7893 12.4696 29 13 29H16"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+
+          <!-- Minimize screen -->
+          <button class="pb-2 group" @click="handleToggleMapFullScreen(false)">
+            <svg
+              width="40"
+              height="40"
+              viewBox="0 0 40 40"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                width="40"
+                height="40"
+                rx="8"
+                class="fill-white transition-colors duration-300 group-hover:fill-[#1C4DA1]"
+              />
+              <path
+                d="M13 20H27"
+                class="stroke-[#414141] group-hover:stroke-[#ffffff]"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
         </div>
-
-        <div id="loadmask" v-show="isLoading">
-            <div class="loading"><img src="img/loading.gif" style="margin-right:10px;">{{$t('event.loading')}}</div>
+      </div>
+    </div>
+  </section>
+  <section class="codeweek-searchpage-component font-['Blinker']">
+    <div class="codeweek-container py-10">
+      <div class="flex w-full">
+        <div
+          class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 items-end gap-4 w-full"
+        >
+          <FieldWrapper
+            class="lg:col-span-2"
+            horizontal
+            label="Search by title or description"
+          >
+            <InputField
+              v-model="filters.query"
+              placeholder="E.g tools assessment in computing"
+            />
+          </FieldWrapper>
+
+          <FieldWrapper horizontal label="Language">
+            <SelectField
+              class="large-text"
+              multiple
+              return-object
+              theme="old"
+              placeholder="Select language"
+              v-model="filters.languages"
+              :options="languageOptions"
+            />
+          </FieldWrapper>
+
+          <FieldWrapper horizontal label="Country">
+            <SelectField
+              class="large-text"
+              multiple
+              return-object
+              theme="old"
+              id-name="iso"
+              placeholder="Select country"
+              v-model="filters.countries"
+              :options="countrieslist"
+            />
+          </FieldWrapper>
+
+          <button
+            class="bg-[#F95C22] rounded-full py-3 px-20 font-['Blinker'] hover:bg-hover-orange duration-300 mt-2"
+            @click="onSubmit()"
+          >
+            <span
+              class="text-base leading-7 font-semibold text-black normal-case"
+            >
+              Search
+            </span>
+          </button>
         </div>
-
-        <div class="codeweek-searchbox">
-
-            <div class="basic-fields">
-
-
-                <div class="codeweek-search-text">
-                    <input type="text" v-model="query"
-                           v-on:keyup.13="onSubmit()" :placeholder="$t('search.search_placeholder')">
-                </div>
-
-              <div class="codeweek-search-text">
-                    <input type="text" v-model="tag"
-                           v-on:keyup.13="onSubmit()" :placeholder="$t('event.tags')">
-                </div>
-
-                <div class="right-fields">
-                    <div class="year-selection">
-                        <multiselect v-model="year" :options="years" :multiple="false" :close-on-select="true"
-                                     :clear-on-select="false" :preserve-search="false" placeholder="Year"
-                                     :show-labels="false" :preselect-first="true" :searchable="false"
-                                     :allowEmpty="false">
-                            <pre class="language-json"><code>{{ year  }}</code></pre>
-                        </multiselect>
-                    </div>
-
-                    <div class="codeweek-button">
-                        <input type="button" :value="$t('search.submit')" @click="onSubmit()">
-                    </div>
-
-                    <!--<div class="codeweek-more-button" @click="toggleFilters()">
-                        <span>{{showFilters ? '-' : '+'}}</span>
-                    </div>-->
-                </div>
-
-            </div>
-
-            <div class="advanced-fields" v-show="showFilters">
-
-                <multiselect v-model="countries" :options="countrieslist" :multiple="true" :close-on-select="false"
-                             :clear-on-select="false" :preserve-search="false" :placeholder="$t('search.countries')"
-                             :preselect-first="false"
-                             label="countries" :custom-label="translated" track-by="iso">
-                    <pre class="language-json"><code>{{ countries }}</code></pre>
-                </multiselect>
-
-                <multiselect v-model="audiences" :options="audienceslist" :multiple="true" :close-on-select="false"
-                             :clear-on-select="false" :preserve-search="false" :placeholder="$t('search.audiences')"
-                             :preselect-first="false"
-                             label="event.audience" :custom-label="customLabel" track-by="id" class="mr-4">
-                    <pre class="language-json"><code>{{ audiences }}</code></pre>
-                </multiselect>
-
-                <multiselect v-model="themes" :options="themeslist" :multiple="true" :close-on-select="false"
-                             :clear-on-select="false" :preserve-search="false" :placeholder="$t('search.themes')"
-                             :preselect-first="false"
-                             label="event.theme" :custom-label="customLabel" track-by="id">
-                    <pre class="language-json"><code>{{ themes }}</code></pre>
-                </multiselect>
-
-                <multiselect v-model="types" :options="typeslist" :multiple="true" :close-on-select="false"
-                             :clear-on-select="false" :preserve-search="false"
-                             :placeholder="$t('event.activitytype.label')"
-                             :preselect-first="false"
-                             label="event.activitytype" :custom-label="customLabel" track-by="id">
-                    <pre class="language-json"><code>{{ types }}</code></pre>
-                </multiselect>
-
-
+      </div>
+
+      <div v-if="tags.length" class="flex md:justify-center mt-10">
+        <div class="max-md:w-full flex flex-wrap gap-2">
+          <template v-for="tag in tags" :key="tag.id">
+            <div
+              class="bg-light-blue-100 pl-4 pr-3 py-1 rounded-full text-slate-500 text-[16px] font-semibold"
+            >
+              <div class="flex items-center gap-2">
+                <span>{{ tag.name }}</span>
+                <button @click="removeSelectedItem(tag)">
+                  <img class="w-4 h-4" src="/images/close-icon.svg" />
+                </button>
+              </div>
             </div>
-
+          </template>
+
+          <div class="max-md:w-full max-md:mt-4 flex justify-center px-4">
+            <button
+              class="text-dark-blue underline font-semibold text-[16px]"
+              @click="removeAllSelectedItems"
+            >
+              Clear all filters
+            </button>
+          </div>
         </div>
-
-        <div class="codeweek-content-wrapper">
-
-            <div class="codeweek-grid-layout">
-                <div class="codeweek-card" v-for="event in events">
-                    <img :src="thumbnail(event)" class="card-image">
-                    <div class="card-content">
-                        <div class="card-title">{{ event.title }}</div>
-                        <div class="card-subtitle">{{ event.start_date }}</div>
-                        <div class="card-description" v-html="limit(event.description)"></div>
-                    </div>
-                    <div class="card-actions">
-                        <a class="codeweek-action-link-button"
-                           :href="'/view/' + event.id + '/' + event.slug">{{ $t('myevents.view') }}</a>
-                    </div>
+      </div>
+    </div>
+
+    <div class="relative pt-20 md:pt-48">
+      <div
+        class="absolute w-full h-[800px] bg-yellow-50 md:hidden top-0"
+        style="clip-path: ellipse(270% 90% at 38% 90%)"
+      />
+      <div
+        class="absolute w-full h-[800px] bg-yellow-50 hidden md:block top-0"
+        style="clip-path: ellipse(88% 90% at 50% 90%)"
+      />
+
+      <div class="bg-yellow-50 pb-24">
+        <div class="relative z-10 codeweek-container-lg">
+          <div class="flex flex-col md:flex-row gap-10">
+            <div
+              class="flex-shrink-0 grid grid-cols-2 md:grid-cols-1 gap-6 bg-[#FFEF99] px-4 py-6 rounded-2xl self-start w-full md:w-60"
+            >
+              <FieldWrapper horizontal label="Date">
+                <div
+                  class="w-full flex px-3 justify-between items-center text-gray-700 whitespace-nowrap rounded-3xl border-2 border-dark-blue-200 h-[50px] bg-white"
+                >
+                  <date-time
+                    :key="filters.start_date"
+                    placeholder="Start Date"
+                    format="yyyy-MM-dd"
+                    :value="filters.start_date"
+                    @onChange="filters.start_date = $event"
+                    @onClear="filters.start_date = null"
+                  ></date-time>
                 </div>
-
+              </FieldWrapper>
+
+              <FieldWrapper horizontal label="Format">
+                <SelectField
+                  class="large-text"
+                  multiple
+                  return-object
+                  theme="old"
+                  placeholder="Select format"
+                  v-model="filters.formats"
+                  :options="activityFormatOptions"
+                  @onChange="() => onSubmit()"
+                />
+              </FieldWrapper>
+
+              <FieldWrapper horizontal label="Activity type">
+                <SelectField
+                  class="large-text"
+                  multiple
+                  return-object
+                  theme="old"
+                  placeholder="Select type"
+                  v-model="filters.types"
+                  :options="activityTypeOptions"
+                  @onChange="() => onSubmit()"
+                />
+              </FieldWrapper>
+
+              <FieldWrapper horizontal label="Audience">
+                <SelectField
+                  class="large-text"
+                  multiple
+                  return-object
+                  theme="old"
+                  placeholder="Select audience"
+                  v-model="filters.audiences"
+                  :options="audienceslist"
+                  @onChange="() => onSubmit()"
+                />
+              </FieldWrapper>
+
+              <FieldWrapper horizontal label="Age range">
+                <SelectField
+                  class="large-text"
+                  multiple
+                  return-object
+                  theme="old"
+                  placeholder="Select range"
+                  v-model="filters.ages"
+                  :options="ageOptions"
+                  @onChange="() => onSubmit()"
+                />
+              </FieldWrapper>
+
+              <FieldWrapper horizontal label="Themes">
+                <SelectField
+                  class="large-text"
+                  multiple
+                  return-object
+                  theme="old"
+                  placeholder="Select themes"
+                  v-model="filters.themes"
+                  :options="themeslist"
+                  @onChange="() => onSubmit()"
+                />
+              </FieldWrapper>
             </div>
-
-            <pagination v-if="pagination.last_page > 1  && !isLoading"
-                        :pagination="pagination" :offset="5" @paginate="paginate()"></pagination>
-
-
+            <div
+              v-show="isLoading"
+              class="flex items-center justify-center w-full"
+            >
+              <img src="img/loading.gif" style="margin-right: 10px" />{{
+                $t('event.loading')
+              }}
+            </div>
+            <div
+              v-if="!isLoading"
+              class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 lg:gap-10 h-fit"
+            >
+              <template v-for="event in events" :key="event.id">
+                <event-card :event="event"></event-card>
+              </template>
+
+              <div v-if="pagination.last_page > 1" class="col-span-full">
+                <pagination
+                  :pagination="pagination"
+                  :offset="5"
+                  @paginate="paginate"
+                ></pagination>
+              </div>
+            </div>
+          </div>
         </div>
-
-    </section>
-
+      </div>
+    </div>
+  </section>
 </template>
 
 <script>
-    import Multiselect from 'vue-multiselect'
-    import Pagination from "./Pagination.vue";
-
-    export default {
-        components: {Multiselect, Pagination},
-        name: 'SearchPageComponent',
-        props: {
-            prpQuery: String,
-            prpYears: Array,
-            prpSelectedCountry: Array,
-            prpSelectedYear: Number,
-            name: String,
-            prpTag: String,
-            countrieslist: Array,
-            audienceslist: Array,
-            themeslist: Array,
-            typeslist: Array,
+import { ref, computed, onMounted } from 'vue';
+import Pagination from './Pagination.vue';
+import axios from 'axios';
+import EventCard from './EventCard.vue';
+
+import FieldWrapper from './form-fields/FieldWrapper.vue';
+import SelectField from './form-fields/SelectField.vue';
+import InputField from './form-fields/InputField.vue';
+
+import { useDataOptions } from './activity-form/mixins.js';
+
+export default {
+  name: 'SearchPageComponent',
+  components: {
+    EventCard,
+    Pagination,
+
+    FieldWrapper,
+    SelectField,
+    InputField,
+  },
+  props: {
+    mapTileUrl: String,
+    prpQuery: String,
+    prpSelectedCountry: Array,
+
+    name: String,
+    countrieslist: Array,
+    audienceslist: Array,
+    themeslist: Array,
+    typeslist: Array,
+    languagesObject: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const { activityFormatOptions, activityTypeOptions, ageOptions } =
+      useDataOptions();
+
+    const isLoading = ref(true);
+    const mapContainerRef = ref(null);
+    const mapInstance = ref(null);
+    const mapMarkerClusterInstance = ref(null);
+    const events = ref([]);
+    const mapDataObject = ref({});
+    const errors = ref(null);
+
+    const emptyFilters = {
+      query: '',
+      languages: [],
+      countries: [],
+      start_date: '',
+      formats: [],
+      types: [],
+      audiences: [],
+      ages: [],
+      themes: [],
+    };
+
+    const filters = ref({
+      ...emptyFilters,
+      query: props.prpQuery || '',
+      countries: props.prpSelectedCountry || [],
+    });
+
+    const pagination = ref({
+      current_page: 1,
+      per_page: 0,
+      from: null,
+      last_page: 0,
+      last_page_url: null,
+      next_page_url: null,
+      prev_page: null,
+      prev_page_url: null,
+      to: null,
+      total: 0,
+    });
+
+    const languageOptions = computed(() =>
+      Object.entries(props.languagesObject).map(([key, value]) => ({
+        id: key,
+        name: value,
+      }))
+    );
+
+    const tags = computed(() => {
+      const result = [
+        ...filters.value.languages,
+        ...filters.value.countries,
+        ...filters.value.formats,
+        ...filters.value.types,
+        ...filters.value.audiences,
+        ...filters.value.ages,
+        ...filters.value.themes,
+      ];
+
+      if (filters.value.start_date) {
+        result.push({
+          id: 'start_date',
+          name: filters.value.start_date.slice(0, 10),
+        });
+      }
+
+      return result;
+    });
+
+    const removeSelectedItem = (tag) => {
+      if (tag.id === 'start_date') {
+        filters.value.start_date = '';
+        return;
+      }
+
+      const filterFn = (item) => item.id !== tag.id;
+      filters.value.languages = filters.value.languages.filter(filterFn);
+      filters.value.countries = filters.value.countries.filter(
+        (item) => item.iso !== tag.iso
+      );
+      filters.value.formats = filters.value.formats.filter(filterFn);
+      filters.value.audiences = filters.value.audiences.filter(filterFn);
+      filters.value.themes = filters.value.themes.filter(filterFn);
+      onSubmit();
+    };
+
+    const removeAllSelectedItems = () => {
+      filters.value = { ...emptyFilters };
+      onSubmit();
+    };
+
+    const scrollToTop = () => {
+      window.scrollTo(0, 0);
+    };
+
+    const paginate = () => {
+      scrollToTop();
+      onSubmit(true);
+    };
+
+    const onSubmit = (isPagination = false) => {
+      events.value = [];
+      isLoading.value = true;
+
+      let url = '/search';
+      if (isPagination) {
+        url = `/search?page=${pagination.value.current_page}`;
+      }
+
+      const requestData = {
+        ...filters.value,
+        start_date: filters.value.start_date
+          ? new Date(filters.value.start_date).toISOString().slice(0, 10)
+          : '',
+        pagination: {
+          current_page: pagination.current_page,
         },
-        data() {
-            return {
-                query: this.prpQuery,
-                years: this.prpYears,
-                year: this.prpSelectedYear,
-                countries: this.prpSelectedCountry,
-                audiences: [],
-                themes: [],
-                types: [],
-                showFilters: true,
-                isLoading: false,
-                events: [],
-                pagination: {
-                    'current_page': 1
-                },
-                sortedCountries: [],
-                tag: this.prpTag
-            }
-        },
-        methods: {
-            toggleFilters() {
-                this.showFilters = !this.showFilters;
-            },
-            scrollToTop() {
-                window.scrollTo(0, 0);
-            },
-            paginate: function () {
-                this.scrollToTop();
-                this.onSubmit(true);
-            },
-            onSubmit: function (isPagination) {
-                this.events = [];
-                this.isLoading = true;
-
-                let url = "/search";
-                if (isPagination) {
-                    url = "/search?page=" + this.pagination.current_page;
-                }
-
-                axios.post(url, this.$data)
-                    .then(result => {
-                        const response = result.data;
-                        console.log("🔥 Full response:", response);
-
-                        let eventsData, mapData;
-
-                        // Handle both response formats: array OR object
-                        if (Array.isArray(response)) {
-                            eventsData = response[0];
-                            mapData = response[1] || null;
-                        } else if (response.events) {
-                            eventsData = response.events;
-                            mapData = response.map || null;
-                        } else {
-                            console.warn("❌ Unexpected response structure:", response);
-                            this.errors = "Unexpected response format from server.";
-                            this.isLoading = false;
-                            return;
-                        }
-
-                        // Set pagination
-                        this.pagination.per_page = eventsData.per_page;
-                        this.pagination.current_page = eventsData.current_page;
-                        this.pagination.from = eventsData.from;
-                        this.pagination.last_page = eventsData.last_page;
-                        this.pagination.last_page_url = eventsData.last_page_url;
-                        this.pagination.next_page_url = eventsData.next_page_url;
-                        this.pagination.prev_page = eventsData.prev_page;
-                        this.pagination.prev_page_url = eventsData.prev_page_url;
-                        this.pagination.to = eventsData.to;
-                        this.pagination.total = eventsData.total;
-
-                        // Ensure data is an array, even if returned as an object
-                        if (eventsData.data) {
-                            this.events = Array.isArray(eventsData.data)
-                                ? eventsData.data
-                                : Object.values(eventsData.data);
-                        } else {
-                            this.events = [];
-                        }
-
-                        console.log("✅ Events loaded:", this.events.length);
-
-                        // Set map data (only on non-pagination call)
-                        if (!isPagination && mapData) {
-                            if (window.getEvents) {
-                                window.getEvents(mapData);
-                            } else {
-                                window.eventsToMap = mapData;
-                            }
-                        } else if (!mapData) {
-                            console.warn("⚠️ mapData is null, skipping map update");
-                        }
-
-                        this.setSelectedCountryToCenterMap();
-                        this.isLoading = false;
-                    })
-                    .catch(error => {
-                        console.error("❌ Request failed:", error);
-                        this.errors = error.response ? error.response.data : "Unknown error";
-                        this.isLoading = false;
-                    });
-            },
-            thumbnail: function (event) {
-
-                if (event.picture) {
-                    if (event.picture.startsWith("http")) return event.picture;
-                    return 'https://codeweek-s3.s3.amazonaws.com/' + event.picture;
-                }
-                return 'https://codeweek-s3.s3.amazonaws.com/event_picture/logo_gs_2016_07703ca0-7e5e-4cab-affb-4de93e3f2497.png';
-            },
-            translated(obj) {
-                return obj.translation;
-            },
-            customLabel(obj, label) {
-                return this.$t(label + '.' + obj.name);
-            },
-            setSelectedCountryToCenterMap() {
-                if (this.countries && this.countries.length === 1 && this.countries[0]) {
-                    window.countrySelected = this.countries[0].iso;
-                    if (window.centralizeMap) {
-                        window.centralizeMap(window.countrySelected);
-                    }
-                } else {
-                    window.countrySelected = null;
-                    if (window.centralizeMap) {
-                        window.centralizeMap();
-                    }
-                }
-            },
-            limit(text) {
-
-                if (text.length > 400) {
-                    return text.substring(0, 400) + "...";
-                }
-                return text;
+      };
+
+      axios
+        .post(url, requestData)
+        .then((result) => {
+          const response = result.data;
+          console.log('🔥 Full response:', response);
+
+          let eventsData, mapData;
+
+          // Handle both response formats: array OR object
+          if (Array.isArray(response)) {
+            eventsData = response[0];
+            mapData = response[1] || null;
+          } else if (response.events) {
+            eventsData = response.events;
+            mapData = response.map || null;
+          } else {
+            console.warn('❌ Unexpected response structure:', response);
+            errors.value = 'Unexpected response format from server.';
+            isLoading.value = false;
+            return;
+          }
+
+          // Set pagination
+          pagination.value = {
+            per_page: eventsData.per_page,
+            current_page: eventsData.current_page,
+            from: eventsData.from,
+            last_page: eventsData.last_page,
+            last_page_url: eventsData.last_page_url,
+            next_page_url: eventsData.next_page_url,
+            prev_page: eventsData.prev_page,
+            prev_page_url: eventsData.prev_page_url,
+            to: eventsData.to,
+            total: eventsData.total,
+          };
+
+          // Ensure data is an array, even if returned as an object
+          if (eventsData.data) {
+            events.value = Array.isArray(eventsData.data)
+              ? eventsData.data
+              : Object.values(eventsData.data);
+          } else {
+            events.value = [];
+          }
+
+          console.log('✅ Events loaded:', events.value.length);
+
+          if (!isPagination && mapData) {
+            if (window.getEvents) {
+              window.getEvents(mapData);
+            } else {
+              window.eventsToMap = mapData;
             }
+            mapDataObject.value = mapData;
+            handleAddEventMakers();
+          } else if (!mapData) {
+            console.warn('⚠️ mapData is null, skipping map update');
+          }
+
+          setSelectedCountryToCenterMap();
+          isLoading.value = false;
+        })
+        .catch((error) => {
+          console.error('❌ Request failed:', error);
+          errors.value = error.response ? error.response.data : 'Unknown error';
+          isLoading.value = false;
+        });
+    };
+
+    const setSelectedCountryToCenterMap = () => {
+      if (!mapInstance.value) return;
+      let centerInfo = {
+        latitude: 51,
+        longitude: 4,
+        zoom: 4,
+      };
+      if (filters.value.countries?.length === 1) {
+        const { latitude, longitude } = filters.value.countries[0] || {};
+        if (latitude && longitude) {
+          centerInfo = { latitude, longitude, zoom: 4 };
+        }
+      }
+
+      mapInstance.value.setView(
+        new L.LatLng(centerInfo.latitude, centerInfo.longitude),
+        4,
+        { animation: true }
+      );
+    };
+
+    const limit = (text) => {
+      if (text.length > 400) {
+        return text.substring(0, 400) + '...';
+      }
+      return text;
+    };
+
+    const handleAddEventMakers = () => {
+      if (!mapInstance.value || !mapMarkerClusterInstance.value) return;
+      const markerList = [];
+      Object.values(mapDataObject.value).forEach((list) => {
+        markerList.push(...list);
+      });
+
+      mapMarkerClusterInstance.value.clearLayers();
+      const icon = L.icon({
+        iconUrl: 'images/marker-blue.svg',
+        iconSize: [33, 41],
+        iconAnchor: [22, 62],
+        popupAnchor: [0, -60],
+      });
+      markerList.map(({ geoposition }) => {
+        const coordinates = geoposition.split(',');
+        const latitude = parseFloat(coordinates[0]);
+        const longitude = parseFloat(coordinates[1]);
+        if (latitude && longitude) {
+          mapMarkerClusterInstance.value.addLayer(
+            L.marker([latitude, longitude], { icon })
+          );
+        }
+      });
+
+      mapInstance.value.addLayer(mapMarkerClusterInstance.value);
+    };
+    const handleAddUserLocationMarker = () => {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          const { latitude, longitude } = position.coords;
+          const icon = L.icon({
+            iconUrl: '/images/marker-orange.svg',
+            iconSize: [33, 41],
+            iconAnchor: [22, 62],
+            popupAnchor: [0, -60],
+          });
+          L.marker([latitude, longitude], { icon }).addTo(mapInstance.value);
         },
-        mounted: function () {
-            this.onSubmit();
-            this.setSelectedCountryToCenterMap();
+        (err) => {
+          console.error('Geolocation error:', err);
         }
-    }
+      );
+    };
+
+    const handleInitMap = () => {
+      mapInstance.value = L.map('mapid');
+      mapInstance.value.setView([51, 10], 5);
+      L.tileLayer(props.mapTileUrl, {
+        maxZoom: 18,
+        attribution: '© <a href="https://www.mapbox.com/">Mapbox</a>',
+        tileSize: 512,
+        zoomOffset: -1,
+        zoomControl: false,
+      }).addTo(mapInstance.value);
+
+      mapMarkerClusterInstance.value = L.markerClusterGroup();
+    };
+
+    const handleToggleMapFullScreen = (isFullScreen) => {
+      const el = mapContainerRef.value;
+      if (!el) return;
+
+      const className =
+        'fixed left-0 top-[139px] md:top-[123px] z-[110] h-[calc(100dvh-139px)] md:h-[calc(100dvh-123px)]';
+
+      if (isFullScreen) {
+        el.classList.add(...className.split(' '));
+      } else {
+        el.classList.remove(...className.split(' '));
+      }
+    };
+
+    onMounted(() => {
+      onSubmit();
+      setSelectedCountryToCenterMap();
+
+      document.addEventListener('leaflet-ready', () => {
+        handleInitMap();
+        setSelectedCountryToCenterMap();
+        handleAddEventMakers();
+        handleAddUserLocationMarker();
+      });
+    });
+
+    return {
+      mapContainerRef,
+      languageOptions,
+      activityFormatOptions,
+      activityTypeOptions,
+      ageOptions,
+      filters,
+
+      removeSelectedItem,
+      removeAllSelectedItems,
+
+      isLoading,
+      events,
+      errors,
+      tags,
+      pagination,
+      scrollToTop,
+      paginate,
+      onSubmit,
+      limit,
+      handleToggleMapFullScreen,
+    };
+  },
+};
 </script>
 
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
diff --git a/resources/js/components/activity-form/AddConfirmation.vue b/resources/js/components/activity-form/AddConfirmation.vue
new file mode 100644
index 000000000..bbc51972c
--- /dev/null
+++ b/resources/js/components/activity-form/AddConfirmation.vue
@@ -0,0 +1,252 @@
+<template>
+  <div class="flex flex-col gap-12 w-full">
+    <div v-for="{ title, list } in stepDataList" class="flex flex-col gap-6">
+      <h2
+        class="text-dark-blue text-2xl md:text-[30px] leading-[44px] font-medium font-['Montserrat'] text-center"
+      >
+        {{ title }}
+      </h2>
+
+      <div class="flex flex-col gap-1">
+        <div
+          v-for="{ label, value, htmlValue, imageUrl, imageName } in list"
+          class="flex gap-10 items-center px-4 py-2 text-[16px] md:text-xl text-slate-500 bg-white"
+        >
+          <div class="flex-shrink-0 w-32 md:w-60">{{ label }}</div>
+          <div
+            v-if="htmlValue"
+            v-html="htmlValue"
+            class="flex-grow w-full space-y-2 [&_p]:py-0"
+          />
+          <div v-if="imageUrl">
+            <div class="mb-2">Image attached</div>
+            <img class="max-h-80 mb-2" :src="imageUrl" />
+            <div>{{ imageName }}</div>
+          </div>
+          <div v-if="value" class="flex-grow w-full">{{ value || '' }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue';
+import { trans } from 'laravel-vue-i18n';
+
+import { useDataOptions } from './mixins.js';
+
+export default {
+  props: {
+    formValues: Object,
+    themes: Array,
+    audiences: Array,
+    leadingTeachers: Array,
+    languages: Object,
+    countries: Array,
+  },
+  components: {},
+  setup(props, { emit }) {
+    const {
+      activityFormatOptionsMap,
+      activityTypeOptionsMap,
+      recurringFrequentlyMap,
+      durationOptionsMap,
+      recurringTypeOptionsMap,
+      ageOptionsMap,
+      organizerTypeOptionsMap,
+    } = useDataOptions();
+
+    const stepDataList = computed(() => {
+      // Step 1
+      const {
+        title,
+        activity_format,
+        activity_type,
+        location,
+        duration,
+        start_date,
+        end_date,
+        is_recurring_event_local,
+        recurring_event,
+        recurring_type,
+        theme: themes,
+        description,
+      } = props.formValues || {};
+
+      const formatValues = (activity_format || []).map(
+        (item) => activityFormatOptionsMap.value[item]
+      );
+      const typeValue = activityTypeOptionsMap.value[activity_type];
+      const durationValue = durationOptionsMap.value[duration];
+      const startDateValue = start_date
+        ? new Date(start_date).toISOString().slice(0, 10)
+        : '';
+      const endDateValue = end_date
+        ? new Date(end_date).toISOString().slice(0, 10)
+        : '';
+
+      const isRecurring = is_recurring_event_local === 'true';
+      const recurringType = recurringTypeOptionsMap.value[recurring_type];
+      const themeValues = (themes || [])
+        .map((item) => props.themes.find(({ id }) => id === item)?.name)
+        .map((name) => trans(`event.theme.${name}`));
+
+      const step1List = [
+        { label: trans('event.title.label'), value: title },
+        {
+          label: 'Specify the format of the activity',
+          value: formatValues.join(', '),
+        },
+        { label: trans('event.activitytype.label'), value: typeValue },
+        { label: trans('event.address.label'), value: location },
+        { label: 'Activity duration', value: durationValue },
+        { label: 'Date', value: `${startDateValue} - ${endDateValue}` },
+        {
+          label: 'Is it a recurring event?',
+          value: isRecurring ? 'Yes' : 'No',
+        },
+        {
+          label: 'How frequently?',
+          value: isRecurring
+            ? recurringFrequentlyMap.value[recurring_event]
+            : '',
+        },
+        { label: 'What type of recurring activity?', value: recurringType },
+        { label: 'Theme?', value: themeValues.join(', ') },
+        { label: 'Activity description', htmlValue: description },
+      ];
+
+      // Step 2
+      const {
+        audience: audiences,
+        participants_count,
+        males_count,
+        females_count,
+        other_count,
+        ages,
+        is_extracurricular_event,
+        is_standard_school_curriculum,
+        codeweek_for_all_participation_code,
+        leading_teacher_tag,
+        pictureUrl,
+        picture,
+      } = props.formValues || {};
+
+      const audienceValues = (audiences || [])
+        .map((item) => props.audiences.find(({ id }) => id === item)?.name)
+        .map((name) => trans(`event.audience.${name}`));
+      const participantsValue = [
+        participants_count || 0,
+        [
+          `${males_count || 0} Males`,
+          `${females_count || 0} Females`,
+          `${other_count || 0} Other`,
+        ].join(', '),
+      ].join(' - ');
+      const ageValues = (ages || []).map((item) => ageOptionsMap.value[item]);
+      const teacherValues = (leading_teacher_tag || []).map(
+        (item) => props.leadingTeachers.find(({ id }) => id === item)?.name
+      );
+
+      const step2List = [
+        {
+          label: trans('event.audience_title'),
+          value: audienceValues?.join(', '),
+        },
+        {
+          label: 'Number of participants',
+          value: participantsValue,
+        },
+        {
+          label: 'Age',
+          value: ageValues?.join(', '),
+        },
+        {
+          label: 'Is this an extracurricular activity?',
+          value: is_extracurricular_event === 'true' ? 'Yes' : 'No',
+        },
+        {
+          label: 'Is this an activity within the standard school curriculum?',
+          value: is_standard_school_curriculum === 'true' ? 'Yes' : 'No',
+        },
+        {
+          label: 'Code Week 4 All code (optional)',
+          value: codeweek_for_all_participation_code,
+        },
+        {
+          label: trans('community.titles.2'),
+          value: teacherValues?.join(', '),
+        },
+        {
+          label: trans('event.image'),
+          imageUrl: pictureUrl,
+          imageName: picture?.split('/')?.reverse()?.[0],
+        },
+      ];
+
+      // Step 3
+      const {
+        organizer,
+        organizer_type,
+        language,
+        country_iso,
+        is_use_resource,
+        event_url,
+        contact_person,
+        user_email,
+      } = props.formValues || {};
+      const organizerTypeValue = organizerTypeOptionsMap.value[organizer_type];
+
+      const languageValue = Object.entries(props.languages).find(
+        ([key]) => key === language
+      )?.[1];
+      const countryValue = props.countries.find(
+        ({ iso }) => iso === country_iso
+      )?.name;
+
+      const step3List = [
+        { label: trans('event.organizer.label'), value: organizer },
+        {
+          label: trans('event.organizertype.label'),
+          value: organizerTypeValue,
+        },
+        {
+          label: trans('resources.Languages'),
+          value: languageValue,
+        },
+        {
+          label: trans('event.country'),
+          value: countryValue,
+        },
+        {
+          label: 'Is this an activity within the standard school curriculum?',
+          value: is_use_resource === 'true' ? 'Yes' : 'No',
+        },
+        {
+          label: trans('event.website.label'),
+          value: event_url,
+        },
+        {
+          label: trans('event.public.label'),
+          value: contact_person,
+        },
+        {
+          label: trans('event.contact.label'),
+          value: user_email,
+        },
+      ];
+
+      return [
+        { title: 'Activity overview', list: step1List },
+        { title: 'Who is the activity for', list: step2List },
+        { title: 'Organiser', list: step3List },
+      ];
+    });
+
+    return {
+      stepDataList,
+    };
+  },
+};
+</script>
diff --git a/resources/js/components/activity-form/FormStep1.vue b/resources/js/components/activity-form/FormStep1.vue
new file mode 100644
index 000000000..c3a095278
--- /dev/null
+++ b/resources/js/components/activity-form/FormStep1.vue
@@ -0,0 +1,292 @@
+<template>
+  <div class="flex flex-col gap-4 w-full">
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      :label="`${$t('event.title.label')}*`"
+      name="title"
+      :errors="errors"
+    >
+      <InputField
+        v-model="formValues.title"
+        required
+        name="title"
+        :placeholder="$t('event.title.placeholder')"
+      />
+    </FieldWrapper>
+
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      label="Specify the format of the activity"
+      name="activity_format"
+      :errors="errors"
+    >
+      <SelectField
+        v-model="formValues.activity_format"
+        multiple
+        name="activity_format"
+        :options="activityFormatOptions"
+      />
+    </FieldWrapper>
+
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      :label="`${$t('event.activitytype.label')}*`"
+      name="activity_type"
+      :errors="errors"
+    >
+      <SelectField
+        v-model="formValues.activity_type"
+        required
+        name="activity_type"
+        :options="activityTypeOptions"
+      />
+
+      <template #end>
+        <div
+          class="w-full flex gap-4 bg-dark-blue-50 border border-dark-blue-100 rounded-2xl p-4 mt-2.5"
+        >
+          <img class="flex-shrink-0 mt-1 w-5 h-5" src="/images/icon_info.svg" />
+          <span class="text-slate-500 text-xl">
+            Any address added below won’t be shown publicly for invite-only
+            actitivities.
+          </span>
+        </div>
+      </template>
+    </FieldWrapper>
+
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      :label="`${$t('event.address.label')} ${
+        ['open-online', 'invite-online'].includes(formValues.activity_type)
+          ? '(optional)'
+          : '*'
+      }`"
+      name="location"
+      :errors="errors"
+    >
+      <autocomplete-geo
+        class="custom-geo-input"
+        name="location"
+        :placeholder="$t('event.address.placeholder')"
+        :location="formValues.location"
+        :value="formValues.location"
+        :geoposition="formValues.geoposition"
+        @onChange="handleLocationChange"
+      ></autocomplete-geo>
+    </FieldWrapper>
+
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      label="Activity duration*"
+      name="duration"
+      :errors="errors"
+    >
+      <div class="w-full md:w-1/2">
+        <SelectField
+          v-model="formValues.duration"
+          required
+          name="duration"
+          :options="durationOptions"
+        />
+      </div>
+    </FieldWrapper>
+
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      label="Date*"
+      :names="['start_date', 'end_date']"
+      :errors="errors"
+    >
+      <div
+        class="w-full flex px-3 justify-between items-center text-gray-700 whitespace-nowrap rounded-3xl border-2 border-dark-blue-200 h-[50px] bg-white"
+      >
+        <date-time
+          name="start_date"
+          :placeholder="$t('event.start.label')"
+          :value="formValues.start_date"
+          @onChange="formValues.start_date = $event"
+        ></date-time>
+
+        <span>-</span>
+
+        <date-time
+          name="end_date"
+          :placeholder="$t('event.end.label')"
+          :value="formValues.end_date"
+          @onChange="formValues.end_date = $event"
+        ></date-time>
+      </div>
+    </FieldWrapper>
+
+    <!-- new -->
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      label="Is it a recurring event?*"
+      name="recurring_event"
+      :errors="errors"
+    >
+      <div class="flex items-center gap-8 min-h-[48px]">
+        <RadioField
+          v-model="formValues.is_recurring_event_local"
+          name="is_recurring_event_local"
+          value="true"
+          label="True"
+        />
+        <RadioField
+          v-model="formValues.is_recurring_event_local"
+          name="is_recurring_event_local"
+          value="false"
+          label="False"
+        />
+      </div>
+
+      <div
+        v-if="formValues.is_recurring_event_local === 'true'"
+        class="w-full bg-dark-blue-50 border border-dark-blue-100 rounded-2xl p-4 mt-4"
+      >
+        <label class="block text-slate-500 text-xl font-semibold mb-2">
+          How frequently?
+        </label>
+
+        <div class="flex items-center gap-8">
+          <RadioField
+            v-model="formValues.recurring_event"
+            name="recurring_event"
+            value="daily"
+            label="Daily"
+          />
+          <RadioField
+            v-model="formValues.recurring_event"
+            name="recurring_event"
+            value="weekly"
+            label="Weekly"
+          />
+          <RadioField
+            v-model="formValues.recurring_event"
+            name="recurring_event"
+            value="monthly"
+            label="Monthly"
+          />
+        </div>
+
+        <label class="block text-slate-500 text-xl font-semibold mb-2 mt-6">
+          What type of recurring activity?
+        </label>
+
+        <SelectField
+          v-model="formValues.recurring_type"
+          name="recurring_type"
+          :options="recurringTypeOptions"
+        />
+      </div>
+    </FieldWrapper>
+
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      label="Theme*"
+      name="theme"
+      :errors="errors"
+    >
+      <SelectField
+        v-model="formValues.theme"
+        multiple
+        required
+        name="theme"
+        placeholder="Select theme"
+        :options="themes"
+      />
+    </FieldWrapper>
+
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      label="Activity description*"
+      name="description"
+      :errors="errors"
+    >
+      <div class="custom-tinymce">
+        <textarea
+          class="hidden"
+          cols="40"
+          id="id_description"
+          name="description"
+          :placeholder="$t('event.description.placeholder')"
+          rows="10"
+          @change="hanleChangeDescription"
+        />
+      </div>
+    </FieldWrapper>
+  </div>
+</template>
+
+<script>
+import { onMounted } from 'vue';
+
+import { useDataOptions } from './mixins.js';
+
+import FieldWrapper from '../form-fields/FieldWrapper.vue';
+import SelectField from '../form-fields/SelectField.vue';
+import InputField from '../form-fields/InputField.vue';
+import RadioField from '../form-fields/RadioField.vue';
+
+export default {
+  props: {
+    errors: Object,
+    formValues: Object,
+    themes: Array,
+    location: Object,
+    countries: Array,
+  },
+  components: {
+    FieldWrapper,
+    SelectField,
+    InputField,
+    RadioField,
+  },
+  setup(props, { emit }) {
+    const {
+      activityFormatOptions,
+      activityTypeOptions,
+      durationOptions,
+      recurringTypeOptions,
+    } = useDataOptions();
+
+    const handleLocationChange = ({ location, geoposition, country_iso }) => {
+      props.formValues.location = location;
+      props.formValues.geoposition = geoposition;
+      const foundCountry = props.countries.find(
+        ({ iso }) => iso === country_iso
+      );
+      props.formValues.country_iso = foundCountry;
+    };
+
+    onMounted(() => {
+      document.addEventListener('tinymce-ready', () => {
+        tinymce.init({
+          selector: '#id_description',
+          height: 400,
+          width: '100%',
+          setup: function (editor) {
+            editor.on('init', function () {
+              editor.setContent(props.formValues.description || '');
+            });
+
+            editor.on('change input', function () {
+              const content = editor.getContent();
+              props.formValues.description = content;
+              editor.save();
+            });
+          },
+        });
+      });
+    });
+
+    return {
+      activityFormatOptions,
+      activityTypeOptions,
+      durationOptions,
+      recurringTypeOptions,
+      handleLocationChange,
+    };
+  },
+};
+</script>
diff --git a/resources/js/components/activity-form/FormStep2.vue b/resources/js/components/activity-form/FormStep2.vue
new file mode 100644
index 000000000..96f2792f0
--- /dev/null
+++ b/resources/js/components/activity-form/FormStep2.vue
@@ -0,0 +1,254 @@
+<template>
+  <div class="flex flex-col gap-4 w-full">
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      :label="`${$t('event.audience_title')}*`"
+      name="audience"
+      :errors="errors"
+    >
+      <SelectField
+        v-model="formValues.audience"
+        multiple
+        name="audience"
+        :options="audiences"
+      />
+    </FieldWrapper>
+
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      label="Number of participants*"
+      name="participants_count"
+      :errors="errors"
+    >
+      <InputField
+        v-model="formValues.participants_count"
+        type="number"
+        :min="0"
+        required
+        name="participants_count"
+        placeholder="Enter number"
+        @onChange="handleCorrectCount('participants_count')"
+      />
+
+      <template #end>
+        <div
+          class="w-full flex flex-col gap-4 bg-dark-blue-50 border border-dark-blue-100 rounded-2xl p-4 mt-2.5"
+        >
+          <label class="block text-slate-500 text-xl font-semibold mb-2">
+            Of this number, how many are
+          </label>
+
+          <div class="grid grid-cols-2 gap-x-8 gap-y-4">
+            <FieldWrapper label="Males" name="males_count" :errors="errors">
+              <InputField
+                v-model="formValues.males_count"
+                type="number"
+                :min="0"
+                :max="formValues.participants_count"
+                name="males_count"
+                placeholder="Enter number"
+                @onChange="handleCorrectCount('males_count')"
+              />
+            </FieldWrapper>
+            <FieldWrapper label="Females" name="females_count" :errors="errors">
+              <InputField
+                v-model="formValues.females_count"
+                type="number"
+                :min="0"
+                :max="formValues.participants_count"
+                name="females_count"
+                placeholder="Enter number"
+                @onChange="handleCorrectCount('females_count')"
+              />
+            </FieldWrapper>
+            <FieldWrapper label="Other" name="other_count" :errors="errors">
+              <InputField
+                v-model="formValues.other_count"
+                disabled
+                type="number"
+                :min="0"
+                :max="formValues.participants_count"
+                name="other_count"
+                placeholder="Enter number"
+                @onChange="handleCorrectCount('other_count')"
+              />
+            </FieldWrapper>
+          </div>
+        </div>
+      </template>
+    </FieldWrapper>
+
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      label="Age*"
+      name="ages"
+      :errors="errors"
+    >
+      <div class="w-1/2">
+        <SelectField
+          v-model="formValues.ages"
+          multiple
+          name="ages"
+          :options="ageOptions"
+        />
+      </div>
+    </FieldWrapper>
+
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      label="Is this an extracurricular activity?*"
+      name="is_extracurricular_event"
+      :errors="errors"
+    >
+      <div class="flex items-center gap-8 min-h-[48px] h-full">
+        <RadioField
+          v-model="formValues.is_extracurricular_event"
+          name="is_extracurricular_event"
+          value="true"
+          label="True"
+        />
+        <RadioField
+          v-model="formValues.is_extracurricular_event"
+          name="is_extracurricular_event"
+          value="false"
+          label="False"
+        />
+      </div>
+    </FieldWrapper>
+
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      label="Is this an activity within the standard school curriculum?"
+      name="is_standard_school_curriculum"
+      :errors="errors"
+    >
+      <div class="flex items-center gap-8 min-h-[48px] h-full">
+        <RadioField
+          v-model="formValues.is_standard_school_curriculum"
+          name="is_standard_school_curriculum"
+          value="true"
+          label="True"
+        />
+        <RadioField
+          v-model="formValues.is_standard_school_curriculum"
+          name="is_standard_school_curriculum"
+          value="false"
+          label="False"
+        />
+      </div>
+    </FieldWrapper>
+
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      label="Code Week 4 All code (optional)"
+      name="codeweek_for_all_participation_code"
+      :errors="errors"
+    >
+      <InputField
+        v-model="formValues.codeweek_for_all_participation_code"
+        name="codeweek_for_all_participation_code"
+      />
+    </FieldWrapper>
+
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      :label="`${$t('community.titles.2')} (optional)`"
+      name="leading_teacher_tag"
+      :errors="errors"
+    >
+      <SelectField
+        v-model="formValues.leading_teacher_tag"
+        name="leading_teacher_tag"
+        :options="leadingTeachers"
+      />
+    </FieldWrapper>
+
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      :label="`${$t('event.image')} (optional)`"
+      name="picture"
+      :errors="errors"
+    >
+      <ImageField
+        name="picture"
+        :picture="formValues.pictureUrl"
+        :image="formValues.picture"
+        @onChange="onPictureChange"
+      />
+    </FieldWrapper>
+  </div>
+</template>
+
+<script>
+import { ref, computed } from 'vue';
+import { useDataOptions } from './mixins.js';
+
+import FieldWrapper from '../form-fields/FieldWrapper.vue';
+import SelectField from '../form-fields/SelectField.vue';
+import InputField from '../form-fields/InputField.vue';
+import RadioField from '../form-fields/RadioField.vue';
+import ImageField from '../form-fields/ImageField.vue';
+
+export default {
+  props: {
+    errors: Object,
+    formValues: Object,
+    audiences: Array,
+    leadingTeachers: Array,
+  },
+  components: {
+    FieldWrapper,
+    SelectField,
+    InputField,
+    RadioField,
+    ImageField,
+  },
+  setup(props, { emit }) {
+    const { ageOptions } = useDataOptions();
+
+    const onPictureChange = (data) => {
+      props.formValues.picture = data.imageName;
+      props.formValues.pictureUrl = data.path;
+    };
+
+    const handleCorrectCount = (field) => {
+      const participants_count = Number(
+        props.formValues.participants_count || '0'
+      );
+      const males_count = Number(props.formValues.males_count || '0');
+      const females_count = Number(props.formValues.females_count || '0');
+      const other_count = Number(props.formValues.other_count || '0');
+      if (males_count + females_count > participants_count) {
+        props.formValues.other_count = 0;
+        if (males_count < participants_count) {
+          props.formValues.females_count = null;
+          props.formValues.females_count = participants_count - males_count;
+        } else {
+          props.formValues.males_count = null;
+          props.formValues.males_count = participants_count;
+          props.formValues.females_count = null;
+          props.formValues.females_count = 0;
+        }
+      }
+      props.formValues.other_count = Math.max(
+        participants_count - (males_count + females_count),
+        0
+      );
+      console.log(
+        field,
+        participants_count,
+        males_count,
+        females_count,
+        other_count,
+        Math.max(participants_count - (males_count + females_count), 0)
+      );
+    };
+
+    return {
+      ageOptions,
+      onPictureChange,
+      handleCorrectCount,
+    };
+  },
+};
+</script>
diff --git a/resources/js/components/activity-form/FormStep3.vue b/resources/js/components/activity-form/FormStep3.vue
new file mode 100644
index 000000000..53c5ef587
--- /dev/null
+++ b/resources/js/components/activity-form/FormStep3.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="flex flex-col gap-4 w-full">
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      :label="`${$t('event.organizer.label')}*`"
+      name="organizer"
+      :errors="errors"
+    >
+      <InputField
+        v-model="formValues.organizer"
+        required
+        name="organizer"
+        :placeholder="$t('event.organizer.placeholder')"
+      />
+    </FieldWrapper>
+
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      :label="`${$t('event.organizertype.label')}*`"
+      name="organizer_type"
+      :errors="errors"
+    >
+      <SelectField
+        v-model="formValues.organizer_type"
+        required
+        name="organizer_type"
+        :options="organizerTypeOptions"
+      />
+    </FieldWrapper>
+
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      :label="`${$t('resources.Languages')} (optional)`"
+      name="language"
+      :errors="errors"
+    >
+      <SelectField
+        v-model="formValues.language"
+        name="language"
+        :options="languageOptions"
+      />
+    </FieldWrapper>
+
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      :label="`${$t('event.country')}*`"
+      name="country_iso"
+      :errors="errors"
+    >
+      <SelectField
+        v-model="formValues.country_iso"
+        id-name="iso"
+        required
+        name="country_iso"
+        :options="countries"
+      />
+    </FieldWrapper>
+
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      label="Are you using any Code Week resources in this activity?"
+      name="is_use_resource"
+      :errors="errors"
+    >
+      <div class="flex items-center gap-8 min-h-[48px] h-full">
+        <RadioField
+          v-model="formValues.is_use_resource"
+          name="is_use_resource"
+          value="true"
+          label="True"
+        />
+        <RadioField
+          v-model="formValues.is_use_resource"
+          name="is_use_resource"
+          value="false"
+          label="False"
+        />
+      </div>
+    </FieldWrapper>
+
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      :label="`${$t('event.website.label')} ${
+        ['open-online', 'invite-online'].includes(formValues.activity_type)
+          ? '*'
+          : '(optional)'
+      }`"
+      name="event_url"
+      :errors="errors"
+    >
+      <InputField
+        v-model="formValues.event_url"
+        name="event_url"
+        :placeholder="$t('event.website.placeholder')"
+      />
+    </FieldWrapper>
+
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      :label="`${$t('event.public.label')} (optional)`"
+      name="contact_person"
+      :errors="errors"
+    >
+      <InputField
+        v-model="formValues.contact_person"
+        type="email"
+        name="contact_person"
+        :placeholder="$t('event.public.placeholder')"
+      />
+    </FieldWrapper>
+
+    <FieldWrapper
+      horizontalBreakpoint="md"
+      :label="`${$t('event.contact.label')}*`"
+      name="user_email"
+      :errors="errors"
+    >
+      <InputField
+        v-model="formValues.user_email"
+        required
+        type="email"
+        name="user_email"
+        :placeholder="$t('event.contact.placeholder')"
+      />
+
+      <template #end>
+        <div class="w-full flex gap-2.5 mt-4">
+          <img class="flex-shrink-0 w-6 h-6" src="/images/icon_info.svg" />
+
+          <div class="text-slate-400 text-xs mt-1">
+            {{ $t('event.contact.explanation') }}
+          </div>
+        </div>
+      </template>
+    </FieldWrapper>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue';
+import { trans } from 'laravel-vue-i18n';
+
+import { useDataOptions } from './mixins.js';
+
+import FieldWrapper from '../form-fields/FieldWrapper.vue';
+import SelectField from '../form-fields/SelectField.vue';
+import InputField from '../form-fields/InputField.vue';
+import RadioField from '../form-fields/RadioField.vue';
+import ImageField from '../form-fields/ImageField.vue';
+
+export default {
+  props: {
+    errors: Object,
+    formValues: Object,
+    languages: Object,
+    countries: Array,
+  },
+  components: {
+    FieldWrapper,
+    SelectField,
+    InputField,
+    RadioField,
+    ImageField,
+  },
+  setup(props, { emit }) {
+    const { organizerTypeOptions } = useDataOptions();
+
+    const languageOptions = computed(() =>
+      Object.entries(props.languages).map(([key, value]) => ({
+        id: key,
+        name: value,
+      }))
+    );
+
+    return {
+      organizerTypeOptions,
+      languageOptions,
+    };
+  },
+};
+</script>
diff --git a/resources/js/components/activity-form/index.vue b/resources/js/components/activity-form/index.vue
new file mode 100644
index 000000000..384f4f73c
--- /dev/null
+++ b/resources/js/components/activity-form/index.vue
@@ -0,0 +1,465 @@
+<template>
+  <div
+    v-if="step < 4"
+    class="relative py-10 codeweek-container-lg flex justify-center"
+  >
+    <div class="flex gap-12">
+      <template v-for="(stepItem, index) in stepItems">
+        <div
+          class="relative flex flex-col items-center gap-2 flex-1 md:w-52 cursor-pointer"
+        >
+          <div
+            class="w-12 h-12 rounded-full flex justify-center items-center text-['#20262C'] font-semibold text-2xl"
+            :class="[
+              step === index + 1 ? 'bg-light-blue-300' : 'bg-light-blue-100',
+            ]"
+          >
+            {{ index + 1 }}
+          </div>
+          <div class="flex-1">
+            <p
+              class="text-slate-500 font-normal text-base leading-[22px] p-0 text-center"
+            >
+              {{ stepItem.name }}
+            </p>
+          </div>
+          <div
+            v-if="index < stepItems.length - 1"
+            class="absolute top-6 left-[calc(100%+1.5rem)] -translate-x-1/2 w-[calc(100%-1rem)] md:w-[calc(100%-0.75rem)] h-[2px] bg-[#CCF0F9]"
+          ></div>
+        </div>
+      </template>
+    </div>
+  </div>
+
+  <div
+    v-if="step === 4"
+    class="relative codeweek-container-lg flex justify-center px-4 md:px-10 py-10 md:py-20"
+  >
+    <div
+      class="flex flex-col justify-center items-center text-center gap-4 max-w-[660px]"
+    >
+      <div
+        class="flex justify-center items-center w-16 h-16 bg-dark-blue rounded-full"
+      >
+        <img class="w-6" src="/images/check-white.svg" />
+      </div>
+
+      <div
+        class="text-dark-blue text-[22px] md:text-4xl font-semibold font-[Montserrat]"
+      >
+        Thank you for adding your activity!
+      </div>
+
+      <div class="flex flex-col gap-4 text-[16px] text-center">
+        <div>
+          One of the EU Code Week Ambassadors or organisers will now review your
+          activity
+          <span class="text-dark-blue font-semibold underline">{{
+            formValues.title
+          }}</span>
+          and make sure everything is ok. If you have questions, get in touch
+          with the EU Code Week Ambassadors or organisers.
+        </div>
+        <div>
+          You can share your Code Week 4 all code with other people:
+          {{ formValues.codeweek_for_all_participation_code }}
+        </div>
+        <div>See the information you supplied below:</div>
+      </div>
+    </div>
+  </div>
+
+  <div ref="containerRef" class="w-full relative">
+    <div
+      class="absolute w-full h-full bg-gray-10 md:hidden"
+      style="clip-path: ellipse(370% 90% at 38% 90%)"
+    ></div>
+    <div
+      class="absolute w-full h-full bg-gray-10 hidden md:block lg:hidden"
+      style="clip-path: ellipse(488% 90% at 50% 90%)"
+    ></div>
+    <div
+      class="absolute w-full h-full bg-gray-10 hidden lg:block xl:hidden"
+      style="clip-path: ellipse(188% 90% at 50% 90%)"
+    ></div>
+    <div
+      class="absolute w-full h-full bg-gray-10 hidden xl:block"
+      style="clip-path: ellipse(158% 90% at 50% 90%)"
+    ></div>
+
+    <div class="codeweek-container-lg relative pt-20 pb-16 md:pt-32 md:pb-20">
+      <div class="flex justify-center">
+        <div class="flex flex-col max-w-[852px] w-full">
+          <h2
+            v-if="stepItems[step - 1]?.title"
+            class="text-dark-blue text-2xl md:text-4xl leading-[44px] font-medium font-['Montserrat'] mb-10 text-center"
+          >
+            {{ stepItems[step - 1]?.title }}
+          </h2>
+
+          <div :class="[step !== 1 && 'hidden']">
+            <FormStep1
+              :errors="errors"
+              :formValues="formValues"
+              :themes="themes"
+              :location="location"
+              :countries="countries"
+            />
+          </div>
+          <div :class="[step !== 2 && 'hidden']">
+            <FormStep2
+              :errors="errors"
+              :formValues="formValues"
+              :audiences="audiences"
+              :leadingTeachers="leadingTeachers"
+            />
+          </div>
+          <div :class="[step !== 3 && 'hidden']">
+            <FormStep3
+              :errors="errors"
+              :formValues="formValues"
+              :languages="languages"
+              :countries="countries"
+            />
+
+            <CheckboxField
+              class="mt-10"
+              v-model="formValues.privacy"
+              name="privacy"
+            >
+              <div class="flex gap-5 items-center">
+                {{ $t('event.privacy') }}
+                <a class="block w-5" :href="privacyLink" target="_blank">
+                  <img src="/images/external-link.svg" width="20" />
+                </a>
+              </div>
+            </CheckboxField>
+          </div>
+
+          <div :class="[step !== 4 && 'hidden']">
+            <AddConfirmation
+              :formValues="formValues"
+              :themes="themes"
+              :location="location"
+              :audiences="audiences"
+              :leadingTeachers="leadingTeachers"
+              :languages="languages"
+              :countries="countries"
+            />
+          </div>
+
+          <div class="flex flex-wrap justify-between mt-10 gap-y-2 gap-x-4">
+            <button
+              v-if="step > 1"
+              class="flex justify-center items-center gap-2 text-[#1C4DA1] border-solid border-2 border-[#1C4DA1] rounded-full py-2.5 px-6 font-semibold text-lg transition-all duration-300 hover:bg-[#E8EDF6] max-sm:w-full sm:min-w-[224px]"
+              type="button"
+              @click="
+                () => {
+                  if (step === 4) handleGoHomePage();
+                  else handleMoveStep(-1);
+                }
+              "
+            >
+              <span v-if="step === 4">Back to homepage</span>
+              <span v-else>Previous step</span>
+            </button>
+
+            <div />
+
+            <button
+              class="text-nowrap flex justify-center items-center bg-primary hover:bg-hover-orange duration-300 text-[#20262C] rounded-full py-2.5 px-6 font-semibold text-lg max-sm:w-full sm:min-w-[224px]"
+              type="button"
+              @click="
+                () => {
+                  if (step === 4) handleReloadPage();
+                  else if (step === 3) handleSubmit();
+                  else handleMoveStep(1);
+                }
+              "
+            >
+              <span v-if="step === 4">Add another activity</span>
+              <span v-else-if="step === 3">Submit</span>
+              <span v-else>Next step</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, watch } from 'vue';
+import axios from 'axios';
+import _ from 'lodash';
+
+import { useDataOptions } from './mixins.js';
+
+import FormStep1 from './FormStep1.vue';
+import FormStep2 from './FormStep2.vue';
+import FormStep3 from './FormStep3.vue';
+import AddConfirmation from './AddConfirmation.vue';
+import CheckboxField from '../form-fields/CheckboxField.vue';
+
+export default {
+  props: {
+    token: {
+      type: String,
+      default: '',
+    },
+    event: {
+      type: Object,
+      default: () => ({}),
+    },
+    selectedValues: {
+      type: Object,
+      default: () => ({}),
+    },
+    locale: {
+      type: String,
+      default: '',
+    },
+    user: {
+      type: Object,
+      default: () => ({}),
+    },
+    themes: {
+      type: Array,
+      default: () => [],
+    },
+    audiences: {
+      type: Array,
+      default: () => [],
+    },
+    leadingTeachers: {
+      type: Array,
+      default: () => [],
+    },
+    languages: {
+      type: Object,
+      default: () => ({}),
+    },
+    countries: {
+      type: Array,
+      default: () => [],
+    },
+    location: {
+      type: Object,
+      default: () => ({}),
+    },
+    privacyLink: {
+      type: String,
+      default: '',
+    },
+  },
+  components: {
+    FormStep1,
+    FormStep2,
+    FormStep3,
+    AddConfirmation,
+    CheckboxField,
+  },
+  setup(props, { emit }) {
+    const { stepItems } = useDataOptions();
+
+    const containerRef = ref(null);
+    const step = ref(1);
+    const errors = ref({});
+    const formValues = ref({
+      // step 1
+      activity_type: 'open-in-person',
+      location: props.location?.location || '',
+      geoposition: props.location?.geoposition?.split(',') || [],
+      is_recurring_event_local: 'false',
+      recurring_event: 'daily',
+
+      // step 2
+      is_extracurricular_event: 'false',
+      is_standard_school_curriculum: 'false',
+
+      // step 3,
+      organizer: props.location?.name || '',
+      organizer_type: props?.location?.organizer_type || '',
+      language: props.locale || '',
+      country_iso: props.location.country_iso || '',
+      is_use_resource: 'false',
+      privacy: String(props.user?.privacy === 1),
+    });
+
+    const handleMoveStep = (move) => {
+      step.value = Math.max(
+        Math.min(step.value + move, props.event.id ? 3 : 4),
+        1
+      );
+    };
+
+    const handleGoHomePage = () => (window.location.href = '/');
+
+    const handleReloadPage = () => window.location.reload();
+
+    const handleSubmit = async () => {
+      errors.value = {};
+
+      const values = formValues.value;
+      const payload = {
+        _token: props.token,
+        _method: !_.isNil(props.event.id) ? 'PATCH' : undefined,
+        // step 1
+        title: values.title,
+        activity_format: values.activity_format?.join(','),
+        activity_type: values.activity_type,
+        location: values.location,
+        geoposition: values.geoposition?.join(',') || [],
+        duration: values.duration,
+        start_date: values.start_date,
+        end_date: values.end_date,
+        theme: values.theme?.join(','),
+        description: values.description,
+        // step 2
+        audience: values.audience?.join(','),
+        participants_count: values.participants_count,
+        males_count: values.males_count,
+        females_count: values.females_count,
+        other_count: values.other_count,
+        ages: values.ages?.join(','),
+        is_extracurricular_event: values.is_extracurricular_event === 'true',
+        is_standard_school_curriculum:
+          values.is_standard_school_curriculum === 'true',
+        codeweek_for_all_participation_code:
+          values.codeweek_for_all_participation_code,
+        leading_teacher_tag: values.leading_teacher_tag,
+        picture: values.picture,
+        // step 3,
+        organizer: values.organizer,
+        organizer_type: values.organizer_type,
+        language: values.language,
+        country_iso: values.country_iso,
+        is_use_resource: values.is_use_resource === 'true',
+        event_url: values.event_url,
+        contact_person: values.contact_person,
+        user_email: values.user_email,
+        privacy: values.privacy === 'true' ? 'on' : undefined,
+      };
+
+      if (values.is_recurring_event_local === 'true') {
+        payload.recurring_event = values.recurring_event;
+        payload.recurring_type = values.recurring_type;
+      }
+
+      try {
+        if (!_.isNil(props.event.id)) {
+          await axios.post(`/events/${props.event.id}`, payload);
+          window.location.href = '/events';
+        } else {
+          await axios.post('/events', payload);
+          handleMoveStep(1);
+        }
+      } catch (error) {
+        errors.value = error.response?.data?.errors;
+        step.value = 1;
+      }
+    };
+
+    watch(
+      () => props.event,
+      () => {
+        if (!props.event.id) return;
+
+        const mapIds = (items) =>
+          items
+            ?.split(',')
+            ?.filter((i) => !!i)
+            ?.map((id) => Number(id)) || [];
+
+        const event = props.event;
+        const geoposition = event.geoposition || props.location?.geoposition;
+        formValues.value = {
+          ...formValues.value,
+          // step 1
+          title: event.title,
+          activity_format: event.activity_format,
+          activity_type: event.activity_type || 'open-in-person',
+          location: event.location || props.location?.location,
+          geoposition: geoposition?.split(','),
+          duration: event.duration,
+          start_date: event.start_date,
+          end_date: event.end_date,
+          recurring_event: event.recurring_event || 'daily',
+          recurring_type: event.recurring_type,
+          theme: mapIds(props.selectedValues.themes),
+          description: event.description,
+
+          // step 2
+          audience: mapIds(props.selectedValues.audiences),
+          participants_count: event.participants_count,
+          males_count: event.males_count,
+          females_count: event.females_count,
+          other_count: event.other_count,
+          ages: event.ages,
+          is_extracurricular_event: String(!!event.is_extracurricular_event),
+          is_standard_school_curriculum: String(
+            !!event.is_standard_school_curriculum
+          ),
+          codeweek_for_all_participation_code:
+            event.codeweek_for_all_participation_code,
+          leading_teacher_tag: event.leading_teacher_tag
+            ? Number(event.leading_teacher_tag)
+            : null,
+          picture: event.picture,
+          pictureUrl: props.selectedValues.picture,
+
+          // step 3,
+          organizer: event.organizer || props.location?.name,
+          organizer_type:
+            event.organizer_type || props?.location?.organizer_type,
+          language: event.language || props.locale,
+          country_iso: event.country_iso || props.location.country_iso,
+          is_use_resource: String(!!event.is_use_resource),
+          event_url: event.event_url,
+          contact_person: event.contact_person,
+          user_email: event.user_email,
+        };
+
+        formValues.value.leading_teacher_tag = event.leading_teacher_tag || [];
+        if (
+          typeof event.leading_teacher_tag === 'number' ||
+          typeof event.leading_teacher_tag === 'string'
+        ) {
+          formValues.value.leading_teacher_tag = [event.leading_teacher_tag];
+        }
+
+        if (event.recurring_event) {
+          formValues.value.is_recurring_event_local = 'true';
+        }
+      },
+      { immediate: true }
+    );
+
+    watch(step, () => {
+      if (step.value === 4) {
+        const heroElement = document.getElementById('add-event-hero-section');
+        if (heroElement) {
+          heroElement.style.display = 'none';
+        }
+        window.scrollTo({ top: 0 });
+      } else if (containerRef.value) {
+        const offsetTop = containerRef.value.getBoundingClientRect().top;
+        window.scrollTo({ top: offsetTop + window.pageYOffset - 40 });
+      }
+    });
+
+    return {
+      containerRef,
+      step,
+      stepItems,
+      errors,
+      formValues,
+      handleGoHomePage,
+      handleReloadPage,
+      handleMoveStep,
+      handleSubmit,
+    };
+  },
+};
+</script>
diff --git a/resources/js/components/activity-form/mixins.js b/resources/js/components/activity-form/mixins.js
new file mode 100644
index 000000000..1ada3b223
--- /dev/null
+++ b/resources/js/components/activity-form/mixins.js
@@ -0,0 +1,135 @@
+import { computed } from 'vue';
+import { trans } from 'laravel-vue-i18n';
+
+export function useDataOptions() {
+  const buildOptionMap = (options) => {
+    const result = {};
+    options?.forEach((option) => {
+      result[option.id] = option.name;
+    });
+    return result;
+  };
+
+  const stepItems = computed(() => [
+    { name: 'Join the community', title: 'Activity overview' },
+    { name: 'Who is the activity for', title: 'Who is the activity for' },
+    { name: 'Organiser', title: 'Organiser' },
+  ]);
+
+  const activityFormatOptions = computed(() => [
+    { id: 'coding-camp', name: 'Coding camp' },
+    { id: 'summer-camp', name: 'Summercamp' },
+    { id: 'weekend-course', name: 'Weekend course' },
+    { id: 'evening-course', name: 'Evening course' },
+    { id: 'careerday', name: 'Careerday' },
+    { id: 'university-visit', name: 'University visit' },
+    { id: 'coding-home', name: 'Coding@Home' },
+    { id: 'code-week-challenge', name: 'Code Week Challenge' },
+    { id: 'competition', name: 'Competition' },
+    { id: 'other', name: 'Other (e.g. Group work, Seminars, Workshops' },
+  ]);
+  const activityFormatOptionsMap = computed(() =>
+    buildOptionMap(activityFormatOptions.value)
+  );
+
+  const activityTypeOptions = computed(() => [
+    {
+      id: 'open-online',
+      name: trans('event.activitytype.open-online'),
+    },
+    {
+      id: 'invite-online',
+      name: trans('event.activitytype.invite-online'),
+    },
+    {
+      id: 'open-in-person',
+      name: trans('event.activitytype.open-in-person'),
+    },
+    {
+      id: 'invite-in-person',
+      name: trans('event.activitytype.invite-in-person'),
+    },
+    {
+      id: 'other',
+      name: trans('event.organizertype.other'),
+    },
+  ]);
+  const activityTypeOptionsMap = computed(() =>
+    buildOptionMap(activityTypeOptions.value)
+  );
+
+  const recurringFrequentlyMap = computed(() => ({
+    daily: 'Daily',
+    weekly: 'Weekly',
+    monthly: 'Monthly',
+  }));
+
+  const durationOptions = computed(() => [
+    { id: '0-1', name: trans('event.duration.0-1-hour') },
+    { id: '1-2', name: trans('event.duration.1-2-hours') },
+    { id: '2-4', name: trans('event.duration.2-4-hours') },
+    {
+      id: 'over-4',
+      name: trans('event.duration.more-than-4-hours'),
+    },
+  ]);
+  const durationOptionsMap = computed(() =>
+    buildOptionMap(durationOptions.value)
+  );
+
+  const recurringTypeOptions = computed(() => [
+    {
+      id: 'consecutive',
+      name: 'Consecutive learning over multiple sessions',
+    },
+    {
+      id: 'individual',
+      name: 'Individual, stand-alone lessons under a common theme/joint event.',
+    },
+  ]);
+  const recurringTypeOptionsMap = computed(() =>
+    buildOptionMap(recurringTypeOptions.value)
+  );
+
+  const ageOptions = computed(() => [
+    { id: 'under-5', name: 'Under 5 - Early learners' },
+    { id: '6-9', name: '6-9 - Primary' },
+    { id: '10-12', name: '10-12 - Upper primary' },
+    { id: '13-15', name: '13-15 - Lower secondary' },
+    { id: '16-18', name: '16-18 - Upper secondary' },
+    { id: '19-25', name: '19-25 - Young Adults' },
+    { id: 'over-25', name: 'Over 25 - Adults' },
+  ]);
+  const ageOptionsMap = computed(() => buildOptionMap(ageOptions.value));
+
+  const organizerTypeOptions = computed(() => [
+    { id: 'school', name: trans('event.organizertype.school') },
+    { id: 'library', name: trans('event.organizertype.library') },
+    { id: 'non profit', name: trans('event.organizertype.non profit') },
+    {
+      id: 'private business',
+      name: trans('event.organizertype.private business'),
+    },
+    { id: 'other', name: trans('event.organizertype.other') },
+  ]);
+  const organizerTypeOptionsMap = computed(() =>
+    buildOptionMap(organizerTypeOptions.value)
+  );
+
+  return {
+    stepItems,
+    activityFormatOptions,
+    activityFormatOptionsMap,
+    activityTypeOptions,
+    activityTypeOptionsMap,
+    recurringFrequentlyMap,
+    durationOptions,
+    durationOptionsMap,
+    recurringTypeOptions,
+    recurringTypeOptionsMap,
+    ageOptions,
+    ageOptionsMap,
+    organizerTypeOptions,
+    organizerTypeOptionsMap,
+  };
+}
diff --git a/resources/js/components/form-fields/CheckboxField.vue b/resources/js/components/form-fields/CheckboxField.vue
new file mode 100644
index 000000000..fcd172677
--- /dev/null
+++ b/resources/js/components/form-fields/CheckboxField.vue
@@ -0,0 +1,55 @@
+<template>
+  <label class="flex items-center gap-2 cursor-pointer">
+    <input
+      class="peer hidden"
+      type="checkbox"
+      :id="name"
+      :name="name"
+      :checked="modelValue"
+      @change="onChange"
+    />
+
+    <div
+      class="h-8 w-8 border-2 bg-white flex items-center justify-center cursor-pointer border-dark-blue-200 rounded-lg"
+      :for="id"
+    >
+      <svg
+        v-if="modelValue"
+        class="h-5 w-5 text-slate-600"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="3"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M5 13l4 4L19 7" />
+      </svg>
+    </div>
+
+    <span class="cursor-pointer text-xl text-slate-500">
+      {{ label }}
+      <slot />
+    </span>
+  </label>
+</template>
+
+<script>
+export default {
+  props: {
+    modelValue: String,
+    name: String,
+    label: String,
+    value: String,
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const onChange = (event) => {
+      emit('update:modelValue', event.target.checked);
+    };
+
+    return { onChange };
+  },
+};
+</script>
diff --git a/resources/js/components/form-fields/FieldWrapper.vue b/resources/js/components/form-fields/FieldWrapper.vue
new file mode 100644
index 000000000..0f9674543
--- /dev/null
+++ b/resources/js/components/form-fields/FieldWrapper.vue
@@ -0,0 +1,58 @@
+<template>
+  <div
+    class="flex items-start flex-col gap-x-3 gap-y-2"
+    :class="[horizontalBreakpoint === 'md' && 'md:gap-10 md:flex-row']"
+  >
+    <label
+      :for="`id_${name || names?.[0] || ''}`"
+      class="flex items-center font-normal text-xl flex-1 text-slate-500 'w-full"
+      :class="[horizontalBreakpoint === 'md' && 'md:min-h-[48px] md:w-1/3']"
+    >
+      {{ label }}
+    </label>
+
+    <div
+      class="h-full w-full"
+      :class="[horizontalBreakpoint === 'md' && 'md:w-2/3']"
+    >
+      <slot />
+
+      <div
+        v-if="errors?.[name]?.length"
+        class="flex item-start gap-3 text-error-200 font-semibold mt-2.5 empty:hidden"
+      >
+        <img src="/images/icon_error.svg" />
+        <div v-for="message in errors[name]" class="leading-5">
+          {{ message }}
+        </div>
+      </div>
+
+      <template v-for="name in names">
+        <div
+          v-if="errors?.[name]?.length"
+          class="flex item-start gap-3 text-error-200 font-semibold mt-2.5 empty:hidden"
+        >
+          <img src="/images/icon_error.svg" />
+          <div v-for="message in errors[name]" class="leading-5">
+            {{ message }}
+          </div>
+        </div>
+      </template>
+
+      <slot name="end" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    horizontalBreakpoint: String,
+    horizontal: Boolean,
+    label: String,
+    name: String,
+    names: Array,
+    errors: Object,
+  },
+};
+</script>
diff --git a/resources/js/components/form-fields/ImageField.vue b/resources/js/components/form-fields/ImageField.vue
new file mode 100644
index 000000000..def7f8512
--- /dev/null
+++ b/resources/js/components/form-fields/ImageField.vue
@@ -0,0 +1,170 @@
+<template>
+  <div>
+    <div v-if="pictureClone" class="mb-4">
+      <img :src="pictureClone" class="mr-1" />
+    </div>
+
+    <form method="POST" enctype="multipart/form-data">
+      <div
+        class="flex flex-col justify-center items-center gap-2 border-[3px] border-dashed border-dark-blue-200 w-full rounded-2xl py-12 px-8 cursor-pointer"
+        @click="onTriggerFileInput"
+        @dragover.prevent="onDragOver"
+        @dragleave="onDragLeave"
+        @drop.prevent="onDrop"
+      >
+        <img class="w-16 h-16" src="/images/icon_image.svg" />
+
+        <span class="text-xl text-slate-500">
+          Drop your image here, or
+          <span class="text-dark-blue font-semibold underline">upload</span>
+        </span>
+
+        <span class="text-xs text-slate-500">
+          Max size: 1 Mb, Image formats: .jpg, png
+        </span>
+
+        <input
+          class="hidden"
+          type="file"
+          ref="fileInput"
+          @change="onFileChange"
+        />
+      </div>
+
+      <div
+        v-if="error"
+        class="flex item-start gap-3 text-error-200 font-semibold mt-2.5 empty:hidden"
+      >
+        <img src="/images/icon_error.svg" />
+        <div class="leading-5">
+          {{ error }}
+        </div>
+      </div>
+    </form>
+
+    <div class="w-full flex gap-2.5 mt-4">
+      <img class="flex-shrink-0 w-6 h-6" src="/images/icon_info.svg" />
+
+      <div class="text-slate-500 text-xs mt-1">
+        By submitting images through this form, you confirm that:
+        <ul class="list-disc pl-4 my-4">
+          <li>
+            You have obtained all necessary permissions from the school,
+            organisation, and/or parents/guardians of the children and the
+            adults appearing in the photos.
+          </li>
+          <li>
+            You will not submit any images in which the faces of children are
+            directly visible or identifiable. If this is the case, please ensure
+            that the children's faces are appropriately blurred. Submissions
+            that do not comply will not be accepted.
+          </li>
+          <li>
+            You understand and agree that these images will be shared on our
+            website along with the description of the activity and may be use
+            for promotional purposes.
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="text-xs text-slate-500"><b>Info</b>: Max size: 1MB</div>
+
+    <Flash />
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import axios from 'axios';
+import ImageUpload from '../ImageUpload.vue';
+import Flash, { emitter } from '../Flash.vue';
+
+export default {
+  components: { ImageUpload, Flash },
+  props: {
+    name: {
+      type: String,
+      default: 'picture',
+    },
+    image: {
+      type: String,
+      default: '',
+    },
+    picture: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['onChange'],
+  setup(props, { emit }) {
+    const isDragOver = ref(false);
+    const fileInput = ref(null);
+
+    const pictureClone = ref(props.picture || '');
+    const imageClone = ref(props.image || '');
+    const error = ref('');
+
+    const onTriggerFileInput = () => {
+      fileInput.value?.click();
+    };
+
+    const onDragOver = () => {
+      isDragOver.value = true;
+    };
+
+    const onDragLeave = () => {
+      isDragOver.value = false;
+    };
+
+    const onDrop = (event) => {
+      isDragOver.value = false;
+      const [file] = event.dataTransfer.files;
+      if (file) persist(file);
+    };
+
+    const onFileChange = (event) => {
+      const [file] = event.target.files;
+      if (file) persist(file);
+    };
+
+    const persist = (picture) => {
+      let data = new FormData();
+      data.append('picture', picture);
+
+      axios
+        .post(`/api/events/picture`, data)
+        .then((result) => {
+          error.value = '';
+          pictureClone.value = result.data.path;
+          imageClone.value = result.data.imageName;
+          emitter.emit('flash', {
+            message: 'Picture uploaded!',
+            level: 'success',
+          });
+          emit('onChange', result.data);
+        })
+        .catch((err) => {
+          if (err.response.data.errors && err.response.data.errors.picture) {
+            error.value = err.response.data.errors.picture[0];
+          } else {
+            error.value = 'Image is too large. Maximum is 1Mb';
+          }
+          emitter.emit('flash', { message: error.value, level: 'error' });
+        });
+    };
+
+    return {
+      fileInput,
+      pictureClone,
+      imageClone,
+      error,
+      onTriggerFileInput,
+      onDragOver,
+      onDragLeave,
+      onDrop,
+      onFileChange,
+    };
+  },
+};
+</script>
diff --git a/resources/js/components/form-fields/InputField.vue b/resources/js/components/form-fields/InputField.vue
new file mode 100644
index 000000000..aa4558b33
--- /dev/null
+++ b/resources/js/components/form-fields/InputField.vue
@@ -0,0 +1,65 @@
+<template>
+  <input
+    class="w-full border-2 border-solid border-dark-blue-200 rounded-full h-12 px-4 text-xl text-slate-600"
+    :id="`id_${name}`"
+    :type="type"
+    :min="min"
+    :max="max"
+    :name="name"
+    v-model="localValue"
+    @input="onChange"
+    @blur="onBlur"
+  />
+</template>
+
+<script>
+import { ref, watch, nextTick } from 'vue';
+
+export default {
+  props: {
+    modelValue: [String, Number],
+    name: String,
+    min: Number,
+    max: Number,
+    type: {
+      type: String,
+      default: 'text',
+    },
+  },
+  emits: ['update:modelValue', 'onChange'],
+  setup(props, { emit }) {
+    const localValue = ref(props.modelValue);
+
+    watch(
+      () => props.modelValue,
+      () => {
+        localValue.value = props.modelValue;
+      }
+    );
+
+    const onChange = (event) => {
+      let value = event.target.value;
+      if (props.type === 'number') {
+        value = value ? Number(value) : value;
+        if (props.min !== undefined && props.min !== null) {
+          value = Math.max(value, props.min);
+        }
+        if (props.max !== undefined && props.max !== null) {
+          value = Math.min(value, props.max);
+        }
+      }
+
+      nextTick(() => {
+        emit('update:modelValue', value);
+        emit('onChange', value);
+      });
+    };
+
+    const onBlur = () => {
+      localValue.value = props.modelValue;
+    };
+
+    return { localValue, onChange, onBlur };
+  },
+};
+</script>
diff --git a/resources/js/components/form-fields/RadioField.vue b/resources/js/components/form-fields/RadioField.vue
new file mode 100644
index 000000000..695dafae6
--- /dev/null
+++ b/resources/js/components/form-fields/RadioField.vue
@@ -0,0 +1,37 @@
+<template>
+  <label class="flex items-center gap-2 cursor-pointer">
+    <input
+      class="peer hidden"
+      type="radio"
+      :id="`${name}-${value}`"
+      :name="name"
+      :value="value"
+      :checked="modelValue === value"
+      @change="onChange"
+    />
+    <div
+      class="h-8 w-8 rounded-full border-2 bg-white border-dark-blue-200 flex items-center justify-center cursor-pointer peer-checked:before:content-[''] peer-checked:before:block peer-checked:before:w-3 peer-checked:before:h-3 peer-checked:before:rounded-full peer-checked:before:bg-slate-600"
+      :for="`${name}-${value}`"
+    ></div>
+    <span class="cursor-pointer text-xl text-slate-500">{{ label }}</span>
+  </label>
+</template>
+
+<script>
+export default {
+  props: {
+    modelValue: String,
+    name: String,
+    label: String,
+    value: String,
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const onChange = (event) => {
+      emit('update:modelValue', event.target.value);
+    };
+
+    return { onChange };
+  },
+};
+</script>
diff --git a/resources/js/components/form-fields/SelectField.vue b/resources/js/components/form-fields/SelectField.vue
new file mode 100644
index 000000000..a485b1df4
--- /dev/null
+++ b/resources/js/components/form-fields/SelectField.vue
@@ -0,0 +1,176 @@
+<template>
+  <multiselect
+    class="multi-select"
+    :class="[
+      multiple && 'multiple',
+      theme === 'new' && 'new-theme large-text',
+      largeText && 'large-text',
+    ]"
+    v-model="selectedValues"
+    :track-by="idName"
+    :label="labelField"
+    :multiple="multiple"
+    :preselect-first="false"
+    :close-on-select="!multiple"
+    :clear-on-select="!multiple"
+    :preserve-search="true"
+    :options="options"
+    @update:modelValue="onUpdateModalValue"
+  >
+    <template v-if="multiple && theme === 'new'" #option="{ option }">
+      <div class="flex justify-between items-center cursor-pointer">
+        <span>{{ option[labelField] }}</span>
+        <div
+          class="h-6 w-6 border-2 bg-white flex items-center justify-center cursor-pointer rounded"
+          :class="[
+            isSelectedOption(option)
+              ? 'border-[#05603A]'
+              : 'border-dark-blue-200',
+          ]"
+          :for="id"
+        >
+          <svg
+            v-if="isSelectedOption(option)"
+            class="h-4 w-4 text-[#05603A]"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M5 13l4 4L19 7" />
+          </svg>
+        </div>
+      </div>
+    </template>
+
+    <template v-else #option="{ option }">
+      <div class="flex gap-4 items-center cursor-pointer">
+        <span>{{ option[labelField] }}</span>
+
+        <div>
+          <svg
+            v-if="isSelectedOption(option)"
+            class="h-5 w-5 text-slate-600"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M5 13l4 4L19 7" />
+          </svg>
+        </div>
+        <!-- <input
+          type="checkbox"
+          class="form-checkbox text-blue-600"
+          :checked="isSelectedOption(option)"
+          @change.prevent
+        /> -->
+      </div>
+    </template>
+  </multiselect>
+</template>
+
+<script>
+import { ref, watch } from 'vue';
+import Multiselect from 'vue-multiselect';
+
+export default {
+  props: {
+    multiple: Boolean,
+    returnObject: Boolean,
+    modelValue: [Array, String],
+    options: Array,
+    idName: {
+      type: String,
+      default: 'id',
+    },
+    labelField: {
+      type: String,
+      default: 'name',
+    },
+    theme: {
+      type: String,
+      default: 'new',
+    },
+    largeText: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    Multiselect,
+  },
+  emits: ['update:modelValue', 'onChange'],
+  setup(props, { emit }) {
+    const selectedValues = ref();
+
+    const onUpdateModalValue = (value) => {
+      if (props.multiple) {
+        const newVal = props.returnObject
+          ? value
+          : value.map((item) => item[props.idName]);
+        emit('update:modelValue', newVal);
+        emit('onChange', newVal);
+      } else {
+        const newVal = props.returnObject ? value : value[props.idName];
+        emit('update:modelValue', newVal);
+        emit('onChange', newVal);
+      }
+    };
+
+    const isSelectedOption = (option) => {
+      if (props.multiple) {
+        return selectedValues.value?.some(
+          (item) => String(item[props.idName]) === String(option[props.idName])
+        );
+      }
+
+      return (
+        String(selectedValues.value?.[props.idName]) ===
+        String(option[props.idName])
+      );
+    };
+
+    watch(
+      [
+        () => props.multiple,
+        () => props.returnObject,
+        () => props.options,
+        () => props.modelValue,
+      ],
+      () => {
+        if (props.returnObject) {
+          selectedValues.value = props.modelValue;
+        } else {
+          if (props.multiple) {
+            if (Array.isArray(props.modelValue)) {
+              selectedValues.value = props.modelValue?.map((id) => {
+                return props.options.find(
+                  (option) => option[props.idName] === id
+                );
+              });
+            }
+          } else {
+            selectedValues.value = props.options?.find(
+              (option) => option[props.idName] === props.modelValue
+            );
+          }
+        }
+      },
+      { immediate: true }
+    );
+
+    return {
+      selectedValues,
+      isSelectedOption,
+      onUpdateModalValue,
+    };
+  },
+};
+</script>
diff --git a/resources/lang/en/event.php b/resources/lang/en/event.php
index 8cad4137a..18115ec0c 100644
--- a/resources/lang/en/event.php
+++ b/resources/lang/en/event.php
@@ -40,7 +40,7 @@
         'placeholder' => 'Organisation you work in or volunteer for',
     ],
     'website' => [
-        'label' => 'Organiser\'s Website',
+        'label' => 'Website',
         'placeholder' => 'Do you have a website with more information ?',
     ],
     'description' => [
@@ -58,11 +58,11 @@
 
     ],
     'title' => [
-        'label' => 'Activity Title',
+        'label' => 'Activity title',
         'placeholder' => 'What is the name of the activity ?',
     ],
     'address' => [
-        'label' => 'Address',
+        'label' => 'Activity address',
         'placeholder' => 'Where will the activity be taking place?',
     ],
 
@@ -110,7 +110,7 @@
         'Promoting diversity' => 'Promoting diversity',
     ],
     'codeweek_for_all_participation_code' => [
-        'title' => 'CODE WEEK 4 ALL CODE',
+        'title' => 'Code week 4 all code',
         'explanation' => 'If you have received a Code Week 4 all code from a school colleague or a friend paste it here, otherwise please leave it blank. More info about Code Week 4 All are available',
         'link' => 'here',
     ],
@@ -133,7 +133,7 @@
         'Other' => 'Other',
     ],
     'activitytype' => [
-        'label' => 'Activity Type',
+        'label' => 'Activity type',
         'placeholder' => '',
         'open-online' => 'Open online activity',
         'invite-online' => 'Invite-only online activity',
@@ -141,6 +141,12 @@
         'invite-in-person' => 'Invite-only in-person activity',
 
     ],
+    'duration' => [
+      '0-1-hour' => '0-1 hours',
+      '1-2-hours' => '1-2 hours',
+      '2-4-hours' => '2-4 hours',
+      'more-than-4-hours' => 'longer than 4 hours',
+    ],
 
     'More' => 'More',
     'country' => 'Country',
diff --git a/resources/views/event/add.blade.php b/resources/views/event/add.blade.php
index 19743f544..48ca25a9a 100755
--- a/resources/views/event/add.blade.php
+++ b/resources/views/event/add.blade.php
@@ -1,344 +1,62 @@
-@extends('layout.base')
+@extends('layout.new_base')
 
-@section('content')
-
-    <section id="codeweek-events-add-page" class="codeweek-page">
-
-        <section class="codeweek-banner simple">
-            <div class="text">
-                <h2>#EUCodeWeek</h2>
-                <h1>@lang('event.main_title')</h1>
-                <a style="color:black;" href="{{route('guide')}}" target="_blank">@lang('event.howto')?</a>
-            </div>
-        </section>
-
-        <section class="codeweek-content-wrapper" style="margin-top:0px;" x-data="addActivity()">
-
-
-            <form enctype="multipart/form-data" method="post" role="form" class="codeweek-form" action="/events">
-                <p>@lang('event.required')</p>
-                {{csrf_field()}}
-
-
-                <div class="codeweek-form-inner-two-columns">
-
-
-                    <div class="codeweek-form-inner-container">
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="activity_type">* @lang('event.activitytype.label')</label>
-                                <select id="id_activity_type" name="activity_type" class="codeweek-input-select"
-                                        x-model="selectedActivityType">
-                                    <option value="open-online" {{ old('activity_type') == "open-online" ? 'selected' : '' }}>@lang('event.activitytype.open-online')</option>
-                                    <option value="invite-online" {{ old('activity_type') == "invite-online" ? 'selected' : '' }}>@lang('event.activitytype.invite-online')</option>
-                                    <option value="open-in-person" {{ old('activity_type') == "open-in-person" ? 'selected' : '' }}>@lang('event.activitytype.open-in-person')</option>
-                                    <option value="invite-in-person" {{ old('activity_type') == "invite-in-person" ? 'selected' : '' }}>@lang('event.activitytype.invite-in-person')</option>
-                                    <option value="other" {{ old('activity_type') == "other" ? 'selected' : '' }}>@lang('event.organizertype.other')</option>
-                                </select>
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'activity_type'])@endcomponent
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_title">* @lang('event.title.label')</label>
-                                <input id="id_title" maxlength="255" name="title"
-                                       placeholder="@lang('event.title.placeholder')" type="text"
-                                       value="{{old('title')}}">
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'title'])@endcomponent
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_organizer">* @lang('event.organizer.label')</label>
-                                <input id="id_organizer" maxlength="255"
-                                       name="organizer" placeholder="@lang('event.organizer.placeholder')" type="text"
-                                       value="{{old('organizer')?:$location->name??''}}">
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'organizer'])@endcomponent
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_language">* @lang('resources.Languages')</label>
-                                <select id="id_language" name="language" class="codeweek-input-select">
-                                    @foreach($languages as $key => $value)
-                                        <option value="{{$key}}" {{ $key == App::getLocale() ? 'selected' : '' }}>{{$value}}</option>
-                                    @endforeach
-
-                                </select>
-                            </div>
-
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_organizer">* @lang('event.organizertype.label')</label>
-                                <select id="id_organizer_type" name="organizer_type" class="codeweek-input-select">
-                                    <option disabled value> ---</option>
-                                    <option value="school" {{ old('organizer_type') == "school" ? 'selected' : '' }}>@lang('event.organizertype.school')</option>
-                                    <option value="library" {{ old('organizer_type') == "library" ? 'selected' : '' }}>@lang('event.organizertype.library')</option>
-                                    <option value="non profit" {{ old('organizer_type') == "non profit" ? 'selected' : '' }}>@lang('event.organizertype.non profit')</option>
-                                    <option value="private business" {{ old('organizer_type') == "private business" ? 'selected' : '' }}>@lang('event.organizertype.private business')</option>
-                                    <option value="other" {{ old('organizer_type') == "other" ? 'selected' : '' }}>@lang('event.organizertype.other')</option>
-                                </select>
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'organizer_type'])@endcomponent
-                            </div>
-                        </div>
-
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field align-flex-start">
-                                <label for="id_description">*@lang('event.description.label')</label>
-                                <textarea cols="40" id="id_description" name="description"
-                                          placeholder="@lang('event.description.placeholder')"
-                                          rows="10"> {{old('description')}}</textarea>
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'description'])@endcomponent
-                            </div>
-                        </div>
-
-                        <h3>@lang('event.who')</h3>
-
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_audience">*@lang('event.audience_title')</label>
-                                <multiselect :options="{{ $audiences }}" value="{{ old('audience') }}" name="audience"
-                                             :multiple="true"
-                                             label="event.audience"></multiselect>
-
-                            </div>
-
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'audience'])@endcomponent
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_theme">*@lang('event.theme_title')</label>
-                                <multiselect :options="{{ $themes }}" value="{{ old('theme') }}" name="theme"
-                                             :multiple="true"
-                                             label="event.theme"></multiselect>
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'theme'])@endcomponent
-                            </div>
-                        </div>
-
-
-                    </div>
-
-                    <div class="codeweek-form-inner-container">
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field align-flex-start">
-                                <label for="id_location"><span
-                                            x-show="!isOnlineActivitySelected()">*</span>@lang('event.address.label')
-                                    <br/>
-                                    <a href="{{route('activities-locations')}}">
-                                        <img src="{{asset('svg/address-book.svg')}}" class="static-image">
-                                    </a>
-
-                                </label>
-                                <div>
-                                    <autocomplete-geo name="location" placeholder="@lang('event.address.placeholder')"
-                                                      location="{{$location->location??''}}"
-                                                      value="{{old('location')?:$location->location??''}}"
-                                                      geoposition="{{old('geoposition')?:$location->geoposition??''}}"></autocomplete-geo>
-                                    <div class="errors" style="margin-bottom: 10px; margin-left:0;">
-                                        @component('components.validation-errors', ['field'=>'location'])@endcomponent
-                                    </div>
-                                    <div id="events-add-map"></div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_country">* @lang('event.country')</label>
-                                <select id="id_country" name="country_iso" class="codeweek-input-select">
-                                    <option value=""></option>
-                                    @isset($location)
-
-                                        @foreach ($countries as $country)
-                                            <option value="{{$country->iso}}" {{$location->country_iso == $country->iso ? 'selected' : ''}}>@lang('countries.'. $country->name)</option>
-                                        @endforeach
-                                    @else
-                                        @foreach ($countries as $country)
-                                            <option value="{{$country->iso}}">@lang('countries.'. $country->name)</option>
-                                        @endforeach
-                                    @endisset
-                                </select>
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'country'])@endcomponent
-                            </div>
-                        </div>
-
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_start_date">*@lang('event.start.label')</label>
-                                <date-time name="start_date" placeholder="@lang('event.start.placeholder')"
-                                           value="{{old('start_date')}}"></date-time>
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'start_date'])@endcomponent
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_end_date">*@lang('event.end.label')</label>
-                                <date-time name="end_date" placeholder="@lang('event.end.placeholder')"
-                                           value="{{old('end_date')}}"></date-time>
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'end_date'])@endcomponent
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_event_url"><span
-                                            x-show="isOnlineActivitySelected()">*</span>@lang('event.website.label')
-                                </label>
-                                <input id="id_event_url" maxlength="200" name="event_url"
-                                       placeholder="@lang('event.website.placeholder')" type="text"
-                                       value="{{old('event_url')}}">
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'event_url'])@endcomponent
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_contact_person">@lang('event.public.label')</label>
-                                <input id="id_contact_person" maxlength="75" name="contact_person"
-                                       placeholder="@lang('event.public.placeholder')" type="text">
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'contact_person'])@endcomponent
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_tags">@lang('event.tags')</label>
-                                <input-tags value="{{old('tags')}}"></input-tags>
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field align-flex-start">
-                                <label for="id_codeweek_forall_code_label">@lang('event.codeweek_for_all_participation_code.title')</label>
-                                <div class="group-fields">
-                                    <input id="id_codeweek_forall_code" maxlength="75"
-                                           name="codeweek_for_all_participation_code" value="">
-                                    <span style="font-size: 13px;font-style: italic;">
-                                        @lang('event.codeweek_for_all_participation_code.explanation')
-                                        <a href="/codeweek4all">@lang('event.codeweek_for_all_participation_code.link')</a>
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field-searchable">
-                                <label for="id_leading_teacher_tag_label">@lang('community.titles.2')</label>
-                                <singleselect :options="{{ json_encode($leading_teachers) }}"
-                                              value="{{ old('leading_teacher_tag') }}"
-                                              name="leading_teacher_tag"
-                                              placeholder="{{__('community.titles.2')}}"
-                                              ></singleselect>
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'theme'])@endcomponent
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field">
-                            <label for="id_picture">@lang('event.image')</label>
-                            <div data-provides="fileinput" data-name="picture">
-                                <div class="fileinput-new">
-                                    <div class="fileinput-preview fileinput-exists"></div>
-                                    <div>
-                                        <picture-form></picture-form>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                    </div>
-
-                </div>
-
-
-                <div class="codeweek-form-message">
-                    <div class="message">
-                        @lang('event.contact.explanation')
-                    </div>
-                    <div class="codeweek-form-field-wrapper">
-                        <div class="codeweek-form-field">
-                            <label for="id_user_email">* @lang('event.contact.label')</label>
-                            <input id="id_user_email" name="user_email" type="email"
-                                   placeholder="@lang('event.contact.placeholder')"
-                                   value="{{old('user_email')}}"
-                            track-by="tag"
-                                   label="tag">
-                        </div>
-                        <div class="errors">
-                            @component('components.validation-errors', ['field'=>'user_email'])@endcomponent
-                        </div>
-                    </div>
-                </div>
-
-                <div class="codeweek-form-field-privacy">
-                    <label>
-                        <input id="checkPrivacy" name="privacy"
-                               type="checkbox" {{ auth()->user()->privacy === 1 ? 'checked="checked"' : '' }}>
-                        @lang('event.privacy')
-                        <a href="{{route('privacy-contact-points')}}" target="_blank">
-                            <img src="/images/external-link.svg" width="16" class="static-image">
-                        </a>
-                    </label>
-                    @component('components.validation-errors', ['field'=>'privacy'])
-                    @endcomponent
-                </div>
+@php
+    $list = [
+        (object) ['label' => 'Activities & Events', 'href' => '/'],
+        (object) ['label' => 'Add activity', 'href' => ''],
+    ];
+@endphp
 
+@section('layout.breadcrumb')
+    @include('layout.breadcrumb', ['list' => $list])
+@endsection
 
-                <div class="codeweek-form-button-container">
-                    <div class="codeweek-button">
-                        <input type="submit" id="add-button"
-                               onclick="javascript:return addEvent('{{__('school.required.location')}}');"
-                               value="@lang('event.add_activity')">
+@section('content')
+    <section id="codeweek-events-add-page" class="font-['Blinker'] overflow-hidden">
+        <section id="add-event-hero-section" class="relative flex overflow-hidden">
+            <div class="flex relative transition-all w-full bg-green-gradient pt-32 pb-0 md:py-20">
+                <div
+                    class="w-full overflow-hidden pb-10 md:p-0 flex flex-col md:flex-row justify-end md:items-center flex-shrink-0">
+                    <div
+                        class="codeweek-container-lg flex flex-col md:flex-row md:items-center duration-1000 gap-28 md:gap-4 xl:gap-28">
+                        <div class="order-1 flex-1 px-6 py-10 md:px-14 md:py-[4.5rem] bg-white rounded-[32px] z-10 relative">
+                            <h2
+                                class="text-[#1C4DA1] text-[30px] md:text-[60px] leading-9 md:leading-[72px] font-normal font-['Montserrat'] mb-4 max-md:max-w-full max-w-[532px]">
+                                Add your Codeweek activity
+                            </h2>
+                            <p
+                                class="text-xl font-normal md:text-2xl leading-8 text-[#333E48] p-0 mb-4 max-md:max-w-full max-w-[525px]">
+                                Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
+                                illum dolore eu feugiat nulla facilisis at vero.
+                            </p>
+                        </div>
+                        <div class="order-0 md:order-2 flex flex-1 justify-center items-center z-10"></div>
+                        <img class="absolute top-0 -left-1/4 w-[150vw] !max-w-none md:hidden" loading="lazy"
+                            src="/images/activity/banner.png" style="clip-path: ellipse(71% 73% at 40% 20%);" />
+                        <img class="absolute top-0 right-0 h-full max-w-[calc(70vw)] object-cover hidden md:block"
+                            loading="lazy" src="/images/activity/banner.png"
+                            style="clip-path: ellipse(70% 140% at 70% 25%);" />
                     </div>
                 </div>
-
-            </form>
-
+            </div>
         </section>
 
+        <activity-form
+          token="{{ csrf_token() }}"
+          :user="{{ auth()->user() }}"
+          :themes='{{ $themes }}'
+          :audiences='{{ $audiences }}'
+          :leading-teachers="{{ json_encode($leading_teachers) }}"
+          :languages="{{ json_encode($languages) }}"
+          :countries="{{ $countries }}"
+          :locale="'{{ App::getLocale() }}'"
+          :location='@json($location ?? (object)[])'
+          :privacy-link="'{{ route('privacy-contact-points') }}'"
+        ></activity-form>
     </section>
-
 @endsection
 
-
 @push('scripts')
-
     <script defer src="//europa.eu/webtools/load.js" type="text/javascript"></script>
     <script type="application/json">
         {
@@ -349,39 +67,13 @@
             "width": "422",
             "custom": ["/js/hideMenuMap.js"]
         }
-
-
-
-
-
-
-
-
-
     </script>
 
-    <script src="{{asset('js/tinymce/tinymce.min.js')}}"></script>
+    <script src="{{ asset('js/tinymce/tinymce.min.js') }}"></script>
 
     <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
 
-
     <script>
-
-        tinymce.init({
-            selector: '#id_description',
-            height: 400,
-            width: 460
-        });
-
-
-        function addActivity() {
-            return {
-                selectedActivityType: 'open-in-person',
-                isOnlineActivitySelected() {
-                    return (this.selectedActivityType === 'open-online' || this.selectedActivityType === 'invite-online')
-                },
-            }
-        }
+        document.dispatchEvent(new CustomEvent('tinymce-ready'));
     </script>
-
 @endpush
diff --git a/resources/views/event/edit.blade.php b/resources/views/event/edit.blade.php
index 256e494ad..f3ae55c54 100755
--- a/resources/views/event/edit.blade.php
+++ b/resources/views/event/edit.blade.php
@@ -1,341 +1,70 @@
-@extends('layout.base')
+@extends('layout.new_base')
+
+@php
+    $list = [
+        (object) ['label' => 'Activities & Events', 'href' => '/'],
+        (object) ['label' => 'Edit activity', 'href' => ''],
+    ];
+
+    $selectedValues = [
+        'themes' => $selected_themes,
+        'audiences' => $selected_audiences,
+        'picture' => $event->picture_detail_path(),
+    ];
+@endphp
+
+@section('layout.breadcrumb')
+    @include('layout.breadcrumb', ['list' => $list])
+@endsection
 
 @section('content')
-
-    <section id="codeweek-events-edit-page" class="codeweek-page">
-
-        <section class="codeweek-banner simple">
-            <div class="text">
-                <h2>#EUCodeWeek</h2>
-                <h1>@lang('edit.title')</h1>
-            </div>
-        </section>
-
-        <section class="codeweek-content-wrapper" style="margin-top:0px;"
-                 x-data="addActivity('{{$event->activity_type}}')">
-
-            <form enctype="multipart/form-data" method="post" id="event" role="form" class="codeweek-form"
-                  action="/events/{{$event->id}}">
-                <p>@lang('event.required')</p>
-
-                {{csrf_field()}}
-                {{ method_field('PATCH') }}
-
-                <div class="codeweek-form-inner-two-columns">
-
-                    <div class="codeweek-form-inner-container">
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_title">* @lang('event.title.label')</label>
-                                <input id="id_title" maxlength="255" name="title"
-                                       placeholder="@lang('event.title.placeholder')" type="text"
-                                       value="{{old('title',$event->title)}}">
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'title'])@endcomponent
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_organizer">* @lang('event.organizer.label')</label>
-                                <input id="id_organizer" maxlength="255"
-                                       name="organizer" placeholder="@lang('event.organizer.placeholder')" type="text"
-                                       value="{{old('organizer',$event->organizer)}}">
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'organizer'])@endcomponent
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_language">* @lang('resources.Languages')</label>
-                                <select id="id_language" name="language" class="codeweek-input-select">
-                                    @if(is_null($event->language))
-                                        <option value="" disabled selected>---</option>
-                                    @endif
-
-                                    @foreach($languages as $key => $value)
-                                        <option value="{{$key}}" {{ $key == $event->language ? 'selected' : '' }}>{{$value}}</option>
-                                    @endforeach
-
-                                </select>
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'language'])@endcomponent
-                            </div>
-
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_organizer">* @lang('event.organizertype.label')</label>
-                                <select id="id_organizer_type" name="organizer_type" class="codeweek-input-select">
-                                    <option value="school">@lang('event.organizertype.school')</option>
-                                    <option value="library">@lang('event.organizertype.library')</option>
-                                    <option value="non profit">@lang('event.organizertype.non profit')</option>
-                                    <option value="private business">@lang('event.organizertype.private business')</option>
-                                    <option value="other">@lang('event.organizertype.other')</option>
-                                </select>
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'organizer_type'])@endcomponent
-                            </div>
-                        </div>
-
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="activity_type">* @lang('event.activitytype.label')</label>
-                                <select id="id_activity_type" name="activity_type" class="codeweek-input-select"
-                                        x-model="selectedActivityType">
-                                    <option value="open-online" {{$event->activity_type == 'open-online' ? 'selected' : ''}}>@lang('event.activitytype.open-online')</option>
-                                    <option value="invite-online" {{$event->activity_type == 'invite-online' ? 'selected' : ''}}>@lang('event.activitytype.invite-online')</option>
-                                    <option value="open-in-person" {{$event->activity_type == 'open-in-person' ? 'selected' : ''}}>@lang('event.activitytype.open-in-person')</option>
-                                    <option value="invite-in-person" {{$event->activity_type == 'invite-in-person' ? 'selected' : ''}}>@lang('event.activitytype.invite-in-person')</option>
-                                    <option value="other" {{(is_null($event->activity_type) || $event->activity_type == 'other')  ? 'selected' : ''}}>@lang('event.organizertype.other')</option>
-                                </select>
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'activity_type'])@endcomponent
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field align-flex-start">
-                                <label for="id_description">*@lang('event.description.label')</label>
-                                <textarea cols="60" id="id_description" name="description"
-                                          placeholder="@lang('event.description.placeholder')"
-                                          rows="10"> {{old('description',$event->description)}}</textarea>
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'description'])@endcomponent
-                            </div>
-                        </div>
-
-                        <h3>@lang('event.who')</h3>
-
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_audience">*@lang('event.audience_title')</label>
-                                <multiselect :options="{{ $audiences }}" value="{{$selected_audiences}}" name="audience"
-                                             :multiple="true"
-                                             label="event.audience"></multiselect>
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'audience'])@endcomponent
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_theme">*@lang('event.theme_title')</label>
-                                <multiselect :options="{{ $themes }}" value="{{$selected_themes}}" name="theme"
-                                             :multiple="true"
-                                             label="event.theme"></multiselect>
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'theme'])@endcomponent
-                            </div>
-                        </div>
-
+    <section id="codeweek-events-edit-page" class="font-['Blinker'] overflow-hidden">
+        <section class="relative flex overflow-hidden">
+            <div class="flex relative transition-all w-full bg-green-gradient pt-32 pb-0 md:py-20">
+                <div
+                    class="w-full overflow-hidden pb-10 md:p-0 flex flex-col md:flex-row justify-end md:items-center flex-shrink-0">
+                    <div
+                        class="codeweek-container-lg flex flex-col md:flex-row md:items-center duration-1000 gap-28 md:gap-4 xl:gap-28">
+                        <div class="order-1 flex-1 px-6 py-10 md:px-14 md:py-[4.5rem] bg-white rounded-[32px] z-10 relative">
+                            <h2
+                                class="text-[#1C4DA1] text-[30px] md:text-[60px] leading-9 md:leading-[72px] font-normal font-['Montserrat'] mb-4 max-md:max-w-full max-w-[532px]">
+                                Edit your Codeweek activity
+                            </h2>
+                            <p
+                                class="text-xl font-normal md:text-2xl leading-8 text-[#333E48] p-0 mb-4 max-md:max-w-full max-w-[525px]">
+                                Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
+                                illum dolore eu feugiat nulla facilisis at vero.
+                            </p>
+                        </div>
+                        <div class="order-0 md:order-2 flex flex-1 justify-center items-center z-10"></div>
+                        <img class="absolute top-0 -left-1/4 w-[150vw] !max-w-none md:hidden" loading="lazy"
+                            src="/images/activity/banner.png" style="clip-path: ellipse(71% 73% at 40% 20%);" />
+                        <img class="absolute top-0 right-0 h-full max-w-[calc(70vw)] object-cover hidden md:block"
+                            loading="lazy" src="/images/activity/banner.png"
+                            style="clip-path: ellipse(70% 140% at 70% 25%);" />
                     </div>
-
-                    <div class="codeweek-form-inner-container">
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field align-flex-start">
-                                <label for="id_location"><span
-                                            x-show="!isOnlineActivitySelected()">*</span>@lang('event.address.label')
-                                </label>
-                                <div>
-                                    <autocomplete-geo name="location" placeholder="@lang('event.address.placeholder')"
-                                                      location="{{$event->location}}"
-                                                      value="{{old('location',$event->location)}}"
-                                                      geoposition="{{old('geoposition',$event->geoposition)}}"></autocomplete-geo>
-                                    <div class="errors" style="margin-bottom: 10px; margin-left:0;">
-                                        @component('components.validation-errors', ['field'=>'location'])@endcomponent
-                                    </div>
-                                    <div id="events-edit-map"></div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_country">* @lang('event.country')</label>
-                                <select id="id_country" name="country_iso" class="codeweek-input-select">
-                                    <option value=""></option>
-                                    @foreach ($countries as $country)
-                                        <option value="{{$country->iso}}" {{$selected_country == $country->iso ? 'selected' : ''}}>@lang('countries.'. $country->name)</option>
-                                    @endforeach
-                                </select>
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'country'])@endcomponent
-                            </div>
-                        </div>
-
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_start_date">*@lang('event.start.label')</label>
-                                <date-time name="start_date" placeholder="@lang('event.start.placeholder')"
-                                           value="{{old('start_date',$event->start_date)}}"></date-time>
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'start_date'])@endcomponent
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_end_date">*@lang('event.end.label')</label>
-                                <date-time name="end_date" placeholder="@lang('event.end.placeholder')"
-                                           value="{{old('end_date',$event->end_date)}}"></date-time>
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'end_date'])@endcomponent
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_event_url"><span
-                                            x-show="isOnlineActivitySelected()">*</span>@lang('event.website.label')
-                                </label>
-                                <input id="id_event_url" maxlength="200" name="event_url"
-                                       placeholder="@lang('event.website.placeholder')" type="text"
-                                       value="{{old('event_url')?old('event_url'):$event->event_url}}">
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'event_url'])@endcomponent
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_contact_person">@lang('event.public.label')</label>
-                                <input id="id_contact_person" maxlength="75" name="contact_person"
-                                       placeholder="@lang('event.public.placeholder')" type="text"
-                                       value="{{old('contact_person')?old('contact_person'):$event->contact_person}}">
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'contact_person'])@endcomponent
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field">
-                                <label for="id_tags">@lang('event.tags')</label>
-                                <input-tags value="{{$tags}}"></input-tags>
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field align-flex-start">
-                                <label for="id_codeweek_forall_code_label">@lang('event.codeweek_for_all_participation_code.title')</label>
-                                <div class="group-fields">
-                                    <input id="id_codeweek_forall_code" maxlength="75"
-                                           name="codeweek_for_all_participation_code"
-                                           value="{{old('codeweek_for_all_participation_code')?old('codeweek_for_all_participation_code'):$event->codeweek_for_all_participation_code}}">
-                                    <span style="font-size: 13px;font-style: italic;">
-                                        @lang('event.codeweek_for_all_participation_code.explanation')
-                                        <a href="/codeweek4all">@lang('event.codeweek_for_all_participation_code.link')</a>
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field-wrapper">
-                            <div class="codeweek-form-field-searchable">
-                                <label for="id_leading_teacher_tag_label">@lang('community.titles.2')</label>
-                                <singleselect :options="{{ json_encode($leading_teachers) }}"
-                                              value="{{old('leading_teacher_tag')?old('leading_teacher_tag'):$event->leading_teacher_tag}}"
-                                              name="leading_teacher_tag"
-                                              placeholder="{{__('community.titles.2')}}"
-
-                                ></singleselect>
-                            </div>
-                            <div class="errors">
-                                @component('components.validation-errors', ['field'=>'theme'])@endcomponent
-                            </div>
-                        </div>
-
-                        <div class="codeweek-form-field">
-                            <label for="id_picture">@lang('event.image')</label>
-                            <div data-provides="fileinput" data-name="picture">
-                                <div class="fileinput-new">
-                                    <div class="fileinput-preview fileinput-exists"></div>
-                                    <div>
-                                        <picture-form picture="{{$event->picture_detail_path()}}"
-                                                      image="{{$event->picture}}"></picture-form>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                    </div>
-
                 </div>
-
-                <div class="codeweek-form-message">
-                    <div class="message">
-                        @lang('event.contact.explanation')
-                    </div>
-                    <div class="codeweek-form-field-wrapper">
-                        <div class="codeweek-form-field">
-                            <label for="id_user_email">* @lang('event.contact.label')</label>
-                            <input id="id_user_email" name="user_email" type="email"
-                                   placeholder="@lang('event.contact.placeholder')"
-                                   value="{{old('user_email')?old('user_email'):$event->user_email}}">
-                        </div>
-                        <div class="errors">
-                            @component('components.validation-errors', ['field'=>'user_email'])@endcomponent
-                        </div>
-                    </div>
-                </div>
-
-                <div class="codeweek-form-field-privacy">
-                    <label>
-                        <input id="checkPrivacy" name="privacy"
-                               type="checkbox" {{ auth()->user()->privacy === 1 ? 'checked="checked"' : '' }}>
-                        @lang('event.privacy')
-                        <a href="/privacy" target="_blank">
-                            <img src="/images/external-link.svg" width="16" class="static-image">
-                        </a>
-                    </label>
-                    @component('components.validation-errors', ['field'=>'privacy'])
-                    @endcomponent
-                </div>
-
-
-                <div class="codeweek-form-button-container">
-                    <div class="codeweek-button">
-                        <input type="submit" id="add-button"
-                               onclick="javascript:return addEvent('{{__('school.required.location')}}');"
-                               value="@lang('event.update_activity')">
-                    </div>
-                </div>
-
-            </form>
-
-
+            </div>
         </section>
 
+        <activity-form
+          token="{{ csrf_token() }}"
+          :user="{{ auth()->user() }}"
+          :event="{{ $event }}"
+          :selected-values='@json($selectedValues)'
+          :themes='{{ $themes }}'
+          :audiences='{{ $audiences }}'
+          :leading-teachers="{{ json_encode($leading_teachers) }}"
+          :languages="{{ json_encode($languages) }}"
+          :countries="{{ $countries }}":locale="'{{ App::getLocale() }}'"
+          :location='@json($location ?? (object) [])'
+          :privacy-link="'{{ route('privacy-contact-points') }}'"
+        ></activity-form>
     </section>
-
 @endsection
 
 @push('scripts')
 
-    {{--    <script defer src="//europa.eu/webtools/load.js" type="text/javascript"></script>--}}
-
-    {{--    <script src="{{asset('js/map-add-event.js')}}"></script>--}}
-
     <script defer src="//europa.eu/webtools/load.js" type="text/javascript"></script>
     <script type="application/json">
         {
@@ -351,27 +80,11 @@
 
     </script>
 
-    <script src="{{asset('js/tinymce/tinymce.min.js')}}"></script>
+    <script src="{{ asset('js/tinymce/tinymce.min.js') }}"></script>
 
     <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
 
     <script>
-
-        tinymce.init({
-            selector: '#id_description',
-            height: 400,
-            width: 460
-        });
-
-        function addActivity(activityType) {
-            return {
-                selectedActivityType: activityType,
-                isOnlineActivitySelected() {
-                    return (this.selectedActivityType === 'open-online' || this.selectedActivityType === 'invite-online')
-                },
-            }
-        }
+        document.dispatchEvent(new CustomEvent('tinymce-ready'));
     </script>
-
 @endpush
-
diff --git a/resources/views/event/search.blade.php b/resources/views/event/search.blade.php
index 62e4bb11f..e5b682adb 100755
--- a/resources/views/event/search.blade.php
+++ b/resources/views/event/search.blade.php
@@ -1,4 +1,4 @@
-@extends('layout.base')
+@extends('layout.new_base')
 
 @section('title', 'Find Coding Events Near You – EU Code Week')
 @section('description', 'Search for coding events happening across Europe. Join workshops, hackathons, and coding activities for all skill levels.')
@@ -22,23 +22,54 @@
 {{--    <script src="https://t003c459d.emailsys2a.net/form/26/4245/574a0c9b7e/popup.js" async></script>--}}
 @endpush
 
-@section('content')
+@section('non-vue-content')
+    <style>
+        .leaflet-top.leaflet-left {
+            display: none;
+        }
+        .leaflet-tile {
+            visibility: inherit;
+        }
+        .leaflet-pane {
+          z-index: 10;
+        }
 
-    {{--        {{dd($tag)}}--}}
-    {{--    {{dd($active_countries)}}--}}
+        #map-controls {
+            @apply absolute top-4 right-4 z-50 flex flex-col gap-2;
+        }
+    </style>
+@endsection
 
-    <search-page-component
-            :prp-years={{json_encode($years)}}
-                    :prp-query="'{{$query}}'"
+@section('content')
+    <section id="codeweek-resources-page">
+        <search-page-component
+            :prp-query="'{{$query}}'"
             :prp-selected-country="{{json_encode($selected_country)}}"
-            :prp-selected-year="{{$selected_year}}"
             :countrieslist="{{$active_countries->values()}}"
+            :languages-object="{{ json_encode($languages) }}"
             :audienceslist="{{$audiences}}"
             :themeslist="{{$themes}}"
             :typeslist="{{$activity_types}}"
-            :prp-tag="'{{$tag}}'"
+            map-tile-url="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token={{ config('codeweek.MAPS_MAPBOX_ACCESS_TOKEN') }}"
+        >
+        </search-page-component>
+    </section>
+@endsection
 
-    >
-    </search-page-component>
+@push('extra-css')
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+        <link href="{{asset('css/MarkerCluster.css')}}" media="screen" rel="stylesheet"/>
+        <link href="{{asset('css/MarkerCluster.Default.css')}}" media="screen" rel="stylesheet"/>
+@endpush
+@push('scripts')
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+    <script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
+@endpush
 
-@endsection
\ No newline at end of file
+@push('scripts')
+    <script>
+      document.dispatchEvent(new CustomEvent('leaflet-ready'));
+    </script>
+@endpush
diff --git a/resources/views/event/show.blade.php b/resources/views/event/show.blade.php
index 65a6a7d10..a3cccf02e 100755
--- a/resources/views/event/show.blade.php
+++ b/resources/views/event/show.blade.php
@@ -1,24 +1,54 @@
-@extends('layout.base')
+@extends('layout.new_base')
 
 <x-tailwind></x-tailwind>
 
 @section('title', $event->title)
 
-@section('content')
+@php
+    $list = [
+        (object) ['label' => 'Activities & Events', 'href' => ''],
+    ];
+    $event->load('themes');
+    $event->load('audiences');
+    $event->load('tags');
+@endphp
+
+@section('layout.breadcrumb')
+    @include('layout.breadcrumb', ['list' => $list])
+@endsection
+
+@section('non-vue-content')
+    <style>
+        .leaflet-top.leaflet-left {
+            display: none;
+        }
+        .leaflet-tile {
+            visibility: inherit;
+        }
+        .leaflet-pane {
+          z-index: 10;
+        }
 
-    <section id="codeweek-show-event-page" class="codeweek-page">
+        #map-controls {
+            @apply absolute top-4 right-4 z-50 flex flex-col gap-2;
+        }
+    </style>
+@endsection
+
+@section('content')
+    <section id="codeweek-show-event-page" class="font-['Blinker'] overflow-hidden">
 
         @can('approve', $event)
-            @if($event->certificate_url)
+            <div>
+              @if($event->certificate_url)
                 <reported-event :event="{{$event}}"></reported-event>
             @else
                 <moderate-event :event="{{$event}}" :pending-counter="{{auth()->user()->getEventsToReviewCount()}}"
                                 :next-pending="'{{optional(auth()->user()->getNextPendingEvent($event))->path()}}'"></moderate-event>
             @endif
+            </div>
         @endcan
 
-
-
         @can('report', $event)
             <report-event :event="{{$event}}"></report-event>
         @endcan
@@ -32,234 +62,79 @@
                 <strong>@lang('eventdetails.note')</strong>@lang('eventdetails.pending_warning')
                 <a href="{{route('ambassadors')}}">@lang('eventdetails.pending_link')</a>.
             </div>
-
         @endif
 
-
-        <section class="codeweek-banner show-event">
-            <div class="text">
-                <div class="edit-button">
-                    @can('edit', $event)
-                        <a class="mr-2 codeweek-action-link-button"
-                           href="{{route('edit_event',$event->id)}}">@lang('eventdetails.edit')</a>
-                    @endcan
-
-                    @can('delete', $event)
-                        @if(Auth::check() &&
-    $event->creator_id === auth()->user()->id)
-                            <a class="codeweek-action-link-button red"
-                               href="{{route('delete_event',$event->id)}}">@lang('base.delete')</a>
-                        @endif
-                    @endcan
-                </div>
-                <div class="title">
-                    <h1>{{ $event->title }}</h1>
-                </div>
-            </div>
-            <div class="image">
-                <img src="{{$event->picture_detail_path()}}"/>
-            </div>
+        <section>
+            <img class="w-full h-auto lg:h-[520px] object-cover" src="{{$event->picture_detail_path()}}"/>
         </section>
 
-        <section class="codeweek-content-wrapper">
-
-            {{--            <div class="codeweek-form-inner-two-columns">--}}
-
-            <div class="codeweek-form-inner-container">
-
-                <div class="codeweek-display-field">
-                    <div style="text-transform: capitalize;">
-                        <strong>@lang('eventdetails.from')</strong> {{Carbon\Carbon::parse($event->start_date)->isoFormat('LLLL')}}
-                        <br>
-                        <strong style="text-transform: capitalize">@lang('eventdetails.to')</strong> {{Carbon\Carbon::parse($event->end_date)->isoFormat('LLLL')}}
-                    </div>
-                </div>
-
-                <div class="codeweek-display-field">
-
-                    <label class="block pr-4 mb-1 font-bold text-orange-500 md:mb-0" for="inline-full-name">
-                        @lang('eventdetails.organised_by')
-                    </label>
-                    <p>
-
-                        {{ $event->organizer }}
-                        @can('approve', $event)
-                            <a href="mailto:{{$event->user_email}}">{{$event->user_email}}</a>
+        @canany(['edit', 'delete'], $event)
+            <section class="relative z-10">
+                <div class="relative z-10 pt-10 codeweek-container-lg flex justify-center">
+                    <div class="flex gap-4 w-full max-w-[880px]">
+                        @can('edit', $event)
+                            <a
+                              class="flex justify-center items-center gap-2 text-[#1C4DA1] border-solid border-2 border-[#1C4DA1] rounded-full py-2 px-6 font-semibold text-lg transition-all duration-300 hover:bg-[#E8EDF6] group"
+                              href="{{route('edit_event',$event->id)}}"
+                            >
+                              <span>@lang('eventdetails.edit')</span>
+                            </a>
                         @endcan
-                    </p>
-                </div>
-
-
-                <div class="codeweek-display-field">
-                    <label class="block pr-4 mb-1 font-bold text-orange-500 md:mb-0"
-                           for="activity_type">@lang('event.activitytype.label')</label>
-                    <p>
-                        @if($event->activity_type && $event->activity_type !== 'other')
-                            {{__("event.activitytype.{$event->activity_type}")}}
-                        @else
-                            {{__("event.organizertype.other")}}
-                        @endif
-                    </p>
-                </div>
-
-
-                @if($event->contact_person)
-                    <div class="codeweek-display-field">
-                        <label class="block pr-4 mb-1 font-bold text-orange-500 md:mb-0"
-                               for="inline-full-name">@lang('eventdetails.contact_email')</label>
-                        <p><a href="mailto:{{ $event->contact_person }}">{{ $event->contact_person }}</a></p>
-                    </div>
-                @endif
-
-                @if($event->language)
-                    <div class="codeweek-display-field">
-                        <label class="block pr-4 mb-1 font-bold text-orange-500 md:mb-0"
-                               for="inline-full-name">@lang('resources.Languages')</label>
-                        <p>@lang("base.languages.{$event->language}")</p>
-                    </div>
-                @endif
-
-                <div class="codeweek-display-field">
-                    <label class="block pr-4 mb-1 font-bold text-orange-500 md:mb-0"
-                           for="inline-full-name">@lang('eventdetails.happening_at')</label>
-                    <p>{!! $event->location !!}</p>
-                </div>
-
-                <div class="codeweek-display-field">
-                    <label class="block pr-4 mb-1 font-bold text-orange-500 md:mb-0"
-                           for="inline-full-name">@lang('eventdetails.description')</label>
-                    <p>{!!   $event->description !!}</p>
-                </div>
-
-                @if($event->event_url)
-                    <div class="codeweek-display-field">
-                        <label class="block pr-4 mb-1 font-bold text-orange-500 md:mb-0"
-                               for="inline-full-name">@lang('eventdetails.more_info')</label>
-                        <p><a href="{{ $event->event_url }}" target="_blank">{{ $event->event_url }}</a></p>
-                    </div>
-                @endif
-
-
-                @if($event->audiences->count())
-                    <div class="codeweek-display-field" style="margin-bottom: 0;">
-                        <label class="block pr-4 mb-1 font-bold text-orange-500 md:mb-0"
-                               for="inline-full-name">@lang('eventdetails.audience')</label>
-                        <div class="itens">
-                            <ul class="event-list">
-                                @foreach($event->audiences as $audience)
-                                    <x-pill>
-                                        @lang('event.audience.'.$audience->name)
-                                    </x-pill>
-                                @endforeach
-                            </ul>
-                        </div>
-                    </div>
-                @endif
 
-                @if($event->themes->count())
-                    <div class="codeweek-display-field" style="margin-bottom: 0;">
-                        <label class="block pr-4 mb-1 font-bold text-orange-500 md:mb-0"
-                               for="inline-full-name">@lang('eventdetails.themes')</label>
-                        <div class="itens">
-                            <ul class="event-list">
-                                @foreach($event->themes as $theme)
-                                    <x-pill>
-                                        @lang('event.theme.'.$theme->name)
-                                    </x-pill>
-                                @endforeach
-                            </ul>
-                        </div>
-                    </div>
-                @endif
-
-                @if($event->tags->count())
-                    <div class="codeweek-display-field" style="margin-bottom: 0;">
-                        <label class="block pr-4 mb-1 font-bold text-orange-500 md:mb-0"
-                               for="inline-full-name">@lang('eventdetails.tags')</label>
-                        <div class="itens">
-                            <ul class="event-list">
-
-                                @foreach($event->tags as $tag)
-
-                                    <x-pill-tag type="tag" slug="{{$tag->slug}}">
-                                        {{$tag->name}}
-                                    </x-pill-tag>
-
-                                @endforeach
-                            </ul>
-                        </div>
-                    </div>
-                @endif
-
-                @can('edit', $event)
-                    @if($event->codeweek_for_all_participation_code)
-                        <div class="codeweek-display-field">
-                            <label class="block pr-4 mb-1 font-bold text-orange-500 md:mb-0"
-                                   for="inline-full-name">@lang('event.codeweek_for_all_participation_code.title')</label>
-                            <p>{{ $event->codeweek_for_all_participation_code }}</p>
-                        </div>
-                    @endif
-
-                    <div class="codeweek-display-field">
-                        <label class="block pr-4 mb-1 font-bold text-orange-500 md:mb-0"
-                               for="inline-full-name">@lang('event.last_update')</label>
-                        <p>
-                            {{Carbon\Carbon::parse($event->updated_at)->isoFormat('LLLL')}}
-                        </p>
-                    </div>
-                @endcan
-
-
-                <div class="codeweek-display-field">
-                    <label class="block pr-4 mb-1 font-bold text-orange-500 md:mb-0"
-                           for="inline-full-name">@lang('eventdetails.share')</label>
-                    <div class="share-event-wrapper">
-                        <div class="fb-like"
-                             data-href="{{config('codeweek.app_url')}}{{$event->path()}}" data-layout="button_count"
-                             data-action="recommend"
-                             data-show-faces="false" data-share="true"></div>
-
-                        <a href="https://twitter.com/share" class="twitter-share-button"
-                           data-url="{{config('codeweek.app_url')}}{{$event->path()}}"
-                           data-text="Check out {{ $event->title }} at" data-via="CodeWeekEU"
-                           data-hashtags="codeEU">Tweet</a>
-
-                        <div class="g-plusone" data-size="medium" data-href="{{config('codeweek.app_url')}}"></div>
-                        <a class="fa fa-envelope" title='@lang('eventdetails.email.tooltip')'
-                           href="mailto:?subject=@lang('eventdetails.email.subject')&amp;body=@lang('eventdetails.email.body_1'){{ $event->title }}@lang('eventdetails.email.body_2'){{config('codeweek.app_url')}}{{$event->path()}}"></a>
+                        @can('delete', $event)
+                            @if(Auth::check() && $event->creator_id === auth()->user()->id)
+                                <a
+                                  class="block bg-[#F95C22] rounded-full py-2 px-6 font-['Blinker'] hover:bg-hover-orange duration-300"
+                                  href="{{route('delete_event',$event->id)}}"
+                                >
+                                  <span class="text-lg font-semibold text-black">
+                                    @lang('base.delete')
+                                  </span>
+                                </a>
+                            @endif
+                        @endcan
                     </div>
-                </div>
-
-                {{--                </div>--}}
-
-                {{--                <div class="codeweek-form-inner-container">--}}
-                {{--                    @component('components.calendar',['event'=>$event])--}}
-                {{--                    @endcomponent--}}
-                {{--                </div>--}}
-
-            </div>
-
-            <div id="events-show-map" style="margin-bottom: 20px;"></div>
-
-            <div class="codeweek-display-field">
-                <label class="block pr-4 mb-1 font-bold text-orange-500 md:mb-0">Location Coordinates</label>
-                <p>
-                    Longitude: {{ $event->longitude }}<br>
-                    Latitude: {{ $event->latitude }}<br>
-                    Geoposition: {{ $event->geoposition }}
-                </p>
-            </div>
-
-            <h2 style="margin-top: 40px; margin-bottom: 30px;">@lang('eventdetails.nearby_upcoming_events')</h2>
-            <div class="codeweek-grid-layout">
-                @foreach($event->getClosest() as $evt)
-                    @component('event.event_tile', ['event'=>$evt])
-                    @endcomponent
-                @endforeach
+            </section>
+        @endcanany
+
+        <event-detail
+          :can-approve="{{ auth()->check() && auth()->user()->can('approve', $event) ? 'true' : 'false' }}"
+          :can-edit="{{ auth()->check() && auth()->user()->can('edit', $event) ? 'true' : 'false' }}"
+          :event="{{ $event }}"
+          event-picture-url={{ $event->picture_detail_path() }}
+          map-tile-url="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token={{ config('codeweek.MAPS_MAPBOX_ACCESS_TOKEN') }}"
+
+          from-text="{{ Carbon\Carbon::parse($event->start_date)->isoFormat('LLL') }}"
+          to-text="{{ Carbon\Carbon::parse($event->end_date)->isoFormat('LLL') }}"
+          last-update-text="{{ Carbon\Carbon::parse($event->updated_at)->isoFormat('LLL') }}"
+          app-url="{{config('codeweek.app_url')}}"
+          share-url="{{config('codeweek.app_url')}}{{$event->path()}}"
+          event-path="{{ $event->path() }}"
+          email-href="mailto:?subject=@lang('eventdetails.email.subject')&amp;body=@lang('eventdetails.email.body_1'){{ $event->title }}@lang('eventdetails.email.body_2'){{config('codeweek.app_url')}}{{$event->path()}}"
+        ></event-detail>
+
+        <section class="relative overflow-hidden pt-20 md:pt-48">
+            <div
+                    class="absolute w-full h-[800px] bg-yellow-50 md:hidden top-0"
+                    style="clip-path: ellipse(270% 90% at 38% 90%)"
+            ></div>
+            <div
+                    class="absolute w-full h-[800px] bg-yellow-50 hidden md:block top-0"
+                    style="clip-path: ellipse(88% 90% at 50% 90%)"
+            ></div>
+            <div class="bg-yellow-50 pb-16 md:pb-28">
+              <div class="codeweek-container-lg relative">
+                  <h2 class="text-center text-dark-blue text-[22px] md:text-4xl leading-7 md:leading-[44px] font-medium font-['Montserrat'] mb-10">
+                      Nearby upcoming events
+                  </h2>
+                  <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6 xl:gap-10">
+                      @foreach($event->getClosest() as $evt)
+                          <event-card :event="{{$evt}}"></event-card>
+                      @endforeach
+                  </div>
+              </div>
             </div>
-
         </section>
-
     </section>
 
 @endsection
@@ -267,8 +142,8 @@
 @push('scripts')
 
     <script>
-        window.event_details = {!! json_encode($event->getJavascriptData()) !!};
-        window.event_coordinates = event_details.geoposition.split(",");
+      window.event_details = {!! json_encode($event->getJavascriptData()) !!};
+      window.event_coordinates = event_details.geoposition.split(",");
     </script>
 
     <script defer src="//europa.eu/webtools/load.js" type="text/javascript"></script>
@@ -281,14 +156,20 @@
             "renderTo" : "events-show-map",
             "custom": ["/js/hideMenuMap.js","/js/leaflet.markercluster.js"]
         }
-
-
-
-
-
-
-
     </script>
 @endpush
 
+@push('extra-css')
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+@endpush
+@push('scripts')
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+@endpush
 
+@push('scripts')
+    <script>
+      document.dispatchEvent(new CustomEvent('leaflet-ready'));
+    </script>
+@endpush
diff --git a/tailwind.config.js b/tailwind.config.js
index 839a5745d..030457d59 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,7 +15,8 @@ module.exports = {
         'orange-gradient': 'linear-gradient(36.92deg, #F95C22 20.32%, #FF885C 28.24%)',
         'violet-gradient': 'linear-gradient(247deg, #410098 22.05%, #6733AD 79.09%)',
         'yellow-transparent-gradient': 'linear-gradient(90deg, #FFFBE5 35%, #00000000 90%)',
-        'yellow-transparent-opposite-gradient': 'linear-gradient(90deg, #00000000 10%, #FFFBE5 65%)'
+        'yellow-transparent-opposite-gradient': 'linear-gradient(90deg, #00000000 10%, #FFFBE5 65%)',
+        'green-gradient': 'linear-gradient(90deg, #33C2E9 35%, #00B3E3 90%)',
       },
       colors: {
         'primary': '#F95C22',
@@ -34,17 +35,22 @@ module.exports = {
         'dark-blue': '#1C4DA1',
         'hover-blue': '#0A42A1',
         'slate': '#5C656D',
+        'slate-400': '#5C656D',
         'slate-500': '#333E48',
+        'slate-600': '#20262C',
         'light-blue': '#F2FBFE',
         'error-200': '#E30519',
         'dark-blue-50': '#E8EDF6',
+        'dark-blue-100': '#D2DBEC',
         'dark-blue-200': '#A4B8D9',
         'dark-blue-300': '#7794C7',
         'dark-blue-400': '#4971B4',
         'grey-3': '#F2F2F8',
         'lime': '#99CC28',
         'black-light': '#00000080',
-        'light-blue-100': '#CCF0F9'
+        'light-blue-100': '#CCF0F9',
+        'light-blue-300': '#66D1EE',
+        'gray-10': '#F4F6FA',
       },
       fontFamily: {
         blinker: ['Blinker', 'sans-serif'],