diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 45bb7f83..bb01ac40 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -99,3 +99,21 @@ jobs:
       - name: Bundle application
         working-directory: ./frontend
         run: npm build
+
+  frontend-v2:
+    name: Build frontend with npm
+    runs-on: ubuntu-20.04
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '20'
+          cache: npm
+          cache-dependency-path: ./frontend-new/package-lock.json
+      - name: Install dependencies
+        working-directory: ./frontend-new
+        run: npm install
+      - name: Bundle application
+        working-directory: ./frontend-new
+        run: npm run build
\ No newline at end of file
diff --git a/backend/apis/graphql/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/graphql/CompanyQueryController.kt b/backend/apis/graphql/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/graphql/CompanyQueryController.kt
index 89fd1862..40cb400f 100644
--- a/backend/apis/graphql/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/graphql/CompanyQueryController.kt
+++ b/backend/apis/graphql/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/graphql/CompanyQueryController.kt
@@ -1,10 +1,11 @@
 package com.novatecgmbh.eventsourcing.axon.company.company.graphql
 
-import com.novatecgmbh.eventsourcing.axon.company.company.api.AllCompaniesQuery
+import com.novatecgmbh.eventsourcing.axon.company.company.api.CompaniesQuery
 import com.novatecgmbh.eventsourcing.axon.company.company.api.CompanyId
 import com.novatecgmbh.eventsourcing.axon.company.company.api.CompanyQuery
 import com.novatecgmbh.eventsourcing.axon.company.company.api.CompanyQueryResult
 import com.novatecgmbh.eventsourcing.axon.project.participant.api.ParticipantQueryResult
+import com.novatecgmbh.eventsourcing.axon.project.project.api.CompanyIdsUserCanCreateProjectsForQuery
 import java.util.concurrent.CompletableFuture
 import org.axonframework.extensions.kotlin.query
 import org.axonframework.extensions.kotlin.queryMany
@@ -30,6 +31,20 @@ class CompanyQueryController(val queryGateway: QueryGateway) {
         queryGateway.let { queryGateway.query(CompanyQuery(participant.companyId)) }
 
     @QueryMapping
-    fun companies(): CompletableFuture<List<CompanyQueryResult>> =
-        queryGateway.queryMany(AllCompaniesQuery())
+    fun companies(
+        @Argument userAllowedToCreateProjectFor: Boolean
+    ): CompletableFuture<List<CompanyQueryResult>> {
+        val companies =
+            if (userAllowedToCreateProjectFor) {
+                    queryGateway.queryMany<CompanyId, CompanyIdsUserCanCreateProjectsForQuery>(
+                        CompanyIdsUserCanCreateProjectsForQuery()
+                    )
+                } else {
+                    CompletableFuture.completedFuture(emptySet<CompanyId>())
+                }
+                .get()
+        return queryGateway.queryMany<CompanyQueryResult, CompaniesQuery>(
+            CompaniesQuery(companies.toSet())
+        )
+    }
 }
diff --git a/backend/apis/graphql/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/participant/graphql/ParticipantQueryController.kt b/backend/apis/graphql/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/participant/graphql/ParticipantQueryController.kt
index f811669b..332e4feb 100644
--- a/backend/apis/graphql/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/participant/graphql/ParticipantQueryController.kt
+++ b/backend/apis/graphql/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/participant/graphql/ParticipantQueryController.kt
@@ -45,7 +45,7 @@ class ParticipantQueryController(val queryGateway: QueryGateway) {
 
     // TODO: Change to batch mapping
     @SchemaMapping(typeName = "Task")
-    fun participant(task: TaskQueryResult): CompletableFuture<ParticipantQueryResult?> =
+    fun assignee(task: TaskQueryResult): CompletableFuture<ParticipantQueryResult?> =
         if (task.participantId != null) {
             queryGateway.query(ParticipantQuery(task.participantId!!))
         } else CompletableFuture.completedFuture(null)
diff --git a/backend/apis/graphql/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/project/graphql/ProjectQueryController.kt b/backend/apis/graphql/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/project/graphql/ProjectQueryController.kt
index 47f4ea8f..60ec3f50 100644
--- a/backend/apis/graphql/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/project/graphql/ProjectQueryController.kt
+++ b/backend/apis/graphql/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/project/graphql/ProjectQueryController.kt
@@ -1,17 +1,16 @@
 package com.novatecgmbh.eventsourcing.axon.project.project.graphql
 
 import com.novatecgmbh.eventsourcing.axon.application.security.RegisteredUserPrincipal
-import com.novatecgmbh.eventsourcing.axon.project.project.api.MyProjectsQuery
-import com.novatecgmbh.eventsourcing.axon.project.project.api.ProjectId
-import com.novatecgmbh.eventsourcing.axon.project.project.api.ProjectQuery
-import com.novatecgmbh.eventsourcing.axon.project.project.api.ProjectQueryResult
+import com.novatecgmbh.eventsourcing.axon.project.project.api.*
 import java.util.concurrent.CompletableFuture
+import org.axonframework.extensions.kotlin.query
 import org.axonframework.extensions.kotlin.queryMany
 import org.axonframework.extensions.kotlin.queryOptional
 import org.axonframework.messaging.responsetypes.ResponseTypes
 import org.axonframework.queryhandling.QueryGateway
 import org.springframework.graphql.data.method.annotation.Argument
 import org.springframework.graphql.data.method.annotation.QueryMapping
+import org.springframework.graphql.data.method.annotation.SchemaMapping
 import org.springframework.graphql.data.method.annotation.SubscriptionMapping
 import org.springframework.security.authentication.UsernamePasswordAuthenticationToken
 import org.springframework.security.core.annotation.AuthenticationPrincipal
@@ -35,8 +34,8 @@ class ProjectQueryController(val queryGateway: QueryGateway) {
             MyProjectsQuery((user.principal as RegisteredUserPrincipal).identifier)
         )
 
-    @SubscriptionMapping("projects")
-    fun projectsAndUpdates(
+    @SubscriptionMapping("project")
+    fun projectUpdates(
         @AuthenticationPrincipal user: UsernamePasswordAuthenticationToken
     ): Flux<ProjectQueryResult> {
         val query =
@@ -46,10 +45,35 @@ class ProjectQueryController(val queryGateway: QueryGateway) {
                 ResponseTypes.instanceOf(ProjectQueryResult::class.java)
             )
 
-        return query
-            .initialResult()
-            .flatMapMany { Flux.fromIterable(it) }
-            .concatWith(query.updates())
-            .doFinally { query.cancel() }
+        return query.updates().doFinally { query.cancel() }
+
+        // Alternative if this function should also return the current projects before the updates
+        // return queryl
+        //      .initialResult()
+        //      .flatMapMany { Flux.fromIterable(it) }
+        //      .concatWith(query.updates())
+        //      .doFinally { query.cancel() }
     }
+
+    @SchemaMapping(typeName = "Project")
+    fun statistics(project: ProjectQueryResult): CompletableFuture<ProjectStatistics> =
+        queryGateway
+            .query<ProjectDetailsQueryResult, ProjectDetailsQuery>(
+                ProjectDetailsQuery(project.identifier)
+            )
+            .thenApply { result ->
+                ProjectStatistics(
+                    tasks =
+                        TaskStatistics(
+                            all = result.allTasksCount.toInt(),
+                            planned = result.plannedTasksCount.toInt(),
+                            started = result.startedTasksCount.toInt(),
+                            completed = result.completedTasksCount.toInt()
+                        )
+                )
+            }
 }
+
+data class ProjectStatistics(val tasks: TaskStatistics)
+
+data class TaskStatistics(val all: Int, val planned: Int, val started: Int, val completed: Int)
diff --git a/backend/apis/graphql/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/task/graphql/TaskQueryController.kt b/backend/apis/graphql/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/task/graphql/TaskQueryController.kt
index 97e0a329..10521930 100644
--- a/backend/apis/graphql/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/task/graphql/TaskQueryController.kt
+++ b/backend/apis/graphql/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/task/graphql/TaskQueryController.kt
@@ -1,19 +1,20 @@
 package com.novatecgmbh.eventsourcing.axon.project.task.graphql
 
+import com.novatecgmbh.eventsourcing.axon.project.project.api.ProjectId
 import com.novatecgmbh.eventsourcing.axon.project.project.api.ProjectQueryResult
-import com.novatecgmbh.eventsourcing.axon.project.task.api.TaskId
-import com.novatecgmbh.eventsourcing.axon.project.task.api.TaskQuery
-import com.novatecgmbh.eventsourcing.axon.project.task.api.TaskQueryResult
-import com.novatecgmbh.eventsourcing.axon.project.task.api.TasksByMultipleProjectsQuery
+import com.novatecgmbh.eventsourcing.axon.project.task.api.*
 import java.time.LocalDate
 import java.util.concurrent.CompletableFuture
 import org.axonframework.extensions.kotlin.query
 import org.axonframework.extensions.kotlin.queryMany
+import org.axonframework.messaging.responsetypes.ResponseTypes
 import org.axonframework.queryhandling.QueryGateway
 import org.springframework.graphql.data.method.annotation.Argument
 import org.springframework.graphql.data.method.annotation.QueryMapping
 import org.springframework.graphql.data.method.annotation.SchemaMapping
+import org.springframework.graphql.data.method.annotation.SubscriptionMapping
 import org.springframework.stereotype.Controller
+import reactor.core.publisher.Flux
 
 @Controller
 class TaskQueryController(val queryGateway: QueryGateway) {
@@ -43,6 +44,22 @@ class TaskQueryController(val queryGateway: QueryGateway) {
     //          }
     //          .toMono()
 
+    @QueryMapping
+    fun tasks(@Argument projectIdentifier: ProjectId): CompletableFuture<List<TaskQueryResult>> =
+        queryGateway.queryMany(TasksByProjectQuery(projectIdentifier))
+
+    @SubscriptionMapping("tasks")
+    fun taskUpdates(@Argument projectIdentifier: ProjectId): Flux<TaskQueryResult> {
+        val query =
+            queryGateway.subscriptionQuery(
+                TasksByProjectQuery(projectIdentifier),
+                ResponseTypes.multipleInstancesOf(TaskQueryResult::class.java),
+                ResponseTypes.instanceOf(TaskQueryResult::class.java)
+            )
+
+        return query.updates().doFinally { query.cancel() }
+    }
+
     @SchemaMapping(typeName = "Project")
     fun tasks(
         project: ProjectQueryResult,
diff --git a/backend/apis/graphql/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/user/user/graphql/UserQueryController.kt b/backend/apis/graphql/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/user/user/graphql/UserQueryController.kt
index 29fa6a4b..36ce8d26 100644
--- a/backend/apis/graphql/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/user/user/graphql/UserQueryController.kt
+++ b/backend/apis/graphql/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/user/user/graphql/UserQueryController.kt
@@ -1,5 +1,6 @@
 package com.novatecgmbh.eventsourcing.axon.user.user.graphql
 
+import com.novatecgmbh.eventsourcing.axon.application.security.RegisteredUserPrincipal
 import com.novatecgmbh.eventsourcing.axon.company.employee.api.EmployeeQueryResult
 import com.novatecgmbh.eventsourcing.axon.project.participant.api.ParticipantQueryResult
 import com.novatecgmbh.eventsourcing.axon.user.api.AllUsersQuery
@@ -11,6 +12,8 @@ import org.axonframework.extensions.kotlin.queryMany
 import org.axonframework.queryhandling.QueryGateway
 import org.springframework.graphql.data.method.annotation.QueryMapping
 import org.springframework.graphql.data.method.annotation.SchemaMapping
+import org.springframework.security.authentication.UsernamePasswordAuthenticationToken
+import org.springframework.security.core.annotation.AuthenticationPrincipal
 import org.springframework.stereotype.Controller
 
 @Controller
@@ -19,6 +22,12 @@ class UserQueryController(val queryGateway: QueryGateway) {
     @QueryMapping
     fun users(): CompletableFuture<List<UserQueryResult>> = queryGateway.queryMany(AllUsersQuery())
 
+    @QueryMapping
+    fun currentUser(
+        @AuthenticationPrincipal user: UsernamePasswordAuthenticationToken
+    ): CompletableFuture<UserQueryResult> =
+        queryGateway.query(UserQuery((user.principal as RegisteredUserPrincipal).identifier))
+
     // TODO: Change to BatchMapping to be more efficient
     @SchemaMapping(typeName = "Participant")
     fun user(participant: ParticipantQueryResult): CompletableFuture<UserQueryResult> =
diff --git a/backend/apis/graphql/src/main/resources/graphql/company.graphqls b/backend/apis/graphql/src/main/resources/graphql/company.graphqls
index 7a3f2e71..f945bbd2 100644
--- a/backend/apis/graphql/src/main/resources/graphql/company.graphqls
+++ b/backend/apis/graphql/src/main/resources/graphql/company.graphqls
@@ -1,6 +1,6 @@
 extend type Query {
     company(identifier:ID!): Company
-    companies: [Company]
+    companies(userAllowedToCreateProjectFor: Boolean = false): [Company]
     employee(identifier:ID!): Employee
 }
 
diff --git a/backend/apis/graphql/src/main/resources/graphql/project.graphqls b/backend/apis/graphql/src/main/resources/graphql/project.graphqls
index 769e5a01..bb321c55 100644
--- a/backend/apis/graphql/src/main/resources/graphql/project.graphqls
+++ b/backend/apis/graphql/src/main/resources/graphql/project.graphqls
@@ -1,12 +1,14 @@
 extend type Query {
     projects: [Project]
     project(identifier: ID!): Project
+    tasks(projectIdentifier: ID!): [Task]
     task(identifier: ID!): Task
     participant(identifier: ID!): Participant
 }
 
 type Subscription {
-    projects: Project
+    project: Project
+    tasks(projectIdentifier: ID!): Task
 }
 
 extend type Mutation {
@@ -80,6 +82,7 @@ extend type Mutation {
 
 type Project {
     identifier: ID!
+    version: Int!
     name: String!
     startDate: String
     deadline: String
@@ -88,16 +91,29 @@ type Project {
     actualEndDate: String
     tasks(from: Date, to: Date): [Task]
     participants: [Participant]
+    statistics: ProjectStatistics
+}
+
+type ProjectStatistics {
+    tasks: TasksStatistics,
+}
+
+type TasksStatistics {
+    all: Int!,
+    planned: Int!,
+    started: Int!,
+    completed: Int!
 }
 
 type Task {
     identifier: ID!
+    version: Int!
     name: String!
     description: String
     startDate: String
     endDate: String
     status: TaskStatus!
-    participant: Participant
+    assignee: Participant
     todos: [Todo]
 }
 
diff --git a/backend/apis/graphql/src/main/resources/graphql/user.graphqls b/backend/apis/graphql/src/main/resources/graphql/user.graphqls
index 06515dce..eb31eea8 100644
--- a/backend/apis/graphql/src/main/resources/graphql/user.graphqls
+++ b/backend/apis/graphql/src/main/resources/graphql/user.graphqls
@@ -1,5 +1,6 @@
 type Query {
     users: [User]
+    currentUser: User
 }
 
 type Mutation {
diff --git a/backend/apis/rest/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/web/CompanyController.kt b/backend/apis/rest/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/web/CompanyController.kt
index eec879b6..a1ec2eb7 100644
--- a/backend/apis/rest/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/web/CompanyController.kt
+++ b/backend/apis/rest/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/web/CompanyController.kt
@@ -1,6 +1,6 @@
 package com.novatecgmbh.eventsourcing.axon.company.company.web
 
-import com.novatecgmbh.eventsourcing.axon.company.company.api.AllCompaniesQuery
+import com.novatecgmbh.eventsourcing.axon.company.company.api.CompaniesQuery
 import com.novatecgmbh.eventsourcing.axon.company.company.api.CompanyId
 import com.novatecgmbh.eventsourcing.axon.company.company.api.CompanyQuery
 import com.novatecgmbh.eventsourcing.axon.company.company.api.CompanyQueryResult
@@ -25,13 +25,13 @@ class CompanyController(
 ) {
     @GetMapping
     fun getAllCompanies(): CompletableFuture<List<CompanyQueryResult>> =
-        queryGateway.queryMany(AllCompaniesQuery())
+        queryGateway.queryMany(CompaniesQuery())
 
     @GetMapping(produces = [APPLICATION_NDJSON_VALUE])
     fun getAllCompaniesAndUpdates(): Flux<CompanyQueryResult> {
         val query =
             queryGateway.subscriptionQuery(
-                AllCompaniesQuery(),
+                CompaniesQuery(),
                 ResponseTypes.multipleInstancesOf(CompanyQueryResult::class.java),
                 ResponseTypes.instanceOf(CompanyQueryResult::class.java)
             )
diff --git a/backend/apis/rsocket/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/rsocket/CompanyController.kt b/backend/apis/rsocket/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/rsocket/CompanyController.kt
index 2c5c49e6..d9d79274 100644
--- a/backend/apis/rsocket/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/rsocket/CompanyController.kt
+++ b/backend/apis/rsocket/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/rsocket/CompanyController.kt
@@ -1,6 +1,6 @@
 package com.novatecgmbh.eventsourcing.axon.company.company.rsocket
 
-import com.novatecgmbh.eventsourcing.axon.company.company.api.AllCompaniesQuery
+import com.novatecgmbh.eventsourcing.axon.company.company.api.CompaniesQuery
 import com.novatecgmbh.eventsourcing.axon.company.company.api.CompanyId
 import com.novatecgmbh.eventsourcing.axon.company.company.api.CompanyQuery
 import com.novatecgmbh.eventsourcing.axon.company.company.api.CompanyQueryResult
@@ -25,7 +25,7 @@ class CompanyController(
 
     @MessageMapping("companies")
     fun subscribeAllCompaniesUpdates(): Flux<CompanyQueryResult> =
-        queryGateway.queryUpdates(AllCompaniesQuery(), CompanyQueryResult::class.java)
+        queryGateway.queryUpdates(CompaniesQuery(), CompanyQueryResult::class.java)
 
     @MessageMapping("companies.{id}")
     fun subscribeCompanyByIdUpdates(@DestinationVariable id: CompanyId): Flux<CompanyQueryResult> =
diff --git a/backend/services/company/api/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/api/Queries.kt b/backend/services/company/api/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/api/Queries.kt
index 41dcf0bf..998df3e9 100644
--- a/backend/services/company/api/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/api/Queries.kt
+++ b/backend/services/company/api/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/api/Queries.kt
@@ -2,7 +2,7 @@ package com.novatecgmbh.eventsourcing.axon.company.company.api
 
 import com.novatecgmbh.eventsourcing.axon.common.api.AggregateReference
 
-class AllCompaniesQuery
+class CompaniesQuery(val companyIds: Set<CompanyId> = emptySet())
 
 data class CompanyQuery(val companyId: CompanyId)
 
diff --git a/backend/services/company/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/query/CompanyProjectionRepository.kt b/backend/services/company/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/query/CompanyProjectionRepository.kt
index 55a3e55d..40422e88 100644
--- a/backend/services/company/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/query/CompanyProjectionRepository.kt
+++ b/backend/services/company/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/query/CompanyProjectionRepository.kt
@@ -4,4 +4,8 @@ import com.novatecgmbh.eventsourcing.axon.company.company.api.CompanyId
 import org.springframework.data.jpa.repository.JpaRepository
 import org.springframework.stereotype.Repository
 
-@Repository interface CompanyProjectionRepository : JpaRepository<CompanyProjection, CompanyId>
+@Repository
+interface CompanyProjectionRepository : JpaRepository<CompanyProjection, CompanyId> {
+
+    fun findAllByIdentifierIn(identifier: Set<CompanyId>): List<CompanyProjection>
+}
diff --git a/backend/services/company/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/query/CompanyProjector.kt b/backend/services/company/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/query/CompanyProjector.kt
index ddb83ea3..d990b7b4 100644
--- a/backend/services/company/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/query/CompanyProjector.kt
+++ b/backend/services/company/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/query/CompanyProjector.kt
@@ -45,7 +45,7 @@ class CompanyProjector(
             query.companyId == company.identifier
         }
 
-        queryUpdateEmitter.emit<AllCompaniesQuery, CompanyQueryResult>(company.toQueryResult()) {
+        queryUpdateEmitter.emit<CompaniesQuery, CompanyQueryResult>(company.toQueryResult()) {
             true
         }
     }
diff --git a/backend/services/company/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/query/CompanyQueryHandler.kt b/backend/services/company/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/query/CompanyQueryHandler.kt
index 96fdee41..5130191c 100644
--- a/backend/services/company/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/query/CompanyQueryHandler.kt
+++ b/backend/services/company/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/company/company/query/CompanyQueryHandler.kt
@@ -1,6 +1,6 @@
 package com.novatecgmbh.eventsourcing.axon.company.company.query
 
-import com.novatecgmbh.eventsourcing.axon.company.company.api.AllCompaniesQuery
+import com.novatecgmbh.eventsourcing.axon.company.company.api.CompaniesQuery
 import com.novatecgmbh.eventsourcing.axon.company.company.api.CompanyQuery
 import com.novatecgmbh.eventsourcing.axon.company.company.api.CompanyQueryResult
 import java.util.*
@@ -15,6 +15,11 @@ class CompanyQueryHandler(val repository: CompanyProjectionRepository) {
         repository.findById(query.companyId).map { it.toQueryResult() }
 
     @QueryHandler
-    fun handle(query: AllCompaniesQuery): Iterable<CompanyQueryResult> =
-        repository.findAll().map { it.toQueryResult() }
+    fun handle(query: CompaniesQuery): Iterable<CompanyQueryResult> =
+        if (query.companyIds.isEmpty()) {
+                repository.findAll()
+            } else {
+                repository.findAllByIdentifierIn(query.companyIds)
+            }
+            .map { it.toQueryResult() }
 }
diff --git a/backend/services/project/api/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/project/api/Queries.kt b/backend/services/project/api/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/project/api/Queries.kt
index d6effbc5..eba22b8e 100644
--- a/backend/services/project/api/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/project/api/Queries.kt
+++ b/backend/services/project/api/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/project/api/Queries.kt
@@ -33,3 +33,5 @@ data class ProjectDetailsQueryResult(
     val startedTasksCount: Long,
     val completedTasksCount: Long,
 )
+
+class CompanyIdsUserCanCreateProjectsForQuery()
diff --git a/backend/services/project/api/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/task/api/Queries.kt b/backend/services/project/api/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/task/api/Queries.kt
index 9c787a76..63a2d250 100644
--- a/backend/services/project/api/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/task/api/Queries.kt
+++ b/backend/services/project/api/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/task/api/Queries.kt
@@ -16,6 +16,7 @@ data class TaskQuery(val taskId: TaskId)
 
 data class TaskQueryResult(
     val identifier: TaskId,
+    val version: Int,
     val projectId: ProjectId,
     val name: String,
     val description: String?,
diff --git a/backend/services/project/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/authorization/acl/ProjectAclRepository.kt b/backend/services/project/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/authorization/acl/ProjectAclRepository.kt
index 627815d1..09a1e590 100644
--- a/backend/services/project/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/authorization/acl/ProjectAclRepository.kt
+++ b/backend/services/project/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/authorization/acl/ProjectAclRepository.kt
@@ -70,4 +70,14 @@ interface ProjectAclRepository : JpaRepository<ProjectAcl, ProjectAclKey> {
         @Param("userId") userId: UserId,
         @Param("companyId") companyId: String
     ): Boolean
+
+    @Query(
+        "select p.key.aggregateIdentifier from ProjectAcl p " +
+            "where p.key.aggregateType " +
+            "= com.novatecgmbh.eventsourcing.axon.project.authorization.acl.AuthorizableAggregateTypesEnum.COMPANY " +
+            "and p.key.permission " +
+            "= com.novatecgmbh.eventsourcing.axon.project.authorization.acl.PermissionEnum.CREATE_PROJECT " +
+            "and p.key.userId = :userId"
+    )
+    fun findAllCompaniesUserCanCreateProjectFor(@Param("userId") userId: UserId): List<String>
 }
diff --git a/backend/services/project/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/project/query/ProjectQueryHandler.kt b/backend/services/project/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/project/query/ProjectQueryHandler.kt
index 7298d83c..7e1a9783 100644
--- a/backend/services/project/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/project/query/ProjectQueryHandler.kt
+++ b/backend/services/project/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/project/query/ProjectQueryHandler.kt
@@ -1,6 +1,7 @@
 package com.novatecgmbh.eventsourcing.axon.project.project.query
 
 import com.novatecgmbh.eventsourcing.axon.application.auditing.AuditUserId
+import com.novatecgmbh.eventsourcing.axon.company.company.api.CompanyId
 import com.novatecgmbh.eventsourcing.axon.project.authorization.ProjectAuthorizationService
 import com.novatecgmbh.eventsourcing.axon.project.authorization.acl.ProjectAclRepository
 import com.novatecgmbh.eventsourcing.axon.project.project.api.*
@@ -42,4 +43,11 @@ class ProjectQueryHandler(
         authService.runWhenAuthorizedForProject(UserId(userId), query.projectId) {
             detailsRepository.findById(query.projectId).map { it.toQueryResult() }
         }
+
+    @QueryHandler
+    fun handle(
+        query: CompanyIdsUserCanCreateProjectsForQuery,
+        @AuditUserId userId: String
+    ): Iterable<CompanyId> =
+        aclRepository.findAllCompaniesUserCanCreateProjectFor(UserId(userId)).map { CompanyId(it) }
 }
diff --git a/backend/services/project/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/task/query/TaskProjection.kt b/backend/services/project/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/task/query/TaskProjection.kt
index 0c271da5..a84801d1 100644
--- a/backend/services/project/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/task/query/TaskProjection.kt
+++ b/backend/services/project/application/src/main/kotlin/com/novatecgmbh/eventsourcing/axon/project/task/query/TaskProjection.kt
@@ -45,6 +45,7 @@ class TaskProjection(
     fun toQueryResult() =
         TaskQueryResult(
             identifier,
+            version.toInt(),
             projectId,
             name,
             description,
diff --git a/frontend-new/package-lock.json b/frontend-new/package-lock.json
index 099a50f0..abeeb1ad 100644
--- a/frontend-new/package-lock.json
+++ b/frontend-new/package-lock.json
@@ -8,13 +8,20 @@
       "name": "yatt-frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@apollo/client": "^3.10.4",
         "@mdi/font": "5.9.55",
+        "@vue/apollo-composable": "^4.0.2",
+        "@vue/apollo-util": "^4.0.0-beta.6",
         "axios": "^1.6.8",
+        "dateonly": "^1.2.0",
+        "graphql": "^16.8.1",
+        "graphql-tag": "^2.12.6",
+        "graphql-ws": "^5.16.0",
         "roboto-fontface": "*",
         "vue": "^3.4.21",
         "vue-router": "^4.3.0",
         "vue3-oidc": "^0.1.15",
-        "vuetify": "^3.5.17",
+        "vuetify": "^3.6.0",
         "webfontloader": "^1.0.0"
       },
       "devDependencies": {
@@ -67,6 +74,48 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@apollo/client": {
+      "version": "3.10.4",
+      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.10.4.tgz",
+      "integrity": "sha512-51gk0xOwN6Ls1EbTG5svFva1kdm2APHYTzmFhaAdvUQoJFDxfc0UwQgDxGptzH84vkPlo1qunY1FuboyF9LI3Q==",
+      "dependencies": {
+        "@graphql-typed-document-node/core": "^3.1.1",
+        "@wry/caches": "^1.0.0",
+        "@wry/equality": "^0.5.6",
+        "@wry/trie": "^0.5.0",
+        "graphql-tag": "^2.12.6",
+        "hoist-non-react-statics": "^3.3.2",
+        "optimism": "^0.18.0",
+        "prop-types": "^15.7.2",
+        "rehackt": "^0.1.0",
+        "response-iterator": "^0.2.6",
+        "symbol-observable": "^4.0.0",
+        "ts-invariant": "^0.10.3",
+        "tslib": "^2.3.0",
+        "zen-observable-ts": "^1.2.5"
+      },
+      "peerDependencies": {
+        "graphql": "^15.0.0 || ^16.0.0",
+        "graphql-ws": "^5.5.5",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "subscriptions-transport-ws": "^0.9.0 || ^0.11.0"
+      },
+      "peerDependenciesMeta": {
+        "graphql-ws": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "subscriptions-transport-ws": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.24.2",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
@@ -688,7 +737,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "aix"
@@ -704,7 +752,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -720,7 +767,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -736,7 +782,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -752,7 +797,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -768,7 +812,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -784,7 +827,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -800,7 +842,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -816,7 +857,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -832,7 +872,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -848,7 +887,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -864,7 +902,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -880,7 +917,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -896,7 +932,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -912,7 +947,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -928,7 +962,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -944,7 +977,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -960,7 +992,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -976,7 +1007,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -992,7 +1022,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "sunos"
@@ -1008,7 +1037,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1024,7 +1052,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1040,7 +1067,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1127,6 +1153,14 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@graphql-typed-document-node/core": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz",
+      "integrity": "sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==",
+      "peerDependencies": {
+        "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -1316,7 +1350,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1329,7 +1362,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1342,7 +1374,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -1355,7 +1386,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -1368,7 +1398,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1381,7 +1410,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1394,7 +1422,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1407,7 +1434,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1420,7 +1446,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1433,7 +1458,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1446,7 +1470,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1459,7 +1482,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1472,7 +1494,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1485,7 +1506,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1498,7 +1518,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1511,7 +1530,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1545,7 +1563,7 @@
       "version": "20.12.7",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz",
       "integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -1798,6 +1816,57 @@
         "path-browserify": "^1.0.1"
       }
     },
+    "node_modules/@vue/apollo-composable": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@vue/apollo-composable/-/apollo-composable-4.0.2.tgz",
+      "integrity": "sha512-/yfEktliXw+oMy/6n9C0J05woYoKlM+kcffVXMh0qljbXdrioyj0WkR/LgPdpnRf6TglFnjIgCKKicd5Gyzpnw==",
+      "dependencies": {
+        "throttle-debounce": "^5.0.0",
+        "ts-essentials": "^9.4.0",
+        "vue-demi": "^0.14.6"
+      },
+      "peerDependencies": {
+        "@apollo/client": "^3.4.13",
+        "@vue/composition-api": "^1.0.0",
+        "graphql": ">=15",
+        "vue": "^2.6.0 || ^3.1.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/apollo-composable/node_modules/vue-demi": {
+      "version": "0.14.8",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/apollo-util": {
+      "version": "4.0.0-beta.6",
+      "resolved": "https://registry.npmjs.org/@vue/apollo-util/-/apollo-util-4.0.0-beta.6.tgz",
+      "integrity": "sha512-2QsiJ77eLInd7Wu3I2eGD4OLJrqImXBoVMlgxjLPgRHru1h5Uf+sGow23/99lGy/5Ao+TNqAZp6RGnLdJqo5tw=="
+    },
     "node_modules/@vue/babel-helper-vue-transform-on": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.2.2.tgz",
@@ -2168,6 +2237,50 @@
         }
       }
     },
+    "node_modules/@wry/caches": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@wry/caches/-/caches-1.0.1.tgz",
+      "integrity": "sha512-bXuaUNLVVkD20wcGBWRyo7j9N3TxePEWFZj2Y+r9OoUzfqmavM84+mFykRicNsBqatba5JLay1t48wxaXaWnlA==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@wry/context": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.7.4.tgz",
+      "integrity": "sha512-jmT7Sb4ZQWI5iyu3lobQxICu2nC/vbUhP0vIdd6tHC9PTfenmRmuIFqktc6GH9cgi+ZHnsLWPvfSvc4DrYmKiQ==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@wry/equality": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.5.7.tgz",
+      "integrity": "sha512-BRFORjsTuQv5gxcXsuDXx6oGRhuVsEGwZy6LOzRRfgu+eSfxbhUQ9L9YtSEIuIjY/o7g3iWFjrc5eSY1GXP2Dw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@wry/trie": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.5.0.tgz",
+      "integrity": "sha512-FNoYzHawTMk/6KMQoEG5O4PuioX19UbwdQKF44yw0nLfOypfQdjtfZzo/UIJWAJ23sNIFbD1Ug9lbaDGMwbqQA==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -2281,12 +2394,12 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -2479,6 +2592,11 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/dateonly": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/dateonly/-/dateonly-1.2.0.tgz",
+      "integrity": "sha512-Ak0hTbIT6NLVt6rSKSFmh1AckdEPl/gx0cyOYKi3vAxCMJBAOVqdXAGpxvslGYPk6NIzD2EJEFFVVc/AHbFvgw=="
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -2995,9 +3113,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -3098,7 +3216,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -3230,6 +3347,39 @@
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "dev": true
     },
+    "node_modules/graphql": {
+      "version": "16.8.1",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.8.1.tgz",
+      "integrity": "sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw==",
+      "engines": {
+        "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
+      }
+    },
+    "node_modules/graphql-tag": {
+      "version": "2.12.6",
+      "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.6.tgz",
+      "integrity": "sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "graphql": "^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
+      }
+    },
+    "node_modules/graphql-ws": {
+      "version": "5.16.0",
+      "resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-5.16.0.tgz",
+      "integrity": "sha512-Ju2RCU2dQMgSKtArPbEtsK5gNLnsQyTNIo/T7cZNp96niC1x0KdJNZV0TIoilceBPQwfb5itrGl8pkFeOUMl4A==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "graphql": ">=0.11 <=16"
+      }
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -3248,6 +3398,14 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -3433,8 +3591,7 @@
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "node_modules/js-yaml": {
       "version": "4.1.0",
@@ -3571,6 +3728,17 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -3815,6 +3983,14 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/oidc-client-ts": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-2.4.0.tgz",
@@ -3869,6 +4045,28 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/optimism": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/optimism/-/optimism-0.18.0.tgz",
+      "integrity": "sha512-tGn8+REwLRNFnb9WmcY5IfpOqeX2kpaYJ1s6Ae3mn12AeydLkR3j+jSCmVQFoXqU8D41PAJ1RG1rCRNWmNZVmQ==",
+      "dependencies": {
+        "@wry/caches": "^1.0.0",
+        "@wry/context": "^0.7.0",
+        "@wry/trie": "^0.4.3",
+        "tslib": "^2.3.0"
+      }
+    },
+    "node_modules/optimism/node_modules/@wry/trie": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.4.3.tgz",
+      "integrity": "sha512-I6bHwH0fSf6RqQcnnXLJKhkSXG45MFral3GxPaY4uAl0LYDZM+YDVDAiU9bYwjTuysy1S0IeecWtmq1SZA3M1w==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
@@ -4087,6 +4285,16 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -4121,6 +4329,24 @@
         }
       ]
     },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/read-package-json-fast": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/read-package-json-fast/-/read-package-json-fast-3.0.2.tgz",
@@ -4134,6 +4360,23 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/rehackt": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/rehackt/-/rehackt-0.1.0.tgz",
+      "integrity": "sha512-7kRDOuLHB87D/JESKxQoRwv4DzbIdwkAGQ7p6QKGdVlY1IZheUnVhlk/4UZlNUVxdAXpyxikE3URsG067ybVzw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -4143,6 +4386,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/response-iterator": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/response-iterator/-/response-iterator-0.2.6.tgz",
+      "integrity": "sha512-pVzEEzrsg23Sh053rmDUvLSkGXluZio0qu8VT6ukrYuvtjVfCbDZH9d6PGXb8HZfzdNZt8feXv/jvUzlhRgLnw==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -4400,6 +4651,14 @@
       "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
       "dev": true
     },
+    "node_modules/symbol-observable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz",
+      "integrity": "sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/synckit": {
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz",
@@ -4422,6 +4681,14 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/throttle-debounce": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
+      "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==",
+      "engines": {
+        "node": ">=12.22"
+      }
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -4464,11 +4731,34 @@
         "typescript": ">=4.2.0"
       }
     },
+    "node_modules/ts-essentials": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-9.4.2.tgz",
+      "integrity": "sha512-mB/cDhOvD7pg3YCLk2rOtejHjjdSi9in/IBYE13S+8WA5FBSraYf4V/ws55uvs0IvQ/l0wBOlXy5yBNZ9Bl8ZQ==",
+      "peerDependencies": {
+        "typescript": ">=4.1.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ts-invariant": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.10.3.tgz",
+      "integrity": "sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "dev": true
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -4511,7 +4801,7 @@
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/universalify": {
       "version": "2.0.1",
@@ -4839,9 +5129,9 @@
       }
     },
     "node_modules/vuetify": {
-      "version": "3.5.17",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.5.17.tgz",
-      "integrity": "sha512-/Veklxxyu/l63q7QQOqJZeZukIKI2sBxY7FKMDcNup2KSGMjyjT+oYXy1DOdl7wlU3c3fKGQMFHqVWb0HDsyDw==",
+      "version": "3.6.9",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.6.9.tgz",
+      "integrity": "sha512-LVIZL0OCwzg3Aw2F8nT1rK/renpTPOcDEPe5E002Vj+VjXwsCNqwwxNteGfrcNlp0vgIJ8WusMvaxp69UJ3NJg==",
       "engines": {
         "node": "^12.20 || >=14.13"
       },
@@ -4923,6 +5213,19 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zen-observable": {
+      "version": "0.8.15",
+      "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
+      "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
+    },
+    "node_modules/zen-observable-ts": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.2.5.tgz",
+      "integrity": "sha512-QZWQekv6iB72Naeake9hS1KxHlotfRpe+WGNbNx5/ta+R3DNjVO2bswf63gXlWDcs+EMd7XY8HfVQyP1X6T4Zg==",
+      "dependencies": {
+        "zen-observable": "0.8.15"
+      }
     }
   },
   "dependencies": {
@@ -4948,6 +5251,27 @@
       "integrity": "sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==",
       "dev": true
     },
+    "@apollo/client": {
+      "version": "3.10.4",
+      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.10.4.tgz",
+      "integrity": "sha512-51gk0xOwN6Ls1EbTG5svFva1kdm2APHYTzmFhaAdvUQoJFDxfc0UwQgDxGptzH84vkPlo1qunY1FuboyF9LI3Q==",
+      "requires": {
+        "@graphql-typed-document-node/core": "^3.1.1",
+        "@wry/caches": "^1.0.0",
+        "@wry/equality": "^0.5.6",
+        "@wry/trie": "^0.5.0",
+        "graphql-tag": "^2.12.6",
+        "hoist-non-react-statics": "^3.3.2",
+        "optimism": "^0.18.0",
+        "prop-types": "^15.7.2",
+        "rehackt": "^0.1.0",
+        "response-iterator": "^0.2.6",
+        "symbol-observable": "^4.0.0",
+        "ts-invariant": "^0.10.3",
+        "tslib": "^2.3.0",
+        "zen-observable-ts": "^1.2.5"
+      }
+    },
     "@babel/code-frame": {
       "version": "7.24.2",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
@@ -5410,161 +5734,138 @@
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
       "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/android-arm": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
       "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/android-arm64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
       "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/android-x64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
       "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/darwin-arm64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
       "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/darwin-x64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
       "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/freebsd-arm64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
       "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/freebsd-x64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
       "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-arm": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
       "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-arm64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
       "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-ia32": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
       "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-loong64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
       "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-mips64el": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
       "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-ppc64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
       "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-riscv64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
       "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-s390x": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
       "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-x64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
       "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/netbsd-x64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
       "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/openbsd-x64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
       "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/sunos-x64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
       "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/win32-arm64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
       "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/win32-ia32": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
       "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/win32-x64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
       "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
-      "dev": true,
       "optional": true
     },
     "@eslint-community/eslint-utils": {
@@ -5626,6 +5927,12 @@
       "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
       "dev": true
     },
+    "@graphql-typed-document-node/core": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz",
+      "integrity": "sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==",
+      "requires": {}
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -5766,112 +6073,96 @@
       "version": "4.16.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.16.2.tgz",
       "integrity": "sha512-VGodkwtEuZ+ENPz/CpDSl091koMv8ao5jHVMbG1vNK+sbx/48/wVzP84M5xSfDAC69mAKKoEkSo+ym9bXYRK9w==",
-      "dev": true,
       "optional": true
     },
     "@rollup/rollup-android-arm64": {
       "version": "4.16.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.16.2.tgz",
       "integrity": "sha512-5/W1xyIdc7jw6c/f1KEtg1vYDBWnWCsLiipK41NiaWGLG93eH2edgE6EgQJ3AGiPERhiOLUqlDSfjRK08C9xFg==",
-      "dev": true,
       "optional": true
     },
     "@rollup/rollup-darwin-arm64": {
       "version": "4.16.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.16.2.tgz",
       "integrity": "sha512-vOAKMqZSTbPfyPVu1jBiy+YniIQd3MG7LUnqV0dA6Q5tyhdqYtxacTHP1+S/ksKl6qCtMG1qQ0grcIgk/19JEA==",
-      "dev": true,
       "optional": true
     },
     "@rollup/rollup-darwin-x64": {
       "version": "4.16.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.16.2.tgz",
       "integrity": "sha512-aIJVRUS3Dnj6MqocBMrcXlatKm64O3ITeQAdAxVSE9swyhNyV1dwnRgw7IGKIkDQofatd8UqMSyUxuFEa42EcA==",
-      "dev": true,
       "optional": true
     },
     "@rollup/rollup-linux-arm-gnueabihf": {
       "version": "4.16.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.16.2.tgz",
       "integrity": "sha512-/bjfUiXwy3P5vYr6/ezv//Yle2Y0ak3a+Av/BKoi76nFryjWCkki8AuVoPR7ZU/ckcvAWFo77OnFK14B9B5JsA==",
-      "dev": true,
       "optional": true
     },
     "@rollup/rollup-linux-arm-musleabihf": {
       "version": "4.16.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.16.2.tgz",
       "integrity": "sha512-S24b+tJHwpq2TNRz9T+r71FjMvyBBApY8EkYxz8Cwi/rhH6h+lu/iDUxyc9PuHf9UvyeBFYkWWcrDahai/NCGw==",
-      "dev": true,
       "optional": true
     },
     "@rollup/rollup-linux-arm64-gnu": {
       "version": "4.16.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.16.2.tgz",
       "integrity": "sha512-UN7VAXLyeyGbCQWiOtQN7BqmjTDw1ON2Oos4lfk0YR7yNhFEJWZiwGtvj9Ay4lsT/ueT04sh80Sg2MlWVVZ+Ug==",
-      "dev": true,
       "optional": true
     },
     "@rollup/rollup-linux-arm64-musl": {
       "version": "4.16.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.16.2.tgz",
       "integrity": "sha512-ZBKvz3+rIhQjusKMccuJiPsStCrPOtejCHxTe+yWp3tNnuPWtyCh9QLGPKz6bFNFbwbw28E2T6zDgzJZ05F1JQ==",
-      "dev": true,
       "optional": true
     },
     "@rollup/rollup-linux-powerpc64le-gnu": {
       "version": "4.16.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.16.2.tgz",
       "integrity": "sha512-LjMMFiVBRL3wOe095vHAekL4b7nQqf4KZEpdMWd3/W+nIy5o9q/8tlVKiqMbfieDypNXLsxM9fexOxd9Qcklyg==",
-      "dev": true,
       "optional": true
     },
     "@rollup/rollup-linux-riscv64-gnu": {
       "version": "4.16.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.16.2.tgz",
       "integrity": "sha512-ohkPt0lKoCU0s4B6twro2aft+QROPdUiWwOjPNTzwTsBK5w+2+iT9kySdtOdq0gzWJAdiqsV4NFtXOwGZmIsHA==",
-      "dev": true,
       "optional": true
     },
     "@rollup/rollup-linux-s390x-gnu": {
       "version": "4.16.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.16.2.tgz",
       "integrity": "sha512-jm2lvLc+/gqXfndlpDw05jKvsl/HKYxUEAt1h5UXcMFVpO4vGpoWmJVUfKDtTqSaHcCNw1his1XjkgR9aort3w==",
-      "dev": true,
       "optional": true
     },
     "@rollup/rollup-linux-x64-gnu": {
       "version": "4.16.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.16.2.tgz",
       "integrity": "sha512-oc5/SlITI/Vj/qL4UM+lXN7MERpiy1HEOnrE+SegXwzf7WP9bzmZd6+MDljCEZTdSY84CpvUv9Rq7bCaftn1+g==",
-      "dev": true,
       "optional": true
     },
     "@rollup/rollup-linux-x64-musl": {
       "version": "4.16.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.16.2.tgz",
       "integrity": "sha512-/2VWEBG6mKbS2itm7hzPwhIPaxfZh/KLWrYg20pCRLHhNFtF+epLgcBtwy3m07bl/k86Q3PFRAf2cX+VbZbwzQ==",
-      "dev": true,
       "optional": true
     },
     "@rollup/rollup-win32-arm64-msvc": {
       "version": "4.16.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.16.2.tgz",
       "integrity": "sha512-Wg7ANh7+hSilF0lG3e/0Oy8GtfTIfEk1327Bw8juZOMOoKmJLs3R+a4JDa/4cHJp2Gs7QfCDTepXXcyFD0ubBg==",
-      "dev": true,
       "optional": true
     },
     "@rollup/rollup-win32-ia32-msvc": {
       "version": "4.16.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.16.2.tgz",
       "integrity": "sha512-J/jCDKVMWp0Y2ELnTjpQFYUCUWv1Jr+LdFrJVZtdqGyjDo0PHPa7pCamjHvJel6zBFM3doFFqAr7cmXYWBAbfw==",
-      "dev": true,
       "optional": true
     },
     "@rollup/rollup-win32-x64-msvc": {
       "version": "4.16.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.16.2.tgz",
       "integrity": "sha512-3nIf+SJMs2ZzrCh+SKNqgLVV9hS/UY0UjT1YU8XQYFGLiUfmHYJ/5trOU1XSvmHjV5gTF/K3DjrWxtyzKKcAHA==",
-      "dev": true,
       "optional": true
     },
     "@rushstack/eslint-patch": {
@@ -5902,7 +6193,7 @@
       "version": "20.12.7",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz",
       "integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "undici-types": "~5.26.4"
       }
@@ -6060,6 +6351,29 @@
         "path-browserify": "^1.0.1"
       }
     },
+    "@vue/apollo-composable": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@vue/apollo-composable/-/apollo-composable-4.0.2.tgz",
+      "integrity": "sha512-/yfEktliXw+oMy/6n9C0J05woYoKlM+kcffVXMh0qljbXdrioyj0WkR/LgPdpnRf6TglFnjIgCKKicd5Gyzpnw==",
+      "requires": {
+        "throttle-debounce": "^5.0.0",
+        "ts-essentials": "^9.4.0",
+        "vue-demi": "^0.14.6"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.8",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+          "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+          "requires": {}
+        }
+      }
+    },
+    "@vue/apollo-util": {
+      "version": "4.0.0-beta.6",
+      "resolved": "https://registry.npmjs.org/@vue/apollo-util/-/apollo-util-4.0.0-beta.6.tgz",
+      "integrity": "sha512-2QsiJ77eLInd7Wu3I2eGD4OLJrqImXBoVMlgxjLPgRHru1h5Uf+sGow23/99lGy/5Ao+TNqAZp6RGnLdJqo5tw=="
+    },
     "@vue/babel-helper-vue-transform-on": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.2.2.tgz",
@@ -6339,6 +6653,38 @@
         }
       }
     },
+    "@wry/caches": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@wry/caches/-/caches-1.0.1.tgz",
+      "integrity": "sha512-bXuaUNLVVkD20wcGBWRyo7j9N3TxePEWFZj2Y+r9OoUzfqmavM84+mFykRicNsBqatba5JLay1t48wxaXaWnlA==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
+    "@wry/context": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.7.4.tgz",
+      "integrity": "sha512-jmT7Sb4ZQWI5iyu3lobQxICu2nC/vbUhP0vIdd6tHC9PTfenmRmuIFqktc6GH9cgi+ZHnsLWPvfSvc4DrYmKiQ==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
+    "@wry/equality": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.5.7.tgz",
+      "integrity": "sha512-BRFORjsTuQv5gxcXsuDXx6oGRhuVsEGwZy6LOzRRfgu+eSfxbhUQ9L9YtSEIuIjY/o7g3iWFjrc5eSY1GXP2Dw==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
+    "@wry/trie": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.5.0.tgz",
+      "integrity": "sha512-FNoYzHawTMk/6KMQoEG5O4PuioX19UbwdQKF44yw0nLfOypfQdjtfZzo/UIJWAJ23sNIFbD1Ug9lbaDGMwbqQA==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -6428,12 +6774,12 @@
       }
     },
     "braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "requires": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       }
     },
     "browserslist": {
@@ -6553,6 +6899,11 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "dateonly": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/dateonly/-/dateonly-1.2.0.tgz",
+      "integrity": "sha512-Ak0hTbIT6NLVt6rSKSFmh1AckdEPl/gx0cyOYKi3vAxCMJBAOVqdXAGpxvslGYPk6NIzD2EJEFFVVc/AHbFvgw=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -6925,9 +7276,9 @@
       }
     },
     "fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "requires": {
         "to-regex-range": "^5.0.1"
@@ -6996,7 +7347,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "optional": true
     },
     "gensync": {
@@ -7090,6 +7440,25 @@
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "dev": true
     },
+    "graphql": {
+      "version": "16.8.1",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.8.1.tgz",
+      "integrity": "sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw=="
+    },
+    "graphql-tag": {
+      "version": "2.12.6",
+      "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.6.tgz",
+      "integrity": "sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "graphql-ws": {
+      "version": "5.16.0",
+      "resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-5.16.0.tgz",
+      "integrity": "sha512-Ju2RCU2dQMgSKtArPbEtsK5gNLnsQyTNIo/T7cZNp96niC1x0KdJNZV0TIoilceBPQwfb5itrGl8pkFeOUMl4A==",
+      "requires": {}
+    },
     "has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -7102,6 +7471,14 @@
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -7224,8 +7601,7 @@
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "js-yaml": {
       "version": "4.1.0",
@@ -7333,6 +7709,14 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
     "lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -7502,6 +7886,11 @@
         "boolbase": "^1.0.0"
       }
     },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+    },
     "oidc-client-ts": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-2.4.0.tgz",
@@ -7541,6 +7930,27 @@
         "is-wsl": "^3.1.0"
       }
     },
+    "optimism": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/optimism/-/optimism-0.18.0.tgz",
+      "integrity": "sha512-tGn8+REwLRNFnb9WmcY5IfpOqeX2kpaYJ1s6Ae3mn12AeydLkR3j+jSCmVQFoXqU8D41PAJ1RG1rCRNWmNZVmQ==",
+      "requires": {
+        "@wry/caches": "^1.0.0",
+        "@wry/context": "^0.7.0",
+        "@wry/trie": "^0.4.3",
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "@wry/trie": {
+          "version": "0.4.3",
+          "resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.4.3.tgz",
+          "integrity": "sha512-I6bHwH0fSf6RqQcnnXLJKhkSXG45MFral3GxPaY4uAl0LYDZM+YDVDAiU9bYwjTuysy1S0IeecWtmq1SZA3M1w==",
+          "requires": {
+            "tslib": "^2.3.0"
+          }
+        }
+      }
+    },
     "optionator": {
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
@@ -7682,6 +8092,16 @@
         "fast-diff": "^1.1.2"
       }
     },
+    "prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -7699,6 +8119,21 @@
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
       "dev": true
     },
+    "react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "read-package-json-fast": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/read-package-json-fast/-/read-package-json-fast-3.0.2.tgz",
@@ -7709,12 +8144,23 @@
         "npm-normalize-package-bin": "^3.0.0"
       }
     },
+    "rehackt": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/rehackt/-/rehackt-0.1.0.tgz",
+      "integrity": "sha512-7kRDOuLHB87D/JESKxQoRwv4DzbIdwkAGQ7p6QKGdVlY1IZheUnVhlk/4UZlNUVxdAXpyxikE3URsG067ybVzw==",
+      "requires": {}
+    },
     "resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
       "dev": true
     },
+    "response-iterator": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/response-iterator/-/response-iterator-0.2.6.tgz",
+      "integrity": "sha512-pVzEEzrsg23Sh053rmDUvLSkGXluZio0qu8VT6ukrYuvtjVfCbDZH9d6PGXb8HZfzdNZt8feXv/jvUzlhRgLnw=="
+    },
     "reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -7882,6 +8328,11 @@
       "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
       "dev": true
     },
+    "symbol-observable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz",
+      "integrity": "sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ=="
+    },
     "synckit": {
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz",
@@ -7898,6 +8349,11 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "throttle-debounce": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
+      "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg=="
+    },
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -7926,11 +8382,24 @@
       "dev": true,
       "requires": {}
     },
+    "ts-essentials": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-9.4.2.tgz",
+      "integrity": "sha512-mB/cDhOvD7pg3YCLk2rOtejHjjdSi9in/IBYE13S+8WA5FBSraYf4V/ws55uvs0IvQ/l0wBOlXy5yBNZ9Bl8ZQ==",
+      "requires": {}
+    },
+    "ts-invariant": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.10.3.tgz",
+      "integrity": "sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
     "tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "dev": true
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "type-check": {
       "version": "0.4.0",
@@ -7957,7 +8426,7 @@
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "devOptional": true
     },
     "universalify": {
       "version": "2.0.1",
@@ -8142,9 +8611,9 @@
       }
     },
     "vuetify": {
-      "version": "3.5.17",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.5.17.tgz",
-      "integrity": "sha512-/Veklxxyu/l63q7QQOqJZeZukIKI2sBxY7FKMDcNup2KSGMjyjT+oYXy1DOdl7wlU3c3fKGQMFHqVWb0HDsyDw==",
+      "version": "3.6.9",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.6.9.tgz",
+      "integrity": "sha512-LVIZL0OCwzg3Aw2F8nT1rK/renpTPOcDEPe5E002Vj+VjXwsCNqwwxNteGfrcNlp0vgIJ8WusMvaxp69UJ3NJg==",
       "requires": {}
     },
     "webfontloader": {
@@ -8184,6 +8653,19 @@
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true
+    },
+    "zen-observable": {
+      "version": "0.8.15",
+      "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
+      "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
+    },
+    "zen-observable-ts": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.2.5.tgz",
+      "integrity": "sha512-QZWQekv6iB72Naeake9hS1KxHlotfRpe+WGNbNx5/ta+R3DNjVO2bswf63gXlWDcs+EMd7XY8HfVQyP1X6T4Zg==",
+      "requires": {
+        "zen-observable": "0.8.15"
+      }
     }
   }
 }
diff --git a/frontend-new/package.json b/frontend-new/package.json
index cff4fd7c..e53da40c 100644
--- a/frontend-new/package.json
+++ b/frontend-new/package.json
@@ -13,13 +13,19 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@apollo/client": "^3.10.4",
     "@mdi/font": "5.9.55",
-    "roboto-fontface": "*",
+    "@vue/apollo-composable": "^4.0.2",
+    "@vue/apollo-util": "^4.0.0-beta.6",
     "axios": "^1.6.8",
+    "graphql": "^16.8.1",
+    "graphql-tag": "^2.12.6",
+    "graphql-ws": "^5.16.0",
+    "roboto-fontface": "*",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0",
     "vue3-oidc": "^0.1.15",
-    "vuetify": "^3.5.17",
+    "vuetify": "^3.6.0",
     "webfontloader": "^1.0.0"
   },
   "devDependencies": {
@@ -36,8 +42,8 @@
     "prettier": "^3.2.5",
     "typescript": "~5.4.0",
     "vite": "^5.2.8",
-    "vite-plugin-vuetify": "^2.0.3",
     "vite-plugin-vue-devtools": "^7.0.25",
+    "vite-plugin-vuetify": "^2.0.3",
     "vue-tsc": "^2.0.11"
   }
 }
diff --git a/frontend-new/src/App.vue b/frontend-new/src/App.vue
index e57c3731..e7148813 100644
--- a/frontend-new/src/App.vue
+++ b/frontend-new/src/App.vue
@@ -1,4 +1,10 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { provide } from 'vue'
+import { apolloClient } from './shared/http/graphql-client'
+import { DefaultApolloClient } from '@vue/apollo-composable'
+
+provide(DefaultApolloClient, apolloClient)
+</script>
 
 <template>
   <router-view />
diff --git a/frontend-new/src/pages/CallBackPage.vue b/frontend-new/src/authentication/CallBackPage.vue
similarity index 100%
rename from frontend-new/src/pages/CallBackPage.vue
rename to frontend-new/src/authentication/CallBackPage.vue
diff --git a/frontend-new/src/authentication/SignInPage.vue b/frontend-new/src/authentication/SignInPage.vue
new file mode 100644
index 00000000..d931a2f5
--- /dev/null
+++ b/frontend-new/src/authentication/SignInPage.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useAuth } from 'vue3-oidc'
+
+const { signinRedirect } = useAuth()
+</script>
+
+<template>
+  <v-app>
+    <v-main class="d-flex align-center justify-center">
+      <v-sheet class="pa-5 text-center" rounded="lg" elevation="5" width="400">
+        <h1 class="text-h5 mb-6">Welcome to YATT!</h1>
+        <p class="mb-6">Please sign-in to authenticate yourself.</p>
+        <v-divider class="mb-4"></v-divider>
+        <div class="text-center">
+          <v-btn color="primary" rounded="lg" @click="signinRedirect()">Signin</v-btn>
+        </div>
+      </v-sheet>
+    </v-main>
+  </v-app>
+</template>
diff --git a/frontend-new/src/pages/SignOutPage.vue b/frontend-new/src/authentication/SignOutPage.vue
similarity index 100%
rename from frontend-new/src/pages/SignOutPage.vue
rename to frontend-new/src/authentication/SignOutPage.vue
diff --git a/frontend-new/src/pages/CompaniesPage.vue b/frontend-new/src/pages/CompaniesPage.vue
deleted file mode 100644
index bbaaf5f5..00000000
--- a/frontend-new/src/pages/CompaniesPage.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script lang="ts" setup>
-import MainLayout from '@/layout/MainLayout.vue'
-</script>
-
-<template>
-  <MainLayout> Companies </MainLayout>
-</template>
diff --git a/frontend-new/src/pages/ProjectsPage.vue b/frontend-new/src/pages/ProjectsPage.vue
deleted file mode 100644
index 3f6be1a1..00000000
--- a/frontend-new/src/pages/ProjectsPage.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script lang="ts" setup>
-import MainLayout from '@/layout/MainLayout.vue';
-</script>
-
-<template>
-  <MainLayout> Projects </MainLayout>
-</template>
diff --git a/frontend-new/src/pages/SignInPage.vue b/frontend-new/src/pages/SignInPage.vue
deleted file mode 100644
index f84c9500..00000000
--- a/frontend-new/src/pages/SignInPage.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { useAuth } from 'vue3-oidc';
-
-const { signinRedirect } = useAuth()
-</script>
-
-<template>
-  <v-app>
-    <button @click="signinRedirect()">Signin</button>
-  </v-app>
-</template>
diff --git a/frontend-new/src/plugins/vuetify.js b/frontend-new/src/plugins/vuetify.js
index 3e63566b..5a89fca9 100644
--- a/frontend-new/src/plugins/vuetify.js
+++ b/frontend-new/src/plugins/vuetify.js
@@ -13,37 +13,41 @@ import { createVuetify } from 'vuetify'
 
 // Components
 import { VBtn } from 'vuetify/components'
+import { VDateInput } from 'vuetify/labs/VDateInput'
 
 export default createVuetify({
   aliases: {
     VBtnAlt: VBtn
   },
+  components: {
+    VDateInput
+  },
   // https://vuetifyjs.com/features/global-configuration/
-//   defaults: {
-//     global: {
-//       rounded: 'sm'
-//     },
-//     VAppBar: {
-//       flat: true
-//     },
-//     VBtn: {
-//       color: 'primary',
-//       height: 44,
-//       minWidth: 190
-//     },
-//     VBtnAlt: {
-//       color: 'primary',
-//       height: 48,
-//       minWidth: 190,
-//       variant: 'outlined'
-//     },
-//     VSheet: {
-//       color: '#212121'
-//     }
-//   },
+  //   defaults: {
+  //     global: {
+  //       rounded: 'sm'
+  //     },
+  //     VAppBar: {
+  //       flat: true
+  //     },
+  //     VBtn: {
+  //       color: 'primary',
+  //       height: 44,
+  //       minWidth: 190
+  //     },
+  //     VBtnAlt: {
+  //       color: 'primary',
+  //       height: 48,
+  //       minWidth: 190,
+  //       variant: 'outlined'
+  //     },
+  //     VSheet: {
+  //       color: '#212121'
+  //     }
+  //   },
   // https://vuetifyjs.com/features/theme/
   theme: {
-    defaultTheme: 'light',
+    defaultTheme: 'light'
     // themes: {
     //   dark: {
     //     dark: false,
diff --git a/frontend-new/src/projects/api/project-api.ts b/frontend-new/src/projects/api/project-api.ts
new file mode 100644
index 00000000..bcbc82e0
--- /dev/null
+++ b/frontend-new/src/projects/api/project-api.ts
@@ -0,0 +1,175 @@
+import gql from 'graphql-tag'
+import { fi } from 'vuetify/locale'
+
+export type Project = {
+  identifier: string
+  version: number
+  name: string
+  status: string
+  startDate: string
+  actualEndDate: string
+  deadline: string
+  statistics?: ProjectStatistics
+  participants?: Participant[]
+}
+
+export type ProjectStatistics = {
+  tasks: TaskStatistics
+}
+
+export type TaskStatistics = {
+  all: number
+  planned: number
+  started: number
+  completed: number
+}
+
+export type Participant = {
+  identifier: string
+  user: User
+  company: Company
+}
+
+export class User {
+  identifier: string
+  firstname: string
+  lastname: string
+  email: string
+
+  constructor(identifier: string, firstname: string, lastname: string, email: string) {
+    this.identifier = identifier
+    this.firstname = firstname
+    this.lastname = lastname
+    this.email = email
+  }
+}
+
+export class Company {
+  identifier: string
+  name: string
+
+  constructor(identifier: string, name: string) {
+    this.identifier = identifier
+    this.name = name
+  }
+}
+
+export const GET_PROJECTS = gql`
+  query getProjects {
+    projects {
+      identifier
+      version
+      name
+      status
+      startDate
+      actualEndDate
+      deadline
+      statistics {
+        tasks {
+          all
+          planned
+          started
+          completed
+        }
+      }
+      participants {
+        identifier
+        user {
+          identifier
+          firstname
+          lastname
+          email
+        }
+        company {
+          identifier
+          name
+        }
+      }
+    }
+  }
+`
+
+export type ProjectsQueryResults = {
+  projects: Project[]
+}
+
+export const GET_PROJECT_UPDATES = gql`
+  subscription getProjectUpdates {
+    project {
+      identifier
+      version
+      name
+      status
+      startDate
+      actualEndDate
+      deadline
+      statistics {
+        tasks {
+          all
+          planned
+          started
+          completed
+        }
+      }
+    }
+  }
+`
+
+export type ProjectUpdateResult = {
+  project: Project
+}
+
+export const CREATE_PARTICIPANT = gql`
+  mutation createParticipant(
+    $projectIdentifier: ID!
+    $companyIdentifier: ID!
+    $userIdentifier: ID!
+  ) {
+    createParticipant(
+      projectIdentifier: $projectIdentifier
+      companyIdentifier: $companyIdentifier
+      userIdentifier: $userIdentifier
+    )
+  }
+`
+
+export const COMPANIES_WITH_EMPLOYEES = gql`
+  query companiesWithEmployee {
+    companies {
+      identifier
+      name
+      employees {
+        user {
+          identifier
+          firstname
+          lastname
+          email
+        }
+        isAdmin
+        isProjectManager
+      }
+    }
+  }
+`
+
+export type CompaniesWithEmployeesQueryResult = {
+  companies: CompanyWithEmployees[]
+}
+
+export type CompanyWithEmployees = {
+  identifier: string
+  name: string
+  employees: Employee[]
+}
+
+export class Employee {
+  user: User
+  isAdmin: boolean
+  isProjectManager: boolean
+
+  constructor(user: User, isAdmin: boolean, isProjectManager: boolean) {
+    this.user = user
+    this.isAdmin = isAdmin
+    this.isProjectManager = isProjectManager
+  }
+}
diff --git a/frontend-new/src/projects/components/AddParticipantModalComponent.vue b/frontend-new/src/projects/components/AddParticipantModalComponent.vue
new file mode 100644
index 00000000..96b9cc67
--- /dev/null
+++ b/frontend-new/src/projects/components/AddParticipantModalComponent.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import type { ApolloQueryResult } from '@apollo/client'
+import { useMutation, useQuery } from '@vue/apollo-composable'
+import { ref, watch, type Ref } from 'vue'
+import {
+  COMPANIES_WITH_EMPLOYEES,
+  CREATE_PARTICIPANT,
+  Employee,
+  type CompaniesWithEmployeesQueryResult,
+  type CompanyWithEmployees
+} from '../api/project-api'
+
+export interface Props {
+  projectIdentifier: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  projectIdentifier: ''
+})
+
+const emit = defineEmits(['done', 'canceled'])
+
+const companies: Ref<CompanyWithEmployees[]> = ref([])
+const employees: Ref<Employee[]> = ref([])
+
+const selectedCompanyIdentifier: Ref<string | null> = ref(null)
+const selectedCompanyIdentifierRules = [
+  (value: string) => {
+    if (value !== null) return true
+    return 'Please select a company'
+  }
+]
+const selectedUserIdentifier: Ref<string | null> = ref(null)
+const selectedUserIdentifierRules = [
+  (value: string) => {
+    if (value !== null) return true
+    return 'Please select a user'
+  }
+]
+
+watch(
+  () => selectedCompanyIdentifier.value,
+  (newId: string | null) => {
+    selectedUserIdentifier.value = null
+    const employeesForSelectedCompany = companies.value.find(
+      (company: CompanyWithEmployees) => company.identifier === newId
+    )?.employees
+    employees.value = employeesForSelectedCompany === undefined ? [] : employeesForSelectedCompany
+  },
+  { immediate: true }
+)
+
+const dialog = ref(true)
+const form = ref()
+const isFormValid = ref(false)
+const formDisabled = ref(false)
+
+function onOk() {
+  if (isFormValid.value) {
+    formDisabled.value = true
+    createParticipant({
+      projectIdentifier: props.projectIdentifier,
+      companyIdentifier: selectedCompanyIdentifier.value,
+      userIdentifier: selectedUserIdentifier.value
+    })
+      .then(
+        () => {
+          console.info('Done')
+        },
+        () => {
+          console.error('Rejected')
+        }
+      )
+      .finally(() => {
+        dialog.value = false
+        emit('done')
+      })
+  }
+}
+
+function onCancel() {
+  dialog.value = false
+  emit('canceled')
+}
+
+const { mutate: createParticipant } = useMutation(CREATE_PARTICIPANT, { fetchPolicy: 'no-cache' })
+
+const companyQueryResult = useQuery(COMPANIES_WITH_EMPLOYEES)
+
+companyQueryResult.onResult((result: ApolloQueryResult<CompaniesWithEmployeesQueryResult>, _) => {
+  companies.value = result?.data?.companies
+})
+</script>
+
+<template>
+  <div class="text-center pa-4">
+    <v-dialog v-model="dialog" max-width="600" persistent>
+      <v-form ref="form" v-model="isFormValid" @submit.prevent>
+        <v-card prepend-icon="mdi-plus" title="Participant">
+          <v-card-text>
+            <v-row>
+              <v-col>
+                <v-select
+                  label="Company"
+                  :items="companies"
+                  :rules="selectedCompanyIdentifierRules"
+                  item-title="name"
+                  item-value="identifier"
+                  v-model="selectedCompanyIdentifier"
+                />
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>
+                <v-select
+                  label="User"
+                  :items="employees"
+                  :rules="selectedUserIdentifierRules"
+                  :item-title="(item: Employee) => item.user.firstname + ' ' + item.user.lastname"
+                  item-value="user.identifier"
+                  v-model="selectedUserIdentifier"
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-divider />
+          <v-card-actions>
+            <v-btn text="Cancel" @click="onCancel" />
+            <v-btn text="Save" type="submit" :disabled="!isFormValid" @click="onOk" />
+          </v-card-actions>
+        </v-card>
+      </v-form>
+    </v-dialog>
+  </div>
+</template>
diff --git a/frontend-new/src/projects/components/ParticipantListComponent.vue b/frontend-new/src/projects/components/ParticipantListComponent.vue
new file mode 100644
index 00000000..0f5cf26b
--- /dev/null
+++ b/frontend-new/src/projects/components/ParticipantListComponent.vue
@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { type Participant } from '../api/project-api'
+
+export interface Props {
+  participants: Participant[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  participants: new Array<Participant>()
+})
+
+const emit = defineEmits(['addParticipant', 'removeParticipant'])
+
+const tableHeight = ref(100)
+const tableContainer = ref()
+
+const headers = [
+  { title: 'Name', align: 'start', key: 'name' },
+  { title: 'E-Mail', align: 'start', key: 'email' },
+  { title: 'Company', align: 'start', key: 'company' },
+  { title: 'Actions', align: 'end', key: 'actions', sortable: false }
+]
+
+function onResize() {
+  const calculated = window.innerHeight - tableContainer.value.getBoundingClientRect().y - 120
+  tableHeight.value = calculated > 200 ? calculated : 200
+}
+</script>
+
+<template>
+  <div v-resize="onResize" ref="tableContainer">
+    <v-data-table-virtual
+      :height="tableHeight"
+      :headers="headers"
+      :items="props.participants"
+      :hover="true"
+      item-value="identifier"
+      fixed-header
+      density="compact"
+      :sort-by="[{ key: 'name', order: 'asc' }]"
+    >
+      <template v-slot:top>
+        <v-toolbar density="compact" class="pr-2">
+          <v-spacer></v-spacer>
+          <v-btn
+            color="primary"
+            density="comfortable"
+            elevation="2"
+            prepend-icon="mdi-plus"
+            rounded="lg"
+            @click="emit('addParticipant')"
+          >
+            Participant
+          </v-btn>
+        </v-toolbar>
+      </template>
+      <template v-slot:item="{ item }">
+        <tr>
+          <td>{{ item.user.firstname }} {{ item.user.lastname }}</td>
+          <td>{{ item.user.email }}</td>
+          <td>{{ item.company.name }}</td>
+          <td class="text-right">
+            <v-icon
+              icon="mdi-delete"
+              size="x-small"
+              @click="emit('removeParticipant', item.identifier)"
+            />
+          </td>
+        </tr>
+      </template>
+    </v-data-table-virtual>
+  </div>
+</template>
diff --git a/frontend-new/src/projects/components/ProjectCreateModalComponent.vue b/frontend-new/src/projects/components/ProjectCreateModalComponent.vue
new file mode 100644
index 00000000..07053630
--- /dev/null
+++ b/frontend-new/src/projects/components/ProjectCreateModalComponent.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { useMutation, useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { computed, nextTick, ref, watch, type Ref } from 'vue'
+
+const emit = defineEmits(['done', 'canceled'])
+
+const dialog = ref(true)
+const form = ref()
+const isFormValid = ref(false)
+const formDisabled = ref(false)
+
+const projectName: Ref<String> = ref('')
+const projectNameRules = [
+  (value: String) => {
+    if (value?.length > 0) return true
+    return 'Project name must not be empty'
+  }
+]
+
+function formatDate(date: Date): String {
+  return date.toJSON().substring(0, 10)
+}
+
+const today = new Date()
+const tomorrow = new Date(today)
+tomorrow.setDate(tomorrow.getDate() + 1)
+
+const plannedStartDate: Ref<Date> = ref(today)
+const plannedStartDateFormated: Ref<String> = computed(() => formatDate(plannedStartDate.value))
+const plannedStartDateRules = [
+  (value: string) => {
+    if (new Date(Date.parse(value)) < deadlineDate.value) return true
+    return 'Planned start must be before deadline'
+  }
+]
+watch(plannedStartDate, () => nextTick(form.value.validate()))
+
+const deadlineDate: Ref<Date> = ref(tomorrow)
+const deadlineDateFormated: Ref<String> = computed(() => formatDate(deadlineDate.value))
+const deadlineDateRules = [
+  (value: string) => {
+    if (new Date(Date.parse(value)) > plannedStartDate.value) return true
+    return 'Deadline must be after planned start date'
+  }
+]
+watch(deadlineDate, () => nextTick(form.value.validate()))
+
+const companyIdentifier: Ref<String> = ref('')
+const companyIdentifierRules = [
+  (value: string) => {
+    if (value) return true
+    return 'Please select a company'
+  }
+]
+
+function onOk() {
+  if (isFormValid.value) {
+    createProject({
+      name: projectName.value,
+      plannedStartDate: plannedStartDateFormated.value,
+      deadline: deadlineDateFormated.value,
+      companyId: companyIdentifier.value
+    })
+      .then(
+        () => {
+          console.info('Done')
+        },
+        () => {
+          console.error('Rejected')
+        }
+      )
+      .finally(() => {
+        dialog.value = false
+        emit('done')
+      })
+    formDisabled.value = true
+  }
+}
+
+function onCancel() {
+  dialog.value = false
+  emit('canceled')
+}
+
+const { mutate: createProject } = useMutation(
+  gql`
+    mutation createProject(
+      $name: String!
+      $plannedStartDate: Date!
+      $deadline: Date!
+      $companyId: String!
+    ) {
+      createProject(
+        projectName: $name
+        plannedStartDate: $plannedStartDate
+        deadline: $deadline
+        companyId: $companyId
+      )
+    }
+  `,
+  { fetchPolicy: 'no-cache' }
+)
+
+type Company = {
+  identifier: string
+  name: string
+  status: string
+  startDate: string
+  actualEndDate: string
+  deadline: string
+}
+
+type CompaniesQueryResult = {
+  companies: Company[]
+}
+
+const companiesQuery = useQuery<CompaniesQueryResult>(gql`
+  query getCompanies {
+    companies(userAllowedToCreateProjectFor: true) {
+      identifier
+      name
+    }
+  }
+`)
+
+const companies: Ref<Company[]> = ref([])
+
+companiesQuery.onResult((result, _) => {
+  companies.value = result.data.companies
+})
+</script>
+
+<template>
+  <div class="text-center pa-4">
+    <v-dialog v-model="dialog" max-width="600" persistent>
+      <v-form ref="form" v-model="isFormValid" :disabled="formDisabled" @submit.prevent>
+        <v-card prepend-icon="mdi-plus" title="New Project">
+          <v-card-text>
+            <v-row>
+              <v-col>
+                <v-text-field
+                  label="Project Name *"
+                  v-model="projectName"
+                  :rules="projectNameRules"
+                />
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>
+                <v-date-input
+                  label="Planned Start Date *"
+                  v-model="plannedStartDate"
+                  :rules="plannedStartDateRules"
+                  prepend-icon=""
+                  prepend-inner-icon="$calendar"
+                ></v-date-input>
+              </v-col>
+              <v-col>
+                <v-date-input
+                  label="Deadline Date *"
+                  v-model="deadlineDate"
+                  :rules="deadlineDateRules"
+                  prepend-icon=""
+                  prepend-inner-icon="$calendar"
+                ></v-date-input>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>
+                <v-select
+                  label="Company"
+                  v-model="companyIdentifier"
+                  :rules="companyIdentifierRules"
+                  :items="companies"
+                  item-value="identifier"
+                  item-title="name"
+                />
+              </v-col>
+            </v-row>
+
+            <small class="text-caption text-medium-emphasis">*indicates required field</small>
+          </v-card-text>
+          <v-divider />
+          <v-card-actions>
+            <v-btn text="Cancel" @click="onCancel" />
+            <v-btn text="Save" type="submit" :disabled="!isFormValid" @click="onOk" />
+          </v-card-actions>
+        </v-card>
+      </v-form>
+    </v-dialog>
+  </div>
+</template>
diff --git a/frontend-new/src/projects/components/ProjectDrawerComponent.vue b/frontend-new/src/projects/components/ProjectDrawerComponent.vue
new file mode 100644
index 00000000..9398f295
--- /dev/null
+++ b/frontend-new/src/projects/components/ProjectDrawerComponent.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { type Project } from '../api/project-api'
+import ParticipantList from '@/projects/components/ParticipantListComponent.vue'
+
+export interface Props {
+  isVisible: boolean
+  project?: Project
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isVisible: false
+})
+
+const emit = defineEmits([
+  'addParticipant',
+  'drawerClosed',
+  'renameProject',
+  'rescheduleProject',
+  'removeParticipant'
+])
+
+function closeDrawer(value: Boolean) {
+  if (value === false) {
+    emit('drawerClosed')
+  }
+}
+
+function getStatusColor(value: String): String {
+  if (value === 'ON_TIME') return 'green'
+  if (value === 'DELAYED') return 'red'
+  else return 'grey'
+}
+</script>
+
+<template>
+  <v-navigation-drawer
+    location="right"
+    v-model="props.isVisible"
+    temporary
+    disable-route-watcher
+    width="800"
+    @update:model-value="(value: Boolean) => closeDrawer(value)"
+  >
+    <div class="pa-5">
+      <section class="pb-5">
+        <div class="d-flex justify-space-between">
+          <div>
+            <h2 class="text-h5">Project Details</h2>
+          </div>
+          <div>
+            <v-chip v-if="project?.status" :color="getStatusColor(project?.status)">
+              {{ project?.status }}
+            </v-chip>
+          </div>
+        </div>
+        <p class="text-caption">ID: {{ project?.identifier }}</p>
+      </section>
+
+      <v-divider />
+
+      <section class="py-5">
+        <v-row>
+          <v-col>
+            <p><b>Name:</b></p>
+            <div class="d-flex align-center">
+              <div class="pr-2">{{ project?.name }}</div>
+              <v-icon icon="mdi-pencil" size="x-small" @click="$emit('renameProject')" />
+            </div>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            <p><b>Start Date:</b></p>
+            <div class="d-flex align-center">
+              <div class="pr-2">{{ project?.startDate }}</div>
+              <v-icon icon="mdi-pencil" size="x-small" @click="$emit('rescheduleProject')" />
+            </div>
+          </v-col>
+          <v-col c>
+            <p><b>Deadline:</b></p>
+            <div class="d-flex align-center">
+              <div class="pr-2">{{ project?.deadline }}</div>
+              <v-icon icon="mdi-pencil" size="x-small" @click="$emit('rescheduleProject')" />
+            </div>
+          </v-col>
+          <v-col>
+            <p><b>Actual End Date::</b></p>
+            {{ project?.actualEndDate }}
+          </v-col>
+        </v-row>
+      </section>
+
+      <v-divider />
+
+      <section class="py-5">
+        <p class="text-h6 pb-5">Task Statistics</p>
+        <v-row>
+          <v-col>
+            <div class="rounded-pill bg-grey-lighten-4 mx-auto text-center py-2">
+              <div class="text-h6">{{ project?.statistics?.tasks?.all }}</div>
+              <div class="text-caption">All</div>
+            </div>
+          </v-col>
+          <v-col>
+            <div class="rounded-pill bg-grey-lighten-3 mx-auto text-center py-2">
+              <div class="text-h6">{{ project?.statistics?.tasks?.planned }}</div>
+              <div class="text-caption">Planned</div>
+            </div>
+          </v-col>
+          <v-col>
+            <div class="rounded-pill bg-grey-lighten-2 mx-auto text-center py-2">
+              <div class="text-h6">{{ project?.statistics?.tasks?.started }}</div>
+              <div class="text-caption">Started</div>
+            </div>
+          </v-col>
+          <v-col>
+            <div class="rounded-pill bg-grey-lighten-1 mx-auto text-center py-2">
+              <div class="text-h6">{{ project?.statistics?.tasks?.completed }}</div>
+              <div class="text-caption">Completed</div>
+            </div>
+          </v-col>
+        </v-row>
+      </section>
+
+      <section class="pb-5">
+        <RouterLink :to="'/projects/' + project?.identifier + '/tasks'">
+          <p class="text-decoration-none">Go to tasks</p>
+        </RouterLink>
+      </section>
+
+      <v-divider />
+
+      <section class="py-5">
+        <p class="text-h6 pb-5">Participants</p>
+        <v-sheet elevation="2">
+          <ParticipantList
+            :participants="project?.participants"
+            @add-participant="emit('addParticipant')"
+            @remove-participant="(value) => emit('removeParticipant', value)"
+          />
+        </v-sheet>
+      </section>
+    </div>
+  </v-navigation-drawer>
+</template>
diff --git a/frontend-new/src/projects/components/ProjectListComponent.vue b/frontend-new/src/projects/components/ProjectListComponent.vue
new file mode 100644
index 00000000..8d068930
--- /dev/null
+++ b/frontend-new/src/projects/components/ProjectListComponent.vue
@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { type Project } from '../api/project-api'
+
+export interface Props {
+  projects: Project[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  projects: new Array<Project>()
+})
+
+const emit = defineEmits(['createProject', 'projectSelected'])
+
+const tableHeight = ref(100)
+const tableContainer = ref()
+
+const headers = [
+  { title: 'Name', align: 'start', key: 'name' },
+  { title: 'Status', align: 'start', key: 'status' },
+  { title: 'Start Date', align: 'start', key: 'startDate' },
+  { title: 'Deadline', align: 'start', key: 'deadline' },
+  { title: 'Actual End Date', align: 'start', key: 'actualEndDate' }
+]
+
+function onResize() {
+  tableHeight.value = window.innerHeight - tableContainer.value.getBoundingClientRect().y - 100
+}
+
+function getStatusColor(value: String): String {
+  if (value === 'ON_TIME') return 'green'
+  if (value === 'DELAYED') return 'red'
+  else return 'grey'
+}
+</script>
+
+<template>
+  <div v-resize="onResize" ref="tableContainer">
+    <v-data-table-virtual
+      :height="tableHeight"
+      :headers="headers"
+      :items="props.projects"
+      :hover="true"
+      item-value="identifier"
+      fixed-header
+      density="compact"
+      :sort-by="[{ key: 'name', order: 'asc' }]"
+      @click:row="
+        (item, row) => {
+          emit('projectSelected', row.item.identifier)
+        }
+      "
+    >
+      <template v-slot:top>
+        <v-toolbar density="compact" class="pr-2">
+          <v-spacer></v-spacer>
+          <v-btn
+            color="primary"
+            density="comfortable"
+            elevation="2"
+            prepend-icon="mdi-plus"
+            rounded="lg"
+            @click="$emit('createProject')"
+          >
+            Project
+          </v-btn>
+        </v-toolbar>
+      </template>
+      <template v-slot:item.status="{ value }">
+        <v-chip :color="getStatusColor(value)" size="small">
+          {{ value }}
+        </v-chip>
+      </template>
+    </v-data-table-virtual>
+  </div>
+</template>
diff --git a/frontend-new/src/projects/components/ProjectRenameModalComponent.vue b/frontend-new/src/projects/components/ProjectRenameModalComponent.vue
new file mode 100644
index 00000000..52ff50ca
--- /dev/null
+++ b/frontend-new/src/projects/components/ProjectRenameModalComponent.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { useMutation } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { ref } from 'vue'
+
+export interface Props {
+  projectIdentifier: string
+  projectVersion: number,
+  projectName: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  projectIdentifier: '',
+  projectVersion: 0,
+  projectName: ''
+})
+
+const emit = defineEmits(['done', 'canceled'])
+
+const dialog = ref(true)
+const projectName = ref(props.projectName)
+
+const form = ref()
+const isFormValid = ref(false)
+const formDisabled = ref(false)
+
+function onOk() {
+  if (isFormValid.value) {
+    renameProject({
+      identifier: props.projectIdentifier,
+      version: props.projectVersion,
+      name: projectName.value
+    })
+      .then(
+        () => {
+          console.info('Done')
+        },
+        () => {
+          console.error('Rejected')
+        }
+      )
+      .finally(() => {
+        dialog.value = false
+        emit('done')
+      })
+    formDisabled.value = true
+  }
+}
+
+function onCancel() {
+  dialog.value = false
+  emit('canceled')
+}
+
+const { mutate: renameProject } = useMutation(
+  gql`
+    mutation renameProject($identifier: ID!, $version: Int!, $name: String!) {
+      renameProject(identifier: $identifier, version: $version, name: $name)
+    }
+  `,
+  { fetchPolicy: 'no-cache' }
+)
+</script>
+
+<template>
+  <div class="text-center pa-4">
+    <v-dialog v-model="dialog" max-width="600" persistent>
+      <v-form ref="form" v-model="isFormValid" :disabled="formDisabled" @submit.prevent>
+        <v-card prepend-icon="mdi-pen" title="Rename Project">
+          <v-card-text>
+            <v-row>
+              <v-col>
+                <v-text-field label="Project Name" v-model="projectName" required />
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-divider />
+          <v-card-actions>
+            <v-btn text="Cancel" @click="onCancel" />
+            <v-btn text="Save" type="submit" :disabled="!isFormValid" @click="onOk" />
+          </v-card-actions>
+        </v-card>
+      </v-form>
+    </v-dialog>
+  </div>
+</template>
diff --git a/frontend-new/src/projects/components/ProjectRescheduleModalComponent.vue b/frontend-new/src/projects/components/ProjectRescheduleModalComponent.vue
new file mode 100644
index 00000000..8c489b60
--- /dev/null
+++ b/frontend-new/src/projects/components/ProjectRescheduleModalComponent.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { toUtcDate } from '@/shared/util/date-utils'
+import { useMutation } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { computed, nextTick, ref, watch, type Ref } from 'vue'
+
+export interface Props {
+  projectIdentifier: string
+  projectVersion: number
+  plannedStartDate: Date
+  deadline: Date
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  projectIdentifier: '',
+  projectName: ''
+})
+
+const emit = defineEmits(['done', 'canceled'])
+
+const dialog = ref(true)
+
+const form = ref()
+const isFormValid = ref(false)
+const formDisabled = ref(false)
+
+function formatDate(date: Date): String {
+  const tzoffset = date.getTimezoneOffset() * 60000 //offset in milliseconds
+  const withoutTimezone = new Date(date.valueOf() - tzoffset)
+  return withoutTimezone.toJSON().substring(0, 10)
+}
+
+const plannedStartDate: Ref<Date> = ref(props.plannedStartDate)
+const plannedStartDateFormated: Ref<String> = computed(() => formatDate(plannedStartDate.value))
+const plannedStartDateRules = [
+  (value: string) => {
+    if (toUtcDate(value) < deadlineDate.value) return true
+    return 'Planned start must be before deadline'
+  }
+]
+watch(plannedStartDate, () => nextTick(form.value.validate()))
+
+const deadlineDate: Ref<Date> = ref(props.deadline)
+const deadlineDateFormated: Ref<String> = computed(() => formatDate(deadlineDate.value))
+const deadlineDateRules = [
+  (value: string) => {
+    if (toUtcDate(value) > plannedStartDate.value) return true
+    return 'Deadline must be after planned start date'
+  }
+]
+watch(deadlineDate, () => nextTick(form.value.validate()))
+
+function onOk() {
+  if (isFormValid.value) {
+    rescheduleProject({
+      identifier: props.projectIdentifier,
+      version: props.projectVersion,
+      startDate: plannedStartDateFormated.value,
+      deadline: deadlineDateFormated.value
+    })
+      .then(
+        () => {
+          console.info('Done')
+        },
+        () => {
+          console.error('Rejected')
+        }
+      )
+      .finally(() => {
+        dialog.value = false
+        emit('done')
+      })
+    formDisabled.value = true
+  }
+}
+
+function onCancel() {
+  dialog.value = false
+  emit('canceled')
+}
+const { mutate: rescheduleProject } = useMutation(
+  gql`
+    mutation rescheduleProject(
+      $identifier: ID!
+      $version: Int!
+      $startDate: Date!
+      $deadline: Date!
+    ) {
+      rescheduleProject(
+        identifier: $identifier
+        version: $version
+        startDate: $startDate
+        deadline: $deadline
+      )
+    }
+  `,
+  { fetchPolicy: 'no-cache' }
+)
+</script>
+
+<template>
+  <div class="text-center pa-4">
+    <v-dialog v-model="dialog" max-width="600" persistent>
+      <v-form ref="form" v-model="isFormValid" :disabled="formDisabled" @submit.prevent>
+        <v-card prepend-icon="mdi-pen" title="Reschedule Project">
+          <v-card-text>
+            <v-row>
+              <v-col>
+                <v-date-input
+                  label="Planned Start Date"
+                  v-model="plannedStartDate"
+                  :rules="plannedStartDateRules"
+                  prepend-icon=""
+                  prepend-inner-icon="$calendar"
+                ></v-date-input>
+              </v-col>
+              <v-col>
+                <v-date-input
+                  label="Deadline Date"
+                  v-model="deadlineDate"
+                  :rules="deadlineDateRules"
+                  prepend-icon=""
+                  prepend-inner-icon="$calendar"
+                ></v-date-input>
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-divider />
+          <v-card-actions>
+            <v-btn text="Cancel" @click="onCancel" />
+            <v-btn text="Save" type="submit" :disabled="!isFormValid" @click="onOk" />
+          </v-card-actions>
+        </v-card>
+      </v-form>
+    </v-dialog>
+  </div>
+</template>
diff --git a/frontend-new/src/projects/pages/ProjectsPage.vue b/frontend-new/src/projects/pages/ProjectsPage.vue
new file mode 100644
index 00000000..746941c6
--- /dev/null
+++ b/frontend-new/src/projects/pages/ProjectsPage.vue
@@ -0,0 +1,185 @@
+<script lang="ts" setup>
+import AddParticipantModal from '@/projects/components/AddParticipantModalComponent.vue'
+import CreateProjectModal from '@/projects/components/ProjectCreateModalComponent.vue'
+import ProjectDrawer from '@/projects/components/ProjectDrawerComponent.vue'
+import ProjectList from '@/projects/components/ProjectListComponent.vue'
+import RenameProjectModal from '@/projects/components/ProjectRenameModalComponent.vue'
+import RescheduleProjectModal from '@/projects/components/ProjectRescheduleModalComponent.vue'
+import MainLayout from '@/shared/layout/MainLayout.vue'
+import { toUtcDate } from '@/shared/util/date-utils'
+import { useQuery, useSubscription } from '@vue/apollo-composable'
+import { computed, ref, watch, type Ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import {
+  GET_PROJECTS,
+  GET_PROJECT_UPDATES,
+  type Project,
+  type ProjectUpdateResult,
+  type ProjectsQueryResults
+} from '../api/project-api'
+
+const route = useRoute()
+const router = useRouter()
+
+const isCreateProjectModalOpen = ref(false)
+const isRenameProjectModalOpen = ref(false)
+const isRescheduleProjectModalOpen = ref(false)
+const isAddParticipantModalOpen = ref(false)
+const isDrawerOpen = ref(false)
+
+const projects: Ref<Project[]> = ref([])
+
+const selectedProjectIdentifier: Ref<string | undefined> = ref(undefined)
+const selectedProject: Ref<Project | undefined> = computed(() =>
+  selectedProjectIdentifier.value !== ''
+    ? projects.value.find((project) => project.identifier === selectedProjectIdentifier.value)
+    : undefined
+)
+
+watch(
+  () => route.params.projectId,
+  (newId: string | string[]) => onRouteChanged(newId),
+  { immediate: true }
+)
+
+function onRouteChanged(newId: string | string[]) {
+  if (newId !== undefined) {
+    selectedProjectIdentifier.value = newId as string
+    isDrawerOpen.value = true
+  } else {
+    isDrawerOpen.value = false
+    selectedProjectIdentifier.value = undefined
+  }
+}
+
+const projectsQuery = useQuery<ProjectsQueryResults>(GET_PROJECTS)
+
+const projectUpdatesQuery = useSubscription<ProjectUpdateResult>(GET_PROJECT_UPDATES)
+
+projectsQuery.onResult((result, _) => {
+  projects.value = result.data.projects
+})
+
+projectUpdatesQuery.onResult((result, _) => {
+  if (result.data !== undefined && result.data !== null) {
+    const tmp = projects.value.filter(
+      (project) => project.identifier !== result.data!!.project.identifier
+    )
+    tmp.push(result.data!!.project)
+    projects.value = tmp
+  }
+})
+
+function onProjectSelected(projectIdentifier: string) {
+  router.push({ path: `/projects/${projectIdentifier}` })
+}
+
+function onDrawerClosed() {
+  isDrawerOpen.value = false
+  router.push('/projects')
+}
+
+function onCreateProject() {
+  isCreateProjectModalOpen.value = true
+}
+
+function onCreateProjectCancelled() {
+  isCreateProjectModalOpen.value = false
+}
+
+function onCreateProjectDone() {
+  isCreateProjectModalOpen.value = false
+}
+
+function onRenameProject() {
+  isRenameProjectModalOpen.value = true
+}
+
+function onRenameProjectCancelled() {
+  isRenameProjectModalOpen.value = false
+}
+
+function onRenameProjectDone() {
+  isRenameProjectModalOpen.value = false
+}
+
+function onRescheduleProject() {
+  isRescheduleProjectModalOpen.value = true
+}
+
+function onRescheduleProjectCancelled() {
+  isRescheduleProjectModalOpen.value = false
+}
+
+function onRescheduleProjectDone() {
+  isRescheduleProjectModalOpen.value = false
+}
+
+function onAddParticipant() {
+  isAddParticipantModalOpen.value = true
+}
+
+function onAddParticipantCancelled() {
+  isAddParticipantModalOpen.value = false
+}
+
+function onAddParticipantDone() {
+  isAddParticipantModalOpen.value = false
+}
+
+function onRemoveParticipant(identifier: string) {
+  alert('This is not yet implemented!')
+}
+</script>
+
+<template>
+  <MainLayout>
+    <section class="px-5">
+      <h1 class="text-h4 my-5">Projects</h1>
+      <v-sheet elevation="2">
+        <ProjectList
+          :projects="projects"
+          @create-project="onCreateProject"
+          @project-selected="onProjectSelected"
+        />
+      </v-sheet>
+    </section>
+    <ProjectDrawer
+      :is-visible="isDrawerOpen"
+      :project="selectedProject!"
+      @add-participant="onAddParticipant"
+      @drawer-closed="onDrawerClosed"
+      @remove-participant="onRemoveParticipant"
+      @rename-project="onRenameProject"
+      @reschedule-project="onRescheduleProject"
+    />
+    <CreateProjectModal
+      v-if="isCreateProjectModalOpen"
+      @canceled="onCreateProjectCancelled"
+      @done="onCreateProjectDone"
+    />
+    <RenameProjectModal
+      v-if="isRenameProjectModalOpen"
+      :project-identifier="selectedProject!.identifier"
+      :project-version="selectedProject!.version"
+      :project-name="selectedProject!.name"
+      @canceled="onRenameProjectCancelled"
+      @done="onRenameProjectDone"
+    />
+    <RescheduleProjectModal
+      v-if="isRescheduleProjectModalOpen"
+      :project-identifier="selectedProject!.identifier"
+      :project-version="selectedProject!.version"
+      :planned-start-date="toUtcDate(selectedProject!.startDate)"
+      :deadline="toUtcDate(selectedProject!.deadline)"
+      @canceled="onRescheduleProjectCancelled"
+      @done="onRescheduleProjectDone"
+    />
+    <AddParticipantModal
+      v-if="isAddParticipantModalOpen"
+      :project-identifier="selectedProject!.identifier"
+      @canceled="onAddParticipantCancelled"
+      @done="onAddParticipantDone"
+    />
+  </MainLayout>
+</template>
diff --git a/frontend-new/src/projects/pages/TasksPage.vue b/frontend-new/src/projects/pages/TasksPage.vue
deleted file mode 100644
index 3e880f46..00000000
--- a/frontend-new/src/projects/pages/TasksPage.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import MainLayout from '@/shared/layout/MainLayout.vue'
-</script>
-
-<template>
-  <MainLayout>
-    <section class="px-5">
-      <h1 class="text-h4 my-5">Tasks</h1>
-      <v-sheet elevation="2"> Here comes the task list </v-sheet>
-    </section>
-  </MainLayout>
-</template>
diff --git a/frontend-new/src/router/index.ts b/frontend-new/src/router/index.ts
index 364525b6..2d90bc21 100644
--- a/frontend-new/src/router/index.ts
+++ b/frontend-new/src/router/index.ts
@@ -12,33 +12,43 @@ const router = createRouter({
     },
     {
       path: '/sign-in',
-      name: 'SignIn',
-      component: () => import('../pages/SignInPage.vue')
+      name: 'signin',
+      component: () => import('../authentication/SignInPage.vue')
     },
     {
       path: '/sign-out',
-      name: 'SignOut',
-      component: () => import('../pages/SignOutPage.vue')
+      name: 'signout',
+      component: () => import('../authentication/SignOutPage.vue')
     },
     {
       path: '/projects',
-      name: 'Projects',
-      component: () => import('../pages/ProjectsPage.vue')
+      name: 'projects',
+      component: () => import('../projects/pages/ProjectsPage.vue')
     },
     {
-      path: '/projects/:id/tasks',
+      path: '/projects/:projectId',
+      name: 'projectdetails',
+      component: () => import('../projects/pages/ProjectsPage.vue')
+    },
+    {
+      path: '/projects/:projectId/tasks',
       name: 'tasks',
-      component: () => import('../projects/pages/TasksPage.vue')
+      component: () => import('../tasks/pages/TasksPage.vue')
+    },
+    {
+      path: '/projects/:projectId/tasks/:taskId',
+      name: 'taskdetails',
+      component: () => import('../tasks/pages/TasksPage.vue')
     },
     {
       path: '/companies',
-      name: 'Companies',
-      component: () => import('../pages/CompaniesPage.vue')
+      name: 'companies',
+      component: () => import('../companies/pages/CompaniesPage.vue')
     },
     {
       path: '/oidc-callback',
-      name: 'OidcCallback',
-      component: () => import('../pages/CallBackPage.vue')
+      name: 'oidccallback',
+      component: () => import('../authentication/CallBackPage.vue')
     }
   ]
 })
@@ -48,12 +58,12 @@ router.beforeEach((to, from) => {
   const user = oidcState.state.value.user
   const isAuthenticated = user !== null && user.expired !== true
   console.log('Vue Router: Navigating from ' + from.path + ' to ' + to.path)
-  if (to.name === 'OidcCallback') {
+  if (to.name === 'oidccallback') {
     return true
   }
-  if (!isAuthenticated && to.name !== 'SignIn') {
+  if (!isAuthenticated && to.name !== 'signin') {
     console.log('User is not authenticated, redirecting to /sign-in')
-    return { name: 'SignIn' }
+    return { name: 'signin' }
   }
 })
 
diff --git a/frontend-new/src/components/UserNameComponent.vue b/frontend-new/src/shared/components/UserNameComponent.vue
similarity index 82%
rename from frontend-new/src/components/UserNameComponent.vue
rename to frontend-new/src/shared/components/UserNameComponent.vue
index 8e2e043a..b7176ef9 100644
--- a/frontend-new/src/components/UserNameComponent.vue
+++ b/frontend-new/src/shared/components/UserNameComponent.vue
@@ -11,6 +11,4 @@ onBeforeMount(() => {
 })
 </script>
 
-<template>
-  <div>Welcome, {{ name }}!</div>
-</template>
+<template>Welcome, {{ name }}!</template>
diff --git a/frontend-new/src/shared/http/graphql-client.ts b/frontend-new/src/shared/http/graphql-client.ts
new file mode 100644
index 00000000..32cf8dc4
--- /dev/null
+++ b/frontend-new/src/shared/http/graphql-client.ts
@@ -0,0 +1,85 @@
+import {
+  ApolloClient,
+  createHttpLink,
+  InMemoryCache,
+  split,
+  type DefaultOptions
+} from '@apollo/client/core'
+import { setContext } from '@apollo/client/link/context'
+import { onError } from '@apollo/client/link/error'
+import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
+import { getMainDefinition } from '@apollo/client/utilities'
+import { logErrorMessages } from '@vue/apollo-util'
+import { createClient } from 'graphql-ws'
+import { useOidcStore } from 'vue3-oidc'
+
+const oidcState = useOidcStore()
+
+// Wrapper to inject bearer token into authentication header
+const authLink = setContext((_, { headers }) => {
+  return {
+    headers: {
+      ...headers,
+      authorization: 'Bearer ' + oidcState.state.value.token
+    }
+  }
+})
+
+// WebSocket connection to the API
+const wsLink = new GraphQLWsLink(
+  createClient({
+    url: 'ws://localhost:8088/wsgraphql',
+    lazy: true,
+    connectionParams: () => {
+      return {
+        Authorization: 'Bearer ' + oidcState.state.value.token
+      }
+    }
+  })
+)
+
+// HTTP connection to the API
+const httpLink = createHttpLink({
+  // You should use an absolute URL here
+  uri: 'http://localhost:8088/graphql'
+})
+
+// Handle errors
+const errorLink = onError((error) => {
+  logErrorMessages(error)
+})
+
+// using the ability to split links, you can send data to each link
+// depending on what kind of operation is being sent
+const link = split(
+  // split based on operation type
+  ({ query }) => {
+    const definition = getMainDefinition(query)
+    return definition.kind === 'OperationDefinition' && definition.operation === 'subscription'
+  },
+  wsLink,
+  errorLink.concat(authLink.concat(httpLink))
+)
+
+// Cache implementation
+const cache = new InMemoryCache()
+
+// Do not cache queries
+const defaultOptions: DefaultOptions = {
+  watchQuery: {
+    fetchPolicy: 'no-cache',
+    errorPolicy: 'ignore'
+  },
+  query: {
+    fetchPolicy: 'no-cache',
+    errorPolicy: 'all'
+  }
+}
+
+// Create the apollo client
+export const apolloClient = new ApolloClient({
+  link: link,
+  cache: cache,
+  connectToDevTools: true,
+  defaultOptions: defaultOptions
+})
diff --git a/frontend-new/src/layout/MainLayout.vue b/frontend-new/src/shared/layout/MainLayout.vue
similarity index 62%
rename from frontend-new/src/layout/MainLayout.vue
rename to frontend-new/src/shared/layout/MainLayout.vue
index 5f2ccd61..62cadbdc 100644
--- a/frontend-new/src/layout/MainLayout.vue
+++ b/frontend-new/src/shared/layout/MainLayout.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, type Ref } from 'vue'
-
-const drawer = ref(false)
+import UserName from '@/shared/components/UserNameComponent.vue'
+const navigationVisible = ref(false)
 
 type MenuItem = {
   title?: string
@@ -13,12 +13,12 @@ type MenuItem = {
 const items: Ref<Array<MenuItem>> = ref([
   {
     title: 'Projects',
-    route: 'projects',
+    route: '/projects',
     icon: 'mdi-flag'
   },
   {
     title: 'Companies',
-    route: 'companies',
+    route: '/companies',
     icon: 'mdi-chart-gant'
   },
   {
@@ -26,7 +26,7 @@ const items: Ref<Array<MenuItem>> = ref([
   },
   {
     title: 'Signout',
-    route: 'sign-out',
+    route: '/sign-out',
     icon: 'mdi-flag'
   }
 ])
@@ -34,12 +34,20 @@ const items: Ref<Array<MenuItem>> = ref([
 
 <template>
   <v-app>
-    <v-app-bar color="primary" prominent>
-      <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+    <v-app-bar color="primary">
+      <template v-slot:prepend>
+        <v-app-bar-nav-icon
+          variant="text"
+          @click.stop="navigationVisible = !navigationVisible"
+        ></v-app-bar-nav-icon>
+      </template>
       <v-toolbar-title>YATT - Axon Showcase</v-toolbar-title>
+      <template v-slot:append>
+        <div class="pa-2"><v-icon icon="mdi-account" /><UserName /></div>
+      </template>
     </v-app-bar>
 
-    <v-navigation-drawer v-model="drawer" temporary>
+    <v-navigation-drawer v-model="navigationVisible" temporary>
       <v-list>
         <v-list-item
           v-for="item in items"
diff --git a/frontend-new/src/shared/util/date-utils.ts b/frontend-new/src/shared/util/date-utils.ts
new file mode 100644
index 00000000..8fd10e5a
--- /dev/null
+++ b/frontend-new/src/shared/util/date-utils.ts
@@ -0,0 +1,12 @@
+export function toUtcDate(value: string): Date {
+  if (value.includes('-')) {
+    const temp: number[] = value.split('-').map(Number)
+    return new Date(Date.UTC(temp[0], temp[1] - 1, temp[2]))
+  } 
+  if (value.includes('/')) {
+    const temp: number[] = value.split('/').map(Number)
+    return new Date(Date.UTC(temp[2], temp[0] - 1, temp[1]))
+  } else {
+    throw ("Undefined date format")
+  }
+}
diff --git a/frontend-new/src/tasks/api/task-api.ts b/frontend-new/src/tasks/api/task-api.ts
new file mode 100644
index 00000000..8a2f8c7b
--- /dev/null
+++ b/frontend-new/src/tasks/api/task-api.ts
@@ -0,0 +1,81 @@
+import type { Participant } from '@/projects/api/project-api'
+import gql from 'graphql-tag'
+
+export type ProjectWithTasks = {
+  identifier: string
+  version: number
+  tasks: Task[]
+}
+
+export type Task = {
+  identifier: string
+  version: number
+  name: string
+  description: string
+  startDate: string
+  endDate: string
+  status: string
+  assignee: Participant
+}
+
+export const GET_PROJECT_WITH_TASKS = gql`
+  query getProjecWithTaskst($projectIdentifier: ID!) {
+    project(identifier: $projectIdentifier) {
+      identifier
+      version
+      tasks {
+        identifier
+        name
+        description
+        startDate
+        endDate
+        status
+        assignee {
+          user {
+            identifier
+            firstname
+            lastname
+            email
+          }
+          company {
+            identifier
+            name
+          }
+        }
+      }
+    }
+  }
+`
+
+export type ProjectWithTasksQueryResult = {
+  project: ProjectWithTasks
+}
+
+export const GET_PROJECT_WITH_PARTICIPANTS = gql`
+  query getProjecWithParticipants($projectIdentifier: ID!) {
+    project(identifier: $projectIdentifier) {
+      participants {
+        identifier
+        user {
+          identifier
+          firstname
+          lastname
+          email
+        }
+        company {
+          identifier
+          name
+        }
+      }
+    }
+  }
+`
+
+export type ProjectWithParticipantsQueryResult = {
+  project: ProjectWithParticipants
+}
+
+export type ProjectWithParticipants = {
+  identifier: string
+  participants: Participant[]
+}
\ No newline at end of file
diff --git a/frontend-new/src/tasks/components/AssignTaskModalComponent.vue b/frontend-new/src/tasks/components/AssignTaskModalComponent.vue
new file mode 100644
index 00000000..95b31dd9
--- /dev/null
+++ b/frontend-new/src/tasks/components/AssignTaskModalComponent.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { Participant } from '@/projects/api/project-api'
+import { gql, type ApolloQueryResult } from '@apollo/client'
+import { useMutation, useQuery } from '@vue/apollo-composable'
+import { ref, type Ref } from 'vue'
+import {
+  GET_PROJECT_WITH_PARTICIPANTS,
+  type ProjectWithParticipantsQueryResult
+} from '../api/task-api'
+
+export interface Props {
+  projectIdentifier: string
+  taskIdentifier: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  projectIdentifier: '',
+  taskIdentifier: ''
+})
+
+const emit = defineEmits(['done', 'canceled'])
+
+const participants: Ref<Participant[]> = ref([])
+const selectedParticipantIdentifier: Ref<string | null> = ref(null)
+const selectedParticipantIdentifierRules = [
+  (value: string) => {
+    if (value !== null) return true
+    return 'Please select a participant'
+  }
+]
+
+const dialog = ref(true)
+const form = ref()
+const isFormValid = ref(false)
+const formDisabled = ref(false)
+
+function onOk() {
+  if (isFormValid.value) {
+    formDisabled.value = true
+    assignTask({
+      identifier: props.taskIdentifier,
+      assignee: selectedParticipantIdentifier.value
+    })
+      .then(
+        () => {
+          console.info('Done')
+        },
+        () => {
+          console.error('Rejected')
+        }
+      )
+      .finally(() => {
+        dialog.value = false
+        emit('done')
+      })
+  }
+}
+
+function onCancel() {
+  dialog.value = false
+  emit('canceled')
+}
+
+const { mutate: assignTask } = useMutation(
+  gql`
+    mutation assignTask($identifier: ID!, $assignee: ID!) {
+      assignTask(identifier: $identifier, assignee: $assignee)
+    }
+  `,
+  { fetchPolicy: 'no-cache' }
+)
+
+const projectWithParticipantsQuery = useQuery(GET_PROJECT_WITH_PARTICIPANTS, () => ({
+  projectIdentifier: props.projectIdentifier
+}))
+
+projectWithParticipantsQuery.onResult(
+  (result: ApolloQueryResult<ProjectWithParticipantsQueryResult>, _) => {
+    participants.value = result?.data?.project?.participants
+  }
+)
+
+function participantDisplayName(item: Participant): string {
+  return item.user.firstname + ' ' + item.user.lastname + ' (' + item.company.name + ')'
+}
+</script>
+
+<template>
+  <div class="text-center pa-4">
+    <v-dialog v-model="dialog" max-width="600" persistent>
+      <v-form ref="form" v-model="isFormValid" @submit.prevent>
+        <v-card prepend-icon="mdi-rotate-3d-variant" title="Assign Task">
+          <v-card-text>
+            <v-row>
+              <v-col>
+                <v-select
+                  label="Participant"
+                  :items="participants"
+                  :rules="selectedParticipantIdentifierRules"
+                  :item-title="(item: Participant) => participantDisplayName(item)"
+                  item-value="identifier"
+                  v-model="selectedParticipantIdentifier"
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-divider />
+          <v-card-actions>
+            <v-btn text="Cancel" @click="onCancel" />
+            <v-btn text="Save" type="submit" :disabled="!isFormValid" @click="onOk" />
+          </v-card-actions>
+        </v-card>
+      </v-form>
+    </v-dialog>
+  </div>
+</template>
diff --git a/frontend-new/src/tasks/components/TaskDrawerComponent.vue b/frontend-new/src/tasks/components/TaskDrawerComponent.vue
new file mode 100644
index 00000000..29bb05e3
--- /dev/null
+++ b/frontend-new/src/tasks/components/TaskDrawerComponent.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { type Task } from '../api/task-api'
+
+export interface Props {
+  isVisible: boolean
+  task?: Task
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isVisible: false
+})
+
+const emit = defineEmits([
+  'drawerClosed',
+  'assignTask',
+  'redescribeTask',
+  'renameTask',
+  'rescheduleTask',
+  'unassignTask'
+])
+
+function closeDrawer(value: Boolean) {
+  if (value === false) {
+    emit('drawerClosed')
+  }
+}
+
+function getStatusColor(value: String): String {
+  if (value === 'COMPLETED') return 'green'
+  else return 'grey'
+}
+</script>
+
+<template>
+  <v-navigation-drawer
+    location="right"
+    v-model="props.isVisible"
+    temporary
+    disable-route-watcher
+    width="800"
+    @update:model-value="(value: Boolean) => closeDrawer(value)"
+  >
+    <div class="pa-5">
+      <section class="pb-5">
+        <div class="d-flex justify-space-between">
+          <div>
+            <h2 class="text-h5">Task Details</h2>
+          </div>
+          <div>
+            <v-chip v-if="task?.status" :color="getStatusColor(task?.status)">
+              {{ task?.status }}
+            </v-chip>
+          </div>
+        </div>
+        <p class="text-caption">ID: {{ task?.identifier }}</p>
+      </section>
+
+      <v-divider />
+
+      <section class="py-5">
+        <v-row>
+          <v-col>
+            <p><b>Name:</b></p>
+            <div class="d-flex align-center">
+              <div class="pr-2">{{ task?.name }}</div>
+              <v-icon icon="mdi-pencil" size="x-small" @click="$emit('renameTask')" />
+            </div>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            <p><b>Description:</b></p>
+            <div class="d-flex align-center">
+              <div class="pr-2">{{ task?.description }}</div>
+              <v-icon icon="mdi-pencil" size="x-small" @click="$emit('redescribeTask')" />
+            </div>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col c>
+            <p><b>Start Date:</b></p>
+            <div class="d-flex align-center">
+              <div class="pr-2">{{ task?.startDate }}</div>
+              <v-icon icon="mdi-pencil" size="x-small" @click="$emit('rescheduleTask')" />
+            </div>
+          </v-col>
+          <v-col>
+            <p><b>End Date::</b></p>
+            <div class="d-flex align-center">
+              <div class="pr-2">{{ task?.endDate }}</div>
+              <v-icon icon="mdi-pencil" size="x-small" @click="$emit('rescheduleTask')" />
+            </div>
+          </v-col>
+        </v-row>
+      </section>
+
+      <v-divider />
+
+      <section class="py-5">
+        <v-row>
+          <v-col>
+            <p><b>Assignee:</b></p>
+            <div class="d-flex align-center">
+              <div class="pr-2">
+                {{ task?.assignee?.user?.firstname }} {{ task?.assignee?.user?.lastname }} ({{
+                  task?.assignee?.company?.name
+                }})
+              </div>
+              <v-icon icon="mdi-pencil" size="x-small" @click="$emit('assignTask')" />
+              <v-icon icon="mdi-delete" size="x-small" @click="$emit('unassignTask')" />
+            </div>
+          </v-col>
+        </v-row>
+      </section>
+
+      <v-divider />
+
+      <section class="py-5">
+        <h5 class="text-h6">ToDo's</h5>
+      </section>
+    </div>
+  </v-navigation-drawer>
+</template>
diff --git a/frontend-new/src/tasks/components/TaskListComponent.vue b/frontend-new/src/tasks/components/TaskListComponent.vue
new file mode 100644
index 00000000..e33ccf9e
--- /dev/null
+++ b/frontend-new/src/tasks/components/TaskListComponent.vue
@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import { shallowRef } from 'vue';
+import { type Task } from '../api/task-api';
+
+export interface Props {
+  loading: boolean
+  tasks: Task[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: true,
+  tasks: new Array<Task>()
+})
+
+const emit = defineEmits(['createTask', 'taskSelected'])
+
+const tableHeight = shallowRef(100)
+const tableContainer = shallowRef()
+
+const headers = [
+  { title: 'Name', align: 'start', key: 'name' },
+  { title: 'Status', align: 'start', key: 'status' },
+  { title: 'Start Date', align: 'start', key: 'startDate' },
+  { title: 'End Date', align: 'start', key: 'endDate' }
+]
+
+function onResize() {
+  tableHeight.value = window.innerHeight - tableContainer.value.getBoundingClientRect().y - 100
+}
+
+function getStatusColor(value: String): String {
+  if (value === 'DONE') return 'green'
+  else return 'grey'
+}
+</script>
+
+<template>
+  <div v-resize="onResize" ref="tableContainer">
+    <v-data-table-virtual
+      :height="tableHeight"
+      :headers="headers"
+      :items="props.tasks"
+      :hover="true"
+      :loading="props.loading"
+      item-value="identifier"
+      fixed-header
+      density="compact"
+      :sort-by="[{ key: 'name', order: 'asc' }]"
+      @click:row="
+        (item, row) => {
+          emit('taskSelected', row.item.identifier)
+        }
+      "
+    >
+      <template v-slot:top>
+        <v-toolbar density="compact" class="pr-2">
+          <v-spacer></v-spacer>
+          <v-btn
+            color="primary"
+            density="comfortable"
+            elevation="2"
+            prepend-icon="mdi-plus"
+            rounded="lg"
+            @click="$emit('createTask')"
+          >
+            Task
+          </v-btn>
+        </v-toolbar>
+      </template>
+      <template v-slot:loading>
+        <v-skeleton-loader type="table-row@4"/>
+      </template>
+      <template v-slot:item.status="{ value }">
+        <v-chip :color="getStatusColor(value)" size="small">
+          {{ value }}
+        </v-chip>
+      </template>
+    </v-data-table-virtual>
+  </div>
+</template>
diff --git a/frontend-new/src/tasks/pages/TasksPage.vue b/frontend-new/src/tasks/pages/TasksPage.vue
new file mode 100644
index 00000000..e3ae0197
--- /dev/null
+++ b/frontend-new/src/tasks/pages/TasksPage.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import MainLayout from '@/shared/layout/MainLayout.vue'
+import TaskDrawer from '@/tasks/components/TaskDrawerComponent.vue'
+import TaskList from '@/tasks/components/TaskListComponent.vue'
+import AssignTaskModal from '../components/AssignTaskModalComponent.vue'
+import { useQuery } from '@vue/apollo-composable'
+import { computed, ref, watch, type Ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import {
+  GET_PROJECT_WITH_TASKS,
+  type ProjectWithTasksQueryResult,
+  type Task
+} from '../api/task-api'
+
+const route = useRoute()
+const router = useRouter()
+
+const isCreateTasktModalOpen = ref(false)
+const isAssignTaskModalOpen = ref(false)
+const isDrawerOpen = ref(false)
+
+const selectedTaskIdentifier: Ref<string | undefined> = ref(undefined)
+const selectedTask: Ref<Task | undefined> = computed(() =>
+  selectedTaskIdentifier.value !== ''
+    ? tasks.value.find((task) => task.identifier === selectedTaskIdentifier.value)
+    : undefined
+)
+
+const tasks: Ref<Task[]> = ref([])
+const loading: Ref<boolean> = ref(true)
+
+watch(
+  () => route.params.taskId,
+  (newId: string | string[]) => onRouteChanged(newId),
+  { immediate: true }
+)
+
+function onRouteChanged(newId: string | string[]) {
+  if (newId !== undefined) {
+    selectedTaskIdentifier.value = newId as string
+    isDrawerOpen.value = true
+  } else {
+    isDrawerOpen.value = false
+    selectedTaskIdentifier.value = undefined
+  }
+}
+
+const projectWithTasksQuery = useQuery<ProjectWithTasksQueryResult>(GET_PROJECT_WITH_TASKS, () => ({
+  projectIdentifier: route.params.projectId
+}))
+
+projectWithTasksQuery.onResult((result, _) => {
+  loading.value = false
+  tasks.value = result.data.project.tasks
+})
+
+function onTaskSelected(taskIdentifier: string) {
+  router.push({ path: `/projects/${route.params.projectId}/tasks/${taskIdentifier}` })
+}
+
+function onDrawerClosed() {
+  isDrawerOpen.value = false
+  router.push({ path: `/projects/${route.params.projectId}/tasks` })
+}
+
+function onCreateTask() {
+  isCreateTasktModalOpen.value = true
+}
+
+function onCreateTaskCancelled() {
+  isCreateTasktModalOpen.value = false
+}
+
+function onCreateTaskDone() {
+  isCreateTasktModalOpen.value = false
+}
+
+function onAssignTask() {
+  isAssignTaskModalOpen.value = true
+}
+
+function onAssignTaskDone() {
+  isAssignTaskModalOpen.value = false
+}
+
+function onAssignTaskCancelled() {
+  isAssignTaskModalOpen.value = false
+}
+
+function onUnassignTask() {
+  alert('Not yet implemented')
+}
+
+function onRenameTask() {
+  alert('Not yet implemented')
+}
+
+function onRedescribeTask() {
+  alert('Not yet implemented')
+}
+
+function onRescheduleTask() {
+  alert('Not yet implemented')
+}
+</script>
+
+<template>
+  <MainLayout>
+    <section class="px-5">
+      <h1 class="text-h4 my-5">Tasks</h1>
+      <v-sheet elevation="2">
+        <TaskList
+          :tasks="tasks"
+          :loading="loading"
+          @create-task="onCreateTask"
+          @task-selected="onTaskSelected"
+        />
+      </v-sheet>
+    </section>
+    <TaskDrawer
+      :is-visible="isDrawerOpen"
+      :task="selectedTask!"
+      @drawer-closed="onDrawerClosed"
+      @assign-task="onAssignTask"
+      @unassign-task="onUnassignTask"
+      @rename-task="onRenameTask"
+      @redescribe-task="onRedescribeTask"
+      @reschedule-task="onRescheduleTask"
+    />
+    <AssignTaskModal
+      v-if="isAssignTaskModalOpen"
+      :project-identifier="route.params.projectId as string"
+      :task-identifier="selectedTaskIdentifier"
+      @canceled="onAssignTaskCancelled"
+      @done="onAssignTaskDone"
+    />
+  </MainLayout>
+</template>
diff --git a/frontend-new/vite.config.ts b/frontend-new/vite.config.ts
index bd1a78ca..3afd3e2d 100644
--- a/frontend-new/vite.config.ts
+++ b/frontend-new/vite.config.ts
@@ -3,6 +3,7 @@ import { fileURLToPath, URL } from 'node:url'
 import vue from '@vitejs/plugin-vue'
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
 import VueDevTools from 'vite-plugin-vue-devtools'
 import vuetify from 'vite-plugin-vuetify'