diff --git a/backend/src/models/company.go b/backend/src/models/company.go
index cb3930db..96f5ab76 100644
--- a/backend/src/models/company.go
+++ b/backend/src/models/company.go
@@ -43,31 +43,33 @@ type CompanyParticipation struct {
 	// These are used to sync communications with Gmail.
 	GmailThreadIds []string `json:"gmailThreadIds,omitempty" bson:"gmailThreadIds,omitempty"`
 
-  // Stand details
-  StandDetails StandDetails `json:"standDetails,omitempty" bson:"standDetails,omitempty"`
+	// Stand details
+	StandDetails StandDetails `json:"standDetails,omitempty" bson:"standDetails,omitempty"`
 
-  // Stand and days at the venue
-  Stands []Stand `json:"stands,omitempty" bson:"stands,omitempty"`
+	// Stand and days at the venue
+	Stands []Stand `json:"stands,omitempty" bson:"stands,omitempty"`
 
+	// Tasks tracks the company's task pipeline progress.
+	Tasks CompanyTasks `json:"tasks" bson:"tasks"`
 }
 
 type Stand struct {
-  // Stand identifier
-  StandID string  `json:"standId" bson:"standId"`
+	// Stand identifier
+	StandID string `json:"standId" bson:"standId"`
 
-  // Day at the venue
-  Date *time.Time `json:"date,omitempty" bson:"date,omitempty"`
+	// Day at the venue
+	Date *time.Time `json:"date,omitempty" bson:"date,omitempty"`
 }
 
 type StandDetails struct {
-  // Number of chairs required by the company
-  Chairs int `json:"chairs" bson:"chairs"`
+	// Number of chairs required by the company
+	Chairs int `json:"chairs" bson:"chairs"`
 
-  // Require front table
-  Table bool `json:"table" bson:"table"`
+	// Require front table
+	Table bool `json:"table" bson:"table"`
 
-  // Require lettering
-  Lettering bool `json:"lettering" bson:"lettering"`
+	// Require lettering
+	Lettering bool `json:"lettering" bson:"lettering"`
 }
 
 // CompanyBillingInfo of company
@@ -132,11 +134,11 @@ type CompanyParticipationPublic struct {
 	// Participation's package is a Package _id (see models.Package).
 	Package PackagePublic `json:"package,omitempty"`
 
-  // Stand details
-  StandDetails StandDetails `json:"standDetails,omitempty"`
+	// Stand details
+	StandDetails StandDetails `json:"standDetails,omitempty"`
 
-  // Days at the venue
-  Stands []Stand `json:"stands,omitempty"`
+	// Days at the venue
+	Stands []Stand `json:"stands,omitempty"`
 }
 
 // CompanyPublic represents a company to be contacted by the team, that will hopefully participate
diff --git a/backend/src/models/speaker.go b/backend/src/models/speaker.go
index a7295e2b..501fe7ea 100644
--- a/backend/src/models/speaker.go
+++ b/backend/src/models/speaker.go
@@ -44,6 +44,9 @@ type SpeakerParticipation struct {
 	// GmailThreadIds is an array of Gmail thread IDs linked to this participation.
 	// These are used to sync communications with Gmail.
 	GmailThreadIds []string `json:"gmailThreadIds,omitempty" bson:"gmailThreadIds,omitempty"`
+
+	// Tasks tracks the speaker's task pipeline progress.
+	Tasks SpeakerTasks `json:"tasks" bson:"tasks"`
 }
 
 type SpeakerImages struct {
@@ -68,8 +71,8 @@ type Speaker struct {
 	Name string `json:"name" bson:"name"`
 
 	// Contact is an _id of Contact (see models.Contact).
-	Contact *primitive.ObjectID `json:"contact,omitempty" bson:"contact"`
-	ContactObject *Contact `json:"contactObject,omitempty" bson:"contactObject"`
+	Contact       *primitive.ObjectID `json:"contact,omitempty" bson:"contact"`
+	ContactObject *Contact            `json:"contactObject,omitempty" bson:"contactObject"`
 
 	// Title of the speaker (CEO @ HugeCorportation, for example).
 	Title string `json:"title" bson:"title"`
@@ -77,8 +80,8 @@ type Speaker struct {
 	// Bio of the speaker. Careful, this will be visible on our website!
 	Bio string `json:"bio" bson:"bio"`
 
-  	// Company name
-  	CompanyName string `json:"companyName" bson:"companyName"`
+	// Company name
+	CompanyName string `json:"companyName" bson:"companyName"`
 
 	// This is only visible by the team. Praise and trash talk at will.
 	Notes          string                 `json:"notes" bson:"notes"`
@@ -120,8 +123,8 @@ type SpeakerPublic struct {
 	// Bio of the speaker. Careful, this will be visible on our website!
 	Bio string `json:"bio" bson:"bio"`
 
-  // Company name
-  CompanyName string `json:"companyName,omitempty" bson:"companyName"`
+	// Company name
+	CompanyName string `json:"companyName,omitempty" bson:"companyName"`
 
 	Images         SpeakerImagesPublic          `json:"imgs" bson:"imgs"`
 	Participations []SpeakerParticipationPublic `json:"participation" bson:"participations"`
diff --git a/backend/src/models/task.go b/backend/src/models/task.go
new file mode 100644
index 00000000..32db689b
--- /dev/null
+++ b/backend/src/models/task.go
@@ -0,0 +1,265 @@
+package models
+
+import (
+	"time"
+
+	"go.mongodb.org/mongo-driver/bson"
+	"go.mongodb.org/mongo-driver/bson/bsontype"
+)
+
+// ============================================================
+// Shared task fields (used by both companies and speakers)
+// ============================================================
+
+// TaskLogos tracks logo delivery status.
+type TaskLogos struct {
+	Received       bool `json:"received" bson:"received"`
+	NeedsReviewing bool `json:"needsReviewing" bson:"needsReviewing"`
+}
+
+// ============================================================
+// Company-specific task types
+// ============================================================
+
+// CompanyTaskConfirmation tracks confirmation-related progress for a company.
+type CompanyTaskConfirmation struct {
+	AskedForInfo bool `json:"askedForInfo" bson:"askedForInfo"`
+}
+
+// CompanyTaskContract tracks contract lifecycle.
+type CompanyTaskContract struct {
+	Sent        bool `json:"sent" bson:"sent"`
+	Created     bool `json:"created" bson:"created"`
+	Signed      bool `json:"signed" bson:"signed"`
+	ReceiptSent bool `json:"receiptSent" bson:"receiptSent"`
+	Paid        bool `json:"paid" bson:"paid"`
+}
+
+// CompanyTaskSessionTitles tracks session / workshop titles.
+type CompanyTaskSessionTitles struct {
+	PresentationTitle string `json:"presentationTitle" bson:"presentationTitle"`
+	WorkshopTitle     string `json:"workshopTitle" bson:"workshopTitle"`
+}
+
+// CompanyTaskCorlief tracks Corlief-related steps.
+type CompanyTaskCorlief struct {
+	PreNotice bool `json:"preNotice" bson:"preNotice"`
+	Scheduled bool `json:"scheduled" bson:"scheduled"`
+	Reserved  bool `json:"reserved" bson:"reserved"`
+}
+
+// CompanyTaskLogistics tracks logistics info.
+type CompanyTaskLogistics struct {
+	RequestedInfo bool   `json:"requestedInfo" bson:"requestedInfo"`
+	CarStatus     string `json:"carStatus" bson:"carStatus"` // "not_responded", "wants", "not_wants"
+	LicensePlate  string `json:"licensePlate" bson:"licensePlate"`
+}
+
+// CompanyTasks is the top-level task object embedded in CompanyParticipation.
+type CompanyTasks struct {
+	Confirmation  CompanyTaskConfirmation  `json:"confirmation" bson:"confirmation"`
+	Logos         TaskLogos                `json:"logos" bson:"logos"`
+	Contract      CompanyTaskContract      `json:"contract" bson:"contract"`
+	SessionTitles CompanyTaskSessionTitles `json:"sessionTitles" bson:"sessionTitles"`
+	Corlief       CompanyTaskCorlief       `json:"corlief" bson:"corlief"`
+	Logistics     CompanyTaskLogistics     `json:"logistics" bson:"logistics"`
+	PO            string                   `json:"po" bson:"po"`
+}
+
+// ============================================================
+// Speaker-specific task types
+// ============================================================
+
+// SpeakerTaskConfirmation tracks confirmation-related progress for a speaker.
+type SpeakerTaskConfirmation struct {
+	Phone         string `json:"phone" bson:"phone"`
+	LinkedIn      string `json:"linkedin" bson:"linkedin"`
+	WantsLinkedIn string `json:"wantsLinkedinTag" bson:"wantsLinkedinTag"` // "not_responded", "yes", "no"
+	Observations  string `json:"observations" bson:"observations"`
+}
+
+// UnmarshalBSON handles legacy bool values stored for WantsLinkedIn.
+func (s *SpeakerTaskConfirmation) UnmarshalBSON(data []byte) error {
+	var raw bson.Raw
+	if err := bson.Unmarshal(data, &raw); err != nil {
+		return err
+	}
+
+	decodeString := func(key string) string {
+		val, err := raw.LookupErr(key)
+		if err != nil {
+			return ""
+		}
+		if val.Type == bsontype.String {
+			v, _ := val.StringValueOK()
+			return v
+		}
+		return ""
+	}
+
+	decodeLinkedIn := func(key string) string {
+		val, err := raw.LookupErr(key)
+		if err != nil {
+			return "not_responded"
+		}
+		switch val.Type {
+		case bsontype.Boolean:
+			b, _ := val.BooleanOK()
+			return boolToString(b)
+		case bsontype.String:
+			v, _ := val.StringValueOK()
+			return v
+		default:
+			return "not_responded"
+		}
+	}
+
+	s.Phone = decodeString("phone")
+	s.LinkedIn = decodeString("linkedin")
+	s.WantsLinkedIn = decodeLinkedIn("wantsLinkedinTag")
+	s.Observations = decodeString("observations")
+	return nil
+}
+
+// MarshalBSON always writes string values.
+func (s SpeakerTaskConfirmation) MarshalBSON() ([]byte, error) {
+	return bson.Marshal(bson.D{
+		{Key: "phone", Value: s.Phone},
+		{Key: "linkedin", Value: s.LinkedIn},
+		{Key: "wantsLinkedinTag", Value: s.WantsLinkedIn},
+		{Key: "observations", Value: s.Observations},
+	})
+}
+
+// SpeakerTaskFlightLeg stores one leg (arrival or departure).
+type SpeakerTaskFlightLeg struct {
+	Airport      string     `json:"airport" bson:"airport"`
+	FlightNumber string     `json:"flightNumber" bson:"flightNumber"`
+	Date         *time.Time `json:"date,omitempty" bson:"date,omitempty"`
+	Time         string     `json:"time" bson:"time"`
+}
+
+// SpeakerTaskFlightDetails stores pricing / status / booking info.
+type SpeakerTaskFlightDetails struct {
+	Price      string `json:"price" bson:"price"`
+	Status     string `json:"status" bson:"status"` // "pending", "received", "approved", "bought"
+	Link       string `json:"link" bson:"link"`
+	BookingRef string `json:"bookingRef" bson:"bookingRef"`
+}
+
+// SpeakerTaskFlightRefund stores refund info.
+type SpeakerTaskFlightRefund struct {
+	Amount     string `json:"amount" bson:"amount"`
+	Method     string `json:"method" bson:"method"`
+	InfoNeeded string `json:"infoNeeded" bson:"infoNeeded"`
+	Status     string `json:"status" bson:"status"` // "not_started", "receipt_requested", "info_requested", "done"
+}
+
+// SpeakerTaskFlights stores everything flight-related.
+type SpeakerTaskFlights struct {
+	NeedsFlights string                   `json:"needsFlights" bson:"needsFlights"` // "not_responded", "yes", "no"
+	Requested    bool                     `json:"requested" bson:"requested"`
+	Arrival      SpeakerTaskFlightLeg     `json:"arrival" bson:"arrival"`
+	Departure    SpeakerTaskFlightLeg     `json:"departure" bson:"departure"`
+	Details      SpeakerTaskFlightDetails `json:"details" bson:"details"`
+	Refund       SpeakerTaskFlightRefund  `json:"refund" bson:"refund"`
+}
+
+// SpeakerTaskCoverage tracks video/photo coverage confirmation.
+type SpeakerTaskCoverage struct {
+	Video     string `json:"video" bson:"video"`         // "not_responded", "yes", "no"
+	Streaming string `json:"streaming" bson:"streaming"` // "not_responded", "yes", "no"
+	Photo     string `json:"photo" bson:"photo"`         // "not_responded", "yes", "no"
+}
+
+// boolToString converts legacy boolean values to the new string format.
+func boolToString(v interface{}) string {
+	switch b := v.(type) {
+	case bool:
+		if b {
+			return "yes"
+		}
+		return "no"
+	case string:
+		return b
+	default:
+		return "not_responded"
+	}
+}
+
+// UnmarshalBSON handles legacy boolean fields being decoded into string fields.
+func (c *SpeakerTaskCoverage) UnmarshalBSON(data []byte) error {
+	var raw bson.Raw
+	if err := bson.Unmarshal(data, &raw); err != nil {
+		return err
+	}
+
+	decodeField := func(key string) string {
+		val, err := raw.LookupErr(key)
+		if err != nil {
+			return "not_responded"
+		}
+		switch val.Type {
+		case bsontype.Boolean:
+			b, _ := val.BooleanOK()
+			return boolToString(b)
+		case bsontype.String:
+			s, _ := val.StringValueOK()
+			return s
+		default:
+			return "not_responded"
+		}
+	}
+
+	c.Video = decodeField("video")
+	c.Streaming = decodeField("streaming")
+	c.Photo = decodeField("photo")
+	return nil
+}
+
+// MarshalBSON always writes string values.
+func (c SpeakerTaskCoverage) MarshalBSON() ([]byte, error) {
+	return bson.Marshal(bson.D{
+		{Key: "video", Value: c.Video},
+		{Key: "streaming", Value: c.Streaming},
+		{Key: "photo", Value: c.Photo},
+	})
+}
+
+// SpeakerTaskMaterials tracks talk info and materials delivery.
+type SpeakerTaskMaterials struct {
+	Requested       bool   `json:"requested" bson:"requested"`
+	TalkTitle       string `json:"talkTitle" bson:"talkTitle"`
+	TalkDescription string `json:"talkDescription" bson:"talkDescription"`
+	Received        bool   `json:"received" bson:"received"`
+	TestSchedule    string `json:"testSchedule" bson:"testSchedule"`
+	TestDone        bool   `json:"testDone" bson:"testDone"`
+}
+
+// SpeakerTaskHotel stores hotel / booking / payment info.
+type SpeakerTaskHotel struct {
+	NeedsHotel string     `json:"needsHotel" bson:"needsHotel"` // "not_responded", "yes", "no"
+	Requested  bool       `json:"requested" bson:"requested"`
+	HotelName  string     `json:"hotelName" bson:"hotelName"`
+	RoomType   string     `json:"roomType" bson:"roomType"`
+	Price      string     `json:"price" bson:"price"`
+	CheckIn    *time.Time `json:"checkIn,omitempty" bson:"checkIn,omitempty"`
+	CheckOut   *time.Time `json:"checkOut,omitempty" bson:"checkOut,omitempty"`
+	NumNights  string     `json:"numNights" bson:"numNights"`
+	NumGuests  string     `json:"numGuests" bson:"numGuests"`
+	GuestNames string     `json:"guestNames" bson:"guestNames"`
+	Invoice    bool       `json:"invoice" bson:"invoice"`
+	Paid       bool       `json:"paid" bson:"paid"`
+	Notes      string     `json:"notes" bson:"notes"`
+}
+
+// SpeakerTasks is the top-level task object embedded in SpeakerParticipation.
+type SpeakerTasks struct {
+	Confirmation SpeakerTaskConfirmation `json:"confirmation" bson:"confirmation"`
+	Logos        TaskLogos               `json:"logos" bson:"logos"`
+	AskedForInfo bool                    `json:"askedForInfo" bson:"askedForInfo"`
+	Flights      SpeakerTaskFlights      `json:"flights" bson:"flights"`
+	Coverage     SpeakerTaskCoverage     `json:"coverage" bson:"coverage"`
+	Materials    SpeakerTaskMaterials    `json:"materials" bson:"materials"`
+	Hotel        SpeakerTaskHotel        `json:"hotel" bson:"hotel"`
+}
diff --git a/backend/src/mongodb/task.go b/backend/src/mongodb/task.go
new file mode 100644
index 00000000..0ca31076
--- /dev/null
+++ b/backend/src/mongodb/task.go
@@ -0,0 +1,107 @@
+package mongodb
+
+import (
+	"context"
+	"encoding/json"
+	"io"
+	"log"
+
+	"github.com/sinfo/deck2/src/models"
+	"go.mongodb.org/mongo-driver/bson"
+	"go.mongodb.org/mongo-driver/bson/primitive"
+	"go.mongodb.org/mongo-driver/mongo/options"
+)
+
+// ============================================================
+// Company Tasks
+// ============================================================
+
+// UpdateCompanyTasksData holds the payload sent by the frontend.
+type UpdateCompanyTasksData struct {
+	Tasks *models.CompanyTasks `json:"tasks"`
+}
+
+// ParseBody fills the UpdateCompanyTasksData from a request body.
+func (d *UpdateCompanyTasksData) ParseBody(body io.Reader) error {
+	if err := json.NewDecoder(body).Decode(d); err != nil {
+		return err
+	}
+	return nil
+}
+
+// UpdateCompanyTasks persists the task data on the company's current-event participation.
+func (c *CompaniesType) UpdateCompanyTasks(companyID primitive.ObjectID, data UpdateCompanyTasksData) (*models.Company, error) {
+	ctx := context.Background()
+	var updatedCompany models.Company
+
+	currentEvent, err := Events.GetCurrentEvent()
+	if err != nil {
+		return nil, err
+	}
+
+	setFields := bson.M{
+		"participations.$.tasks": data.Tasks,
+	}
+
+	updateQuery := bson.M{"$set": setFields}
+	filterQuery := bson.M{"_id": companyID, "participations.event": currentEvent.ID}
+
+	optionsQuery := options.FindOneAndUpdate()
+	optionsQuery.SetReturnDocument(options.After)
+
+	if err := c.Collection.FindOneAndUpdate(ctx, filterQuery, updateQuery, optionsQuery).Decode(&updatedCompany); err != nil {
+		log.Println("Error updating company tasks:", err)
+		return nil, err
+	}
+
+	ResetCurrentPublicCompanies()
+
+	return &updatedCompany, nil
+}
+
+// ============================================================
+// Speaker Tasks
+// ============================================================
+
+// UpdateSpeakerTasksData holds the payload sent by the frontend.
+type UpdateSpeakerTasksData struct {
+	Tasks *models.SpeakerTasks `json:"tasks"`
+}
+
+// ParseBody fills the UpdateSpeakerTasksData from a request body.
+func (d *UpdateSpeakerTasksData) ParseBody(body io.Reader) error {
+	if err := json.NewDecoder(body).Decode(d); err != nil {
+		return err
+	}
+	return nil
+}
+
+// UpdateSpeakerTasks persists the task data on the speaker's current-event participation.
+func (s *SpeakersType) UpdateSpeakerTasks(speakerID primitive.ObjectID, data UpdateSpeakerTasksData) (*models.Speaker, error) {
+	ctx := context.Background()
+	var updatedSpeaker models.Speaker
+
+	currentEvent, err := Events.GetCurrentEvent()
+	if err != nil {
+		return nil, err
+	}
+
+	setFields := bson.M{
+		"participations.$.tasks": data.Tasks,
+	}
+
+	updateQuery := bson.M{"$set": setFields}
+	filterQuery := bson.M{"_id": speakerID, "participations.event": currentEvent.ID}
+
+	optionsQuery := options.FindOneAndUpdate()
+	optionsQuery.SetReturnDocument(options.After)
+
+	if err := s.Collection.FindOneAndUpdate(ctx, filterQuery, updateQuery, optionsQuery).Decode(&updatedSpeaker); err != nil {
+		log.Println("Error updating speaker tasks:", err)
+		return nil, err
+	}
+
+	ResetCurrentPublicSpeakers()
+
+	return &updatedSpeaker, nil
+}
diff --git a/backend/src/router/init.go b/backend/src/router/init.go
index c2db8fbb..2402b4e6 100644
--- a/backend/src/router/init.go
+++ b/backend/src/router/init.go
@@ -183,6 +183,7 @@ func InitializeRouter() {
 	companyRouter.HandleFunc("/{id}/employer", authMember(addEmployer)).Methods("POST")
 	companyRouter.HandleFunc("/{id}/employer/{rep}", authMember(removeEmployer)).Methods("DELETE")
 	companyRouter.HandleFunc("/{id}/contract/docx", authCoordinator(generateCompanyContractDocx)).Methods("POST")
+	companyRouter.HandleFunc("/{id}/participation/tasks", authMember(updateCompanyTasks)).Methods("PUT")
 
 	// speaker handlers
 	speakerRouter := r.PathPrefix("/speakers").Subrouter()
@@ -211,6 +212,7 @@ func InitializeRouter() {
 	speakerRouter.HandleFunc("/{id}/participation/gmail-threads", authMember(updateSpeakerGmailThreadIds)).Methods("PUT")
 	speakerRouter.HandleFunc("/{id}/participation/gmail-sync", authMember(syncSpeakerGmailMessages)).Methods("POST")
 	speakerRouter.HandleFunc("/{id}/participation", authCoordinator(removeSpeakerParticipation)).Methods("DELETE")
+	speakerRouter.HandleFunc("/{id}/participation/tasks", authMember(updateSpeakerTasks)).Methods("PUT")
 
 	// flightInfo handlers
 	flightInfoRouter := r.PathPrefix("/flightInfo").Subrouter()
diff --git a/backend/src/router/task.go b/backend/src/router/task.go
new file mode 100644
index 00000000..5f5f79da
--- /dev/null
+++ b/backend/src/router/task.go
@@ -0,0 +1,91 @@
+package router
+
+import (
+	"encoding/json"
+	"net/http"
+
+	"github.com/gorilla/mux"
+	"github.com/sinfo/deck2/src/models"
+	"github.com/sinfo/deck2/src/mongodb"
+	"go.mongodb.org/mongo-driver/bson/primitive"
+)
+
+// ============================================================
+// Company Tasks
+// ============================================================
+
+func updateCompanyTasks(w http.ResponseWriter, r *http.Request) {
+	defer r.Body.Close()
+
+	params := mux.Vars(r)
+	companyID, _ := primitive.ObjectIDFromHex(params["id"])
+
+	if _, err := mongodb.Companies.GetCompany(companyID); err != nil {
+		http.Error(w, "Invalid company ID: "+err.Error(), http.StatusNotFound)
+		return
+	}
+
+	var data = &mongodb.UpdateCompanyTasksData{}
+
+	if err := data.ParseBody(r.Body); err != nil {
+		http.Error(w, "Could not parse body: "+err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	updatedCompany, err := mongodb.Companies.UpdateCompanyTasks(companyID, *data)
+
+	if err != nil {
+		http.Error(w, "Could not update company tasks: "+err.Error(), http.StatusExpectationFailed)
+		return
+	}
+
+	json.NewEncoder(w).Encode(updatedCompany)
+
+	// notify
+	if credentials, ok := r.Context().Value(credentialsKey).(models.AuthorizationCredentials); ok {
+		mongodb.Notifications.Notify(credentials.ID, mongodb.CreateNotificationData{
+			Kind:    models.NotificationKindUpdated,
+			Company: &updatedCompany.ID,
+		})
+	}
+}
+
+// ============================================================
+// Speaker Tasks
+// ============================================================
+
+func updateSpeakerTasks(w http.ResponseWriter, r *http.Request) {
+	defer r.Body.Close()
+
+	params := mux.Vars(r)
+	speakerID, _ := primitive.ObjectIDFromHex(params["id"])
+
+	if _, err := mongodb.Speakers.GetSpeaker(speakerID); err != nil {
+		http.Error(w, "Invalid speaker ID: "+err.Error(), http.StatusNotFound)
+		return
+	}
+
+	var data = &mongodb.UpdateSpeakerTasksData{}
+
+	if err := data.ParseBody(r.Body); err != nil {
+		http.Error(w, "Could not parse body: "+err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	updatedSpeaker, err := mongodb.Speakers.UpdateSpeakerTasks(speakerID, *data)
+
+	if err != nil {
+		http.Error(w, "Could not update speaker tasks: "+err.Error(), http.StatusExpectationFailed)
+		return
+	}
+
+	json.NewEncoder(w).Encode(updatedSpeaker)
+
+	// notify
+	if credentials, ok := r.Context().Value(credentialsKey).(models.AuthorizationCredentials); ok {
+		mongodb.Notifications.Notify(credentials.ID, mongodb.CreateNotificationData{
+			Kind:    models.NotificationKindUpdated,
+			Speaker: &updatedSpeaker.ID,
+		})
+	}
+}
diff --git a/frontend/src/api/companies.ts b/frontend/src/api/companies.ts
index cb569925..b6a0442c 100644
--- a/frontend/src/api/companies.ts
+++ b/frontend/src/api/companies.ts
@@ -10,6 +10,7 @@ import type {
   UpdateCompanyData,
   UpdateCompanyParticipationData,
 } from "@/dto/companies";
+import type { CompanyTasks } from "@/dto/tasks";
 import type {
   CreateThread,
   ParticipationCommunications,
@@ -91,6 +92,9 @@ export const updateRepresentativeOrder = (
 export const uploadCompanyInternalImage = (id: string, data: FormData) =>
   instance.post<Company>(`/companies/${id}/image/internal`, data);
 
+export const uploadCompanyPublicImage = (id: string, data: FormData) =>
+  instance.post<Company>(`/companies/${id}/image/public`, data);
+
 export const deleteCompany = (id: string) =>
   instance.delete<Company>(`/companies/${id}`);
 
@@ -145,5 +149,8 @@ export const generateCompanyContract = (
   });
 };
 
+export const updateCompanyTasks = (id: string, tasks: CompanyTasks) =>
+  instance.put<Company>(`/companies/${id}/participation/tasks`, { tasks });
+
 export const announceAcceptedCompanies = () =>
   instance.post<{ announced: number }>("/companies/announce");
diff --git a/frontend/src/api/speakers.ts b/frontend/src/api/speakers.ts
index 130c50c3..8586a286 100644
--- a/frontend/src/api/speakers.ts
+++ b/frontend/src/api/speakers.ts
@@ -6,6 +6,7 @@ import type {
   UpdateSpeakerData,
   UpdateSpeakerParticipationData,
 } from "@/dto/speakers";
+import type { SpeakerTasks } from "@/dto/tasks";
 import { instance } from ".";
 import {
   type ParticipationCommunications,
@@ -51,6 +52,12 @@ export const createSpeaker = (data: CreateSpeakerData) =>
 export const uploadSpeakerInternalImage = (id: string, data: FormData) =>
   instance.post<Speaker>(`/speakers/${id}/image/internal`, data);
 
+export const uploadSpeakerPublicImage = (id: string, data: FormData) =>
+  instance.post<Speaker>(`/speakers/${id}/image/public/speaker`, data);
+
+export const uploadSpeakerCompanyImage = (id: string, data: FormData) =>
+  instance.post<Speaker>(`/speakers/${id}/image/public/company`, data);
+
 export const deleteSpeaker = (id: string) =>
   instance.delete<Speaker>(`/speakers/${id}`);
 
@@ -85,3 +92,6 @@ export const syncSpeakerGmailMessages = (
   instance.post<SyncGmailResponse>(`/speakers/${id}/participation/gmail-sync`, {
     messages,
   });
+
+export const updateSpeakerTasks = (id: string, tasks: SpeakerTasks) =>
+  instance.put<Speaker>(`/speakers/${id}/participation/tasks`, { tasks });
diff --git a/frontend/src/components/ImageUpload.vue b/frontend/src/components/ImageUpload.vue
index a5619ede..fdccf3d3 100644
--- a/frontend/src/components/ImageUpload.vue
+++ b/frontend/src/components/ImageUpload.vue
@@ -76,6 +76,7 @@ interface Props {
   previewAlt?: string;
   previewSize?: "sm" | "md";
   disabled?: boolean;
+  initialUrl?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -85,6 +86,7 @@ const props = withDefaults(defineProps<Props>(), {
   previewAlt: "Image preview",
   previewSize: "md",
   disabled: false,
+  initialUrl: undefined,
 });
 
 const emit = defineEmits<{
@@ -102,6 +104,11 @@ const {
   handleUrlChange,
 } = useImageUpload();
 
+// Seed the preview from the prop if no new file has been chosen yet
+if (props.initialUrl) {
+  imagePreview.value = props.initialUrl;
+}
+
 const previewSizeClass = props.previewSize === "sm" ? "w-20 h-20" : "w-24 h-24";
 
 // Emit the selected file when it changes
diff --git a/frontend/src/components/companies/EditableCompanyParticipation.vue b/frontend/src/components/companies/EditableCompanyParticipation.vue
index 34a432de..2102776b 100644
--- a/frontend/src/components/companies/EditableCompanyParticipation.vue
+++ b/frontend/src/components/companies/EditableCompanyParticipation.vue
@@ -120,7 +120,7 @@
             <div>
               <Select v-model="selectedPackageId">
                 <SelectTrigger>
-                  <SelectValue placeholder="-- Select package --" />
+                  <SelectValue placeholder="Select package" />
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem
diff --git a/frontend/src/components/tasks/StatusToggleBadge.vue b/frontend/src/components/tasks/StatusToggleBadge.vue
new file mode 100644
index 00000000..069ced72
--- /dev/null
+++ b/frontend/src/components/tasks/StatusToggleBadge.vue
@@ -0,0 +1,63 @@
+<template>
+  <Popover v-model:open="isPopoverOpen">
+    <PopoverTrigger as-child>
+      <Badge
+        :variant="modelValue ? 'default' : 'outline'"
+        class="cursor-pointer hover:opacity-80 transition-opacity"
+      >
+        {{ modelValue ? activeLabel : inactiveLabel }}
+      </Badge>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-3">
+      <div class="grid gap-3" style="grid-template-columns: min-content">
+        <p class="text-sm font-medium whitespace-nowrap">Update status</p>
+        <p class="text-xs text-muted-foreground">
+          {{ description }}
+        </p>
+        <div class="flex gap-2 w-max">
+          <Button size="sm" @click="setStatus(true)">
+            {{ activeLabel }}
+          </Button>
+          <Button size="sm" variant="outline" @click="setStatus(false)">
+            {{ inactiveLabel }}
+          </Button>
+        </div>
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+interface Props {
+  modelValue: boolean;
+  activeLabel?: string;
+  inactiveLabel?: string;
+  description?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  activeLabel: "Requested",
+  inactiveLabel: "Not Requested",
+  description: "Update the status.",
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+}>();
+
+const isPopoverOpen = ref(false);
+
+const setStatus = (value: boolean) => {
+  emit("update:modelValue", value);
+  isPopoverOpen.value = false;
+};
+</script>
diff --git a/frontend/src/components/tasks/TaskBillingLogos.vue b/frontend/src/components/tasks/TaskBillingLogos.vue
new file mode 100644
index 00000000..b86d8b3e
--- /dev/null
+++ b/frontend/src/components/tasks/TaskBillingLogos.vue
@@ -0,0 +1,247 @@
+<template>
+  <TaskTimelineItem
+    :step-number="2"
+    :title="entityType === 'company' ? 'Billing & Logos' : 'Logos'"
+    :is-complete="isComplete"
+  >
+    <template #icon>
+      <Receipt class="w-4 h-4" />
+    </template>
+    <template #header-actions>
+      <StatusToggleBadge
+        v-model="hasAskedForBillingInfo"
+        :description="
+          entityType === 'company'
+            ? 'Mark whether you\'ve asked the company for billing info and logos.'
+            : 'Mark whether you\'ve asked the speaker for logos.'
+        "
+      />
+    </template>
+
+    <div class="space-y-4">
+      <!-- Billing Section (companies only) -->
+      <template v-if="entityType === 'company'">
+        <div class="space-y-2">
+          <!-- Billing Header -->
+          <div class="flex items-center justify-between">
+            <span class="text-sm font-medium">Billing Information</span>
+
+            <Button
+              v-if="hasBillingInfo && !isEditingBilling"
+              variant="outline"
+              size="sm"
+              class="h-7 text-xs"
+              @click="startEditingBilling"
+            >
+              Edit
+            </Button>
+          </div>
+
+          <!-- Billing Info Display -->
+          <div
+            v-if="hasBillingInfo && !isEditingBilling"
+            class="p-3 bg-muted/50 rounded-md space-y-1"
+          >
+            <p class="text-sm">
+              <span class="font-medium">Name:</span>
+              {{ billingInfo?.name }}
+            </p>
+            <p class="text-sm">
+              <span class="font-medium">Address:</span>
+              {{ billingInfo?.address }}
+            </p>
+            <p class="text-sm">
+              <span class="font-medium">TIN:</span>
+              {{ billingInfo?.tin }}
+            </p>
+          </div>
+          <!-- Billing Form (for editing) -->
+          <div v-else-if="isEditingBilling" class="border rounded-md p-3">
+            <BillingForm
+              :initial-data="billingInfo"
+              :is-loading="isUpdatingBilling"
+              :mode="hasBillingInfo ? 'edit' : 'create'"
+              @submit="handleBillingSubmit"
+              @cancel="cancelEditingBilling"
+            />
+          </div>
+
+          <!-- Empty State -->
+          <EmptyStateCard
+            v-else
+            title="Click here to add billing information"
+            @click="startEditingBilling"
+          />
+        </div>
+
+        <!-- PO Number -->
+        <div class="space-y-1">
+          <Label class="text-sm font-medium">Purchase Order (PO)</Label>
+          <Input v-model="poNumber" placeholder="PO number" />
+        </div>
+
+        <!-- Separator -->
+        <Separator />
+      </template>
+
+      <!-- Logos Section -->
+      <div class="space-y-3">
+        <span class="text-sm font-medium">Logos</span>
+
+        <div class="flex items-center space-x-2">
+          <Checkbox id="logos-received" v-model="logosReceived" />
+          <Label for="logos-received" class="text-sm"> Logos received </Label>
+        </div>
+
+        <div class="flex items-center space-x-2">
+          <Checkbox id="needs-reviewing" v-model="logosNeedReviewing" />
+          <Label for="needs-reviewing" class="text-sm flex items-center gap-1">
+            Needs reviewing
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger as-child>
+                  <Info class="w-3 h-3 text-muted-foreground cursor-help" />
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>
+                    Check this if the
+                    {{ entityType === "company" ? "company" : "speaker" }} wants
+                    to review their logos before publishing
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </Label>
+        </div>
+      </div>
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Separator } from "@/components/ui/separator";
+import { Input } from "@/components/ui/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Info, Receipt } from "lucide-vue-next";
+import type { CompanyBillingInfo } from "@/dto/companies";
+import type {
+  EntityType,
+  CompanyTasks,
+  SpeakerTasks,
+  TaskLogos,
+} from "@/dto/tasks";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import BillingForm from "@/components/companies/BillingForm.vue";
+import Button from "@/components/ui/button/Button.vue";
+import EmptyStateCard from "@/components/ui/EmptyStateCard.vue";
+import StatusToggleBadge from "./StatusToggleBadge.vue";
+import { useCompanyBillingMutation } from "@/mutations/companies";
+
+interface Props {
+  entityType: EntityType;
+  billingInfo?: CompanyBillingInfo;
+  entityId?: string;
+  companyTasks?: CompanyTasks;
+  speakerTasks?: SpeakerTasks;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  billingUpdated: [];
+  "update:logos": [value: TaskLogos];
+  "update:askedForInfo": [value: boolean];
+  "update:po": [value: string];
+}>();
+
+// Billing info
+const hasBillingInfo = computed(() => {
+  if (!props.billingInfo) return false;
+  return !!(
+    props.billingInfo.name?.trim() ||
+    props.billingInfo.address?.trim() ||
+    props.billingInfo.tin?.trim()
+  );
+});
+
+// Billing editing state
+const isEditingBilling = ref(false);
+const billingMutation = useCompanyBillingMutation();
+const { mutate: updateBilling, isLoading: isUpdatingBilling } = billingMutation;
+
+const startEditingBilling = () => {
+  isEditingBilling.value = true;
+};
+
+const cancelEditingBilling = () => {
+  isEditingBilling.value = false;
+};
+
+const handleBillingSubmit = async (data: CompanyBillingInfo) => {
+  if (!props.entityId) return;
+
+  billingMutation.companyId.value = props.entityId;
+  billingMutation.billingInfo.value = data;
+
+  try {
+    await updateBilling();
+    isEditingBilling.value = false;
+    emit("billingUpdated");
+  } catch (error) {
+    console.error("Failed to update billing information:", error);
+  }
+};
+
+// Initialise from saved tasks
+const savedLogos =
+  props.entityType === "company"
+    ? props.companyTasks?.logos
+    : props.speakerTasks?.logos;
+
+const savedAsked =
+  props.entityType === "company"
+    ? props.companyTasks?.confirmation?.askedForInfo
+    : props.speakerTasks?.askedForInfo;
+
+// Task states
+const hasAskedForBillingInfo = ref(savedAsked ?? false);
+const logosReceived = ref(savedLogos?.received ?? false);
+const logosNeedReviewing = ref(savedLogos?.needsReviewing ?? false);
+const poNumber = ref(props.companyTasks?.po ?? "");
+
+watch(hasAskedForBillingInfo, (v) => {
+  emit("update:askedForInfo", v);
+});
+
+watch([logosReceived, logosNeedReviewing], () => {
+  emit("update:logos", {
+    received: logosReceived.value,
+    needsReviewing: logosNeedReviewing.value,
+  });
+});
+
+watch(poNumber, (v) => {
+  emit("update:po", v);
+});
+
+// Completion state
+const isComplete = computed(() => {
+  if (props.entityType === "company") {
+    return hasBillingInfo.value && logosReceived.value;
+  }
+  // For speakers, only logos matter
+  return logosReceived.value;
+});
+
+defineExpose({
+  isComplete,
+});
+</script>
diff --git a/frontend/src/components/tasks/TaskConfirmation.vue b/frontend/src/components/tasks/TaskConfirmation.vue
new file mode 100644
index 00000000..2d9b41af
--- /dev/null
+++ b/frontend/src/components/tasks/TaskConfirmation.vue
@@ -0,0 +1,421 @@
+<template>
+  <TaskTimelineItem
+    :step-number="1"
+    title="Confirmation"
+    :is-complete="isComplete"
+  >
+    <template #icon>
+      <CalendarCheck class="w-4 h-4" />
+    </template>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <!-- Package Selection (companies only) -->
+      <div v-if="entityType === 'company'" class="space-y-2">
+        <Label for="package-select">Package</Label>
+        <Select
+          v-model="selectedPackageId"
+          :disabled="isPackageUpdating"
+          @update:model-value="onPackageChange"
+        >
+          <SelectTrigger :loading="isPackageUpdating">
+            <SelectValue placeholder="Select a package" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem
+              v-for="pkg in packageOptions"
+              :key="pkg.id"
+              :value="pkg.id"
+            >
+              {{ pkg.name }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <!-- Confirmation Date (companies only) -->
+      <div v-if="entityType === 'company'" class="space-y-2">
+        <Label for="confirmed-date">Confirmation Date</Label>
+        <DatePicker
+          v-model="confirmedDate"
+          :loading="isDateUpdating"
+          placeholder="Pick a date"
+          show-time
+          @update:model-value="onConfirmedDateChange"
+        />
+      </div>
+    </div>
+
+    <!-- Speaker-only fields -->
+    <template v-if="entityType === 'speaker'">
+      <!-- Phone & LinkedIn editable, saved to contact -->
+      <div class="mt-4 space-y-2">
+        <span class="text-sm font-medium">Contact Details</span>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+          <div class="space-y-1">
+            <Label for="speaker-phone" class="text-xs">Phone</Label>
+            <Input
+              id="speaker-phone"
+              v-model="speakerPhone"
+              placeholder="+351 900 000 000"
+              @blur="saveContact"
+            />
+          </div>
+          <div class="space-y-1">
+            <Label for="speaker-linkedin" class="text-xs">LinkedIn</Label>
+            <Input
+              id="speaker-linkedin"
+              v-model="speakerLinkedin"
+              placeholder="username or profile URL"
+              @blur="saveContact"
+            />
+          </div>
+        </div>
+        <p v-if="isSavingContact" class="text-xs text-muted-foreground">
+          Saving…
+        </p>
+      </div>
+
+      <div class="space-y-1 mt-4">
+        <Label class="text-sm font-medium"
+          >Wants to be tagged on LinkedIn</Label
+        >
+        <Select v-model="wantsLinkedinTag">
+          <SelectTrigger class="w-[200px]">
+            <SelectValue placeholder="Select…" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="not_responded">Didn't respond</SelectItem>
+            <SelectItem value="yes">Yes</SelectItem>
+            <SelectItem value="no">No</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div class="space-y-2 mt-4">
+        <Label for="speaker-observations">Observations</Label>
+        <Textarea
+          id="speaker-observations"
+          v-model="speakerObservations"
+          placeholder="Any observations about the speaker"
+          :rows="3"
+        />
+      </div>
+    </template>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useQuery } from "@pinia/colada";
+import { getAllEvents } from "@/api/events";
+import { getItemById } from "@/api/items";
+import type { Item } from "@/dto/item";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { DatePicker } from "@/components/ui/date-picker";
+import { Textarea } from "@/components/ui/textarea";
+import type { CompanyParticipation } from "@/dto/companies";
+import type { SpeakerParticipation } from "@/dto/speakers";
+import type { Contact } from "@/dto/contacts";
+import type {
+  EntityType,
+  CompanyTasks,
+  SpeakerTasks,
+  CompanyTaskConfirmation,
+  SpeakerTaskConfirmation,
+} from "@/dto/tasks";
+import type { Package } from "@/dto/packages";
+import {
+  useCompanyParticipationPackageMutation,
+  useCompanyParticipationMutation,
+} from "@/mutations/companies";
+import { usePackagesQuery } from "@/mutations/packages";
+import { updateContact } from "@/api/contacts";
+import useToast from "@/lib/toast";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import { CalendarCheck } from "lucide-vue-next";
+
+interface Props {
+  entityId: string;
+  entityType: EntityType;
+  participation?: CompanyParticipation | SpeakerParticipation;
+  contact?: Contact;
+  companyTasks?: CompanyTasks;
+  speakerTasks?: SpeakerTasks;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  packageChanged: [packageName: string, packageItems: Item[]];
+  "update:companyConfirmation": [value: CompanyTaskConfirmation];
+  "update:speakerConfirmation": [value: SpeakerTaskConfirmation];
+}>();
+
+const { toast } = useToast();
+
+// Helper to check if participation is company type
+const isCompanyParticipation = (
+  p?: CompanyParticipation | SpeakerParticipation,
+): p is CompanyParticipation => {
+  return !!p && "confirmed" in p;
+};
+
+// Package data (only used for companies)
+const { data: packagesData } = usePackagesQuery();
+const { data: eventsData } = useQuery({
+  key: () => ["events"],
+  query: () => getAllEvents(),
+});
+
+const packageOptions = computed(() => {
+  if (props.entityType !== "company") return [];
+  const allPkgs = (packagesData.value || []) as Package[];
+  const eventId = props.participation?.event;
+  if (!eventId) return [];
+
+  const ev = eventsData.value?.data?.find((e) => e.id === eventId);
+  if (!ev) return allPkgs.map((p) => ({ id: String(p.id), name: p.name }));
+
+  const name = String(ev.name || "");
+  const pkgs = allPkgs.filter((ap) => String(ap.name || "").startsWith(name));
+
+  return pkgs.map((p) => ({ id: String(p.id), name: p.name }));
+});
+
+// Package mutation (companies only)
+const packageMutation = useCompanyParticipationPackageMutation();
+packageMutation.companyId.value = props.entityId;
+
+const selectedPackageId = ref<string>(
+  isCompanyParticipation(props.participation) && props.participation?.package
+    ? String(props.participation.package)
+    : "",
+);
+const isPackageUpdating = ref(false);
+
+// Get package name from the packages data
+const currentPackageName = computed(() => {
+  if (props.entityType !== "company") return "";
+  if (!selectedPackageId.value || !packagesData.value) return "";
+  const pkg = (packagesData.value as Package[]).find(
+    (p) => String(p.id) === selectedPackageId.value,
+  );
+  return pkg?.name?.toLowerCase() || "";
+});
+
+// Get current package items
+const currentPackage = computed(() => {
+  if (props.entityType !== "company") return null;
+  if (!selectedPackageId.value || !packagesData.value) return null;
+  return (
+    (packagesData.value as Package[]).find(
+      (p) => String(p.id) === selectedPackageId.value,
+    ) || null
+  );
+});
+
+// Fetch full item details for the current package
+const packageItemsWithDetails = ref<Item[]>([]);
+
+const fetchPackageItems = async () => {
+  const pkg = currentPackage.value;
+  if (!pkg || !pkg.items || pkg.items.length === 0) {
+    packageItemsWithDetails.value = [];
+    return;
+  }
+
+  try {
+    const itemPromises = pkg.items.map((pi) => getItemById(String(pi.item)));
+    packageItemsWithDetails.value = await Promise.all(itemPromises);
+  } catch (err) {
+    console.error("Failed to fetch package items:", err);
+    packageItemsWithDetails.value = [];
+  }
+};
+
+// Watch for package changes and fetch items
+watch(
+  currentPackage,
+  () => {
+    fetchPackageItems();
+  },
+  { immediate: true },
+);
+
+// Emit package name and items changes
+watch(
+  [currentPackageName, packageItemsWithDetails],
+  ([newName, newItems]) => {
+    emit("packageChanged", newName, newItems);
+  },
+  { immediate: true },
+);
+
+// Confirmation date
+const parseIsoToDate = (isoString: string | null): Date | null => {
+  if (!isoString) return null;
+  try {
+    return new Date(isoString);
+  } catch {
+    return null;
+  }
+};
+
+const confirmedDate = ref<Date | null>(
+  isCompanyParticipation(props.participation)
+    ? parseIsoToDate(props.participation?.confirmed || null)
+    : null,
+);
+const isDateUpdating = ref(false);
+
+// Participation mutation for updating confirmed date (companies only)
+const companyParticipationMutation = useCompanyParticipationMutation();
+companyParticipationMutation.companyId.value = props.entityId;
+
+const onConfirmedDateChange = async (newValue: Date | null) => {
+  if (!newValue) return;
+  try {
+    isDateUpdating.value = true;
+    const isoDate = newValue.toISOString();
+    companyParticipationMutation.data.value = {
+      ...props.participation,
+      confirmed: isoDate,
+    };
+    await companyParticipationMutation.mutateAsync();
+    toast.success({ title: "Confirmation date updated" });
+  } catch (err) {
+    console.error("Failed to update confirmation date:", err);
+    toast.error({ title: "Failed to update confirmation date" });
+  } finally {
+    isDateUpdating.value = false;
+  }
+};
+
+const onPackageChange = async (newValue: unknown) => {
+  const v = newValue == null ? "" : String(newValue);
+  if (!v) return;
+  try {
+    isPackageUpdating.value = true;
+    packageMutation.packageId.value = v;
+    await packageMutation.mutateAsync();
+    toast.success({ title: "Package updated" });
+  } catch (err) {
+    console.error("Failed to update package:", err);
+    toast.error({ title: "Failed to update package" });
+  } finally {
+    isPackageUpdating.value = false;
+  }
+};
+
+// Watch for participation changes to sync local state from props
+watch(
+  () =>
+    isCompanyParticipation(props.participation)
+      ? props.participation?.package
+      : undefined,
+  (newVal) => {
+    selectedPackageId.value = newVal ? String(newVal) : "";
+  },
+);
+
+watch(
+  () =>
+    isCompanyParticipation(props.participation)
+      ? props.participation?.confirmed
+      : undefined,
+  (newVal) => {
+    confirmedDate.value = parseIsoToDate(newVal || null);
+  },
+);
+
+// Completion state
+const isComplete = computed(() => {
+  if (props.entityType === "company") {
+    return !!selectedPackageId.value && !!confirmedDate.value;
+  }
+  // For speakers, no date needed
+  return true;
+});
+
+// Speaker-only fields
+const speakerObservations = ref<string>(
+  props.speakerTasks?.confirmation?.observations ?? "",
+);
+const wantsLinkedinTag = ref<string>(
+  props.speakerTasks?.confirmation?.wantsLinkedinTag ?? "not_responded",
+);
+
+// Speaker contact detail shortcuts — editable, saved back to contact
+const speakerPhone = ref<string>(props.contact?.phones?.[0]?.phone ?? "");
+const speakerLinkedin = ref<string>(props.contact?.socials?.linkedin ?? "");
+const isSavingContact = ref(false);
+
+// Sync if contact prop changes externally
+watch(
+  () => props.contact,
+  (c) => {
+    speakerPhone.value = c?.phones?.[0]?.phone ?? "";
+    speakerLinkedin.value = c?.socials?.linkedin ?? "";
+  },
+);
+
+const saveContact = async () => {
+  if (!props.contact?.id) return;
+  // Only save if something actually changed
+  const origPhone = props.contact?.phones?.[0]?.phone ?? "";
+  const origLinkedin = props.contact?.socials?.linkedin ?? "";
+  if (
+    speakerPhone.value === origPhone &&
+    speakerLinkedin.value === origLinkedin
+  )
+    return;
+
+  isSavingContact.value = true;
+  try {
+    // Build updated contact data, preserving all other fields
+    const phones = speakerPhone.value.trim()
+      ? [{ phone: speakerPhone.value.trim() }]
+      : (props.contact.phones ?? []);
+    await updateContact(String(props.contact.id), {
+      gender: props.contact.gender,
+      language: props.contact.language,
+      mails: props.contact.mails ?? [],
+      phones,
+      socials: {
+        ...props.contact.socials,
+        linkedin: speakerLinkedin.value.trim() || undefined,
+      },
+    });
+    toast.success({ title: "Contact details saved" });
+  } catch (err) {
+    console.error("Failed to save contact:", err);
+    toast.error({ title: "Failed to save contact details" });
+  } finally {
+    isSavingContact.value = false;
+  }
+};
+
+// Emit speaker confirmation changes
+watch([wantsLinkedinTag, speakerObservations], () => {
+  if (props.entityType === "speaker") {
+    emit("update:speakerConfirmation", {
+      phone: speakerPhone.value,
+      linkedin: speakerLinkedin.value,
+      wantsLinkedinTag: wantsLinkedinTag.value,
+      observations: speakerObservations.value,
+    });
+  }
+});
+
+defineExpose({
+  isComplete,
+  currentPackageName,
+});
+</script>
diff --git a/frontend/src/components/tasks/TaskContract.vue b/frontend/src/components/tasks/TaskContract.vue
new file mode 100644
index 00000000..04ce8262
--- /dev/null
+++ b/frontend/src/components/tasks/TaskContract.vue
@@ -0,0 +1,102 @@
+<template>
+  <TaskTimelineItem :step-number="3" title="Contract" :is-complete="isComplete">
+    <template #icon>
+      <FileText class="w-4 h-4" />
+    </template>
+    <template #header-actions>
+      <StatusToggleBadge
+        v-model="hasSentContract"
+        active-label="Sent"
+        inactive-label="Not Sent"
+        :description="`Mark whether you've sent the contract to the ${entityType}.`"
+      />
+    </template>
+
+    <div class="space-y-4">
+      <div class="flex items-center space-x-2">
+        <Checkbox id="contract-created" v-model="hasCreatedContract" />
+        <Label for="contract-created" class="text-sm"
+          >Contract and invoice created</Label
+        >
+      </div>
+
+      <div class="flex items-center space-x-2">
+        <Checkbox id="has-signed" v-model="hasSigned" />
+        <Label for="has-signed" class="text-sm">Has signed</Label>
+      </div>
+
+      <div class="flex items-center space-x-2">
+        <Checkbox id="receipt-sent" v-model="hasReceiptSent" />
+        <Label for="receipt-sent" class="text-sm">Receipt sent</Label>
+      </div>
+
+      <div class="flex items-center space-x-2">
+        <Checkbox id="company-paid" v-model="hasPaid" />
+        <Label for="company-paid" class="text-sm">Company has paid</Label>
+      </div>
+
+      <ContractDownload
+        v-if="entityType === 'company'"
+        :company-id="props.entityId"
+      />
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import StatusToggleBadge from "./StatusToggleBadge.vue";
+import { FileText } from "lucide-vue-next";
+import ContractDownload from "../companies/ContractDownload.vue";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import type {
+  EntityType,
+  CompanyTasks,
+  CompanyTaskContract,
+} from "@/dto/tasks";
+
+const props = defineProps<{
+  entityId: string;
+  entityType: EntityType;
+  companyTasks?: CompanyTasks;
+}>();
+
+const emit = defineEmits<{
+  "update:contract": [value: CompanyTaskContract];
+}>();
+
+// Contract states
+const hasCreatedContract = ref(props.companyTasks?.contract?.created ?? false);
+const hasSentContract = ref(props.companyTasks?.contract?.sent ?? false);
+const hasSigned = ref(props.companyTasks?.contract?.signed ?? false);
+const hasReceiptSent = ref(props.companyTasks?.contract?.receiptSent ?? false);
+const hasPaid = ref(props.companyTasks?.contract?.paid ?? false);
+
+watch(
+  [hasCreatedContract, hasSentContract, hasSigned, hasReceiptSent, hasPaid],
+  () => {
+    emit("update:contract", {
+      created: hasCreatedContract.value,
+      sent: hasSentContract.value,
+      signed: hasSigned.value,
+      receiptSent: hasReceiptSent.value,
+      paid: hasPaid.value,
+    });
+  },
+);
+
+const isComplete = computed(() => {
+  return (
+    hasCreatedContract.value &&
+    hasSentContract.value &&
+    hasSigned.value &&
+    hasReceiptSent.value
+  );
+});
+
+defineExpose({
+  isComplete,
+});
+</script>
diff --git a/frontend/src/components/tasks/TaskCorlief.vue b/frontend/src/components/tasks/TaskCorlief.vue
new file mode 100644
index 00000000..27a881de
--- /dev/null
+++ b/frontend/src/components/tasks/TaskCorlief.vue
@@ -0,0 +1,82 @@
+<template>
+  <TaskTimelineItem
+    :step-number="stepNumber"
+    title="Corlief"
+    :is-complete="isComplete"
+  >
+    <template #icon>
+      <Building2 class="w-4 h-4" />
+    </template>
+    <div class="space-y-4">
+      <div class="flex items-center space-x-2">
+        <Checkbox id="corlief-pre-notice" v-model="hasPreNotice" />
+        <Label for="corlief-pre-notice" class="text-sm">Pre notice</Label>
+      </div>
+
+      <div class="flex items-center space-x-2">
+        <Checkbox id="corlief-scheduled" v-model="hasScheduled" />
+        <Label for="corlief-scheduled" class="text-sm">Scheduled</Label>
+      </div>
+
+      <div class="flex items-center space-x-2">
+        <Checkbox id="corlief-reserved" v-model="hasReserved" />
+        <Label for="corlief-reserved" class="text-sm">Company reserved</Label>
+      </div>
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Building2 } from "lucide-vue-next";
+import type { CompanyTasks, CompanyTaskCorlief } from "@/dto/tasks";
+
+interface Props {
+  entityId: string;
+  stepNumber?: number;
+  companyTasks?: CompanyTasks;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  stepNumber: 5,
+  companyTasks: undefined,
+});
+
+const emit = defineEmits<{
+  "update:corlief": [value: CompanyTaskCorlief];
+}>();
+
+// Corlief states
+const hasPreNotice = ref<boolean>(
+  props.companyTasks?.corlief?.preNotice ?? false,
+);
+const hasScheduled = ref<boolean>(
+  props.companyTasks?.corlief?.scheduled ?? false,
+);
+const hasReserved = ref<boolean>(
+  props.companyTasks?.corlief?.reserved ?? false,
+);
+
+watch([hasPreNotice, hasScheduled, hasReserved], () => {
+  emit("update:corlief", {
+    preNotice: hasPreNotice.value,
+    scheduled: hasScheduled.value,
+    reserved: hasReserved.value,
+  });
+});
+
+const isComplete = computed(() => {
+  return (
+    hasPreNotice.value === true &&
+    hasScheduled.value === true &&
+    hasReserved.value === true
+  );
+});
+
+defineExpose({
+  isComplete,
+});
+</script>
diff --git a/frontend/src/components/tasks/TaskCoverage.vue b/frontend/src/components/tasks/TaskCoverage.vue
new file mode 100644
index 00000000..9c9d8e66
--- /dev/null
+++ b/frontend/src/components/tasks/TaskCoverage.vue
@@ -0,0 +1,127 @@
+<template>
+  <TaskTimelineItem
+    :step-number="stepNumber"
+    title="Coverage"
+    :is-complete="isComplete"
+  >
+    <template #icon>
+      <Camera class="w-4 h-4" />
+    </template>
+
+    <div class="space-y-4">
+      <div class="space-y-3">
+        <span class="text-sm font-medium">Video</span>
+        <div class="flex flex-wrap gap-4">
+          <div class="space-y-1">
+            <Label class="text-xs">Video Coverage</Label>
+            <Select v-model="videoCoverage">
+              <SelectTrigger class="w-[160px]">
+                <SelectValue placeholder="Select" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="not_responded">Didn't respond</SelectItem>
+                <SelectItem value="yes">Yes</SelectItem>
+                <SelectItem value="no">No</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div class="space-y-1">
+            <Label class="text-xs">Streaming</Label>
+            <Select v-model="streaming">
+              <SelectTrigger class="w-[160px]">
+                <SelectValue placeholder="Select" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="not_responded">Didn't respond</SelectItem>
+                <SelectItem value="yes">Yes</SelectItem>
+                <SelectItem value="no">No</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </div>
+
+      <Separator />
+
+      <div class="space-y-3">
+        <span class="text-sm font-medium">Photo</span>
+        <div class="space-y-1">
+          <Label class="text-xs">Photo Coverage</Label>
+          <Select v-model="photoCoverage">
+            <SelectTrigger class="w-[160px]">
+              <SelectValue placeholder="Select" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="not_responded">Didn't respond</SelectItem>
+              <SelectItem value="yes">Yes</SelectItem>
+              <SelectItem value="no">No</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Camera } from "lucide-vue-next";
+import type { SpeakerTasks, SpeakerTaskCoverage } from "@/dto/tasks";
+
+interface Props {
+  entityId: string;
+  stepNumber?: number;
+  speakerTasks?: SpeakerTasks;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  stepNumber: 4,
+  speakerTasks: undefined,
+});
+
+const emit = defineEmits<{
+  "update:coverage": [value: SpeakerTaskCoverage];
+}>();
+
+type CoverageValue = "not_responded" | "yes" | "no";
+
+const videoCoverage = ref<CoverageValue>(
+  (props.speakerTasks?.coverage?.video as CoverageValue) ?? "not_responded",
+);
+const streaming = ref<CoverageValue>(
+  (props.speakerTasks?.coverage?.streaming as CoverageValue) ?? "not_responded",
+);
+const photoCoverage = ref<CoverageValue>(
+  (props.speakerTasks?.coverage?.photo as CoverageValue) ?? "not_responded",
+);
+
+watch([videoCoverage, streaming, photoCoverage], () => {
+  emit("update:coverage", {
+    video: videoCoverage.value,
+    streaming: streaming.value,
+    photo: photoCoverage.value,
+  });
+});
+
+const isComplete = computed(() => {
+  return (
+    videoCoverage.value !== "not_responded" &&
+    streaming.value !== "not_responded" &&
+    photoCoverage.value !== "not_responded"
+  );
+});
+
+defineExpose({
+  isComplete,
+});
+</script>
diff --git a/frontend/src/components/tasks/TaskFlights.vue b/frontend/src/components/tasks/TaskFlights.vue
new file mode 100644
index 00000000..9b4baab6
--- /dev/null
+++ b/frontend/src/components/tasks/TaskFlights.vue
@@ -0,0 +1,401 @@
+<template>
+  <TaskTimelineItem
+    :step-number="stepNumber"
+    title="Flights"
+    :is-complete="isComplete"
+  >
+    <template #icon>
+      <Plane class="w-4 h-4" />
+    </template>
+    <template #header-actions>
+      <StatusToggleBadge
+        v-model="hasRequestedFlights"
+        active-label="Requested"
+        inactive-label="Not Requested"
+        description="Mark whether you've asked the speaker for flight info."
+      />
+    </template>
+
+    <div class="space-y-4">
+      <!-- Needs flights selector -->
+      <div class="space-y-2">
+        <Label class="text-sm font-medium"
+          >Does the speaker need flights?</Label
+        >
+        <Select v-model="needsFlights">
+          <SelectTrigger class="w-[200px]">
+            <SelectValue placeholder="Select an option" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="not_responded">Didn't respond</SelectItem>
+            <SelectItem value="yes">Yes</SelectItem>
+            <SelectItem value="no">No</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <!-- Flight details (only when needs flights = yes) -->
+      <template v-if="needsFlights === 'yes'">
+        <Separator />
+
+        <!-- Arrival -->
+        <div class="space-y-3">
+          <span class="text-sm font-medium">Arrival</span>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+            <div class="space-y-1">
+              <Label for="arrival-airport" class="text-xs"
+                >Airport (origin)</Label
+              >
+              <Input
+                id="arrival-airport"
+                v-model="arrivalAirport"
+                placeholder="e.g. JFK"
+              />
+            </div>
+            <div class="space-y-1">
+              <Label for="arrival-flight" class="text-xs">Flight Nº</Label>
+              <Input
+                id="arrival-flight"
+                v-model="arrivalFlightNumber"
+                placeholder="e.g. TP1234"
+              />
+            </div>
+            <div class="space-y-1">
+              <Label for="arrival-date" class="text-xs"
+                >Date (arrival LIS)</Label
+              >
+              <DatePicker v-model="arrivalDate" placeholder="Pick a date" />
+            </div>
+            <div class="space-y-1">
+              <Label for="arrival-time" class="text-xs"
+                >Time (arrival LIS)</Label
+              >
+              <Input
+                id="arrival-time"
+                v-model="arrivalTime"
+                placeholder="e.g. 14:30"
+              />
+            </div>
+          </div>
+        </div>
+
+        <Separator />
+
+        <!-- Departure -->
+        <div class="space-y-3">
+          <span class="text-sm font-medium">Departure</span>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+            <div class="space-y-1">
+              <Label for="departure-airport" class="text-xs"
+                >Airport (destination)</Label
+              >
+              <Input
+                id="departure-airport"
+                v-model="departureAirport"
+                placeholder="e.g. JFK"
+              />
+            </div>
+            <div class="space-y-1">
+              <Label for="departure-flight" class="text-xs">Flight Nº</Label>
+              <Input
+                id="departure-flight"
+                v-model="departureFlightNumber"
+                placeholder="e.g. TP1235"
+              />
+            </div>
+            <div class="space-y-1">
+              <Label for="departure-date" class="text-xs"
+                >Date (from LIS)</Label
+              >
+              <DatePicker v-model="departureDate" placeholder="Pick a date" />
+            </div>
+            <div class="space-y-1">
+              <Label for="departure-time" class="text-xs"
+                >Time (from LIS)</Label
+              >
+              <Input
+                id="departure-time"
+                v-model="departureTime"
+                placeholder="e.g. 10:00"
+              />
+            </div>
+          </div>
+        </div>
+
+        <Separator />
+
+        <!-- Details -->
+        <div class="space-y-3">
+          <span class="text-sm font-medium">Details</span>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+            <div class="space-y-1">
+              <Label for="flight-price" class="text-xs">Price</Label>
+              <Input
+                id="flight-price"
+                v-model="flightPrice"
+                placeholder="e.g. 350.00"
+              />
+            </div>
+            <div class="space-y-1">
+              <Label for="flight-status" class="text-xs">Status</Label>
+              <Select v-model="flightStatus">
+                <SelectTrigger>
+                  <SelectValue placeholder="Select status" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="pending">Pending</SelectItem>
+                  <SelectItem value="received">Info Received</SelectItem>
+                  <SelectItem value="approved">Approved</SelectItem>
+                  <SelectItem value="bought">Bought</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div class="space-y-1">
+              <Label for="flight-link" class="text-xs">Link (if we buy)</Label>
+              <Input
+                id="flight-link"
+                v-model="flightLink"
+                placeholder="Booking link"
+              />
+            </div>
+            <div class="space-y-1">
+              <Label for="flight-booking-ref" class="text-xs"
+                >Booking Ref</Label
+              >
+              <Input
+                id="flight-booking-ref"
+                v-model="flightBookingRef"
+                placeholder="Reference code"
+              />
+            </div>
+          </div>
+        </div>
+
+        <Separator />
+
+        <!-- Refund -->
+        <div class="space-y-3">
+          <span class="text-sm font-medium">Refund</span>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+            <div class="space-y-1">
+              <Label for="refund-amount" class="text-xs">Amount (EUR)</Label>
+              <Input
+                id="refund-amount"
+                v-model="refundAmount"
+                placeholder="e.g. 350.00"
+              />
+            </div>
+            <div class="space-y-1">
+              <Label for="refund-method" class="text-xs">Method</Label>
+              <Input
+                id="refund-method"
+                v-model="refundMethod"
+                placeholder="e.g. Bank transfer"
+              />
+            </div>
+            <div class="space-y-1">
+              <Label for="refund-info" class="text-xs">Info needed</Label>
+              <Input
+                id="refund-info"
+                v-model="refundInfoNeeded"
+                placeholder="e.g. IBAN"
+              />
+            </div>
+            <div class="space-y-1">
+              <Label for="refund-status" class="text-xs">Status</Label>
+              <Select v-model="refundStatus">
+                <SelectTrigger>
+                  <SelectValue placeholder="Select status" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="not_started">Not started</SelectItem>
+                  <SelectItem value="receipt_requested"
+                    >Receipt requested</SelectItem
+                  >
+                  <SelectItem value="info_requested">Info requested</SelectItem>
+                  <SelectItem value="done">Done</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import StatusToggleBadge from "./StatusToggleBadge.vue";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { DatePicker } from "@/components/ui/date-picker";
+import { Plane } from "lucide-vue-next";
+import type { SpeakerTasks, SpeakerTaskFlights } from "@/dto/tasks";
+
+interface Props {
+  entityId: string;
+  stepNumber?: number;
+  speakerTasks?: SpeakerTasks;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  stepNumber: 3,
+  speakerTasks: undefined,
+});
+
+const emit = defineEmits<{
+  "update:flights": [value: SpeakerTaskFlights];
+}>();
+
+const parseDate = (v: string | null | undefined): Date | null => {
+  if (!v) return null;
+  try {
+    return new Date(v);
+  } catch {
+    return null;
+  }
+};
+
+// Request status
+const hasRequestedFlights = ref<boolean>(
+  props.speakerTasks?.flights?.requested ?? false,
+);
+
+// Needs flights selector
+type NeedsFlights = "not_responded" | "yes" | "no";
+const needsFlights = ref<NeedsFlights>(
+  (props.speakerTasks?.flights?.needsFlights as NeedsFlights) ??
+    "not_responded",
+);
+
+// Arrival
+const arrivalAirport = ref<string>(
+  props.speakerTasks?.flights?.arrival?.airport ?? "",
+);
+const arrivalFlightNumber = ref<string>(
+  props.speakerTasks?.flights?.arrival?.flightNumber ?? "",
+);
+const arrivalDate = ref<Date | null>(
+  parseDate(props.speakerTasks?.flights?.arrival?.date),
+);
+const arrivalTime = ref<string>(
+  props.speakerTasks?.flights?.arrival?.time ?? "",
+);
+
+// Departure
+const departureAirport = ref<string>(
+  props.speakerTasks?.flights?.departure?.airport ?? "",
+);
+const departureFlightNumber = ref<string>(
+  props.speakerTasks?.flights?.departure?.flightNumber ?? "",
+);
+const departureDate = ref<Date | null>(
+  parseDate(props.speakerTasks?.flights?.departure?.date),
+);
+const departureTime = ref<string>(
+  props.speakerTasks?.flights?.departure?.time ?? "",
+);
+
+// Details
+const flightPrice = ref<string>(
+  props.speakerTasks?.flights?.details?.price ?? "",
+);
+const flightStatus = ref<string>(
+  props.speakerTasks?.flights?.details?.status ?? "pending",
+);
+const flightLink = ref<string>(
+  props.speakerTasks?.flights?.details?.link ?? "",
+);
+const flightBookingRef = ref<string>(
+  props.speakerTasks?.flights?.details?.bookingRef ?? "",
+);
+
+// Refund
+const refundAmount = ref<string>(
+  props.speakerTasks?.flights?.refund?.amount ?? "",
+);
+const refundMethod = ref<string>(
+  props.speakerTasks?.flights?.refund?.method ?? "",
+);
+const refundInfoNeeded = ref<string>(
+  props.speakerTasks?.flights?.refund?.infoNeeded ?? "",
+);
+const refundStatus = ref<string>(
+  props.speakerTasks?.flights?.refund?.status ?? "not_started",
+);
+
+function emitFlights() {
+  emit("update:flights", {
+    needsFlights: needsFlights.value,
+    requested: hasRequestedFlights.value,
+    arrival: {
+      airport: arrivalAirport.value,
+      flightNumber: arrivalFlightNumber.value,
+      date: arrivalDate.value?.toISOString() ?? null,
+      time: arrivalTime.value,
+    },
+    departure: {
+      airport: departureAirport.value,
+      flightNumber: departureFlightNumber.value,
+      date: departureDate.value?.toISOString() ?? null,
+      time: departureTime.value,
+    },
+    details: {
+      price: flightPrice.value,
+      status: flightStatus.value,
+      link: flightLink.value,
+      bookingRef: flightBookingRef.value,
+    },
+    refund: {
+      amount: refundAmount.value,
+      method: refundMethod.value,
+      infoNeeded: refundInfoNeeded.value,
+      status: refundStatus.value,
+    },
+  });
+}
+
+watch(
+  [
+    hasRequestedFlights,
+    needsFlights,
+    arrivalAirport,
+    arrivalFlightNumber,
+    arrivalDate,
+    arrivalTime,
+    departureAirport,
+    departureFlightNumber,
+    departureDate,
+    departureTime,
+    flightPrice,
+    flightStatus,
+    flightLink,
+    flightBookingRef,
+    refundAmount,
+    refundMethod,
+    refundInfoNeeded,
+    refundStatus,
+  ],
+  emitFlights,
+);
+
+const isComplete = computed(() => {
+  if (needsFlights.value === "no") return true;
+  if (needsFlights.value === "yes") return flightStatus.value === "bought";
+  return false;
+});
+
+defineExpose({
+  isComplete,
+});
+</script>
diff --git a/frontend/src/components/tasks/TaskHotel.vue b/frontend/src/components/tasks/TaskHotel.vue
new file mode 100644
index 00000000..a66c3b77
--- /dev/null
+++ b/frontend/src/components/tasks/TaskHotel.vue
@@ -0,0 +1,291 @@
+<template>
+  <TaskTimelineItem
+    :step-number="stepNumber"
+    title="Hotel"
+    :is-complete="isComplete"
+    :is-last="isLast"
+  >
+    <template #icon>
+      <Hotel class="w-4 h-4" />
+    </template>
+    <template #header-actions>
+      <StatusToggleBadge
+        v-model="hasRequestedHotelInfo"
+        active-label="Requested"
+        inactive-label="Not Requested"
+        description="Mark whether you've asked the speaker for hotel info."
+      />
+    </template>
+
+    <div class="space-y-4">
+      <!-- Needs hotel selector -->
+      <div class="space-y-2">
+        <Label class="text-sm font-medium"
+          >Does the speaker need a hotel?</Label
+        >
+        <Select v-model="needsHotel">
+          <SelectTrigger class="w-[200px]">
+            <SelectValue placeholder="Select an option" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="not_responded">Didn't respond</SelectItem>
+            <SelectItem value="yes">Yes</SelectItem>
+            <SelectItem value="no">No</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <!-- Hotel details (only when needs hotel = yes) -->
+      <template v-if="needsHotel === 'yes'">
+        <Separator />
+
+        <!-- Hotel Details -->
+        <div class="space-y-3">
+          <span class="text-sm font-medium">Details</span>
+          <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
+            <div class="space-y-1">
+              <Label for="hotel-name" class="text-xs">Hotel Name</Label>
+              <Input
+                id="hotel-name"
+                v-model="hotelName"
+                placeholder="e.g. Hotel Marques"
+              />
+            </div>
+            <div class="space-y-1">
+              <Label for="room-type" class="text-xs">Room Type</Label>
+              <Input
+                id="room-type"
+                v-model="roomType"
+                placeholder="e.g. Single, Double"
+              />
+            </div>
+            <div class="space-y-1">
+              <Label for="hotel-price" class="text-xs">Price</Label>
+              <Input
+                id="hotel-price"
+                v-model="hotelPrice"
+                placeholder="e.g. 120.00"
+              />
+            </div>
+          </div>
+        </div>
+
+        <Separator />
+
+        <!-- Booking -->
+        <div class="space-y-3">
+          <span class="text-sm font-medium">Booking</span>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+            <div class="space-y-1">
+              <Label for="check-in" class="text-xs">Check-In</Label>
+              <DatePicker v-model="checkInDate" placeholder="Check-in date" />
+            </div>
+            <div class="space-y-1">
+              <Label for="check-out" class="text-xs">Check-Out</Label>
+              <DatePicker v-model="checkOutDate" placeholder="Check-out date" />
+            </div>
+            <div class="space-y-1">
+              <Label class="text-xs">Nº of Nights</Label>
+              <div
+                class="flex items-center h-9 px-3 rounded-md border bg-muted text-sm text-muted-foreground"
+              >
+                {{ numNights !== null ? numNights : "—" }}
+              </div>
+            </div>
+            <div class="space-y-1">
+              <Label for="num-guests" class="text-xs">Nº of Guests</Label>
+              <Input id="num-guests" v-model="numGuests" placeholder="e.g. 1" />
+            </div>
+          </div>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <div class="space-y-1">
+              <Label for="guest-names" class="text-xs">Guest Name(s)</Label>
+              <Input
+                id="guest-names"
+                v-model="guestNames"
+                placeholder="Name of guest(s)"
+              />
+            </div>
+          </div>
+        </div>
+
+        <Separator />
+
+        <!-- Payment -->
+        <div class="space-y-3">
+          <span class="text-sm font-medium">Payment</span>
+          <div class="flex items-center gap-6">
+            <div class="flex items-center space-x-2">
+              <Checkbox id="hotel-invoice" v-model="hasInvoice" />
+              <Label for="hotel-invoice" class="text-sm">Invoice</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <Checkbox id="hotel-paid" v-model="isPaid" />
+              <Label for="hotel-paid" class="text-sm">Paid</Label>
+            </div>
+          </div>
+        </div>
+
+        <Separator />
+
+        <!-- Observations & Notes -->
+        <div class="space-y-2">
+          <Label for="hotel-notes" class="text-sm font-medium">
+            Observations & Notes
+          </Label>
+          <Textarea
+            id="hotel-notes"
+            v-model="hotelNotes"
+            placeholder="Any observations or notes"
+            :rows="3"
+          />
+        </div>
+      </template>
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import StatusToggleBadge from "./StatusToggleBadge.vue";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Separator } from "@/components/ui/separator";
+import { DatePicker } from "@/components/ui/date-picker";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Hotel } from "lucide-vue-next";
+import type { SpeakerTasks, SpeakerTaskHotel } from "@/dto/tasks";
+
+interface Props {
+  entityId: string;
+  stepNumber?: number;
+  isLast?: boolean;
+  speakerTasks?: SpeakerTasks;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  stepNumber: 6,
+  isLast: false,
+  speakerTasks: undefined,
+});
+
+const emit = defineEmits<{
+  "update:hotel": [value: SpeakerTaskHotel];
+}>();
+
+const parseDate = (v: string | null | undefined): Date | null => {
+  if (!v) return null;
+  try {
+    return new Date(v);
+  } catch {
+    return null;
+  }
+};
+
+// Request status
+const hasRequestedHotelInfo = ref<boolean>(
+  props.speakerTasks?.hotel?.requested ?? false,
+);
+
+// Needs hotel selector
+type NeedsHotel = "not_responded" | "yes" | "no";
+const needsHotel = ref<NeedsHotel>(
+  (props.speakerTasks?.hotel?.needsHotel as NeedsHotel) ?? "not_responded",
+);
+
+// Hotel details
+const hotelName = ref<string>(props.speakerTasks?.hotel?.hotelName ?? "");
+const roomType = ref<string>(props.speakerTasks?.hotel?.roomType ?? "");
+const hotelPrice = ref<string>(props.speakerTasks?.hotel?.price ?? "");
+
+// Booking
+const checkInDate = ref<Date | null>(
+  parseDate(props.speakerTasks?.hotel?.checkIn),
+);
+const checkOutDate = ref<Date | null>(
+  parseDate(props.speakerTasks?.hotel?.checkOut),
+);
+
+// Auto-calculate number of nights from dates
+const numNights = computed<number | null>(() => {
+  if (!checkInDate.value || !checkOutDate.value) return null;
+  const msPerDay = 1000 * 60 * 60 * 24;
+  const diff = Math.round(
+    (checkOutDate.value.getTime() - checkInDate.value.getTime()) / msPerDay,
+  );
+  return diff > 0 ? diff : null;
+});
+
+const numGuests = ref<string>(props.speakerTasks?.hotel?.numGuests ?? "");
+const guestNames = ref<string>(props.speakerTasks?.hotel?.guestNames ?? "");
+
+// Payment
+const hasInvoice = ref<boolean>(props.speakerTasks?.hotel?.invoice ?? false);
+const isPaid = ref<boolean>(props.speakerTasks?.hotel?.paid ?? false);
+
+// Notes
+const hotelNotes = ref<string>(props.speakerTasks?.hotel?.notes ?? "");
+
+function emitHotel() {
+  emit("update:hotel", {
+    needsHotel: needsHotel.value,
+    requested: hasRequestedHotelInfo.value,
+    hotelName: hotelName.value,
+    roomType: roomType.value,
+    price: hotelPrice.value,
+    checkIn: checkInDate.value?.toISOString() ?? null,
+    checkOut: checkOutDate.value?.toISOString() ?? null,
+    numNights: numNights.value !== null ? String(numNights.value) : "",
+    numGuests: numGuests.value,
+    guestNames: guestNames.value,
+    invoice: hasInvoice.value,
+    paid: isPaid.value,
+    notes: hotelNotes.value,
+  });
+}
+
+watch(
+  [
+    needsHotel,
+    hasRequestedHotelInfo,
+    hotelName,
+    roomType,
+    hotelPrice,
+    checkInDate,
+    checkOutDate,
+    numGuests,
+    guestNames,
+    hasInvoice,
+    isPaid,
+    hotelNotes,
+  ],
+  emitHotel,
+);
+
+const isComplete = computed(() => {
+  if (needsHotel.value === "no") return true;
+  if (needsHotel.value === "yes") {
+    return (
+      !!hotelName.value.trim() &&
+      checkInDate.value !== null &&
+      checkOutDate.value !== null &&
+      isPaid.value === true
+    );
+  }
+  return false;
+});
+
+defineExpose({
+  isComplete,
+});
+</script>
diff --git a/frontend/src/components/tasks/TaskImages.vue b/frontend/src/components/tasks/TaskImages.vue
new file mode 100644
index 00000000..034618c7
--- /dev/null
+++ b/frontend/src/components/tasks/TaskImages.vue
@@ -0,0 +1,192 @@
+<template>
+  <TaskTimelineItem
+    :step-number="stepNumber"
+    title="Images"
+    :is-complete="isComplete"
+    :is-last="isLast"
+  >
+    <template #icon>
+      <ImageIcon class="w-4 h-4" />
+    </template>
+
+    <div class="space-y-6">
+      <!-- Company: public logo -->
+      <template v-if="entityType === 'company'">
+        <div class="space-y-2">
+          <span class="text-sm font-medium">Public Logo</span>
+          <p class="text-xs text-muted-foreground">
+            This image is shown publicly on the website.
+          </p>
+          <ImageUpload
+            label=""
+            input-id="company-public-image"
+            url-placeholder="https://example.com/logo.png"
+            preview-alt="Company public logo"
+            preview-size="sm"
+            :initial-url="companyPublicImgUrl"
+            :disabled="isUploading"
+            @file-selected="handleCompanyPublicFile"
+          />
+          <p
+            v-if="isUploading"
+            class="text-xs text-muted-foreground flex items-center gap-1"
+          >
+            <Loader2 class="w-3 h-3 animate-spin" /> Uploading…
+          </p>
+        </div>
+      </template>
+
+      <!-- Speaker: public photo + company logo -->
+      <template v-if="entityType === 'speaker'">
+        <div class="space-y-2">
+          <span class="text-sm font-medium">Speaker Photo</span>
+          <p class="text-xs text-muted-foreground">
+            Public photo of the speaker shown on the website.
+          </p>
+          <ImageUpload
+            label=""
+            input-id="speaker-public-image"
+            url-placeholder="https://example.com/photo.jpg"
+            preview-alt="Speaker public photo"
+            preview-size="sm"
+            :initial-url="speakerImgUrl"
+            :disabled="isSpeakerUploading"
+            @file-selected="handleSpeakerPublicFile"
+          />
+          <p
+            v-if="isSpeakerUploading"
+            class="text-xs text-muted-foreground flex items-center gap-1"
+          >
+            <Loader2 class="w-3 h-3 animate-spin" /> Uploading…
+          </p>
+        </div>
+
+        <Separator />
+
+        <div class="space-y-2">
+          <span class="text-sm font-medium">Speaker's Company Logo</span>
+          <p class="text-xs text-muted-foreground">
+            Logo of the speaker's company, shown publicly.
+          </p>
+          <ImageUpload
+            label=""
+            input-id="speaker-company-image"
+            url-placeholder="https://example.com/company-logo.png"
+            preview-alt="Speaker company logo"
+            preview-size="sm"
+            :initial-url="speakerCompanyImgUrl"
+            :disabled="isCompanyUploading"
+            @file-selected="handleSpeakerCompanyFile"
+          />
+          <p
+            v-if="isCompanyUploading"
+            class="text-xs text-muted-foreground flex items-center gap-1"
+          >
+            <Loader2 class="w-3 h-3 animate-spin" /> Uploading…
+          </p>
+        </div>
+      </template>
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import ImageUpload from "@/components/ImageUpload.vue";
+import { Separator } from "@/components/ui/separator";
+import { ImageIcon, Loader2 } from "lucide-vue-next";
+import type { EntityType } from "@/dto/tasks";
+import { useCompanyPublicImageUploadMutation } from "@/mutations/companies";
+import {
+  useSpeakerPublicImageUploadMutation,
+  useSpeakerCompanyImageUploadMutation,
+} from "@/mutations/speakers";
+import useToast from "@/lib/toast";
+
+interface Props {
+  entityId: string;
+  entityType: EntityType;
+  stepNumber?: number;
+  isLast?: boolean;
+  /** Existing image URLs for preview on load */
+  companyPublicImgUrl?: string;
+  speakerImgUrl?: string;
+  speakerCompanyImgUrl?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  stepNumber: 7,
+  isLast: false,
+  companyPublicImgUrl: undefined,
+  speakerImgUrl: undefined,
+  speakerCompanyImgUrl: undefined,
+});
+
+const { toast } = useToast();
+
+// ── Company public image ────────────────────────────────────
+const companyPublicMutation = useCompanyPublicImageUploadMutation();
+companyPublicMutation.companyId.value = props.entityId;
+
+const isUploading = ref(false);
+
+async function handleCompanyPublicFile(file: File) {
+  const fd = new FormData();
+  fd.append("image", file);
+  companyPublicMutation.imageData.value = fd;
+  isUploading.value = true;
+  try {
+    await companyPublicMutation.mutate();
+    toast.success({ title: "Public logo uploaded" });
+  } catch {
+    toast.error({ title: "Failed to upload public logo" });
+  } finally {
+    isUploading.value = false;
+  }
+}
+
+// ── Speaker public image ────────────────────────────────────
+const speakerPublicMutation = useSpeakerPublicImageUploadMutation();
+speakerPublicMutation.speakerId.value = props.entityId;
+
+const isSpeakerUploading = ref(false);
+
+async function handleSpeakerPublicFile(file: File) {
+  const fd = new FormData();
+  fd.append("image", file);
+  speakerPublicMutation.imageData.value = fd;
+  isSpeakerUploading.value = true;
+  try {
+    await speakerPublicMutation.mutate();
+    toast.success({ title: "Speaker photo uploaded" });
+  } catch {
+    toast.error({ title: "Failed to upload speaker photo" });
+  } finally {
+    isSpeakerUploading.value = false;
+  }
+}
+
+// ── Speaker company image ───────────────────────────────────
+const speakerCompanyMutation = useSpeakerCompanyImageUploadMutation();
+speakerCompanyMutation.speakerId.value = props.entityId;
+
+const isCompanyUploading = ref(false);
+
+async function handleSpeakerCompanyFile(file: File) {
+  const fd = new FormData();
+  fd.append("image", file);
+  speakerCompanyMutation.imageData.value = fd;
+  isCompanyUploading.value = true;
+  try {
+    await speakerCompanyMutation.mutate();
+    toast.success({ title: "Company logo uploaded" });
+  } catch {
+    toast.error({ title: "Failed to upload company logo" });
+  } finally {
+    isCompanyUploading.value = false;
+  }
+}
+
+const isComplete = computed(() => false); // image upload is always optional
+</script>
diff --git a/frontend/src/components/tasks/TaskLogistics.vue b/frontend/src/components/tasks/TaskLogistics.vue
new file mode 100644
index 00000000..1cb93993
--- /dev/null
+++ b/frontend/src/components/tasks/TaskLogistics.vue
@@ -0,0 +1,116 @@
+<template>
+  <TaskTimelineItem
+    :step-number="stepNumber"
+    title="Logistics"
+    :is-complete="isComplete"
+    :is-last="isLast"
+  >
+    <template #icon>
+      <Truck class="w-4 h-4" />
+    </template>
+    <template #header-actions>
+      <StatusToggleBadge
+        v-model="hasRequestedInfo"
+        description="Mark whether you've asked the company for logistics info."
+      />
+    </template>
+
+    <div class="space-y-4">
+      <!-- Car Load/Unload Selection -->
+      <div class="space-y-2">
+        <Label for="car-status">Car for Loading/Unloading</Label>
+        <div class="flex gap-4">
+          <Select v-model="carStatus">
+            <SelectTrigger class="w-[200px]">
+              <SelectValue placeholder="Select an option" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="not_responded">Didn't respond</SelectItem>
+              <SelectItem value="wants">Wants to bring a car</SelectItem>
+              <SelectItem value="not_wants"
+                >Doesn't want to bring a car</SelectItem
+              >
+            </SelectContent>
+          </Select>
+
+          <!-- License Plate Input (shown only when they want to bring a car) -->
+          <Input
+            v-if="carStatus === 'wants'"
+            id="license-plate"
+            v-model="licensePlate"
+            placeholder="License plate"
+            class="flex-1"
+          />
+        </div>
+      </div>
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import StatusToggleBadge from "./StatusToggleBadge.vue";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Truck } from "lucide-vue-next";
+import type { CompanyTasks, CompanyTaskLogistics } from "@/dto/tasks";
+
+interface Props {
+  entityId: string;
+  stepNumber?: number;
+  isLast?: boolean;
+  companyTasks?: CompanyTasks;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  stepNumber: 6,
+  isLast: false,
+  companyTasks: undefined,
+});
+
+const emit = defineEmits<{
+  "update:logistics": [value: CompanyTaskLogistics];
+}>();
+
+type CarStatus = "not_responded" | "wants" | "not_wants";
+
+// Request status (whether email was sent)
+const hasRequestedInfo = ref<boolean>(
+  props.companyTasks?.logistics?.requestedInfo ?? false,
+);
+
+// Form data
+const carStatus = ref<CarStatus>(
+  (props.companyTasks?.logistics?.carStatus as CarStatus) ?? "not_responded",
+);
+const licensePlate = ref<string>(
+  props.companyTasks?.logistics?.licensePlate ?? "",
+);
+
+watch([hasRequestedInfo, carStatus, licensePlate], () => {
+  emit("update:logistics", {
+    requestedInfo: hasRequestedInfo.value,
+    carStatus: carStatus.value,
+    licensePlate: licensePlate.value,
+  });
+});
+
+const isComplete = computed(() => {
+  if (carStatus.value === "not_responded") return false;
+  if (carStatus.value === "not_wants") return true;
+  // If they want a car, they need to provide a license plate
+  return carStatus.value === "wants" && licensePlate.value.trim() !== "";
+});
+
+defineExpose({
+  isComplete,
+});
+</script>
diff --git a/frontend/src/components/tasks/TaskMaterials.vue b/frontend/src/components/tasks/TaskMaterials.vue
new file mode 100644
index 00000000..c979c1a3
--- /dev/null
+++ b/frontend/src/components/tasks/TaskMaterials.vue
@@ -0,0 +1,124 @@
+<template>
+  <TaskTimelineItem
+    :step-number="stepNumber"
+    title="Materials"
+    :is-complete="isComplete"
+  >
+    <template #icon>
+      <Package class="w-4 h-4" />
+    </template>
+    <template #header-actions>
+      <StatusToggleBadge
+        v-model="hasRequestedMaterials"
+        active-label="Requested"
+        inactive-label="Not Requested"
+        description="Mark whether you've asked the speaker for materials."
+      />
+    </template>
+
+    <div class="space-y-4">
+      <!-- Talk Info -->
+      <div class="space-y-3">
+        <span class="text-sm font-medium">Talk Info</span>
+
+        <div class="space-y-2">
+          <Label for="talk-title" class="text-sm">Talk Title</Label>
+          <Input
+            id="talk-title"
+            v-model="talkTitle"
+            placeholder="Title of the talk"
+          />
+        </div>
+
+        <div class="space-y-2">
+          <Label for="talk-description" class="text-sm">
+            Talk Description
+          </Label>
+          <Textarea
+            id="talk-description"
+            v-model="talkDescription"
+            placeholder="Description of the talk"
+            :rows="3"
+          />
+        </div>
+      </div>
+
+      <Separator />
+
+      <!-- Materials -->
+      <div class="space-y-3">
+        <span class="text-sm font-medium">Materials</span>
+
+        <div class="flex items-center space-x-2">
+          <Checkbox id="materials-received" v-model="materialsReceived" />
+          <Label for="materials-received" class="text-sm">
+            Materials received
+          </Label>
+        </div>
+      </div>
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import StatusToggleBadge from "./StatusToggleBadge.vue";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Separator } from "@/components/ui/separator";
+import { Package } from "lucide-vue-next";
+import type { SpeakerTasks, SpeakerTaskMaterials } from "@/dto/tasks";
+
+interface Props {
+  entityId: string;
+  stepNumber?: number;
+  speakerTasks?: SpeakerTasks;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  stepNumber: 5,
+  speakerTasks: undefined,
+});
+
+const emit = defineEmits<{
+  "update:materials": [value: SpeakerTaskMaterials];
+}>();
+
+// Materials states
+const hasRequestedMaterials = ref<boolean>(
+  props.speakerTasks?.materials?.requested ?? false,
+);
+const materialsReceived = ref<boolean>(
+  props.speakerTasks?.materials?.received ?? false,
+);
+
+// Talk info
+const talkTitle = ref<string>(props.speakerTasks?.materials?.talkTitle ?? "");
+const talkDescription = ref<string>(
+  props.speakerTasks?.materials?.talkDescription ?? "",
+);
+
+watch(
+  [hasRequestedMaterials, materialsReceived, talkTitle, talkDescription],
+  () => {
+    emit("update:materials", {
+      requested: hasRequestedMaterials.value,
+      received: materialsReceived.value,
+      talkTitle: talkTitle.value,
+      talkDescription: talkDescription.value,
+      testSchedule: props.speakerTasks?.materials?.testSchedule ?? "",
+      testDone: props.speakerTasks?.materials?.testDone ?? false,
+    });
+  },
+);
+
+const isComplete = computed(() => {
+  return materialsReceived.value === true;
+});
+
+defineExpose({
+  isComplete,
+});
+</script>
diff --git a/frontend/src/components/tasks/TaskSessionTitles.vue b/frontend/src/components/tasks/TaskSessionTitles.vue
new file mode 100644
index 00000000..18d15230
--- /dev/null
+++ b/frontend/src/components/tasks/TaskSessionTitles.vue
@@ -0,0 +1,124 @@
+<template>
+  <TaskTimelineItem
+    :step-number="4"
+    title="Session Titles"
+    :is-complete="isComplete"
+  >
+    <template #icon>
+      <Presentation class="w-4 h-4" />
+    </template>
+    <div class="space-y-4">
+      <!-- Presentation Title (if package includes presentation item) -->
+      <div v-if="hasPresentation" class="space-y-2">
+        <Label for="presentation-title">Presentation Title</Label>
+        <Input
+          id="presentation-title"
+          v-model="presentationTitle"
+          placeholder="Enter presentation title"
+          :class="{ 'border-destructive': isPresentationTitleTooLong }"
+        />
+        <div class="flex items-center justify-between">
+          <p
+            v-if="isPresentationTitleTooLong"
+            class="text-xs text-destructive flex items-center gap-1"
+          >
+            <AlertTriangle class="w-3 h-3" />
+            Title exceeds 30 characters ({{ presentationTitle.length }}/30)
+          </p>
+          <p v-else class="text-xs text-muted-foreground">
+            {{ presentationTitle.length }}/30 characters
+          </p>
+        </div>
+      </div>
+
+      <!-- Workshop Title (if package includes workshop item) -->
+      <div v-if="hasWorkshop" class="space-y-2">
+        <Label for="workshop-title">Workshop Title</Label>
+        <Input
+          id="workshop-title"
+          v-model="workshopTitle"
+          placeholder="Enter workshop title"
+          :class="{ 'border-destructive': isWorkshopTitleTooLong }"
+        />
+        <div class="flex items-center justify-between">
+          <p
+            v-if="isWorkshopTitleTooLong"
+            class="text-xs text-destructive flex items-center gap-1"
+          >
+            <AlertTriangle class="w-3 h-3" />
+            Title exceeds 30 characters ({{ workshopTitle.length }}/30)
+          </p>
+          <p v-else class="text-xs text-muted-foreground">
+            {{ workshopTitle.length }}/30 characters
+          </p>
+        </div>
+      </div>
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { AlertTriangle, Presentation } from "lucide-vue-next";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import type { Item } from "@/dto/item";
+import type { CompanyTasks, CompanyTaskSessionTitles } from "@/dto/tasks";
+
+interface Props {
+  packageItems: Item[];
+  companyTasks?: CompanyTasks;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  "update:sessionTitles": [value: CompanyTaskSessionTitles];
+}>();
+
+// Check if package includes presentation or workshop items by type
+const hasPresentation = computed(() =>
+  props.packageItems.some(
+    (item) => item.name?.toLowerCase() === "presentation",
+  ),
+);
+const hasWorkshop = computed(() =>
+  props.packageItems.some((item) => item.name?.toLowerCase() === "workshop"),
+);
+
+// Session titles
+const presentationTitle = ref(
+  props.companyTasks?.sessionTitles?.presentationTitle ?? "",
+);
+const workshopTitle = ref(
+  props.companyTasks?.sessionTitles?.workshopTitle ?? "",
+);
+
+watch([presentationTitle, workshopTitle], () => {
+  emit("update:sessionTitles", {
+    presentationTitle: presentationTitle.value,
+    workshopTitle: workshopTitle.value,
+  });
+});
+
+const isPresentationTitleTooLong = computed(
+  () => presentationTitle.value.length > 30,
+);
+const isWorkshopTitleTooLong = computed(() => workshopTitle.value.length > 30);
+
+// Completion state
+const isComplete = computed(() => {
+  const presentationComplete =
+    !hasPresentation.value ||
+    (presentationTitle.value.length > 0 && !isPresentationTitleTooLong.value);
+  const workshopComplete =
+    !hasWorkshop.value ||
+    (workshopTitle.value.length > 0 && !isWorkshopTitleTooLong.value);
+  return presentationComplete && workshopComplete;
+});
+
+defineExpose({
+  isComplete,
+});
+</script>
diff --git a/frontend/src/components/tasks/TaskTestSchedule.vue b/frontend/src/components/tasks/TaskTestSchedule.vue
new file mode 100644
index 00000000..16ce0426
--- /dev/null
+++ b/frontend/src/components/tasks/TaskTestSchedule.vue
@@ -0,0 +1,68 @@
+<template>
+  <TaskTimelineItem
+    :step-number="stepNumber"
+    title="Test Schedule"
+    :is-complete="isComplete"
+    :is-last="isLast"
+  >
+    <template #icon>
+      <ClipboardCheck class="w-4 h-4" />
+    </template>
+
+    <div class="space-y-4">
+      <div class="space-y-2">
+        <Label for="test-schedule" class="text-sm">Scheduled Time</Label>
+        <Input
+          id="test-schedule"
+          v-model="testSchedule"
+          placeholder="e.g. Monday 14:00"
+        />
+      </div>
+
+      <div class="flex items-center space-x-2">
+        <Checkbox id="test-done" v-model="testDone" />
+        <Label for="test-done" class="text-sm">Test completed</Label>
+      </div>
+    </div>
+  </TaskTimelineItem>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import TaskTimelineItem from "./TaskTimelineItem.vue";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { ClipboardCheck } from "lucide-vue-next";
+import type { SpeakerTasks } from "@/dto/tasks";
+
+interface Props {
+  entityId: string;
+  stepNumber?: number;
+  isLast?: boolean;
+  speakerTasks?: SpeakerTasks;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  stepNumber: 8,
+  isLast: false,
+  speakerTasks: undefined,
+});
+
+const emit = defineEmits<{
+  "update:testSchedule": [schedule: string, done: boolean];
+}>();
+
+const testSchedule = ref<string>(
+  props.speakerTasks?.materials?.testSchedule ?? "",
+);
+const testDone = ref<boolean>(props.speakerTasks?.materials?.testDone ?? false);
+
+watch([testSchedule, testDone], () => {
+  emit("update:testSchedule", testSchedule.value, testDone.value);
+});
+
+const isComplete = computed(() => testDone.value === true);
+
+defineExpose({ isComplete });
+</script>
diff --git a/frontend/src/components/tasks/TaskTimelineItem.vue b/frontend/src/components/tasks/TaskTimelineItem.vue
new file mode 100644
index 00000000..15df5cdb
--- /dev/null
+++ b/frontend/src/components/tasks/TaskTimelineItem.vue
@@ -0,0 +1,83 @@
+<template>
+  <StepperItem
+    :step="stepNumber"
+    class="flex gap-4 items-stretch"
+    :completed="!isComplete"
+  >
+    <div class="flex flex-col items-center">
+      <StepperIndicator class="shrink-0">
+        <slot name="icon" />
+      </StepperIndicator>
+      <StepperSeparator
+        v-if="!isLast"
+        class="flex-1 w-0.5 min-h-4 my-1 !bg-muted"
+      />
+    </div>
+    <div class="flex-1" :class="{ 'pb-4': !isLast }">
+      <Collapsible v-model:open="isOpen" class="w-full">
+        <Card class="p-4">
+          <div
+            class="flex items-center justify-between cursor-pointer"
+            @click="isOpen = !isOpen"
+          >
+            <h3 class="font-medium flex items-center gap-2">
+              {{ title }}
+              <Loader2
+                v-if="isSaving"
+                class="w-3 h-3 animate-spin text-muted-foreground"
+              />
+            </h3>
+            <div class="flex items-center gap-2">
+              <div @click.stop>
+                <slot name="header-actions" />
+              </div>
+              <Badge v-if="isComplete" variant="default"> Complete </Badge>
+              <Badge v-else variant="secondary"> Pending </Badge>
+              <ChevronDown
+                class="h-4 w-4 transition-transform duration-200"
+                :class="{ 'rotate-180': isOpen }"
+              />
+            </div>
+          </div>
+          <CollapsibleContent class="mt-4">
+            <div :class="{ 'pointer-events-none opacity-50': isSaving }">
+              <slot />
+            </div>
+          </CollapsibleContent>
+        </Card>
+      </Collapsible>
+    </div>
+  </StepperItem>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+import {
+  StepperItem,
+  StepperIndicator,
+  StepperSeparator,
+} from "@/components/ui/stepper";
+import { ChevronDown, Loader2 } from "lucide-vue-next";
+import { inject } from "vue";
+import { TASKS_SAVING_KEY } from "@/composables/useTasksSaving";
+
+interface Props {
+  stepNumber: number;
+  title: string;
+  isComplete: boolean;
+  isLast?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isLast: false,
+});
+
+// Injected from Tasks.vue — undefined outside the tasks context
+const isSaving = inject(TASKS_SAVING_KEY);
+
+// Start collapsed if complete, open if incomplete
+const isOpen = ref(!props.isComplete);
+</script>
diff --git a/frontend/src/components/tasks/Tasks.vue b/frontend/src/components/tasks/Tasks.vue
new file mode 100644
index 00000000..e4411513
--- /dev/null
+++ b/frontend/src/components/tasks/Tasks.vue
@@ -0,0 +1,387 @@
+<template>
+  <div class="p-4 space-y-6">
+    <div class="flex items-center justify-between">
+      <h2 class="text-lg font-semibold">
+        {{ entityType === "company" ? "Company" : "Speaker" }} Tasks Timeline
+      </h2>
+      <span
+        v-if="isSaving"
+        class="text-xs text-muted-foreground flex items-center gap-1"
+      >
+        <Loader2 class="w-3 h-3 animate-spin" /> Saving…
+      </span>
+      <span v-else class="text-xs text-muted-foreground">Auto-saved</span>
+    </div>
+
+    <!-- Stepper Container -->
+    <Stepper
+      v-model="currentStep"
+      orientation="vertical"
+      :linear="false"
+      class="flex flex-col"
+    >
+      <TaskConfirmation
+        :entity-id="entityId"
+        :entity-type="entityType"
+        :participation="currentParticipation"
+        :contact="contact"
+        :company-tasks="companyTasks"
+        :speaker-tasks="speakerTasks"
+        @package-changed="onPackageChanged"
+        @update:company-confirmation="onCompanyConfirmationUpdate"
+        @update:speaker-confirmation="onSpeakerConfirmationUpdate"
+      />
+
+      <TaskBillingLogos
+        :entity-type="entityType"
+        :billing-info="billingInfo"
+        :entity-id="entityId"
+        :company-tasks="companyTasks"
+        :speaker-tasks="speakerTasks"
+        @update:logos="onLogosUpdate"
+        @update:asked-for-info="onAskedForInfoUpdate"
+        @update:po="onPoUpdate"
+      />
+
+      <TaskContract
+        v-if="entityType === 'company'"
+        :entity-type="entityType"
+        :entity-id="entityId"
+        :company-tasks="companyTasks"
+        @update:contract="onContractUpdate"
+      />
+
+      <!-- Company-only steps -->
+      <template v-if="entityType === 'company'">
+        <TaskSessionTitles
+          v-if="showSessionTitles"
+          :package-items="packageItems"
+          :company-tasks="companyTasks"
+          @update:session-titles="onSessionTitlesUpdate"
+        />
+
+        <TaskCorlief
+          :entity-id="entityId"
+          :step-number="showSessionTitles ? 5 : 4"
+          :company-tasks="companyTasks"
+          @update:corlief="onCorliefUpdate"
+        />
+
+        <TaskLogistics
+          :entity-id="entityId"
+          :step-number="showSessionTitles ? 6 : 5"
+          :company-tasks="companyTasks"
+          @update:logistics="onLogisticsUpdate"
+        />
+      </template>
+
+      <!-- Speaker-only steps -->
+      <template v-if="entityType === 'speaker'">
+        <TaskFlights
+          :entity-id="entityId"
+          :step-number="3"
+          :speaker-tasks="speakerTasks"
+          @update:flights="onFlightsUpdate"
+        />
+
+        <TaskCoverage
+          :entity-id="entityId"
+          :step-number="4"
+          :speaker-tasks="speakerTasks"
+          @update:coverage="onCoverageUpdate"
+        />
+
+        <TaskMaterials
+          :entity-id="entityId"
+          :step-number="5"
+          :speaker-tasks="speakerTasks"
+          @update:materials="onMaterialsUpdate"
+        />
+
+        <TaskHotel
+          :entity-id="entityId"
+          :step-number="6"
+          :speaker-tasks="speakerTasks"
+          @update:hotel="onHotelUpdate"
+        />
+
+        <TaskTestSchedule
+          :entity-id="entityId"
+          :step-number="7"
+          :speaker-tasks="speakerTasks"
+          @update:test-schedule="onTestScheduleUpdate"
+        />
+      </template>
+
+      <!-- Images (both entities) -->
+      <TaskImages
+        :entity-id="entityId"
+        :entity-type="entityType"
+        :step-number="
+          entityType === 'company' ? (showSessionTitles ? 7 : 6) : 8
+        "
+        :is-last="true"
+        :company-public-img-url="
+          entityType === 'company'
+            ? (companyImgs?.public ?? undefined)
+            : undefined
+        "
+        :speaker-img-url="
+          entityType === 'speaker'
+            ? (speakerImgs?.speaker ?? undefined)
+            : undefined
+        "
+        :speaker-company-img-url="
+          entityType === 'speaker'
+            ? (speakerImgs?.company ?? undefined)
+            : undefined
+        "
+      />
+    </Stepper>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, reactive, watch, provide } from "vue";
+import type { EntityType } from "@/dto/tasks";
+import {
+  type CompanyTasks,
+  type SpeakerTasks,
+  type TaskLogos,
+  type CompanyTaskConfirmation,
+  type CompanyTaskContract,
+  type CompanyTaskSessionTitles,
+  type CompanyTaskCorlief,
+  type CompanyTaskLogistics,
+  type SpeakerTaskConfirmation,
+  type SpeakerTaskFlights,
+  type SpeakerTaskCoverage,
+  type SpeakerTaskMaterials,
+  type SpeakerTaskHotel,
+  emptyCompanyTasks,
+  emptySpeakerTasks,
+} from "@/dto/tasks";
+import type {
+  CompanyBillingInfo,
+  CompanyImages,
+  CompanyParticipation,
+} from "@/dto/companies";
+import type { SpeakerImages, SpeakerParticipation } from "@/dto/speakers";
+import type { Contact } from "@/dto/contacts";
+import type { Item } from "@/dto/item";
+import { Stepper } from "@/components/ui/stepper";
+import { Loader2 } from "lucide-vue-next";
+import { useCompanyTasksMutation } from "@/mutations/companies";
+import { useSpeakerTasksMutation } from "@/mutations/speakers";
+import { TASKS_SAVING_KEY } from "@/composables/useTasksSaving";
+import useToast from "@/lib/toast";
+import TaskConfirmation from "./TaskConfirmation.vue";
+import TaskBillingLogos from "./TaskBillingLogos.vue";
+import TaskContract from "./TaskContract.vue";
+import TaskSessionTitles from "./TaskSessionTitles.vue";
+import TaskCorlief from "./TaskCorlief.vue";
+import TaskLogistics from "./TaskLogistics.vue";
+import TaskFlights from "./TaskFlights.vue";
+import TaskCoverage from "./TaskCoverage.vue";
+import TaskMaterials from "./TaskMaterials.vue";
+import TaskHotel from "./TaskHotel.vue";
+import TaskTestSchedule from "./TaskTestSchedule.vue";
+import TaskImages from "./TaskImages.vue";
+
+interface Props {
+  entityType: EntityType;
+  entityId: string;
+  participation?: CompanyParticipation | SpeakerParticipation;
+  billingInfo?: CompanyBillingInfo;
+  contact?: Contact;
+  companyImgs?: CompanyImages;
+  speakerImgs?: SpeakerImages;
+}
+
+const props = defineProps<Props>();
+
+const { toast } = useToast();
+
+// ——————————————————————————————————————
+// Reactive task state — initialised from participation
+// ——————————————————————————————————————
+const companyTasks = reactive<CompanyTasks>(
+  props.entityType === "company"
+    ? {
+        ...emptyCompanyTasks(),
+        ...((props.participation as CompanyParticipation)?.tasks ?? {}),
+      }
+    : emptyCompanyTasks(),
+);
+
+const speakerTasks = reactive<SpeakerTasks>(
+  props.entityType === "speaker"
+    ? {
+        ...emptySpeakerTasks(),
+        ...((props.participation as SpeakerParticipation)?.tasks ?? {}),
+      }
+    : emptySpeakerTasks(),
+);
+
+// ——————————————————————————————————————
+// Save mutations
+// ——————————————————————————————————————
+const companyMutation = useCompanyTasksMutation();
+companyMutation.companyId.value = props.entityId;
+
+const speakerMutation = useSpeakerTasksMutation();
+speakerMutation.speakerId.value = props.entityId;
+
+const isSaving = ref(false);
+
+// Provide saving state to all child task components so they can disable themselves
+provide(TASKS_SAVING_KEY, isSaving);
+
+// ——————————————————————————————————————
+// Sync when participation refreshes from server (post-save cache invalidation)
+// Guard with isSaving to avoid triggering the save watcher (infinite loop)
+// ——————————————————————————————————————
+let isSyncing = false;
+
+watch(
+  () => props.participation,
+  (p) => {
+    if (isSaving.value) return; // server refresh caused by our own save — ignore
+    isSyncing = true;
+    if (props.entityType === "company" && p) {
+      const saved = (p as CompanyParticipation).tasks;
+      if (saved) Object.assign(companyTasks, saved);
+    }
+    if (props.entityType === "speaker" && p) {
+      const saved = (p as SpeakerParticipation).tasks;
+      if (saved) Object.assign(speakerTasks, saved);
+    }
+    // Use nextTick boundary — reset flag after the watch flush
+    setTimeout(() => {
+      isSyncing = false;
+    }, 0);
+  },
+);
+
+// ——————————————————————————————————————
+// Debounced auto-save
+// ——————————————————————————————————————
+let saveTimer: ReturnType<typeof setTimeout> | null = null;
+
+function scheduleSave(delayMs = 600) {
+  if (isSyncing) return; // don't schedule while applying server data
+  if (saveTimer) clearTimeout(saveTimer);
+  saveTimer = setTimeout(async () => {
+    saveTimer = null;
+    if (isSaving.value) return; // already saving
+    isSaving.value = true;
+    try {
+      if (props.entityType === "company") {
+        await companyMutation.mutateAsync({ ...companyTasks });
+      } else {
+        await speakerMutation.mutateAsync({ ...speakerTasks });
+      }
+    } catch (err) {
+      console.error("Auto-save failed:", err);
+      toast.error({ title: "Auto-save failed" });
+    } finally {
+      isSaving.value = false;
+    }
+  }, delayMs);
+}
+
+watch(
+  () => JSON.stringify(companyTasks),
+  () => scheduleSave(600),
+  { deep: true },
+);
+watch(
+  () => JSON.stringify(speakerTasks),
+  () => scheduleSave(600),
+  { deep: true },
+);
+
+// ——————————————————————————————————————
+// Child update handlers (company)
+// ——————————————————————————————————————
+function onCompanyConfirmationUpdate(v: CompanyTaskConfirmation) {
+  Object.assign(companyTasks.confirmation, v);
+}
+function onContractUpdate(v: CompanyTaskContract) {
+  Object.assign(companyTasks.contract, v);
+}
+function onSessionTitlesUpdate(v: CompanyTaskSessionTitles) {
+  Object.assign(companyTasks.sessionTitles, v);
+}
+function onCorliefUpdate(v: CompanyTaskCorlief) {
+  Object.assign(companyTasks.corlief, v);
+}
+function onLogisticsUpdate(v: CompanyTaskLogistics) {
+  Object.assign(companyTasks.logistics, v);
+}
+
+// ——————————————————————————————————————
+// Child update handlers (speaker)
+// ——————————————————————————————————————
+function onSpeakerConfirmationUpdate(v: SpeakerTaskConfirmation) {
+  Object.assign(speakerTasks.confirmation, v);
+}
+function onFlightsUpdate(v: SpeakerTaskFlights) {
+  Object.assign(speakerTasks.flights, v);
+}
+function onCoverageUpdate(v: SpeakerTaskCoverage) {
+  Object.assign(speakerTasks.coverage, v);
+}
+function onMaterialsUpdate(v: SpeakerTaskMaterials) {
+  Object.assign(speakerTasks.materials, v);
+}
+function onHotelUpdate(v: SpeakerTaskHotel) {
+  Object.assign(speakerTasks.hotel, v);
+}
+function onTestScheduleUpdate(schedule: string, done: boolean) {
+  speakerTasks.materials.testSchedule = schedule;
+  speakerTasks.materials.testDone = done;
+}
+
+// ——————————————————————————————————————
+// Shared update handlers
+// ——————————————————————————————————————
+function onLogosUpdate(v: TaskLogos) {
+  if (props.entityType === "company") {
+    Object.assign(companyTasks.logos, v);
+  } else {
+    Object.assign(speakerTasks.logos, v);
+  }
+}
+function onAskedForInfoUpdate(v: boolean) {
+  if (props.entityType === "company") {
+    companyTasks.confirmation.askedForInfo = v;
+  } else {
+    speakerTasks.askedForInfo = v;
+  }
+}
+function onPoUpdate(v: string) {
+  companyTasks.po = v;
+}
+
+// ——————————————————————————————————————
+// Package items (company session titles logic)
+// ——————————————————————————————————————
+const currentParticipation = computed(() => props.participation);
+const packageItems = ref<Item[]>([]);
+
+const onPackageChanged = (_name: string, items: Item[]) => {
+  packageItems.value = items;
+};
+
+const showSessionTitles = computed(() => {
+  if (props.entityType !== "company") return false;
+  return packageItems.value.some(
+    (item) =>
+      item.name?.toLowerCase() === "presentation" ||
+      item.name?.toLowerCase() === "workshop",
+  );
+});
+
+const currentStep = ref(0);
+</script>
diff --git a/frontend/src/components/ui/calendar/Calendar.vue b/frontend/src/components/ui/calendar/Calendar.vue
new file mode 100644
index 00000000..02cd0d21
--- /dev/null
+++ b/frontend/src/components/ui/calendar/Calendar.vue
@@ -0,0 +1,227 @@
+<script lang="ts" setup>
+import type { CalendarRootEmits, CalendarRootProps, DateValue } from "reka-ui";
+import type { HTMLAttributes, Ref } from "vue";
+import type { LayoutTypes } from ".";
+import { getLocalTimeZone, today } from "@internationalized/date";
+import { createReusableTemplate, reactiveOmit, useVModel } from "@vueuse/core";
+import { CalendarRoot, useDateFormatter, useForwardPropsEmits } from "reka-ui";
+import { createYear, createYearRange, toDate } from "reka-ui/date";
+import { computed, toRaw } from "vue";
+import { cn } from "@/lib/utils";
+import {
+  NativeSelect,
+  NativeSelectOption,
+} from "@/components/ui/native-select";
+import {
+  CalendarCell,
+  CalendarCellTrigger,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHead,
+  CalendarGridRow,
+  CalendarHeadCell,
+  CalendarHeader,
+  CalendarHeading,
+  CalendarNextButton,
+  CalendarPrevButton,
+} from ".";
+
+const props = withDefaults(
+  defineProps<
+    CalendarRootProps & {
+      class?: HTMLAttributes["class"];
+      layout?: LayoutTypes;
+      yearRange?: DateValue[];
+    }
+  >(),
+  {
+    modelValue: undefined,
+    layout: undefined,
+    class: undefined,
+    yearRange: undefined,
+  },
+);
+const emits = defineEmits<CalendarRootEmits>();
+
+const delegatedProps = reactiveOmit(props, "class", "layout", "placeholder");
+
+const placeholder = useVModel(props, "placeholder", emits, {
+  passive: true,
+  defaultValue: props.defaultPlaceholder ?? today(getLocalTimeZone()),
+}) as Ref<DateValue>;
+
+const formatter = useDateFormatter(props.locale ?? "en");
+
+const yearRange = computed(() => {
+  return (
+    props.yearRange ??
+    createYearRange({
+      start:
+        props?.minValue ??
+        (
+          toRaw(props.placeholder) ??
+          props.defaultPlaceholder ??
+          today(getLocalTimeZone())
+        ).cycle("year", -100),
+
+      end:
+        props?.maxValue ??
+        (
+          toRaw(props.placeholder) ??
+          props.defaultPlaceholder ??
+          today(getLocalTimeZone())
+        ).cycle("year", 10),
+    })
+  );
+});
+
+const [DefineMonthTemplate, ReuseMonthTemplate] = createReusableTemplate<{
+  date: DateValue;
+}>();
+const [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate<{
+  date: DateValue;
+}>();
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DefineMonthTemplate v-slot="{ date }">
+    <div class="**:data-[slot=native-select-icon]:right-1">
+      <div class="relative">
+        <div
+          class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none"
+        >
+          {{ formatter.custom(toDate(date), { month: "short" }) }}
+        </div>
+        <NativeSelect
+          class="text-xs h-8 pr-6 pl-2 text-transparent relative"
+          @change="
+            (e: Event) => {
+              placeholder = placeholder.set({
+                month: Number((e?.target as any)?.value),
+              });
+            }
+          "
+        >
+          <NativeSelectOption
+            v-for="month in createYear({ dateObj: date })"
+            :key="month.toString()"
+            :value="month.month"
+            :selected="date.month === month.month"
+          >
+            {{ formatter.custom(toDate(month), { month: "short" }) }}
+          </NativeSelectOption>
+        </NativeSelect>
+      </div>
+    </div>
+  </DefineMonthTemplate>
+
+  <DefineYearTemplate v-slot="{ date }">
+    <div class="**:data-[slot=native-select-icon]:right-1">
+      <div class="relative">
+        <div
+          class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none"
+        >
+          {{ formatter.custom(toDate(date), { year: "numeric" }) }}
+        </div>
+        <NativeSelect
+          class="text-xs h-8 pr-6 pl-2 text-transparent relative"
+          @change="
+            (e: Event) => {
+              placeholder = placeholder.set({
+                year: Number((e?.target as any)?.value),
+              });
+            }
+          "
+        >
+          <NativeSelectOption
+            v-for="year in yearRange"
+            :key="year.toString()"
+            :value="year.year"
+            :selected="date.year === year.year"
+          >
+            {{ formatter.custom(toDate(year), { year: "numeric" }) }}
+          </NativeSelectOption>
+        </NativeSelect>
+      </div>
+    </div>
+  </DefineYearTemplate>
+
+  <CalendarRoot
+    v-slot="{ grid, weekDays, date }"
+    v-bind="forwarded"
+    v-model:placeholder="placeholder"
+    data-slot="calendar"
+    :class="cn('p-3', props.class)"
+  >
+    <CalendarHeader class="pt-0">
+      <nav
+        class="flex items-center gap-1 absolute top-0 inset-x-0 justify-between"
+      >
+        <CalendarPrevButton>
+          <slot name="calendar-prev-icon" />
+        </CalendarPrevButton>
+        <CalendarNextButton>
+          <slot name="calendar-next-icon" />
+        </CalendarNextButton>
+      </nav>
+
+      <slot
+        name="calendar-heading"
+        :date="date"
+        :month="ReuseMonthTemplate"
+        :year="ReuseYearTemplate"
+      >
+        <template v-if="layout === 'month-and-year'">
+          <div class="flex items-center justify-center gap-1">
+            <ReuseMonthTemplate :date="date" />
+            <ReuseYearTemplate :date="date" />
+          </div>
+        </template>
+        <template v-else-if="layout === 'month-only'">
+          <div class="flex items-center justify-center gap-1">
+            <ReuseMonthTemplate :date="date" />
+            {{ formatter.custom(toDate(date), { year: "numeric" }) }}
+          </div>
+        </template>
+        <template v-else-if="layout === 'year-only'">
+          <div class="flex items-center justify-center gap-1">
+            {{ formatter.custom(toDate(date), { month: "short" }) }}
+            <ReuseYearTemplate :date="date" />
+          </div>
+        </template>
+        <template v-else>
+          <CalendarHeading />
+        </template>
+      </slot>
+    </CalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell v-for="day in weekDays" :key="day">
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`weekDate-${index}`"
+            class="mt-2 w-full"
+          >
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger :day="weekDate" :month="month.value" />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>
diff --git a/frontend/src/components/ui/calendar/CalendarCell.vue b/frontend/src/components/ui/calendar/CalendarCell.vue
new file mode 100644
index 00000000..a802ee9e
--- /dev/null
+++ b/frontend/src/components/ui/calendar/CalendarCell.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { CalendarCellProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarCell, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  CalendarCellProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarCell
+    data-slot="calendar-cell"
+    :class="
+      cn(
+        'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCell>
+</template>
diff --git a/frontend/src/components/ui/calendar/CalendarCellTrigger.vue b/frontend/src/components/ui/calendar/CalendarCellTrigger.vue
new file mode 100644
index 00000000..01490dab
--- /dev/null
+++ b/frontend/src/components/ui/calendar/CalendarCellTrigger.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import type { CalendarCellTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarCellTrigger, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+const props = withDefaults(
+  defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    as: "button",
+    class: undefined,
+  },
+);
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarCellTrigger
+    data-slot="calendar-cell-trigger"
+    :class="
+      cn(
+        buttonVariants({ variant: 'ghost' }),
+        'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',
+        '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+        // Selected
+        'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+        // Disabled
+        'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+        // Unavailable
+        'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+        // Outside months
+        'data-[outside-view]:text-muted-foreground',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCellTrigger>
+</template>
diff --git a/frontend/src/components/ui/calendar/CalendarGrid.vue b/frontend/src/components/ui/calendar/CalendarGrid.vue
new file mode 100644
index 00000000..0268f026
--- /dev/null
+++ b/frontend/src/components/ui/calendar/CalendarGrid.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { CalendarGridProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarGrid, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  CalendarGridProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarGrid
+    data-slot="calendar-grid"
+    :class="cn('w-full border-collapse space-x-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGrid>
+</template>
diff --git a/frontend/src/components/ui/calendar/CalendarGridBody.vue b/frontend/src/components/ui/calendar/CalendarGridBody.vue
new file mode 100644
index 00000000..3460fbcf
--- /dev/null
+++ b/frontend/src/components/ui/calendar/CalendarGridBody.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import type { CalendarGridBodyProps } from "reka-ui";
+import { CalendarGridBody } from "reka-ui";
+
+const props = defineProps<CalendarGridBodyProps>();
+</script>
+
+<template>
+  <CalendarGridBody data-slot="calendar-grid-body" v-bind="props">
+    <slot />
+  </CalendarGridBody>
+</template>
diff --git a/frontend/src/components/ui/calendar/CalendarGridHead.vue b/frontend/src/components/ui/calendar/CalendarGridHead.vue
new file mode 100644
index 00000000..ecb481da
--- /dev/null
+++ b/frontend/src/components/ui/calendar/CalendarGridHead.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { CalendarGridHeadProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { CalendarGridHead } from "reka-ui";
+
+const props = defineProps<
+  CalendarGridHeadProps & { class?: HTMLAttributes["class"] }
+>();
+</script>
+
+<template>
+  <CalendarGridHead data-slot="calendar-grid-head" v-bind="props">
+    <slot />
+  </CalendarGridHead>
+</template>
diff --git a/frontend/src/components/ui/calendar/CalendarGridRow.vue b/frontend/src/components/ui/calendar/CalendarGridRow.vue
new file mode 100644
index 00000000..32be664f
--- /dev/null
+++ b/frontend/src/components/ui/calendar/CalendarGridRow.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { CalendarGridRowProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarGridRow, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  CalendarGridRowProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarGridRow
+    data-slot="calendar-grid-row"
+    :class="cn('flex', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGridRow>
+</template>
diff --git a/frontend/src/components/ui/calendar/CalendarHeadCell.vue b/frontend/src/components/ui/calendar/CalendarHeadCell.vue
new file mode 100644
index 00000000..afcd2392
--- /dev/null
+++ b/frontend/src/components/ui/calendar/CalendarHeadCell.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { CalendarHeadCellProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarHeadCell, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  CalendarHeadCellProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarHeadCell
+    data-slot="calendar-head-cell"
+    :class="
+      cn(
+        'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem]',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarHeadCell>
+</template>
diff --git a/frontend/src/components/ui/calendar/CalendarHeader.vue b/frontend/src/components/ui/calendar/CalendarHeader.vue
new file mode 100644
index 00000000..b7dac037
--- /dev/null
+++ b/frontend/src/components/ui/calendar/CalendarHeader.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { CalendarHeaderProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarHeader, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  CalendarHeaderProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarHeader
+    data-slot="calendar-header"
+    :class="
+      cn(
+        'flex justify-center pt-1 relative items-center w-full px-8',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarHeader>
+</template>
diff --git a/frontend/src/components/ui/calendar/CalendarHeading.vue b/frontend/src/components/ui/calendar/CalendarHeading.vue
new file mode 100644
index 00000000..c9483a46
--- /dev/null
+++ b/frontend/src/components/ui/calendar/CalendarHeading.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import type { CalendarHeadingProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CalendarHeading, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  CalendarHeadingProps & { class?: HTMLAttributes["class"] }
+>();
+
+defineSlots<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  default: (props: { headingValue: string }) => any;
+}>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarHeading
+    v-slot="{ headingValue }"
+    data-slot="calendar-heading"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </CalendarHeading>
+</template>
diff --git a/frontend/src/components/ui/calendar/CalendarNextButton.vue b/frontend/src/components/ui/calendar/CalendarNextButton.vue
new file mode 100644
index 00000000..4334d32a
--- /dev/null
+++ b/frontend/src/components/ui/calendar/CalendarNextButton.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import type { CalendarNextProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ChevronRight } from "lucide-vue-next";
+import { CalendarNext, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+const props = defineProps<
+  CalendarNextProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarNext
+    data-slot="calendar-next-button"
+    :class="
+      cn(
+        buttonVariants({ variant: 'outline' }),
+        'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRight class="size-4" />
+    </slot>
+  </CalendarNext>
+</template>
diff --git a/frontend/src/components/ui/calendar/CalendarPrevButton.vue b/frontend/src/components/ui/calendar/CalendarPrevButton.vue
new file mode 100644
index 00000000..2c87bfbb
--- /dev/null
+++ b/frontend/src/components/ui/calendar/CalendarPrevButton.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import type { CalendarPrevProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ChevronLeft } from "lucide-vue-next";
+import { CalendarPrev, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+const props = defineProps<
+  CalendarPrevProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <CalendarPrev
+    data-slot="calendar-prev-button"
+    :class="
+      cn(
+        buttonVariants({ variant: 'outline' }),
+        'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeft class="size-4" />
+    </slot>
+  </CalendarPrev>
+</template>
diff --git a/frontend/src/components/ui/calendar/index.ts b/frontend/src/components/ui/calendar/index.ts
new file mode 100644
index 00000000..52d8f669
--- /dev/null
+++ b/frontend/src/components/ui/calendar/index.ts
@@ -0,0 +1,18 @@
+export { default as Calendar } from "./Calendar.vue";
+export { default as CalendarCell } from "./CalendarCell.vue";
+export { default as CalendarCellTrigger } from "./CalendarCellTrigger.vue";
+export { default as CalendarGrid } from "./CalendarGrid.vue";
+export { default as CalendarGridBody } from "./CalendarGridBody.vue";
+export { default as CalendarGridHead } from "./CalendarGridHead.vue";
+export { default as CalendarGridRow } from "./CalendarGridRow.vue";
+export { default as CalendarHeadCell } from "./CalendarHeadCell.vue";
+export { default as CalendarHeader } from "./CalendarHeader.vue";
+export { default as CalendarHeading } from "./CalendarHeading.vue";
+export { default as CalendarNextButton } from "./CalendarNextButton.vue";
+export { default as CalendarPrevButton } from "./CalendarPrevButton.vue";
+
+export type LayoutTypes =
+  | "month-and-year"
+  | "month-only"
+  | "year-only"
+  | undefined;
diff --git a/frontend/src/components/ui/date-picker/DatePicker.vue b/frontend/src/components/ui/date-picker/DatePicker.vue
new file mode 100644
index 00000000..3fc50560
--- /dev/null
+++ b/frontend/src/components/ui/date-picker/DatePicker.vue
@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { computed, ref, watch } from "vue";
+import {
+  CalendarDate,
+  CalendarDateTime,
+  getLocalTimeZone,
+  today,
+} from "@internationalized/date";
+import { useVModel } from "@vueuse/core";
+import { CalendarIcon, Loader2 } from "lucide-vue-next";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+interface Props {
+  modelValue?: Date | null;
+  placeholder?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  showTime?: boolean;
+  class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  placeholder: "Pick a date",
+  loading: false,
+  disabled: false,
+  showTime: false,
+  class: "",
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: Date | null];
+}>();
+
+const modelValue = useVModel(props, "modelValue", emit, {
+  passive: true,
+  defaultValue: null,
+});
+
+const isOpen = ref(false);
+
+// Convert Date to CalendarDate/CalendarDateTime for the Calendar component
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const calendarValue = ref<any>(null);
+
+const updateCalendarValue = () => {
+  if (!modelValue.value) {
+    calendarValue.value = null;
+    return;
+  }
+  const d = modelValue.value;
+  if (props.showTime) {
+    calendarValue.value = new CalendarDateTime(
+      d.getFullYear(),
+      d.getMonth() + 1,
+      d.getDate(),
+      d.getHours(),
+      d.getMinutes(),
+    );
+  } else {
+    calendarValue.value = new CalendarDate(
+      d.getFullYear(),
+      d.getMonth() + 1,
+      d.getDate(),
+    );
+  }
+};
+
+// Initialize calendar value
+updateCalendarValue();
+
+// Watch for external modelValue changes
+watch(
+  () => modelValue.value,
+  () => updateCalendarValue(),
+);
+
+// Time inputs
+const hours = ref(
+  modelValue.value?.getHours().toString().padStart(2, "0") ?? "00",
+);
+const minutes = ref(
+  modelValue.value?.getMinutes().toString().padStart(2, "0") ?? "00",
+);
+
+// Update time when modelValue changes externally
+watch(
+  () => modelValue.value,
+  (newVal) => {
+    if (newVal) {
+      hours.value = newVal.getHours().toString().padStart(2, "0");
+      minutes.value = newVal.getMinutes().toString().padStart(2, "0");
+    }
+  },
+);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const onCalendarChange = (value: any) => {
+  if (!value) {
+    modelValue.value = null;
+    return;
+  }
+  const dateVal = Array.isArray(value) ? value[0] : value;
+  if (!dateVal) {
+    modelValue.value = null;
+    return;
+  }
+
+  if (props.showTime) {
+    const h = parseInt(hours.value) || 0;
+    const m = parseInt(minutes.value) || 0;
+    const newDate = new Date(
+      dateVal.year,
+      dateVal.month - 1,
+      dateVal.day,
+      h,
+      m,
+    );
+    modelValue.value = newDate;
+  } else {
+    const newDate = dateVal.toDate(getLocalTimeZone());
+    modelValue.value = newDate;
+    isOpen.value = false;
+  }
+};
+
+const onTimeChange = () => {
+  if (!modelValue.value) return;
+
+  const h = Math.max(0, Math.min(23, parseInt(hours.value) || 0));
+  const m = Math.max(0, Math.min(59, parseInt(minutes.value) || 0));
+
+  hours.value = h.toString().padStart(2, "0");
+  minutes.value = m.toString().padStart(2, "0");
+
+  const newDate = new Date(modelValue.value);
+  newDate.setHours(h, m);
+  modelValue.value = newDate;
+};
+
+const displayValue = computed(() => {
+  if (!modelValue.value) return "";
+  const d = modelValue.value;
+
+  const dateStr = d.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+
+  if (props.showTime) {
+    const timeStr = d.toLocaleTimeString("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+    });
+    return `${dateStr} ${timeStr}`;
+  }
+
+  return dateStr;
+});
+
+const defaultPlaceholder = today(getLocalTimeZone());
+</script>
+
+<template>
+  <Popover v-model:open="isOpen">
+    <PopoverTrigger as-child>
+      <Button
+        variant="outline"
+        :disabled="props.disabled || props.loading"
+        :class="
+          cn(
+            'w-full justify-start text-left font-normal',
+            !modelValue && 'text-muted-foreground',
+            props.class,
+          )
+        "
+      >
+        <Loader2 v-if="props.loading" class="mr-2 h-4 w-4 animate-spin" />
+        <CalendarIcon v-else class="mr-2 h-4 w-4" />
+        {{ displayValue || placeholder }}
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-0" align="start">
+      <Calendar
+        v-model="calendarValue"
+        :initial-focus="true"
+        :default-placeholder="defaultPlaceholder"
+        layout="month-and-year"
+        @update:model-value="onCalendarChange"
+      />
+      <div v-if="showTime" class="border-t p-3">
+        <div class="flex items-center gap-2">
+          <span class="text-sm text-muted-foreground">Time:</span>
+          <Input
+            v-model="hours"
+            type="text"
+            inputmode="numeric"
+            maxlength="2"
+            class="w-14 text-center"
+            placeholder="HH"
+            @blur="onTimeChange"
+            @keyup.enter="onTimeChange"
+          />
+          <span class="text-muted-foreground">:</span>
+          <Input
+            v-model="minutes"
+            type="text"
+            inputmode="numeric"
+            maxlength="2"
+            class="w-14 text-center"
+            placeholder="MM"
+            @blur="onTimeChange"
+            @keyup.enter="onTimeChange"
+          />
+        </div>
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/frontend/src/components/ui/date-picker/index.ts b/frontend/src/components/ui/date-picker/index.ts
new file mode 100644
index 00000000..0591cff8
--- /dev/null
+++ b/frontend/src/components/ui/date-picker/index.ts
@@ -0,0 +1 @@
+export { default as DatePicker } from "./DatePicker.vue";
diff --git a/frontend/src/components/ui/native-select/NativeSelect.vue b/frontend/src/components/ui/native-select/NativeSelect.vue
new file mode 100644
index 00000000..2c8a145f
--- /dev/null
+++ b/frontend/src/components/ui/native-select/NativeSelect.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { AcceptableValue } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit, useVModel } from "@vueuse/core";
+import { ChevronDownIcon } from "lucide-vue-next";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps<{
+  modelValue?: AcceptableValue | AcceptableValue[];
+  class?: HTMLAttributes["class"];
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": AcceptableValue;
+}>();
+
+const modelValue = useVModel(props, "modelValue", emit, {
+  passive: true,
+  defaultValue: "",
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <div
+    class="group/native-select relative w-fit has-[select:disabled]:opacity-50"
+    data-slot="native-select-wrapper"
+  >
+    <select
+      v-bind="{ ...$attrs, ...delegatedProps }"
+      v-model="modelValue"
+      data-slot="native-select"
+      :class="
+        cn(
+          'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
+          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+          'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </select>
+    <ChevronDownIcon
+      class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none"
+      aria-hidden="true"
+      data-slot="native-select-icon"
+    />
+  </div>
+</template>
diff --git a/frontend/src/components/ui/native-select/NativeSelectOptGroup.vue b/frontend/src/components/ui/native-select/NativeSelectOptGroup.vue
new file mode 100644
index 00000000..0dff281f
--- /dev/null
+++ b/frontend/src/components/ui/native-select/NativeSelectOptGroup.vue
@@ -0,0 +1,18 @@
+<!-- @fallthroughAttributes true -->
+<!-- @strictTemplates true -->
+
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+  <optgroup
+    data-slot="native-select-optgroup"
+    :class="cn('bg-popover text-popover-foreground', props.class)"
+  >
+    <slot />
+  </optgroup>
+</template>
diff --git a/frontend/src/components/ui/native-select/NativeSelectOption.vue b/frontend/src/components/ui/native-select/NativeSelectOption.vue
new file mode 100644
index 00000000..d67fc9b3
--- /dev/null
+++ b/frontend/src/components/ui/native-select/NativeSelectOption.vue
@@ -0,0 +1,18 @@
+<!-- @fallthroughAttributes true -->
+<!-- @strictTemplates true -->
+
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+  <option
+    data-slot="native-select-option"
+    :class="cn('bg-popover text-popover-foreground', props.class)"
+  >
+    <slot />
+  </option>
+</template>
diff --git a/frontend/src/components/ui/native-select/index.ts b/frontend/src/components/ui/native-select/index.ts
new file mode 100644
index 00000000..7ebf6049
--- /dev/null
+++ b/frontend/src/components/ui/native-select/index.ts
@@ -0,0 +1,3 @@
+export { default as NativeSelect } from "./NativeSelect.vue";
+export { default as NativeSelectOptGroup } from "./NativeSelectOptGroup.vue";
+export { default as NativeSelectOption } from "./NativeSelectOption.vue";
diff --git a/frontend/src/composables/useTasksSaving.ts b/frontend/src/composables/useTasksSaving.ts
new file mode 100644
index 00000000..088a556a
--- /dev/null
+++ b/frontend/src/composables/useTasksSaving.ts
@@ -0,0 +1,5 @@
+import type { InjectionKey, Ref } from "vue";
+
+/** Injection key used by Tasks.vue to provide the isSaving state to child task components. */
+export const TASKS_SAVING_KEY: InjectionKey<Ref<boolean>> =
+  Symbol("tasksSaving");
diff --git a/frontend/src/dto/companies.ts b/frontend/src/dto/companies.ts
index 0b614a7d..3d32cdc0 100644
--- a/frontend/src/dto/companies.ts
+++ b/frontend/src/dto/companies.ts
@@ -1,6 +1,7 @@
 import type { ImplementsParticipationStatus, ObjectID, Participation } from ".";
 import type { Contact, CreateContactData } from "./contacts";
 import type { PackagePublic } from "./packages";
+import type { CompanyTasks } from "./tasks";
 
 export interface CompanyParticipation
   extends ImplementsParticipationStatus,
@@ -15,6 +16,7 @@ export interface CompanyParticipation
   notes: string;
   standDetails?: StandDetails;
   stands?: Stand[];
+  tasks?: CompanyTasks;
 }
 
 export interface Stand {
diff --git a/frontend/src/dto/speakers.ts b/frontend/src/dto/speakers.ts
index b47e7f3d..9361e5e5 100644
--- a/frontend/src/dto/speakers.ts
+++ b/frontend/src/dto/speakers.ts
@@ -1,5 +1,6 @@
 import type { ImplementsParticipationStatus, ObjectID, Participation } from ".";
 import type { Contact, CreateContactData } from "./contacts";
+import type { SpeakerTasks } from "./tasks";
 
 export interface SpeakerParticipationRoom {
   type: string;
@@ -16,6 +17,7 @@ export interface SpeakerParticipation
   feedback: string;
   flights: ObjectID[];
   room: SpeakerParticipationRoom;
+  tasks?: SpeakerTasks;
 }
 
 export interface SpeakerImages {
diff --git a/frontend/src/dto/tasks.ts b/frontend/src/dto/tasks.ts
new file mode 100644
index 00000000..830fc2e0
--- /dev/null
+++ b/frontend/src/dto/tasks.ts
@@ -0,0 +1,234 @@
+import type { Participation, ObjectID } from ".";
+import type { CompanyBillingInfo, CompanyParticipation } from "./companies";
+import type { SpeakerParticipation } from "./speakers";
+
+/**
+ * Discriminator for entity types that share the Tasks timeline.
+ */
+export type EntityType = "company" | "speaker";
+
+/**
+ * A unified participation type used across task components.
+ * Company participations carry extra fields (package, billing, confirmed, etc.)
+ * while speaker participations carry their own (feedback, flights, room, etc.).
+ */
+export type AnyParticipation = CompanyParticipation | SpeakerParticipation;
+
+/**
+ * Minimal shape every entity must satisfy to be used in the Tasks view.
+ */
+export interface TaskEntity {
+  id: ObjectID;
+  name: string;
+  participation?: Participation;
+  billingInfo?: CompanyBillingInfo;
+}
+
+// ============================================================
+// Shared
+// ============================================================
+
+export interface TaskLogos {
+  received: boolean;
+  needsReviewing: boolean;
+}
+
+// ============================================================
+// Company task types
+// ============================================================
+
+export interface CompanyTaskConfirmation {
+  askedForInfo: boolean;
+}
+
+export interface CompanyTaskContract {
+  sent: boolean;
+  created: boolean;
+  signed: boolean;
+  receiptSent: boolean;
+  paid: boolean;
+}
+
+export interface CompanyTaskSessionTitles {
+  presentationTitle: string;
+  workshopTitle: string;
+}
+
+export interface CompanyTaskCorlief {
+  preNotice: boolean;
+  scheduled: boolean;
+  reserved: boolean;
+}
+
+export interface CompanyTaskLogistics {
+  requestedInfo: boolean;
+  carStatus: string; // "not_responded" | "wants" | "not_wants"
+  licensePlate: string;
+}
+
+export interface CompanyTasks {
+  confirmation: CompanyTaskConfirmation;
+  logos: TaskLogos;
+  contract: CompanyTaskContract;
+  sessionTitles: CompanyTaskSessionTitles;
+  corlief: CompanyTaskCorlief;
+  logistics: CompanyTaskLogistics;
+  po: string;
+}
+
+// ============================================================
+// Speaker task types
+// ============================================================
+
+export interface SpeakerTaskConfirmation {
+  phone: string;
+  linkedin: string;
+  wantsLinkedinTag: string; // "not_responded" | "yes" | "no"
+  observations: string;
+}
+
+export interface SpeakerTaskFlightLeg {
+  airport: string;
+  flightNumber: string;
+  date: string | null;
+  time: string;
+}
+
+export interface SpeakerTaskFlightDetails {
+  price: string;
+  status: string; // "pending" | "received" | "approved" | "bought"
+  link: string;
+  bookingRef: string;
+}
+
+export interface SpeakerTaskFlightRefund {
+  amount: string;
+  method: string;
+  infoNeeded: string;
+  status: string; // "not_started" | "receipt_requested" | "info_requested" | "done"
+}
+
+export interface SpeakerTaskFlights {
+  needsFlights: string; // "not_responded" | "yes" | "no"
+  requested: boolean;
+  arrival: SpeakerTaskFlightLeg;
+  departure: SpeakerTaskFlightLeg;
+  details: SpeakerTaskFlightDetails;
+  refund: SpeakerTaskFlightRefund;
+}
+
+export interface SpeakerTaskCoverage {
+  video: string; // "not_responded" | "yes" | "no"
+  streaming: string; // "not_responded" | "yes" | "no"
+  photo: string; // "not_responded" | "yes" | "no"
+}
+
+export interface SpeakerTaskMaterials {
+  requested: boolean;
+  talkTitle: string;
+  talkDescription: string;
+  received: boolean;
+  testSchedule: string;
+  testDone: boolean;
+}
+
+export interface SpeakerTaskHotel {
+  needsHotel: string; // "not_responded" | "yes" | "no"
+  requested: boolean;
+  hotelName: string;
+  roomType: string;
+  price: string;
+  checkIn: string | null;
+  checkOut: string | null;
+  numNights: string;
+  numGuests: string;
+  guestNames: string;
+  invoice: boolean;
+  paid: boolean;
+  notes: string;
+}
+
+export interface SpeakerTasks {
+  confirmation: SpeakerTaskConfirmation;
+  logos: TaskLogos;
+  askedForInfo: boolean;
+  flights: SpeakerTaskFlights;
+  coverage: SpeakerTaskCoverage;
+  materials: SpeakerTaskMaterials;
+  hotel: SpeakerTaskHotel;
+}
+
+// ============================================================
+// Helpers – build zero-value task objects
+// ============================================================
+
+export function emptyCompanyTasks(): CompanyTasks {
+  return {
+    confirmation: { askedForInfo: false },
+    logos: { received: false, needsReviewing: false },
+    contract: {
+      sent: false,
+      created: false,
+      signed: false,
+      receiptSent: false,
+      paid: false,
+    },
+    sessionTitles: { presentationTitle: "", workshopTitle: "" },
+    corlief: { preNotice: false, scheduled: false, reserved: false },
+    logistics: {
+      requestedInfo: false,
+      carStatus: "not_responded",
+      licensePlate: "",
+    },
+    po: "",
+  };
+}
+
+export function emptySpeakerTasks(): SpeakerTasks {
+  return {
+    confirmation: {
+      phone: "",
+      linkedin: "",
+      wantsLinkedinTag: "not_responded",
+      observations: "",
+    },
+    logos: { received: false, needsReviewing: false },
+    askedForInfo: false,
+    flights: {
+      needsFlights: "not_responded",
+      requested: false,
+      arrival: { airport: "", flightNumber: "", date: null, time: "" },
+      departure: { airport: "", flightNumber: "", date: null, time: "" },
+      details: { price: "", status: "pending", link: "", bookingRef: "" },
+      refund: { amount: "", method: "", infoNeeded: "", status: "not_started" },
+    },
+    coverage: {
+      video: "not_responded",
+      streaming: "not_responded",
+      photo: "not_responded",
+    },
+    materials: {
+      requested: false,
+      talkTitle: "",
+      talkDescription: "",
+      received: false,
+      testSchedule: "",
+      testDone: false,
+    },
+    hotel: {
+      needsHotel: "not_responded",
+      requested: false,
+      hotelName: "",
+      roomType: "",
+      price: "",
+      checkIn: null,
+      checkOut: null,
+      numNights: "",
+      numGuests: "",
+      guestNames: "",
+      invoice: false,
+      paid: false,
+      notes: "",
+    },
+  };
+}
diff --git a/frontend/src/mutations/companies.ts b/frontend/src/mutations/companies.ts
index 45d462e2..8b5e40bd 100644
--- a/frontend/src/mutations/companies.ts
+++ b/frontend/src/mutations/companies.ts
@@ -7,7 +7,9 @@ import {
   createCompanyParticipation,
   postThread,
   uploadCompanyInternalImage,
+  uploadCompanyPublicImage,
   updateRepresentativeOrder,
+  updateCompanyTasks,
 } from "@/api/companies";
 import type { ParticipationStatus } from "@/dto";
 import type {
@@ -16,6 +18,7 @@ import type {
   AddParticipationData,
   CompanyBillingInfo,
 } from "@/dto/companies";
+import type { CompanyTasks } from "@/dto/tasks";
 import {
   ThreadStatus,
   type CreateThread,
@@ -32,7 +35,7 @@ export const useCompanyParticipationMutation = defineMutation(() => {
   const data = ref<UpdateCompanyParticipationData>();
   const queryCache = useQueryCache();
 
-  const { mutate, ...mutation } = useMutation({
+  const { mutate, mutateAsync, ...mutation } = useMutation({
     mutation: () => updateCompanyParticipation(companyId.value!, data.value!),
     onSettled: () => {
       queryCache.invalidateQueries({ key: ["company", companyId.value!] });
@@ -43,6 +46,7 @@ export const useCompanyParticipationMutation = defineMutation(() => {
 
   return {
     mutate,
+    mutateAsync,
     ...mutation,
     companyId,
     data,
@@ -186,7 +190,7 @@ export const useCompanyParticipationPackageMutation = defineMutation(() => {
   const packageId = ref<string>();
   const queryCache = useQueryCache();
 
-  const { mutate, ...mutation } = useMutation({
+  const { mutate, mutateAsync, ...mutation } = useMutation({
     mutation: () =>
       updateCompanyParticipationPackage(companyId.value!, packageId.value!),
     onSettled: () => {
@@ -197,6 +201,7 @@ export const useCompanyParticipationPackageMutation = defineMutation(() => {
 
   return {
     mutate,
+    mutateAsync,
     ...mutation,
     companyId,
     packageId,
@@ -327,6 +332,30 @@ export const useCompanyImageUploadMutation = defineMutation(() => {
   };
 });
 
+export const useCompanyPublicImageUploadMutation = defineMutation(() => {
+  const companyId = ref<string>();
+  const imageData = ref<FormData>();
+  const queryCache = useQueryCache();
+
+  const { mutate, ...mutation } = useMutation({
+    mutation: () =>
+      uploadCompanyPublicImage(companyId.value!, imageData.value!),
+    onSettled: () => {
+      if (companyId.value) {
+        queryCache.invalidateQueries({ key: ["company", companyId.value] });
+      }
+      queryCache.invalidateQueries({ key: ["companies"] });
+    },
+  });
+
+  return {
+    mutate,
+    ...mutation,
+    companyId,
+    imageData,
+  };
+});
+
 export const useUpdateRepresentativeOrderMutation = defineMutation(() => {
   const companyId = ref<string>();
   const representativeIds = ref<string[]>();
@@ -350,3 +379,26 @@ export const useUpdateRepresentativeOrderMutation = defineMutation(() => {
     representativeIds,
   };
 });
+
+export const useCompanyTasksMutation = defineMutation(() => {
+  const companyId = ref<string>();
+  const queryCache = useQueryCache();
+
+  const { mutate, mutateAsync, ...mutation } = useMutation({
+    mutation: (tasks: CompanyTasks) =>
+      updateCompanyTasks(companyId.value!, tasks),
+    onSettled: () => {
+      if (companyId.value) {
+        queryCache.invalidateQueries({ key: ["company", companyId.value] });
+      }
+      queryCache.invalidateQueries({ key: ["companies"] });
+    },
+  });
+
+  return {
+    mutate,
+    mutateAsync,
+    ...mutation,
+    companyId,
+  };
+});
diff --git a/frontend/src/mutations/speakers.ts b/frontend/src/mutations/speakers.ts
index 81137603..bbee1fa4 100644
--- a/frontend/src/mutations/speakers.ts
+++ b/frontend/src/mutations/speakers.ts
@@ -5,12 +5,16 @@ import {
   createSpeakerParticipation,
   postSpeakerThread,
   uploadSpeakerInternalImage,
+  uploadSpeakerPublicImage,
+  uploadSpeakerCompanyImage,
   updateSpeakerParticipationStatus,
+  updateSpeakerTasks,
 } from "@/api/speakers";
 import type {
   UpdateSpeakerData,
   UpdateSpeakerParticipationData,
 } from "@/dto/speakers";
+import type { SpeakerTasks } from "@/dto/tasks";
 import {
   ThreadStatus,
   type CreateThread,
@@ -259,3 +263,74 @@ export const useSpeakerImageUploadMutation = defineMutation(() => {
     imageData,
   };
 });
+
+export const useSpeakerPublicImageUploadMutation = defineMutation(() => {
+  const speakerId = ref<string>();
+  const imageData = ref<FormData>();
+  const queryCache = useQueryCache();
+
+  const { mutate, ...mutation } = useMutation({
+    mutation: () =>
+      uploadSpeakerPublicImage(speakerId.value!, imageData.value!),
+    onSettled: () => {
+      if (speakerId.value) {
+        queryCache.invalidateQueries({ key: ["speaker", speakerId.value] });
+      }
+      queryCache.invalidateQueries({ key: ["speakers"] });
+    },
+  });
+
+  return {
+    mutate,
+    ...mutation,
+    speakerId,
+    imageData,
+  };
+});
+
+export const useSpeakerCompanyImageUploadMutation = defineMutation(() => {
+  const speakerId = ref<string>();
+  const imageData = ref<FormData>();
+  const queryCache = useQueryCache();
+
+  const { mutate, ...mutation } = useMutation({
+    mutation: () =>
+      uploadSpeakerCompanyImage(speakerId.value!, imageData.value!),
+    onSettled: () => {
+      if (speakerId.value) {
+        queryCache.invalidateQueries({ key: ["speaker", speakerId.value] });
+      }
+      queryCache.invalidateQueries({ key: ["speakers"] });
+    },
+  });
+
+  return {
+    mutate,
+    ...mutation,
+    speakerId,
+    imageData,
+  };
+});
+
+export const useSpeakerTasksMutation = defineMutation(() => {
+  const speakerId = ref<string>();
+  const queryCache = useQueryCache();
+
+  const { mutate, mutateAsync, ...mutation } = useMutation({
+    mutation: (tasks: SpeakerTasks) =>
+      updateSpeakerTasks(speakerId.value!, tasks),
+    onSettled: () => {
+      if (speakerId.value) {
+        queryCache.invalidateQueries({ key: ["speaker", speakerId.value] });
+      }
+      queryCache.invalidateQueries({ key: ["speakers"] });
+    },
+  });
+
+  return {
+    mutate,
+    mutateAsync,
+    ...mutation,
+    speakerId,
+  };
+});
diff --git a/frontend/src/views/Dashboard/Companies/CompanyView.vue b/frontend/src/views/Dashboard/Companies/CompanyView.vue
index 7a07a2e3..e782740e 100644
--- a/frontend/src/views/Dashboard/Companies/CompanyView.vue
+++ b/frontend/src/views/Dashboard/Companies/CompanyView.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="companyWithParticipation" class="flex flex-col lg:flex-row gap-6">
     <!-- Company information section -->
-    <div class="space-y-6 w-full lg:w-96 lg:flex-shrink-0">
+    <div class="space-y-4 w-full lg:w-96 lg:flex-shrink-0">
       <!-- Company Card -->
       <CompanyCard
         :company="companyWithParticipation"
@@ -15,39 +15,77 @@
         button-class="w-full"
       />
 
-      <!-- Company Billing Information -->
-      <CompanyBillingInfo
-        :company="company?.data"
-        @updated="handleCompanyUpdated"
-      />
+      <!-- Mobile: Accordion for Billing Info and Contacts -->
+      <Accordion type="multiple" class="lg:hidden" collapsible>
+        <AccordionItem value="billing">
+          <AccordionTrigger>Billing Information</AccordionTrigger>
+          <AccordionContent>
+            <CompanyBillingInfo
+              :company="company?.data"
+              @updated="handleCompanyUpdated"
+            />
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="contacts">
+          <AccordionTrigger>Contacts</AccordionTrigger>
+          <AccordionContent>
+            <!-- prettier-ignore -->
+            <CompanyContacts
+              v-if="representatives"
+              :representatives="representatives"
+              :company-id="(companyId as string)"
+            />
+            <div
+              v-else-if="isRepresentativesLoading"
+              class="flex items-center justify-center p-8"
+            >
+              <div class="text-muted-foreground">
+                Loading representatives...
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
 
-      <!-- Company Contacts -->
-      <!-- prettier-ignore -->
-      <CompanyContacts
-        v-if="representatives"
-        :representatives="representatives"
-        :company-id="(companyId as string)"
-      />
-      <div
-        v-else-if="isRepresentativesLoading"
-        class="flex items-center justify-center p-8"
-      >
-        <div class="text-muted-foreground">Loading representatives...</div>
+      <!-- Desktop: Regular display for Billing Info and Contacts -->
+      <div class="hidden lg:block space-y-6">
+        <!-- Company Billing Information -->
+        <CompanyBillingInfo
+          :company="company?.data"
+          @updated="handleCompanyUpdated"
+        />
+
+        <!-- Company Contacts -->
+        <!-- prettier-ignore -->
+        <CompanyContacts
+          v-if="representatives"
+          :representatives="representatives"
+          :company-id="(companyId as string)"
+        />
+        <div
+          v-else-if="isRepresentativesLoading"
+          class="flex items-center justify-center p-8"
+        >
+          <div class="text-muted-foreground">Loading representatives...</div>
+        </div>
       </div>
     </div>
 
-    <!-- Communications section -->
+    <!-- Info/Tasks section -->
     <div class="flex-1 min-w-0">
-      <!-- prettier-ignore -->
-      <ParticipationsCard
-        v-if="companyWithParticipation?.participations"
-        :participations="companyWithParticipation.participations"
-        :entity-id="(companyId as string)"
-        entity-type="company"
-        class="mb-5"
-      />
+      <Tabs v-model="activeTab" default-value="info" class="w-full">
+        <TabsList class="grid w-full grid-cols-2 max-w-md">
+          <TabsTrigger value="info"> Info </TabsTrigger>
+          <TabsTrigger value="tasks"> Tasks </TabsTrigger>
+        </TabsList>
 
-      <CompanyCommunications :company="companyWithParticipation" />
+        <TabsContent value="info">
+          <Info :company-with-participation="companyWithParticipation" />
+        </TabsContent>
+        <TabsContent value="tasks">
+          <Tasks :company-with-participation="companyWithParticipation" />
+        </TabsContent>
+      </Tabs>
     </div>
   </div>
 </template>
@@ -57,20 +95,40 @@ import { getCompanyById, getCompanyRepresentatives } from "@/api/companies";
 import CompanyCard from "@/components/cards/CompanyCard.vue";
 import CompanyBillingInfo from "@/components/companies/CompanyBillingInfo.vue";
 import CompanyContacts from "@/components/companies/CompanyContacts.vue";
-import CompanyCommunications from "@/components/companies/CompanyCommunications.vue";
-import ParticipationsCard from "@/components/ParticipationsCard.vue";
 import DirectEmailDialogTrigger from "@/components/DirectEmailDialogTrigger.vue";
 import type { CompanyWithParticipation } from "@/dto/companies";
 import { withCurrentParticipation } from "@/lib/utils";
 import { useEventStore } from "@/stores/event";
 
 import { useQuery, useQueryCache } from "@pinia/colada";
-import { computed } from "vue";
-import { useRoute } from "vue-router";
+import { computed, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import Info from "./Info/Info.vue";
+import TabsList from "@/components/ui/tabs/TabsList.vue";
+import TabsTrigger from "@/components/ui/tabs/TabsTrigger.vue";
+import TabsContent from "@/components/ui/tabs/TabsContent.vue";
+import Tabs from "@/components/ui/tabs/Tabs.vue";
+import Tasks from "./Tasks/Tasks.vue";
+import Accordion from "@/components/ui/accordion/Accordion.vue";
+import AccordionItem from "@/components/ui/accordion/AccordionItem.vue";
+import AccordionTrigger from "@/components/ui/accordion/AccordionTrigger.vue";
+import AccordionContent from "@/components/ui/accordion/AccordionContent.vue";
 
 const route = useRoute();
+const router = useRouter();
 const queryCache = useQueryCache();
 
+const validTabs = ["info", "tasks"] as const;
+type TabValue = (typeof validTabs)[number];
+const activeTab = ref<TabValue>(
+  validTabs.includes(route.query.tab as TabValue)
+    ? (route.query.tab as TabValue)
+    : "info",
+);
+watch(activeTab, (tab) => {
+  router.replace({ query: { ...route.query, tab } });
+});
+
 const companyId = route.params.companyId;
 const { data: company } = useQuery({
   key: () => ["company", companyId],
diff --git a/frontend/src/views/Dashboard/Companies/Info/Info.vue b/frontend/src/views/Dashboard/Companies/Info/Info.vue
new file mode 100644
index 00000000..2015566e
--- /dev/null
+++ b/frontend/src/views/Dashboard/Companies/Info/Info.vue
@@ -0,0 +1,22 @@
+<template>
+  <!-- prettier-ignore -->
+  <ParticipationsCard
+      v-if="companyWithParticipation?.participations"
+      :participations="companyWithParticipation.participations"
+      :entity-id="companyWithParticipation.id"
+      entity-type="company"
+      class="mb-5"
+    />
+
+  <CompanyCommunications :company="companyWithParticipation" />
+</template>
+
+<script setup lang="ts">
+import CompanyCommunications from "@/components/companies/CompanyCommunications.vue";
+import ParticipationsCard from "@/components/ParticipationsCard.vue";
+import type { CompanyWithParticipation } from "@/dto/companies";
+
+defineProps<{
+  companyWithParticipation: CompanyWithParticipation;
+}>();
+</script>
diff --git a/frontend/src/views/Dashboard/Companies/Tasks/Tasks.vue b/frontend/src/views/Dashboard/Companies/Tasks/Tasks.vue
new file mode 100644
index 00000000..70fcfe06
--- /dev/null
+++ b/frontend/src/views/Dashboard/Companies/Tasks/Tasks.vue
@@ -0,0 +1,25 @@
+<template>
+  <Tasks
+    entity-type="company"
+    :entity-id="companyWithParticipation.id"
+    :participation="currentParticipation"
+    :billing-info="companyWithParticipation.billingInfo"
+    :company-imgs="companyWithParticipation.imgs"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { CompanyWithParticipation } from "@/dto/companies";
+import Tasks from "@/components/tasks/Tasks.vue";
+
+interface Props {
+  companyWithParticipation: CompanyWithParticipation;
+}
+
+const props = defineProps<Props>();
+
+const currentParticipation = computed(
+  () => props.companyWithParticipation?.participation,
+);
+</script>
diff --git a/frontend/src/views/Dashboard/ContractTemplates/UploadTemplateForm.vue b/frontend/src/views/Dashboard/ContractTemplates/UploadTemplateForm.vue
index 3fa07d31..9fb6ab8a 100644
--- a/frontend/src/views/Dashboard/ContractTemplates/UploadTemplateForm.vue
+++ b/frontend/src/views/Dashboard/ContractTemplates/UploadTemplateForm.vue
@@ -71,7 +71,7 @@ async function submit() {
       <label class="block text-sm text-gray-600">Template record</label>
       <Select v-model="selectedTemplate" :disabled="!props.eventId">
         <SelectTrigger class="mt-1 w-full border rounded px-2 py-1">
-          <SelectValue placeholder="-- select template --" />
+          <SelectValue placeholder="Select template" />
         </SelectTrigger>
         <SelectContent>
           <SelectItem v-for="t in definedTemplates" :key="t.id" :value="t.id">
diff --git a/frontend/src/views/Dashboard/Speakers/SpeakerView.vue b/frontend/src/views/Dashboard/Speakers/SpeakerView.vue
index 89481a18..ab673303 100644
--- a/frontend/src/views/Dashboard/Speakers/SpeakerView.vue
+++ b/frontend/src/views/Dashboard/Speakers/SpeakerView.vue
@@ -25,17 +25,37 @@
       />
     </div>
 
-    <!-- Communications section -->
+    <!-- Info/Tasks section -->
     <div class="flex-1 min-w-0">
-      <ParticipationsCard
-        v-if="speakerWithParticipation?.participations"
-        :participations="speakerWithParticipation.participations"
-        :entity-id="speakerId as string"
-        entity-type="speaker"
-        class="mb-5"
-      />
+      <Tabs v-model="activeTab" default-value="info" class="w-full">
+        <TabsList class="grid w-full grid-cols-2 max-w-md">
+          <TabsTrigger value="info"> Info </TabsTrigger>
+          <TabsTrigger value="tasks"> Tasks </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="info">
+          <div class="space-y-5">
+            <ParticipationsCard
+              v-if="speakerWithParticipation?.participations"
+              :participations="speakerWithParticipation.participations"
+              :entity-id="speakerId as string"
+              entity-type="speaker"
+            />
 
-      <SpeakerCommunications :speaker="speakerWithParticipation" />
+            <SpeakerCommunications :speaker="speakerWithParticipation" />
+          </div>
+        </TabsContent>
+
+        <TabsContent value="tasks">
+          <Tasks
+            entity-type="speaker"
+            :entity-id="speakerWithParticipation.id"
+            :participation="speakerWithParticipation.participation"
+            :contact="speakerWithParticipation.contactObject"
+            :speaker-imgs="speakerWithParticipation.imgs"
+          />
+        </TabsContent>
+      </Tabs>
     </div>
   </div>
 </template>
@@ -46,6 +66,7 @@ import SpeakerCard from "@/components/cards/SpeakerCard.vue";
 import ContactCard from "@/components/ContactCard.vue";
 import ParticipationsCard from "@/components/ParticipationsCard.vue";
 import DirectEmailDialogTrigger from "@/components/DirectEmailDialogTrigger.vue";
+import Tasks from "@/components/tasks/Tasks.vue";
 import type {
   SpeakerWithContactObject,
   SpeakerWithParticipation,
@@ -54,13 +75,26 @@ import { withCurrentParticipation } from "@/lib/utils";
 import { useEventStore } from "@/stores/event";
 
 import { useQuery, useQueryCache } from "@pinia/colada";
-import { computed } from "vue";
-import { useRoute } from "vue-router";
+import { computed, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import SpeakerCommunications from "@/components/speakers/SpeakerCommunications.vue";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 
 const route = useRoute();
+const router = useRouter();
 const queryCache = useQueryCache();
 
+const validTabs = ["info", "tasks"] as const;
+type TabValue = (typeof validTabs)[number];
+const activeTab = ref<TabValue>(
+  validTabs.includes(route.query.tab as TabValue)
+    ? (route.query.tab as TabValue)
+    : "info",
+);
+watch(activeTab, (tab) => {
+  router.replace({ query: { ...route.query, tab } });
+});
+
 const speakerId = route.params.speakerId;
 const { data: speaker } = useQuery({
   key: () => ["speaker", speakerId],