diff --git a/.gitignore b/.gitignore
index 9ffe02b..87e8821 100644
--- a/.gitignore
+++ b/.gitignore
@@ -109,3 +109,7 @@ Temporary Items
 /api/tests/_*
 /api/tests/*.suite.yml
 /api/.env
+/ui/static/print.css*
+/ui/static/global.css*
+/ui/static/bundle.css*
+/ui/.svelte-kit/
diff --git a/api/Dockerfile b/api/Dockerfile
index 4d8c4ea..e269c7e 100644
--- a/api/Dockerfile
+++ b/api/Dockerfile
@@ -1,4 +1,4 @@
-FROM php:8.0-apache
+FROM php:8.4-apache-bookworm
 
 RUN apt update && apt install -y libpq-dev
 RUN docker-php-ext-install -j$(nproc) pdo pdo_pgsql
diff --git a/api/composer.json b/api/composer.json
index d4a5b86..b1712b5 100644
--- a/api/composer.json
+++ b/api/composer.json
@@ -16,21 +16,22 @@
         }
     ],
     "require": {
+        "php": "8.4.*",
         "slim/slim": "^4.7.1",
-        "vlucas/phpdotenv": "^4.2",
-        "slim/psr7": "^1.3",
+        "vlucas/phpdotenv": "^v5.6.1",
+        "slim/psr7": "^1.7.0",
         "php-di/slim-bridge": "^3.1.0",
         "jetbrains/phpstorm-attributes": "^1.0.0",
         "myclabs/php-enum": "^1.8.0",
         "ext-pdo": "*"
     },
     "require-dev": {
-        "phpstan/phpstan": "^0.12.80",
-        "codeception/codeception": "^4.1.18",
-        "codeception/module-phpbrowser": "^1.0.0",
-        "codeception/module-asserts": "^1.0.0",
-        "codeception/module-db": "^1.1.0",
-        "codeception/module-rest": "^1.2.8"
+        "phpstan/phpstan": "^2.1.12",
+        "codeception/codeception": "^5.2.1",
+        "codeception/module-phpbrowser": "^3.0.1",
+        "codeception/module-asserts": "^3.1.0",
+        "codeception/module-db": "^3.2.2",
+        "codeception/module-rest": "^3.4.1"
     },
     "autoload": {
         "psr-4": {
diff --git a/api/html/index.php b/api/html/index.php
index cbd9aca..addc91c 100644
--- a/api/html/index.php
+++ b/api/html/index.php
@@ -17,7 +17,7 @@ use TorstenHettstedt\TimekeepingApi\Middleware\OriginAccessControlHandler;
 $container = new Container();
 
 $container->set('databases', function () {
-    $dsn = "pgsql:host=${_ENV['DATABASES_HOST']};port=5432;dbname=${_ENV['DATABASES_NAME']}";
+    $dsn = "pgsql:host={$_ENV['DATABASES_HOST']};port=5432;dbname={$_ENV['DATABASES_NAME']}";
     return new PDO($dsn, $_ENV['DATABASES_USER'], $_ENV['DATABASES_PASS']);
 });
 
diff --git a/api/src/Controller/AbstractController.php b/api/src/Controller/AbstractController.php
index c0cf8a9..b9af4ce 100644
--- a/api/src/Controller/AbstractController.php
+++ b/api/src/Controller/AbstractController.php
@@ -4,7 +4,9 @@ namespace TorstenHettstedt\TimekeepingApi\Controller;
 
 use JsonSerializable;
 use PDO;
+use Psr\Container\ContainerExceptionInterface;
 use Psr\Container\ContainerInterface;
+use Psr\Container\NotFoundExceptionInterface;
 use Slim\Psr7\Response;
 
 abstract class AbstractController
@@ -18,6 +20,8 @@ abstract class AbstractController
      * @param ContainerInterface $container
      *
      * @throws NotDatabasesException
+     * @throws ContainerExceptionInterface
+     * @throws NotFoundExceptionInterface
      */
     public function __construct(ContainerInterface $container)
     {
@@ -34,7 +38,8 @@ abstract class AbstractController
      *
      * @return Response
      */
-    protected function printResponse(Response $response, mixed $data, int $status_code): Response {
+    protected function printResponse(Response $response, mixed $data, int $status_code): Response
+    {
         $payload = json_encode($data);
 
         $response->getBody()->write($payload);
diff --git a/api/src/Controller/HttpConflictRequestException.php b/api/src/Controller/HttpConflictRequestException.php
index f995249..8315fe4 100644
--- a/api/src/Controller/HttpConflictRequestException.php
+++ b/api/src/Controller/HttpConflictRequestException.php
@@ -8,13 +8,8 @@ class HttpConflictRequestException extends HttpSpecializedException
 {
     /** @var int */
     protected $code = 409;
-
     /** @var string */
     protected $message = 'Conflict.';
-
-    /** @var string  */
-    protected $title = '409 Conflict';
-
-    /** @var string  */
-    protected $description = 'The 409 (Conflict) status code indicates that the request could not be completed due to a conflict with the current state of the target resource.';
+    protected string $title = '409 Conflict';
+    protected string $description = 'The 409 (Conflict) status code indicates that the request could not be completed due to a conflict with the current state of the target resource.';
 }
diff --git a/api/src/Controller/PreflightController.php b/api/src/Controller/PreflightController.php
index 1ac6bf9..d017f7a 100644
--- a/api/src/Controller/PreflightController.php
+++ b/api/src/Controller/PreflightController.php
@@ -11,6 +11,7 @@ use TorstenHettstedt\TimekeepingApi\Middleware\OriginAccessControlHandler;
 
 class PreflightController
 {
+    /** @noinspection PhpUnused */
     public function preflight(Request $request, Response $response): ResponseInterface
     {
         return (new OriginAccessControlHandler())->originAccessControl($request, $response);
diff --git a/api/src/Controller/WorkingHoursController.php b/api/src/Controller/WorkingHoursController.php
index be291db..7b14b97 100644
--- a/api/src/Controller/WorkingHoursController.php
+++ b/api/src/Controller/WorkingHoursController.php
@@ -21,9 +21,9 @@ class WorkingHoursController extends AbstractController
 {
 
     /**
-     * @param Request  $request
-     * @param Response $response
-     * @param mixed[]  $args
+     * @param Request              $request
+     * @param Response             $response
+     * @param array<string, mixed> $args
      *
      * @return Response
      *
@@ -44,9 +44,9 @@ class WorkingHoursController extends AbstractController
     }
 
     /**
-     * @param Request  $request
-     * @param Response $response
-     * @param mixed[]  $args
+     * @param Request              $request
+     * @param Response             $response
+     * @param array<string, mixed> $args
      *
      * @return Response
      *
@@ -59,21 +59,29 @@ class WorkingHoursController extends AbstractController
         $repository = new WorkingHoursRepository($this->databases);
         $queryParams = $request->getQueryParams();
         try {
-            return $this->printResponse($response, $repository->findFiltered(
-                $queryParams['start-date'] ?? null,
-                $queryParams['end-date'] ?? null
-            ), StatusCodeInterface::STATUS_OK);
+            return $this->printResponse(
+                $response,
+                $repository->findFiltered(
+                    $queryParams['start-date'] ?? null,
+                    $queryParams['end-date'] ?? null
+                ),
+                StatusCodeInterface::STATUS_OK
+            );
         } catch (RepositoryBadWhereDataException $exception) {
             throw new HttpBadRequestException($request, 'Ein Wert für das Datum im Query ist ungültig', $exception);
         } catch (Exception $exception) {
-            throw new HttpInternalServerErrorException($request, 'Der Wert für das Datum oder die Zeit ist falsch in der Datenbank', $exception);
+            throw new HttpInternalServerErrorException(
+                $request,
+                'Der Wert für das Datum oder die Zeit ist falsch in der Datenbank',
+                $exception
+            );
         }
     }
 
     /**
-     * @param Request  $request
-     * @param Response $response
-     * @param mixed[]  $args
+     * @param Request              $request
+     * @param Response             $response
+     * @param array<string, mixed> $args
      *
      * @return Response
      *
@@ -88,14 +96,18 @@ class WorkingHoursController extends AbstractController
         } catch (RepositoryRecordNotFoundException $exception) {
             throw new HttpNotFoundException($request, 'Der Eintrag ist nicht vorhanden.', $exception);
         } catch (Exception $exception) {
-            throw new HttpInternalServerErrorException($request, 'Der Wert für das Datum oder die Zeit ist falsch in der Datenbank', $exception);
+            throw new HttpInternalServerErrorException(
+                $request,
+                'Der Wert für das Datum oder die Zeit ist falsch in der Datenbank',
+                $exception
+            );
         }
     }
 
     /**
-     * @param Request  $request
-     * @param Response $response
-     * @param mixed[]  $args
+     * @param Request              $request
+     * @param Response             $response
+     * @param array<string, mixed> $args
      *
      * @return Response
      *
@@ -114,7 +126,11 @@ class WorkingHoursController extends AbstractController
         } catch (RepositoryRecordAlreadyExistException $exception) {
             throw new HttpConflictRequestException($request, 'Der Eintrag ist schon vorhanden.', $exception);
         } catch (Exception $exception) {
-            throw new HttpInternalServerErrorException($request, 'Der Wert für das Datum oder die Zeit ist falsch in der Datenbank', $exception);
+            throw new HttpInternalServerErrorException(
+                $request,
+                'Der Wert für das Datum oder die Zeit ist falsch in der Datenbank',
+                $exception
+            );
         }
         return $this->printResponse($response, $model, StatusCodeInterface::STATUS_CREATED);
     }
diff --git a/api/src/Controller/WorkingHoursViewController.php b/api/src/Controller/WorkingHoursViewController.php
index 917b163..ff26ca0 100644
--- a/api/src/Controller/WorkingHoursViewController.php
+++ b/api/src/Controller/WorkingHoursViewController.php
@@ -15,9 +15,9 @@ use TorstenHettstedt\TimekeepingApi\Repositories\WorkingHoursYearlyViewRepositor
 class WorkingHoursViewController extends AbstractController
 {
     /**
-     * @param Request  $request
-     * @param Response $response
-     * @param mixed[]  $args
+     * @param Request              $request
+     * @param Response             $response
+     * @param array<string, mixed> $args
      *
      * @return Response
      *
@@ -30,15 +30,17 @@ class WorkingHoursViewController extends AbstractController
         try {
             return $this->printResponse($response, $repository->findAll(), StatusCodeInterface::STATUS_OK);
         } catch (Exception $exception) {
-            throw new HttpInternalServerErrorException($request,
-                'Der Wert für das Datum oder die Zeit ist falsch in der Datenbank', $exception);
+            throw new HttpInternalServerErrorException(
+                $request,
+                'Der Wert für das Datum oder die Zeit ist falsch in der Datenbank', $exception
+            );
         }
     }
 
     /**
-     * @param Request  $request
-     * @param Response $response
-     * @param mixed[]  $args
+     * @param Request              $request
+     * @param Response             $response
+     * @param array<string, mixed> $args
      *
      * @return Response
      *
@@ -51,15 +53,17 @@ class WorkingHoursViewController extends AbstractController
         try {
             return $this->printResponse($response, $repository->findAll(), StatusCodeInterface::STATUS_OK);
         } catch (Exception $exception) {
-            throw new HttpInternalServerErrorException($request,
-                'Der Wert für das Datum oder die Zeit ist falsch in der Datenbank', $exception);
+            throw new HttpInternalServerErrorException(
+                $request,
+                'Der Wert für das Datum oder die Zeit ist falsch in der Datenbank', $exception
+            );
         }
     }
 
     /**
-     * @param Request  $request
-     * @param Response $response
-     * @param mixed[]  $args
+     * @param Request              $request
+     * @param Response             $response
+     * @param array<string, mixed> $args
      *
      * @return Response
      *
@@ -72,8 +76,10 @@ class WorkingHoursViewController extends AbstractController
         try {
             return $this->printResponse($response, $repository->findAll(), StatusCodeInterface::STATUS_OK);
         } catch (Exception $exception) {
-            throw new HttpInternalServerErrorException($request,
-                'Der Wert für das Datum oder die Zeit ist falsch in der Datenbank', $exception);
+            throw new HttpInternalServerErrorException(
+                $request,
+                'Der Wert für das Datum oder die Zeit ist falsch in der Datenbank', $exception
+            );
         }
     }
 
diff --git a/api/src/Middleware/ErrorHandler.php b/api/src/Middleware/ErrorHandler.php
index 80d5f15..38985df 100644
--- a/api/src/Middleware/ErrorHandler.php
+++ b/api/src/Middleware/ErrorHandler.php
@@ -1,10 +1,12 @@
-<?php /** @noinspection PhpUndefinedClassInspection */
+<?php
+/** @noinspection PhpUndefinedClassInspection */
 
 
 namespace TorstenHettstedt\TimekeepingApi\Middleware;
 
 
 use JetBrains\PhpStorm\ArrayShape;
+use Psr\Container\ContainerInterface;
 use Psr\Http\Message\ResponseInterface;
 use Psr\Http\Message\ServerRequestInterface;
 use Psr\Log\LoggerInterface;
@@ -14,12 +16,15 @@ use Throwable;
 
 class ErrorHandler
 {
+    /**
+     * @var App<ContainerInterface>
+     */
     protected App $app;
 
     /**
      * ErrorHandler constructor.
      *
-     * @param App $app
+     * @param App<ContainerInterface> $app
      */
     public function __construct(App $app)
     {
@@ -29,7 +34,7 @@ class ErrorHandler
     /**
      * @param Throwable $exception
      *
-     * @return mixed[]
+     * @return array<string, mixed>
      */
     #[ArrayShape([
         'timestamp' => "false|string",
@@ -71,8 +76,7 @@ class ErrorHandler
         bool $logErrors,
         bool $logErrorDetails,
         ?LoggerInterface $logger = null
-    ): ResponseInterface
-    {
+    ): ResponseInterface {
         if ($logger !== null && $logErrors === true) {
             $logger->error($exception->getMessage());
         }
diff --git a/api/src/Middleware/JsonBodyParserMiddleware.php b/api/src/Middleware/JsonBodyParserMiddleware.php
index 1c020e6..e09d5ec 100644
--- a/api/src/Middleware/JsonBodyParserMiddleware.php
+++ b/api/src/Middleware/JsonBodyParserMiddleware.php
@@ -13,7 +13,7 @@ class JsonBodyParserMiddleware implements MiddlewareInterface
     {
         $contentType = $request->getHeaderLine('Content-Type');
 
-        if (strstr($contentType, 'application/json')) {
+        if (str_contains($contentType, 'application/json')) {
             $contents = json_decode(file_get_contents('php://input'), true);
             if (json_last_error() === JSON_ERROR_NONE) {
                 $request = $request->withParsedBody($contents);
diff --git a/api/src/Middleware/OriginAccessControlHandler.php b/api/src/Middleware/OriginAccessControlHandler.php
index a62de79..6eb301c 100644
--- a/api/src/Middleware/OriginAccessControlHandler.php
+++ b/api/src/Middleware/OriginAccessControlHandler.php
@@ -28,15 +28,14 @@ class OriginAccessControlHandler implements MiddlewareInterface
 
     public function originAccessControl(Request $request, Response $response): Response
     {
-
         $routeContext = RouteContext::fromRequest($request);
         $routingResults = $routeContext->getRoutingResults();
         $methods = $routingResults->getAllowedMethods();
         $requestHeaders = $request->getHeaderLine('Access-Control-Request-Headers');
 
         if ($this->testRoute($request)) {
-            //                     Stunden   Minuten   Sekunden
-            $accessControlMaxAge = 24      * 60      * 60;
+            //                     Stunden Minuten Sekunden
+            $accessControlMaxAge = 24    * 60    * 60;
             $response = $response->withHeader('Access-Control-Allow-Origin', $this->buildOrigin($request));
             $response = $response->withHeader('Access-Control-Allow-Methods', implode(',', $methods));
             $response = $response->withHeader('Access-Control-Allow-Headers', $requestHeaders);
@@ -53,6 +52,6 @@ class OriginAccessControlHandler implements MiddlewareInterface
 
     protected function buildOrigin(Request $request): string
     {
-        return $request->getHeaderLine('Origin') ?? '';
+        return $request->getHeaderLine('Origin');
     }
 }
\ No newline at end of file
diff --git a/api/src/Models/PeriodDesignationEnum.php b/api/src/Models/PeriodDesignationEnum.php
index 8efffb6..b0d93a7 100644
--- a/api/src/Models/PeriodDesignationEnum.php
+++ b/api/src/Models/PeriodDesignationEnum.php
@@ -1,23 +1,16 @@
-<?php /** @noinspection PhpUnusedPrivateFieldInspection */
+<?php
+/** @noinspection PhpUnusedPrivateFieldInspection */
 
 
 namespace TorstenHettstedt\TimekeepingApi\Models;
 
-use MyCLabs\Enum\Enum;
-
 /**
  * Enum-Klasse für die unterstützten Periode-Definitionen.
  * Der Wert der Periode ist ein Format-String für {@link https://secure.php.net/manual/en/datetime.format.php}.
- *
- * @extends Enum<string>
- *
- * @method static PeriodDesignationEnum WEEKLY()
- * @method static PeriodDesignationEnum MONTHLY()
- * @method static PeriodDesignationEnum YEARLY()
  */
-class PeriodDesignationEnum extends Enum
+enum PeriodDesignationEnum: string
 {
-    private const WEEKLY = 'Y#W';
-    private const MONTHLY = 'Y-m';
-    private const YEARLY = 'Y';
+    case WEEKLY  = 'Y#W';
+    case MONTHLY = 'Y-m';
+    case YEARLY  = 'Y';
 }
\ No newline at end of file
diff --git a/api/src/Models/WorkingHours.php b/api/src/Models/WorkingHours.php
index e485f31..e55e5b4 100644
--- a/api/src/Models/WorkingHours.php
+++ b/api/src/Models/WorkingHours.php
@@ -10,42 +10,26 @@ use JetBrains\PhpStorm\ArrayShape;
 
 class WorkingHours implements ModelInterface
 {
-    protected ?DateTime $workingDay = null;
+    protected ?DateTime     $workingDay  = null;
     protected ?DateInterval $workingTime = null;
 
-    /**
-     * @return DateTime|null
-     */
     public function getWorkingDay(): ?DateTime
     {
         return $this->workingDay;
     }
 
-    /**
-     * @param DateTime $workingDay
-     *
-     * @return WorkingHours
-     */
-    public function setWorkingDay(DateTime $workingDay): WorkingHours
+    public function setWorkingDay(DateTime $workingDay): static
     {
         $this->workingDay = $workingDay;
         return $this;
     }
 
-    /**
-     * @return DateInterval|null
-     */
     public function getWorkingTime(): ?DateInterval
     {
         return $this->workingTime;
     }
 
-    /**
-     * @param DateInterval $workingTime
-     *
-     * @return WorkingHours
-     */
-    public function setWorkingTime(DateInterval $workingTime): WorkingHours
+    public function setWorkingTime(DateInterval $workingTime): static
     {
         $this->workingTime = $workingTime;
         return $this;
@@ -58,7 +42,7 @@ class WorkingHours implements ModelInterface
     public function jsonSerialize(): array
     {
         return [
-            'workingDay' => $this->getWorkingDay()->format('Y-m-d'),
+            'workingDay'  => $this->getWorkingDay()->format('Y-m-d'),
             'workingTime' => $this->getWorkingTime()->format('%H:%I:%S')
         ];
     }
diff --git a/api/src/Models/WorkingHoursView.php b/api/src/Models/WorkingHoursView.php
index b229ec8..77bf15d 100644
--- a/api/src/Models/WorkingHoursView.php
+++ b/api/src/Models/WorkingHoursView.php
@@ -10,70 +10,36 @@ use JetBrains\PhpStorm\ArrayShape;
 
 class WorkingHoursView implements ModelInterface
 {
-    protected DateTimeInterface $period;
-    protected PeriodDesignationEnum $periodDesignation;
-    protected int $workingDays;
-    protected DateInterval $totalHours;
-    protected DateInterval $overtime;
 
-    /**
-     * WorkingHoursView constructor.
-     *
-     * @param DateTimeInterface     $period
-     * @param PeriodDesignationEnum $periodDesignation
-     * @param int                   $workingDays
-     * @param DateInterval          $totalHours
-     * @param DateInterval          $overtime
-     */
     public function __construct(
-        DateTimeInterface $period,
-        PeriodDesignationEnum $periodDesignation,
-        int $workingDays,
-        DateInterval $totalHours,
-        DateInterval $overtime
+        protected DateTimeInterface $period,
+        protected PeriodDesignationEnum $periodDesignation,
+        protected int $workingDays,
+        protected DateInterval $totalHours,
+        protected DateInterval $overtime
     ) {
-        $this->period = $period;
-        $this->periodDesignation = $periodDesignation;
-        $this->workingDays = $workingDays;
-        $this->totalHours = $totalHours;
-        $this->overtime = $overtime;
     }
 
-    /**
-     * @return DateTimeInterface
-     */
     public function getPeriod(): DateTimeInterface
     {
         return $this->period;
     }
 
-    /**
-     * @return PeriodDesignationEnum
-     */
     public function getPeriodDesignation(): PeriodDesignationEnum
     {
         return $this->periodDesignation;
     }
 
-    /**
-     * @return int
-     */
     public function getWorkingDays(): int
     {
         return $this->workingDays;
     }
 
-    /**
-     * @return DateInterval
-     */
     public function getTotalHours(): DateInterval
     {
         return $this->totalHours;
     }
 
-    /**
-     * @return DateInterval
-     */
     public function getOvertime(): DateInterval
     {
         return $this->overtime;
@@ -84,17 +50,19 @@ class WorkingHoursView implements ModelInterface
      *
      * @return array<string, mixed>
      */
-    #[ArrayShape(['period'            => "string",
-                  'periodDesignation' => "string",
-                  'totalHours'        => "string",
-                  'workingDays'       => "int",
-                  'overtime'          => "string"
-    ])] public function jsonSerialize(): array
+    #[ArrayShape([
+        'period'            => "string",
+        'periodDesignation' => "string",
+        'totalHours'        => "string",
+        'workingDays'       => "int",
+        'overtime'          => "string"
+    ])]
+    public function jsonSerialize(): array
     {
         $formatOvertime = (($this->getOvertime()->invert === 1) ? '-' : '') . '%H:%I:%S';
         return [
-            'period'            => $this->getPeriod()->format($this->getPeriodDesignation()->getValue()),
-            'periodDesignation' => strtolower($this->getPeriodDesignation()->getKey()),
+            'period'            => $this->getPeriod()->format($this->getPeriodDesignation()->value),
+            'periodDesignation' => strtolower($this->getPeriodDesignation()->name),
             'workingDays'       => $this->getWorkingDays(),
             'totalHours'        => $this->getTotalHours()->format('%H:%I:%S'),
             'overtime'          => $this->getOvertime()->format($formatOvertime)
diff --git a/api/src/Repositories/AbstractWorkingHoursViewRepository.php b/api/src/Repositories/AbstractWorkingHoursViewRepository.php
index d8a757b..fbeb182 100644
--- a/api/src/Repositories/AbstractWorkingHoursViewRepository.php
+++ b/api/src/Repositories/AbstractWorkingHoursViewRepository.php
@@ -18,9 +18,8 @@ abstract class AbstractWorkingHoursViewRepository implements RepositoryReaderInt
 {
 
     protected const SQL_SELECT = '';
-    protected const SQL_WHERE = '';
+    protected const SQL_WHERE  = '';
 
-    protected PDO                   $database;
     protected PeriodDesignationEnum $periodDesignation;
 
     /**
@@ -28,9 +27,8 @@ abstract class AbstractWorkingHoursViewRepository implements RepositoryReaderInt
      *
      * @param PDO $database
      */
-    public function __construct(PDO $database)
+    public function __construct(protected PDO $database)
     {
-        $this->database = $database;
         $this->database->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
     }
 
@@ -51,7 +49,7 @@ abstract class AbstractWorkingHoursViewRepository implements RepositoryReaderInt
             $model = new WorkingHoursView(
                 $this->buildDateFromPeriod($row['period']),
                 $this->periodDesignation,
-                (int) $row['workingDays'],
+                (int)$row['workingDays'],
                 $this->buildDateInterval($row['totalHours']),
                 $this->buildDateInterval($row['overtime'])
             );
@@ -82,7 +80,7 @@ abstract class AbstractWorkingHoursViewRepository implements RepositoryReaderInt
         return new WorkingHoursView(
             $this->buildDateFromPeriod($row['period']),
             $this->periodDesignation,
-            (int) $row['workingDays'],
+            (int)$row['workingDays'],
             $this->buildDateInterval($row['totalHours']),
             $this->buildDateInterval($row['overtime'])
         );
diff --git a/api/src/Repositories/RepositoryReaderInterface.php b/api/src/Repositories/RepositoryReaderInterface.php
index 00aa1dc..97eb4df 100644
--- a/api/src/Repositories/RepositoryReaderInterface.php
+++ b/api/src/Repositories/RepositoryReaderInterface.php
@@ -3,8 +3,10 @@
 
 namespace TorstenHettstedt\TimekeepingApi\Repositories;
 
+use TorstenHettstedt\TimekeepingApi\Models\ModelInterface;
+
 /**
- * @template T of \TorstenHettstedt\TimekeepingApi\Models\ModelInterface
+ * @template T of ModelInterface
  */
 interface RepositoryReaderInterface
 {
diff --git a/api/src/Repositories/RepositoryWriterInterface.php b/api/src/Repositories/RepositoryWriterInterface.php
index bc5f8fc..8c7241d 100644
--- a/api/src/Repositories/RepositoryWriterInterface.php
+++ b/api/src/Repositories/RepositoryWriterInterface.php
@@ -3,8 +3,10 @@
 
 namespace TorstenHettstedt\TimekeepingApi\Repositories;
 
+use TorstenHettstedt\TimekeepingApi\Models\ModelInterface;
+
 /**
- * @template T of \TorstenHettstedt\TimekeepingApi\Models\ModelInterface
+ * @template T of ModelInterface
  */
 interface RepositoryWriterInterface
 {
diff --git a/api/src/Repositories/WorkingHoursMonthlyViewRepository.php b/api/src/Repositories/WorkingHoursMonthlyViewRepository.php
index eb73c7e..f20e1eb 100644
--- a/api/src/Repositories/WorkingHoursMonthlyViewRepository.php
+++ b/api/src/Repositories/WorkingHoursMonthlyViewRepository.php
@@ -12,23 +12,20 @@ use TorstenHettstedt\TimekeepingApi\Models\PeriodDesignationEnum;
 class WorkingHoursMonthlyViewRepository extends AbstractWorkingHoursViewRepository
 {
 
-    protected const SQL_SELECT = <<<SQL
-        select 
+    protected const string SQL_SELECT = <<<SQL
+        select
             "Monat" as "period",
             "Gesamtarbeitszeit" as "totalHours",
             "Arbeitstage" as "workingDays",
             "Überstunden" as "overtime"
         from "Arbeitszeiten - Monat"
 SQL;
-    protected const SQL_WHERE = ' where "Monat" = ?';
-
-    protected PDO                   $database;
-    protected PeriodDesignationEnum $periodDesignation;
+    protected const string SQL_WHERE  = ' where "Monat" = ?';
 
     public function __construct(PDO $database)
     {
         parent::__construct($database);
-        $this->periodDesignation = PeriodDesignationEnum::MONTHLY();
+        $this->periodDesignation = PeriodDesignationEnum::MONTHLY;
     }
 
     protected function buildDateFromPeriod(string $period): DateTimeInterface
diff --git a/api/src/Repositories/WorkingHoursRepository.php b/api/src/Repositories/WorkingHoursRepository.php
index 82c81d1..667036f 100644
--- a/api/src/Repositories/WorkingHoursRepository.php
+++ b/api/src/Repositories/WorkingHoursRepository.php
@@ -20,17 +20,16 @@ use TorstenHettstedt\TimekeepingApi\Models\WorkingHours;
  */
 class WorkingHoursRepository implements RepositoryReaderInterface, RepositoryWriterInterface
 {
+    protected const string SQL_SELECT = <<<'SQL'
+select
+    "Datum" as "workingDay",
+    "Arbeitszeit" as "workingTime"
+from public."Arbeitszeiten"
+SQL;
 
-    protected PDO $database;
 
-    /**
-     * WorkingHoursRepository constructor.
-     *
-     * @param PDO $database
-     */
-    public function __construct(PDO $database)
+    public function __construct(protected PDO $database)
     {
-        $this->database = $database;
         $this->database->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
     }
 
@@ -96,7 +95,7 @@ class WorkingHoursRepository implements RepositoryReaderInterface, RepositoryWri
 
     protected function buildFindFilteredStatement(?string $start, ?string $end): ?PDOStatement
     {
-        $query = 'select "Datum" as "workingDay", "Arbeitszeit" as "workingTime" from public."Arbeitszeiten" ';
+        $query = static::SQL_SELECT . ' ';
         $query .= $this->buildFilterString($start, $end);
         $query .= 'order by "Datum"';
         $stmt = $this->database->prepare($query);
@@ -106,7 +105,7 @@ class WorkingHoursRepository implements RepositoryReaderInterface, RepositoryWri
         if (is_string($end)) {
             $stmt->bindParam(':end', $end);
         }
-        return $stmt ?? null;
+        return $stmt ?: null;
     }
 
     /**
@@ -121,7 +120,7 @@ class WorkingHoursRepository implements RepositoryReaderInterface, RepositoryWri
      */
     public function findByKey(mixed $primary_key): WorkingHours
     {
-        $stmt = $this->database->prepare('select "Datum" as "workingDay", "Arbeitszeit" as "workingTime" from public."Arbeitszeiten" where "Datum" = ?');
+        $stmt = $this->database->prepare(static::SQL_SELECT  . ' where "Datum" = ?');
         $stmt->bindParam(1, $primary_key);
         $stmt->execute();
         $row = $stmt->fetch();
@@ -155,7 +154,9 @@ class WorkingHoursRepository implements RepositoryReaderInterface, RepositoryWri
             throw new RepositoryRecordAlreadyExistException();
         } /** @noinspection PhpUnusedLocalVariableInspection */
         catch (RepositoryRecordNotFoundException $exception) {
-            $stmt = $this->database->prepare('insert into  public."Arbeitszeiten" ("Datum", "Arbeitszeit") values (?, ?) on conflict do nothing');
+            $stmt = $this->database->prepare(
+                'insert into  public."Arbeitszeiten" ("Datum", "Arbeitszeit") values (?, ?) on conflict do nothing'
+            );
             $stmt->bindParam(1, $workingDay);
             $stmt->bindParam(2, $workingTime);
             $stmt->execute();
diff --git a/api/src/Repositories/WorkingHoursWeeklyViewRepository.php b/api/src/Repositories/WorkingHoursWeeklyViewRepository.php
index d1043e1..a0627fc 100644
--- a/api/src/Repositories/WorkingHoursWeeklyViewRepository.php
+++ b/api/src/Repositories/WorkingHoursWeeklyViewRepository.php
@@ -11,23 +11,20 @@ use TorstenHettstedt\TimekeepingApi\Models\PeriodDesignationEnum;
 class WorkingHoursWeeklyViewRepository extends AbstractWorkingHoursViewRepository
 {
 
-    protected const SQL_SELECT = <<<SQL
-        select 
+    protected const string SQL_SELECT = <<<SQL
+        select
             "Woche" as "period",
             "Gesamtarbeitszeit" as "totalHours",
             "Arbeitstage" as "workingDays",
             "Überstunden" as "overtime"
         from "Arbeitszeiten - Woche"
 SQL;
-    protected const SQL_WHERE = ' where "Woche" = ?';
-
-    protected PDO                   $database;
-    protected PeriodDesignationEnum $periodDesignation;
+    protected const string SQL_WHERE  = ' where "Woche" = ?';
 
     public function __construct(PDO $database)
     {
         parent::__construct($database);
-        $this->periodDesignation = PeriodDesignationEnum::WEEKLY();
+        $this->periodDesignation = PeriodDesignationEnum::WEEKLY;
     }
 
     protected function buildDateFromPeriod(string $period): DateTimeInterface
diff --git a/api/src/Repositories/WorkingHoursYearlyViewRepository.php b/api/src/Repositories/WorkingHoursYearlyViewRepository.php
index 1efb106..7a01e94 100644
--- a/api/src/Repositories/WorkingHoursYearlyViewRepository.php
+++ b/api/src/Repositories/WorkingHoursYearlyViewRepository.php
@@ -11,23 +11,20 @@ use TorstenHettstedt\TimekeepingApi\Models\PeriodDesignationEnum;
 class WorkingHoursYearlyViewRepository extends AbstractWorkingHoursViewRepository
 {
 
-    protected const SQL_SELECT = <<<SQL
-        select 
+    protected const string SQL_SELECT = <<<SQL
+        select
             "Jahr" as "period",
             "Gesamtarbeitszeit" as "totalHours",
             "Arbeitstage" as "workingDays",
             "Überstunden" as "overtime"
         from "Arbeitszeiten - Jahr"
 SQL;
-    protected const SQL_WHERE = ' where "Jahr" = ?';
-
-    protected PDO                   $database;
-    protected PeriodDesignationEnum $periodDesignation;
+    protected const string SQL_WHERE  = ' where "Jahr" = ?';
 
     public function __construct(PDO $database)
     {
         parent::__construct($database);
-        $this->periodDesignation = PeriodDesignationEnum::YEARLY();
+        $this->periodDesignation = PeriodDesignationEnum::YEARLY;
     }
 
     /**
diff --git a/api/tests/_data/dump.sql b/api/tests/_data/dump.sql
index 0dd1931..ffc1978 100644
--- a/api/tests/_data/dump.sql
+++ b/api/tests/_data/dump.sql
@@ -13,10 +13,10 @@ SET xmloption = content;
 SET client_min_messages = warning;
 SET row_security = off;
 
-DROP TABLE IF EXISTS public."Arbeitszeiten";
 DROP VIEW IF EXISTS public."Arbeitszeiten - Woche";
 DROP VIEW IF EXISTS public."Arbeitszeiten - Monat";
 DROP VIEW IF EXISTS public."Arbeitszeiten - Jahr";
+DROP TABLE IF EXISTS public."Arbeitszeiten";
 
 --
 -- Name: Arbeitszeiten; Type: TABLE; Schema: public; Owner: torsten
@@ -83,66 +83,66 @@ ALTER TABLE public."Arbeitszeiten - Woche" OWNER TO bruce;
 -- Data for Name: Arbeitszeiten; Type: TABLE DATA; Schema: public; Owner: torsten
 --
 
-COPY public."Arbeitszeiten" ("Datum", "Arbeitszeit") FROM stdin;
-2020-01-07	08:06:00
-2020-01-08	08:16:00
-2020-01-09	07:49:00
-2020-01-10	07:30:00
-2020-01-13	08:06:00
-2020-01-14	08:04:00
-2020-01-15	08:20:00
-2020-01-16	07:13:00
-2020-01-17	07:57:00
-2020-01-20	07:53:00
-2020-01-21	07:49:00
-2020-01-22	07:56:00
-2020-01-23	07:55:00
-2020-01-24	07:08:00
-2020-01-27	08:23:00
-2020-01-28	07:20:00
-2020-01-29	08:13:00
-2020-01-30	08:43:00
-2020-01-31	07:21:00
-2020-02-03	07:56:00
-2020-02-04	08:05:00
-2020-02-05	07:58:00
-2020-02-06	08:01:00
-2020-02-07	07:59:00
-2020-02-10	07:50:00
-2020-02-11	08:01:00
-2020-02-12	08:14:00
-2020-02-13	08:12:00
-2020-02-14	07:51:00
-2020-02-17	07:59:00
-2020-02-18	08:05:00
-2020-02-19	07:34:00
-2020-02-20	07:33:00
-2020-02-21	07:56:00
-2020-02-24	08:02:00
-2020-02-25	08:13:00
-2020-02-26	08:42:00
-2020-02-27	07:49:00
-2020-02-28	08:16:00
-2020-03-02	08:22:00
-2020-03-03	08:20:00
-2020-03-04	08:12:00
-2020-03-05	08:32:00
-2020-03-06	04:41:00
-2020-03-09	07:05:00
-2020-03-10	07:34:00
-2020-03-11	07:39:00
-2020-03-12	07:50:00
-2020-03-13	08:26:00
-2020-03-16	07:51:00
-2020-03-17	07:50:00
-2020-03-18	07:19:00
-2020-03-19	07:55:00
-2020-03-20	05:43:00
-2020-03-23	08:05:00
-2020-03-24	08:21:00
-2020-03-25	08:10:00
-2020-03-26	10:31:00
-2020-03-27	04:55:00
-2020-03-30	08:21:00
-2020-03-31	08:01:00
-\.
+INSERT INTO public."Arbeitszeiten" ("Datum", "Arbeitszeit") VALUES
+('2020-01-07','08:06:00'),
+('2020-01-08','08:16:00'),
+('2020-01-09','07:49:00'),
+('2020-01-10','07:30:00'),
+('2020-01-13','08:06:00'),
+('2020-01-14','08:04:00'),
+('2020-01-15','08:20:00'),
+('2020-01-16','07:13:00'),
+('2020-01-17','07:57:00'),
+('2020-01-20','07:53:00'),
+('2020-01-21','07:49:00'),
+('2020-01-22','07:56:00'),
+('2020-01-23','07:55:00'),
+('2020-01-24','07:08:00'),
+('2020-01-27','08:23:00'),
+('2020-01-28','07:20:00'),
+('2020-01-29','08:13:00'),
+('2020-01-30','08:43:00'),
+('2020-01-31','07:21:00'),
+('2020-02-03','07:56:00'),
+('2020-02-04','08:05:00'),
+('2020-02-05','07:58:00'),
+('2020-02-06','08:01:00'),
+('2020-02-07','07:59:00'),
+('2020-02-10','07:50:00'),
+('2020-02-11','08:01:00'),
+('2020-02-12','08:14:00'),
+('2020-02-13','08:12:00'),
+('2020-02-14','07:51:00'),
+('2020-02-17','07:59:00'),
+('2020-02-18','08:05:00'),
+('2020-02-19','07:34:00'),
+('2020-02-20','07:33:00'),
+('2020-02-21','07:56:00'),
+('2020-02-24','08:02:00'),
+('2020-02-25','08:13:00'),
+('2020-02-26','08:42:00'),
+('2020-02-27','07:49:00'),
+('2020-02-28','08:16:00'),
+('2020-03-02','08:22:00'),
+('2020-03-03','08:20:00'),
+('2020-03-04','08:12:00'),
+('2020-03-05','08:32:00'),
+('2020-03-06','04:41:00'),
+('2020-03-09','07:05:00'),
+('2020-03-10','07:34:00'),
+('2020-03-11','07:39:00'),
+('2020-03-12','07:50:00'),
+('2020-03-13','08:26:00'),
+('2020-03-16','07:51:00'),
+('2020-03-17','07:50:00'),
+('2020-03-18','07:19:00'),
+('2020-03-19','07:55:00'),
+('2020-03-20','05:43:00'),
+('2020-03-23','08:05:00'),
+('2020-03-24','08:21:00'),
+('2020-03-25','08:10:00'),
+('2020-03-26','10:31:00'),
+('2020-03-27','04:55:00'),
+('2020-03-30','08:21:00'),
+('2020-03-31','08:01:00')
+;
\ No newline at end of file
diff --git a/api/tests/api.suite.dist.yml b/api/tests/api.suite.dist.yml
index 3c4624f..ea87ebd 100644
--- a/api/tests/api.suite.dist.yml
+++ b/api/tests/api.suite.dist.yml
@@ -3,6 +3,6 @@ modules:
     enabled:
         - \Helper\Api
         - REST:
-              url: http://localhost:8091/
+              url: http://api:80/
               depends: PhpBrowser
               part: Json
\ No newline at end of file
diff --git a/api/tests/unit/Controller/AbstractControllerTest.php b/api/tests/unit/Controller/AbstractControllerTest.php
new file mode 100644
index 0000000..0f8627c
--- /dev/null
+++ b/api/tests/unit/Controller/AbstractControllerTest.php
@@ -0,0 +1,52 @@
+<?php
+
+namespace TorstenHettstedt\TimekeepingApi\Tests\Unit\Controller;
+
+use Codeception\Test\Unit;
+use Exception;
+use PDO;
+use PHPUnit\Framework\MockObject\MockObject;
+use Psr\Container\ContainerInterface;
+use Psr\Http\Message\StreamInterface;
+use Slim\Psr7\Request;
+use Slim\Psr7\Response;
+
+class AbstractControllerTest extends Unit
+{
+
+    protected const FICTIONAL_STATUS_CODE = 666;
+
+    protected ContainerInterface  $container;
+    protected Request             $request;
+    protected Response|MockObject $response;
+
+    /**
+     * @throws Exception
+     * @throws \PHPUnit\Framework\MockObject\Exception
+     */
+    protected function _before(): void
+    {
+        parent::_before();
+        /** @noinspection SpellCheckingInspection */
+        $this->container = $this->makeEmpty(ContainerInterface::class, [
+            'has' => true,
+            'get' => new PDO(
+                'pgsql:host=psql.torsten-hettstedt.net;port=5432;dbname=testdb;user=bruce;password=mypass'
+            ),
+        ]);
+        $this->response = $this->createMock(Response::class);
+        $this->response->expects($this->any())->method('getStatusCode')->willReturn(self::FICTIONAL_STATUS_CODE);
+        $this->response->expects($this->any())->method('getBody')->willReturn(
+            $this->makeEmpty(StreamInterface::class, [
+                'write'       => function (mixed $data) {
+                    $this->assertIsString($data);
+                    $this->assertJson($data);
+                    return strlen($data);
+                },
+                'getContents' => 'abc',
+            ])
+        );
+        $this->response->expects($this->any())->method('withHeader')->willReturn($this->response);
+        $this->response->expects($this->any())->method('withStatus')->willReturn($this->response);
+    }
+}
diff --git a/api/tests/unit/Controller/WorkingHoursControllerTest.php b/api/tests/unit/Controller/WorkingHoursControllerTest.php
index 40d67e3..e6b9903 100644
--- a/api/tests/unit/Controller/WorkingHoursControllerTest.php
+++ b/api/tests/unit/Controller/WorkingHoursControllerTest.php
@@ -2,65 +2,46 @@
 
 namespace TorstenHettstedt\TimekeepingApi\Tests\Unit\Controller;
 
-use Codeception\Example;
-use Codeception\Test\Unit;
+use Codeception\Attribute\DataProvider;
 use Exception;
-use PDO;
+use Psr\Container\ContainerExceptionInterface;
 use Psr\Container\ContainerInterface;
-use Psr\Http\Message\StreamInterface;
+use Psr\Container\NotFoundExceptionInterface;
 use Slim\Exception\HttpBadRequestException;
-use Slim\Exception\HttpInternalServerErrorException;
 use Slim\Exception\HttpNotFoundException;
 use Slim\Psr7\Request;
-use Slim\Psr7\Response;
 use TorstenHettstedt\TimekeepingApi\Controller\HttpConflictRequestException;
 use TorstenHettstedt\TimekeepingApi\Controller\NotDatabasesException;
 use TorstenHettstedt\TimekeepingApi\Controller\WorkingHoursController;
 
-class WorkingHoursControllerTest extends Unit
+class WorkingHoursControllerTest extends AbstractControllerTest
 {
 
-    const EXISTING_DATE     = '2020-01-28';
-    const EXISTING_INTERVAL = '07:20:00';
-    const NEW_DATE          = '2020-04-01';
-    const NEW_INTERVAL      = '07:59:00';
-
-    protected ContainerInterface $container;
-    protected Request            $request;
-    protected Response           $response;
+    protected const int    FICTIONAL_STATUS_CODE = 666;
+    public const    string EXISTING_DATE         = '2020-01-28';
+    public const    string EXISTING_INTERVAL     = '07:20:00';
+    public const    string NEW_DATE              = '2020-04-01';
+    public const    string NEW_INTERVAL          = '07:59:00';
 
     /**
      * @throws Exception
+     * @throws \PHPUnit\Framework\MockObject\Exception
      */
     protected function _before(): void
     {
         parent::_before();
-        /** @noinspection SpellCheckingInspection */
-        $this->container = $this->makeEmpty(ContainerInterface::class, [
-            'has' => true,
-            'get' => new PDO('pgsql:host=psql.torsten-hettstedt.net;port=5432;dbname=testdb;user=bruce;password=mypass'),
-        ]);
         $this->request = $this->makeEmpty(Request::class, [
             'getParsedBody' => [
                 'workingDay'  => self::EXISTING_DATE,
                 'workingTime' => self::EXISTING_INTERVAL,
             ],
         ]);
-        $this->response = $this->makeEmpty(Response::class, [
-            'getBody'    => $this->makeEmpty(StreamInterface::class, [
-                'write' => function (mixed $data) {
-                    $this->assertIsString($data);
-                    $this->assertJson($data);
-                },
-            ]),
-            'withHeader' => $this->makeEmpty(Response::class, [
-                'withStatus' => $this->makeEmpty(Response::class),
-            ]),
-        ]);
     }
 
     /**
      * @throws NotDatabasesException
+     * @throws ContainerExceptionInterface
+     * @throws NotFoundExceptionInterface
      * @throws Exception
      */
     public function testConstructWithNonDatabase(): void
@@ -103,12 +84,12 @@ class WorkingHoursControllerTest extends Unit
     /**
      * @param array<string, string> $queryParams
      *
-     * @dataProvider valideFilterDataProvider
-     *
-     * @throws HttpInternalServerErrorException
+     * @throws ContainerExceptionInterface
      * @throws NotDatabasesException
+     * @throws NotFoundExceptionInterface
      * @throws Exception
      */
+    #[DataProvider('valideFilterDataProvider')]
     public function testBrowseWithValideParameter(array $queryParams): void
     {
         $this->request = $this->makeEmpty(Request::class, [
@@ -116,7 +97,8 @@ class WorkingHoursControllerTest extends Unit
         ]);
         $controller = new WorkingHoursController($this->container);
         $response = $controller->browse($this->request, $this->response, []);
-        $this->assertInstanceOf(Response::class, $response);
+        $this->assertEquals(self::FICTIONAL_STATUS_CODE, $response->getStatusCode());
+        $this->assertNotEmpty($response->getBody()->getContents());
     }
 
     /**
@@ -246,12 +228,12 @@ class WorkingHoursControllerTest extends Unit
     /**
      * @param array<string, string> $queryParams
      *
-     * @dataProvider invalideFilterDataProvider
-     *
-     * @throws HttpInternalServerErrorException
+     * @throws ContainerExceptionInterface
      * @throws NotDatabasesException
+     * @throws NotFoundExceptionInterface
      * @throws Exception
      */
+    #[DataProvider('invalideFilterDataProvider')]
     public function testBrowseWithInvalideParameter(array $queryParams): void
     {
         $this->request = $this->makeEmpty(Request::class, [
@@ -263,9 +245,10 @@ class WorkingHoursControllerTest extends Unit
     }
 
     /**
+     * @throws ContainerExceptionInterface
      * @throws NotDatabasesException
-     * @throws HttpBadRequestException
-     * @throws HttpNotFoundException
+     * @throws NotFoundExceptionInterface
+     * @throws Exception
      */
     public function testUpdateExistRecord(): void
     {
@@ -273,13 +256,15 @@ class WorkingHoursControllerTest extends Unit
         $response = $controller->update($this->request, $this->response, [
             'id' => self::EXISTING_DATE,
         ]);
-        $this->assertInstanceOf(Response::class, $response);
+        $this->assertEquals(self::FICTIONAL_STATUS_CODE, $response->getStatusCode());
+        $this->assertNotEmpty($response->getBody()->getContents());
     }
 
     /**
+     * @throws ContainerExceptionInterface
      * @throws NotDatabasesException
-     * @throws HttpBadRequestException
-     * @throws HttpNotFoundException
+     * @throws NotFoundExceptionInterface
+     * @throws Exception
      */
     public function testUpdateNotExistRecord(): void
     {
@@ -311,14 +296,12 @@ class WorkingHoursControllerTest extends Unit
      * @param string $date
      * @param string $time
      *
-     * @dataProvider invalidCreatDataProvider
-     *
-     * @throws HttpBadRequestException
-     * @throws HttpConflictRequestException
-     * @throws HttpInternalServerErrorException
+     * @throws ContainerExceptionInterface
      * @throws NotDatabasesException
+     * @throws NotFoundExceptionInterface
      * @throws Exception
      */
+    #[DataProvider('invalidCreatDataProvider')]
     public function testCreatInvalidData(string $date, string $time): void
     {
         $this->request = $this->makeEmpty(Request::class, [
@@ -333,10 +316,9 @@ class WorkingHoursControllerTest extends Unit
     }
 
     /**
-     * @throws HttpBadRequestException
+     * @throws ContainerExceptionInterface
      * @throws NotDatabasesException
-     * @throws HttpInternalServerErrorException
-     * @throws HttpConflictRequestException
+     * @throws NotFoundExceptionInterface
      * @throws Exception
      */
     public function testCreatNewRecord(): void
@@ -349,14 +331,14 @@ class WorkingHoursControllerTest extends Unit
         ]);
         $controller = new WorkingHoursController($this->container);
         $response = $controller->creat($this->request, $this->response, []);
-        $this->assertInstanceOf(Response::class, $response);
+        $this->assertEquals(self::FICTIONAL_STATUS_CODE, $response->getStatusCode());
+        $this->assertNotEmpty($response->getBody()->getContents());
     }
 
     /**
-     * @throws HttpBadRequestException
-     * @throws HttpConflictRequestException
-     * @throws HttpInternalServerErrorException
+     * @throws ContainerExceptionInterface
      * @throws NotDatabasesException
+     * @throws NotFoundExceptionInterface
      * @throws Exception
      */
     public function testCreatExistRecord(): void
@@ -373,9 +355,10 @@ class WorkingHoursControllerTest extends Unit
     }
 
     /**
-     * @throws HttpInternalServerErrorException
-     * @throws HttpNotFoundException
+     * @throws ContainerExceptionInterface
      * @throws NotDatabasesException
+     * @throws NotFoundExceptionInterface
+     * @throws Exception
      */
     public function testReadExistRecord(): void
     {
@@ -383,13 +366,15 @@ class WorkingHoursControllerTest extends Unit
         $response = $controller->read($this->request, $this->response, [
             'id' => self::EXISTING_DATE,
         ]);
-        $this->assertInstanceOf(Response::class, $response);
+        $this->assertEquals(self::FICTIONAL_STATUS_CODE, $response->getStatusCode());
+        $this->assertNotEmpty($response->getBody()->getContents());
     }
 
     /**
-     * @throws HttpInternalServerErrorException
-     * @throws HttpNotFoundException
+     * @throws ContainerExceptionInterface
      * @throws NotDatabasesException
+     * @throws NotFoundExceptionInterface
+     * @throws Exception
      */
     public function testReadNotExistRecord(): void
     {
diff --git a/api/tests/unit/Controller/WorkingHoursViewControllerTest.php b/api/tests/unit/Controller/WorkingHoursViewControllerTest.php
index fa2ca2f..2f5e2da 100644
--- a/api/tests/unit/Controller/WorkingHoursViewControllerTest.php
+++ b/api/tests/unit/Controller/WorkingHoursViewControllerTest.php
@@ -2,49 +2,30 @@
 
 namespace TorstenHettstedt\TimekeepingApi\Tests\Unit\Controller;
 
-use Codeception\Test\Unit;
 use Exception;
-use PDO;
+use Psr\Container\ContainerExceptionInterface;
 use Psr\Container\ContainerInterface;
-use Psr\Http\Message\StreamInterface;
+use Psr\Container\NotFoundExceptionInterface;
 use Slim\Psr7\Request;
-use Slim\Psr7\Response;
 use TorstenHettstedt\TimekeepingApi\Controller\NotDatabasesException;
 use TorstenHettstedt\TimekeepingApi\Controller\WorkingHoursViewController;
 
-class WorkingHoursViewControllerTest extends Unit
+class WorkingHoursViewControllerTest extends AbstractControllerTest
 {
-    protected ContainerInterface $container;
-    protected Request $request;
-    protected Response $response;
-
     /**
      * @throws Exception
+     * @throws \PHPUnit\Framework\MockObject\Exception
      */
     protected function _before(): void
     {
         parent::_before();
-        /** @noinspection SpellCheckingInspection */
-        $this->container = $this->makeEmpty(ContainerInterface::class, [
-            'has' => true,
-            'get' => new PDO('pgsql:host=psql.torsten-hettstedt.net;port=5432;dbname=testdb;user=bruce;password=mypass')
-        ]);
-        $this->request = $this->makeEmpty(Request::class, []);
-        $this->response = $this->makeEmpty(Response::class, [
-            'getBody' => $this->makeEmpty(StreamInterface::class, [
-                'write' => function (mixed $data) {
-                    $this->assertIsString($data);
-                    $this->assertJson($data);
-                },
-            ]),
-            'withHeader' => $this->makeEmpty(Response::class, [
-                'withStatus' => $this->makeEmpty(Response::class),
-            ]),
-        ]);
+        $this->request = $this->makeEmpty(Request::class);
     }
 
     /**
      * @throws NotDatabasesException
+     * @throws ContainerExceptionInterface
+     * @throws NotFoundExceptionInterface
      * @throws Exception
      */
     public function testConstructWithNonDatabase(): void
@@ -57,32 +38,44 @@ class WorkingHoursViewControllerTest extends Unit
     }
 
     /**
+     * @throws NotDatabasesException
+     * @throws ContainerExceptionInterface
+     * @throws NotFoundExceptionInterface
      * @throws Exception
      */
     public function testBrowseMonthly(): void
     {
         $controller = new WorkingHoursViewController($this->container);
         $response = $controller->browseMonthly($this->request, $this->response, []);
-        $this->assertInstanceOf(Response::class, $response);
+        $this->assertEquals(self::FICTIONAL_STATUS_CODE, $response->getStatusCode());
+        $this->assertNotEmpty($response->getBody()->getContents());
     }
 
     /**
+     * @throws NotDatabasesException
+     * @throws ContainerExceptionInterface
+     * @throws NotFoundExceptionInterface
      * @throws Exception
      */
     public function testBrowseYearly(): void
     {
         $controller = new WorkingHoursViewController($this->container);
         $response = $controller->browseYearly($this->request, $this->response, []);
-        $this->assertInstanceOf(Response::class, $response);
+        $this->assertEquals(self::FICTIONAL_STATUS_CODE, $response->getStatusCode());
+        $this->assertNotEmpty($response->getBody()->getContents());
     }
 
     /**
+     * @throws NotDatabasesException
+     * @throws ContainerExceptionInterface
+     * @throws NotFoundExceptionInterface
      * @throws Exception
      */
     public function testBrowseWeekly(): void
     {
         $controller = new WorkingHoursViewController($this->container);
         $response = $controller->browseWeekly($this->request, $this->response, []);
-        $this->assertInstanceOf(Response::class, $response);
+        $this->assertEquals(self::FICTIONAL_STATUS_CODE, $response->getStatusCode());
+        $this->assertNotEmpty($response->getBody()->getContents());
     }
 }
diff --git a/api/tests/unit/Middleware/ErrorHandlerTest.php b/api/tests/unit/Middleware/ErrorHandlerTest.php
index 036fd8b..779ade7 100644
--- a/api/tests/unit/Middleware/ErrorHandlerTest.php
+++ b/api/tests/unit/Middleware/ErrorHandlerTest.php
@@ -5,6 +5,7 @@ namespace TorstenHettstedt\TimekeepingApi\Tests\Unit\Middleware;
 use Codeception\Stub\Expected;
 use Codeception\Test\Unit;
 use Exception;
+use Psr\Container\ContainerInterface;
 use Psr\Http\Message\ResponseFactoryInterface;
 use Psr\Http\Message\ResponseInterface;
 use Psr\Http\Message\ServerRequestInterface;
@@ -20,6 +21,7 @@ use TorstenHettstedt\TimekeepingApi\Middleware\ErrorHandler;
 class ErrorHandlerTest extends Unit
 {
 
+    /** @var App<ContainerInterface> */
     protected App                    $app;
     protected ServerRequestInterface $request;
     protected Exception              $exception;
@@ -38,6 +40,7 @@ class ErrorHandlerTest extends Unit
                         'write' => function (mixed $data) {
                             $this->assertIsString($data);
                             $this->assertJson($data);
+                            return strlen($data);
                         },
                     ]),
                 ]),
@@ -87,11 +90,10 @@ class ErrorHandlerTest extends Unit
             'file'     => '/path(to/file',
             'getTitle' => Expected::once('The Title'),
         ]);
-        $this->logger = $this->makeEmpty(LoggerInterface::class, []);
+        $this->logger = $this->makeEmpty(LoggerInterface::class);
 
         $middleWare = new ErrorHandler($this->app);
         $middleWare($this->request, $this->exception, true, true, true, $this->logger);
-
     }
 
     /**
@@ -104,7 +106,7 @@ class ErrorHandlerTest extends Unit
             'code'    => 400,
             'file'    => '/path(to/file',
         ]);
-        $this->logger = $this->makeEmpty(LoggerInterface::class, []);
+        $this->logger = $this->makeEmpty(LoggerInterface::class);
 
         $middleWare = new ErrorHandler($this->app);
         $middleWare($this->request, $this->exception, true, true, true, $this->logger);
diff --git a/api/tests/unit/Models/WorkingHoursTest.php b/api/tests/unit/Models/WorkingHoursTest.php
index 200f997..b1612ff 100644
--- a/api/tests/unit/Models/WorkingHoursTest.php
+++ b/api/tests/unit/Models/WorkingHoursTest.php
@@ -2,6 +2,7 @@
 
 namespace TorstenHettstedt\TimekeepingApi\Tests\Unit\Models;
 
+use Codeception\Attribute\DataProvider;
 use Codeception\Test\Unit;
 use DateInterval;
 use DateTime;
@@ -22,7 +23,7 @@ class WorkingHoursTest extends Unit
     }
 
     /**
-     * @return array[]
+     * @return array<array<DateTime|DateInterval|array<string,string>>>
      */
     public function workingHoursProvider(): array
     {
@@ -49,17 +50,13 @@ class WorkingHoursTest extends Unit
     /**
      * @param DateTime              $date
      * @param DateInterval          $interval
-     * @param array<string, string> $should_json
-     *
-     * @dataProvider workingHoursProvider
+     * @param array<string, string> $shouldJson
      */
-    public function testWorkingHoursWithContent(DateTime $date, DateInterval $interval, array $should_json): void
+    #[DataProvider('workingHoursProvider')]
+    public function testWorkingHoursWithContent(DateTime $date, DateInterval $interval, array $shouldJson): void
     {
-
         $obj = new WorkingHours();
-        $obj
-            ->setWorkingDay($date)
-            ->setWorkingTime($interval);
+        $obj->setWorkingDay($date)->setWorkingTime($interval);
 
         $this->assertNotNull($obj->getWorkingDay());
         $this->assertInstanceOf(DateTime::class, $obj->getWorkingDay());
@@ -70,7 +67,6 @@ class WorkingHoursTest extends Unit
         $this->assertEquals($interval, $obj->getWorkingTime());
 
         $json = $obj->jsonSerialize();
-        $this->assertIsArray($json);
-        $this->assertEquals($should_json, $json);
+        $this->assertEquals($shouldJson, $json);
     }
 }
diff --git a/api/tests/unit/Models/WorkingHoursViewTest.php b/api/tests/unit/Models/WorkingHoursViewTest.php
index cf0a0db..ed79216 100644
--- a/api/tests/unit/Models/WorkingHoursViewTest.php
+++ b/api/tests/unit/Models/WorkingHoursViewTest.php
@@ -2,6 +2,7 @@
 
 namespace TorstenHettstedt\TimekeepingApi\Tests\Unit\Models;
 
+use Codeception\Attribute\DataProvider;
 use Codeception\Test\Unit;
 use DateInterval;
 use DateTime;
@@ -13,7 +14,7 @@ class WorkingHoursViewTest extends Unit
 {
 
     /**
-     * @return array[]
+     * @return array<array{DateTime,PeriodDesignationEnum,int,DateInterval,DateInterval,array<string,mixed>}>
      */
     public function workingHoursProvider(): array
     {
@@ -25,7 +26,11 @@ class WorkingHoursViewTest extends Unit
         $absence_time->invert = 1;
         return [
             [
-                $date, PeriodDesignationEnum::WEEKLY(), $work_days, $total_hours, $overtime,
+                $date,
+                PeriodDesignationEnum::WEEKLY,
+                $work_days,
+                $total_hours,
+                $overtime,
                 [
                     'period'            => '2020#49',
                     'periodDesignation' => 'weekly',
@@ -35,7 +40,11 @@ class WorkingHoursViewTest extends Unit
                 ],
             ],
             [
-                $date, PeriodDesignationEnum::WEEKLY(), $work_days, $total_hours, $absence_time,
+                $date,
+                PeriodDesignationEnum::WEEKLY,
+                $work_days,
+                $total_hours,
+                $absence_time,
                 [
                     'period'            => '2020#49',
                     'periodDesignation' => 'weekly',
@@ -45,7 +54,11 @@ class WorkingHoursViewTest extends Unit
                 ],
             ],
             [
-                $date, PeriodDesignationEnum::MONTHLY(), $work_days, $total_hours, $overtime,
+                $date,
+                PeriodDesignationEnum::MONTHLY,
+                $work_days,
+                $total_hours,
+                $overtime,
                 [
                     'period'            => '2020-11',
                     'periodDesignation' => 'monthly',
@@ -55,7 +68,11 @@ class WorkingHoursViewTest extends Unit
                 ],
             ],
             [
-                $date, PeriodDesignationEnum::MONTHLY(), $work_days, $total_hours, $absence_time,
+                $date,
+                PeriodDesignationEnum::MONTHLY,
+                $work_days,
+                $total_hours,
+                $absence_time,
                 [
                     'period'            => '2020-11',
                     'periodDesignation' => 'monthly',
@@ -65,7 +82,12 @@ class WorkingHoursViewTest extends Unit
                 ],
             ],
             [
-                $date, PeriodDesignationEnum::YEARLY(), $work_days, $total_hours, $overtime, [
+                $date,
+                PeriodDesignationEnum::YEARLY,
+                $work_days,
+                $total_hours,
+                $overtime,
+                [
                     'period'            => '2020',
                     'periodDesignation' => 'yearly',
                     'workingDays'       => 15,
@@ -74,7 +96,12 @@ class WorkingHoursViewTest extends Unit
                 ],
             ],
             [
-                $date, PeriodDesignationEnum::YEARLY(), $work_days, $total_hours, $absence_time, [
+                $date,
+                PeriodDesignationEnum::YEARLY,
+                $work_days,
+                $total_hours,
+                $absence_time,
+                [
                     'period'            => '2020',
                     'periodDesignation' => 'yearly',
                     'workingDays'       => 15,
@@ -86,50 +113,40 @@ class WorkingHoursViewTest extends Unit
     }
 
     /**
-     * @param DateTimeInterface          $period
-     * @param PeriodDesignationEnum      $periodDesignation
-     * @param int                        $workingDays
-     * @param DateInterval               $totalHours
-     * @param DateInterval               $overtime
-     * @param array<string, string>      $should_json
-     *
-     * @dataProvider workingHoursProvider
+     * @param DateTimeInterface     $period
+     * @param PeriodDesignationEnum $periodDesignation
+     * @param int                   $workingDays
+     * @param DateInterval          $totalHours
+     * @param DateInterval          $overtime
+     * @param array<string, string> $shouldJson
      */
+    #[DataProvider('workingHoursProvider')]
     public function testWorkingHoursViewWithContent(
         DateTimeInterface $period,
         PeriodDesignationEnum $periodDesignation,
         int $workingDays,
         DateInterval $totalHours,
         DateInterval $overtime,
-        array $should_json
-    ): void
-    {
-
+        array $shouldJson
+    ): void {
         $obj = new WorkingHoursView($period, $periodDesignation, $workingDays, $totalHours, $overtime);
 
-        $this->assertNotNull($obj->getPeriod());
         $this->assertInstanceOf(DateTimeInterface::class, $obj->getPeriod());
         $this->assertEquals($period, $obj->getPeriod());
 
-        $this->assertNotNull($obj->getPeriodDesignation());
         $this->assertInstanceOf(PeriodDesignationEnum::class, $obj->getPeriodDesignation());
         $this->assertEquals($periodDesignation, $obj->getPeriodDesignation());
 
-        $this->assertNotNull($obj->getWorkingDays());
-        $this->assertIsInt($obj->getWorkingDays());
         $this->assertEquals($workingDays, $obj->getWorkingDays());
 
-        $this->assertNotNull($obj->getTotalHours());
         $this->assertInstanceOf(DateInterval::class, $obj->getTotalHours());
         $this->assertEquals($totalHours, $obj->getTotalHours());
 
-        $this->assertNotNull($obj->getOvertime());
         $this->assertInstanceOf(DateInterval::class, $obj->getOvertime());
         $this->assertEquals($overtime, $obj->getOvertime());
 
 
         $json = $obj->jsonSerialize();
-        $this->assertIsArray($json);
-        $this->assertEquals($should_json, $json);
+        $this->assertEquals($shouldJson, $json);
     }
 }
diff --git a/api/tests/unit/Repositories/WorkingHoursRepositoryTest.php b/api/tests/unit/Repositories/WorkingHoursRepositoryTest.php
index 7080ee9..326caff 100644
--- a/api/tests/unit/Repositories/WorkingHoursRepositoryTest.php
+++ b/api/tests/unit/Repositories/WorkingHoursRepositoryTest.php
@@ -2,7 +2,7 @@
 
 namespace TorstenHettstedt\TimekeepingApi\Tests\Unit\Repositories;
 
-use Codeception\Example;
+use Codeception\Attribute\DataProvider;
 use Codeception\Test\Unit;
 use DateInterval;
 use DateTime;
@@ -18,18 +18,20 @@ use TorstenHettstedt\TimekeepingApi\Repositories\WorkingHoursRepository;
 
 class WorkingHoursRepositoryTest extends Unit
 {
-    const EXISTING_DATE     = '2020-01-28';
-    const EXISTING_INTERVAL = 'PT7H20M';
-    const NEW_DATE          = '2020-04-01';
-    const NEW_INTERVAL      = 'PT7H59M';
-    const RECORDS_COUNT     = 61;
+    public const string EXISTING_DATE     = '2020-01-28';
+    public const string EXISTING_INTERVAL = 'PT7H20M';
+    public const string NEW_DATE          = '2020-04-01';
+    public const string NEW_INTERVAL      = 'PT7H59M';
+    public const int    RECORDS_COUNT     = 61;
 
     protected PDO $pdoObject;
 
     protected function _before(): void
     {
         /** @noinspection SpellCheckingInspection */
-        $this->pdoObject = new PDO('pgsql:host=psql.torsten-hettstedt.net;port=5432;dbname=testdb;user=bruce;password=mypass');
+        $this->pdoObject = new PDO(
+            'pgsql:host=psql.torsten-hettstedt.net;port=5432;dbname=testdb;user=bruce;password=mypass'
+        );
         parent::_before();
     }
 
@@ -40,8 +42,8 @@ class WorkingHoursRepositoryTest extends Unit
     {
         $repository = new WorkingHoursRepository($this->pdoObject);
         $models = $repository->findAll();
-        $this->assertIsArray($models);
-        $this->assertContainsOnly(WorkingHours::class, $models);
+
+        $this->assertContainsOnlyInstancesOf(WorkingHours::class, $models);
         $this->assertCount(self::RECORDS_COUNT, $models);
     }
 
@@ -51,13 +53,13 @@ class WorkingHoursRepositoryTest extends Unit
     public function valideFilterParameter(): array
     {
         return [
-            [null,         null,         61,],
-            ['2020-04-01', null,          0,],
-            ['2020-04-01', '2020-04-30',  0,],
-            [null,         '2020-04-30', 61,],
-            ['2020-03-01', null,         22,],
+            [null, null, 61,],
+            ['2020-04-01', null, 0,],
+            ['2020-04-01', '2020-04-30', 0,],
+            [null, '2020-04-30', 61,],
+            ['2020-03-01', null, 22,],
             ['2020-03-01', '2020-03-31', 22,],
-            ['2020-03-01', '2020-03-07',  5,],
+            ['2020-03-01', '2020-03-07', 5,],
         ];
     }
 
@@ -66,16 +68,15 @@ class WorkingHoursRepositoryTest extends Unit
      * @param string|null $ende
      * @param int         $count
      *
-     * @dataProvider valideFilterParameter
-     *
      * @throws Exception
      */
+    #[DataProvider('valideFilterParameter')]
     public function testFindAllWithValideParameter(?string $start, ?string $ende, int $count): void
     {
         $repository = new WorkingHoursRepository($this->pdoObject);
         $models = $repository->findFiltered($start, $ende);
-        $this->assertIsArray($models);
-        $this->assertContainsOnly(WorkingHours::class, $models);
+
+        $this->assertContainsOnlyInstancesOf(WorkingHours::class, $models);
         $this->assertCount($count, $models);
     }
 
@@ -85,23 +86,23 @@ class WorkingHoursRepositoryTest extends Unit
     public function invalideFilterParameter(): array
     {
         return [
-            ['2020-04-31',null],
-            [null,        '2020-04-31'],
-            ['2020-04-00','2020-04-31'],
-            ['2020-04-01','2020-04-31'],
-            ['2020-04-00','2020-04-30'],
+            ['2020-04-31', null],
+            [null, '2020-04-31'],
+            ['2020-04-00', '2020-04-31'],
+            ['2020-04-01', '2020-04-31'],
+            ['2020-04-00', '2020-04-30'],
             //
-            ['2020-04',   null],
-            [null,        '2020-04'],
-            ['2020-04',   '2020-04'],
-            ['2020-04-01','2020-04'],
-            ['2020-04',   '2020-04-30'],
+            ['2020-04', null],
+            [null, '2020-04'],
+            ['2020-04', '2020-04'],
+            ['2020-04-01', '2020-04'],
+            ['2020-04', '2020-04-30'],
             //
-            ['2020',      null],
-            [null,        '2020'],
-            ['2020',      '2020'],
-            ['2020-04-01','2020'],
-            ['2020',      '2020-04-30'],
+            ['2020', null],
+            [null, '2020'],
+            ['2020', '2020'],
+            ['2020-04-01', '2020'],
+            ['2020', '2020-04-30'],
         ];
     }
 
@@ -109,10 +110,9 @@ class WorkingHoursRepositoryTest extends Unit
      * @param string|null $start
      * @param string|null $ende
      *
-     * @dataProvider invalideFilterParameter
-     *
      * @throws Exception
      */
+    #[DataProvider('invalideFilterParameter')]
     public function testFindAllWithInvalideParameter(?string $start, ?string $ende): void
     {
         $repository = new WorkingHoursRepository($this->pdoObject);
@@ -127,7 +127,6 @@ class WorkingHoursRepositoryTest extends Unit
     {
         $repository = new WorkingHoursRepository($this->pdoObject);
         $model = $repository->findByKey(self::EXISTING_DATE);
-        $this->assertInstanceOf(WorkingHours::class, $model);
         $this->assertEquals(new DateTime(self::EXISTING_DATE), $model->getWorkingDay());
         $this->assertEquals(new DateInterval(self::EXISTING_INTERVAL), $model->getWorkingTime());
     }
@@ -163,7 +162,6 @@ class WorkingHoursRepositoryTest extends Unit
         ]);
         $repository->insert($model);
         $model = $repository->findByKey(self::NEW_DATE);
-        $this->assertInstanceOf(WorkingHours::class, $model);
         $this->assertEquals(new DateTime(self::NEW_DATE), $model->getWorkingDay());
         $this->assertEquals(new DateInterval(self::NEW_INTERVAL), $model->getWorkingTime());
         $this->assertCount(self::RECORDS_COUNT + 1, $repository->findAll());
diff --git a/api/tests/unit/Repositories/WorkingHoursViewRepositoryTest.php b/api/tests/unit/Repositories/WorkingHoursViewRepositoryTest.php
index 9297162..14ebb54 100644
--- a/api/tests/unit/Repositories/WorkingHoursViewRepositoryTest.php
+++ b/api/tests/unit/Repositories/WorkingHoursViewRepositoryTest.php
@@ -2,12 +2,11 @@
 
 namespace TorstenHettstedt\TimekeepingApi\Tests\Unit\Repositories;
 
+use Codeception\Attribute\DataProvider;
 use Codeception\Test\Unit;
 use DateTime;
 use DateTimeZone;
-use Exception;
-use PDO;
-use TorstenHettstedt\TimekeepingApi\Models\WorkingHoursView;
+use PDO;use TorstenHettstedt\TimekeepingApi\Models\WorkingHoursView;
 use TorstenHettstedt\TimekeepingApi\Repositories\RepositoryRecordNotFoundException;
 use TorstenHettstedt\TimekeepingApi\Repositories\WorkingHoursWeeklyViewRepository;
 use TorstenHettstedt\TimekeepingApi\Repositories\WorkingHoursMonthlyViewRepository;
@@ -25,7 +24,7 @@ class WorkingHoursViewRepositoryTest extends Unit
     }
 
     /**
-     * @return array[]
+     * @return array<array{string, int}>
      */
     public function listObjectProvider(): array
     {
@@ -37,20 +36,19 @@ class WorkingHoursViewRepositoryTest extends Unit
     }
 
     /**
-     * @return array[]
-     * @throws Exception
+     * @return array<array{string, string, int, DateTime}>
      */
     public function existingObjectProvider(): array
     {
         return [
-            [WorkingHoursYearlyViewRepository::class,  '2020',          61, new DateTime('2020-01-01', new DateTimeZone('UCT'))],
-            [WorkingHoursMonthlyViewRepository::class, '2020 February', 20, new DateTime('2020-02-01', new DateTimeZone('UCT'))],
-            [WorkingHoursWeeklyViewRepository::class,  '2020#03',        5, new DateTime('2020-01-13', new DateTimeZone('UCT'))],
+            [WorkingHoursYearlyViewRepository::class,  '2020',          61, date_create('2020-01-01', new DateTimeZone('UCT'))],
+            [WorkingHoursMonthlyViewRepository::class, '2020 February', 20, date_create('2020-02-01', new DateTimeZone('UCT'))],
+            [WorkingHoursWeeklyViewRepository::class,  '2020#03',        5, date_create('2020-01-13', new DateTimeZone('UCT'))],
         ];
     }
 
     /**
-     * @return array[]
+     * @return array<array{string, string}>
      */
     public function notExistingObjectProvider(): array
     {
@@ -61,49 +59,30 @@ class WorkingHoursViewRepositoryTest extends Unit
         ];
     }
 
-    /**
-     * @param string $period_class
-     * @param int    $count_records
-     *
-     * @dataProvider listObjectProvider
-     */
-    public function testFindAll(string $period_class, int $count_records): void
+    #[DataProvider(('listObjectProvider'))]
+    public function testFindAll(string $periodClass, int $countRecords): void
     {
-        $repository = new $period_class($this->pdoObject);
+        $repository = new $periodClass($this->pdoObject);
         $models = $repository->findAll();
         $this->assertIsArray($models);
-        $this->assertContainsOnly(WorkingHoursView::class, $models);
-        $this->assertCount($count_records, $models);
+        $this->assertContainsOnlyInstancesOf(WorkingHoursView::class, $models);
+        $this->assertCount($countRecords, $models);
     }
 
-    /**
-     *
-     * @dataProvider existingObjectProvider
-     *
-     * @param string   $period_class
-     * @param string   $search
-     * @param int      $workingDays
-     * @param DateTime $period
-     */
-    public function testExistingFindByKey(string $period_class, string $search, int $workingDays, DateTime $period): void
+    #[DataProvider(('existingObjectProvider'))]
+    public function testExistingFindByKey(string $periodClass, string $search, int $workingDays, DateTime $period): void
     {
-        $repository = new $period_class($this->pdoObject);
+        $repository = new $periodClass($this->pdoObject);
         $model = $repository->findByKey($search);
         $this->assertInstanceOf(WorkingHoursView::class, $model);
         $this->assertEquals($workingDays, $model->getWorkingDays());
         $this->assertEquals($period->format('Ymd'), $model->getPeriod()->format('Ymd'));
     }
 
-    /**
-     * @param string $period_class
-     * @param string $search
-     *
-     * @dataProvider notExistingObjectProvider
-     *
-     */
-    public function testNotExistingFindByKey(string $period_class, string $search): void
+    #[DataProvider(('notExistingObjectProvider'))]
+    public function testNotExistingFindByKey(string $periodClass, string $search): void
     {
-        $repository = new $period_class($this->pdoObject);
+        $repository = new $periodClass($this->pdoObject);
         $this->expectException(RepositoryRecordNotFoundException::class);
         $repository->findByKey($search);
     }
diff --git a/compose.yml b/compose.yml
index 786849c..41d45cd 100644
--- a/compose.yml
+++ b/compose.yml
@@ -1,32 +1,35 @@
 volumes:
-  logs:
-    driver: local
+    logs:
+        driver: local
 services:
-  api:
-    build: ./api/
-    environment:
-      docker: "true"
-    ports:
-      - 8090:80
-    volumes:
-      - ./api:/var/www
-      - logs:/var/www/logs
-  test-api:
-    build: ./api/
-    environment:
-      docker: "true"
-      DATABASES_HOST: psql.torsten-hettstedt.net
-      DATABASES_NAME: testdb
-      DATABASES_USER: bruce
-      DATABASES_PASS: mypass
-    ports:
-      - 8091:80
-    volumes:
-      - ./api:/var/www
-      - logs:/var/www/logs
-  ui:
-      build: ./ui/
-      ports:
-          - 80:80
-      depends_on:
-          - api
\ No newline at end of file
+    api:
+        build: ./api/
+        environment:
+            docker: "true"
+        ports:
+            - "8090:80"
+        volumes:
+            - ./api:/var/www
+            - logs:/var/www/logs
+    test-api:
+        build: ./api/
+        environment:
+            docker: "true"
+            DATABASES_HOST: psql.torsten-hettstedt.net
+            DATABASES_NAME: testdb
+            DATABASES_USER: bruce
+            DATABASES_PASS: mypass
+        ports:
+            - "8091:80"
+        volumes:
+            - ./api:/var/www
+            - logs:/var/www/logs
+    ui:
+        build: ./ui/
+        env_file:
+            -   ui/.env
+        ports:
+            - "8080:3000"
+        depends_on:
+            - api
+            - test-api
\ No newline at end of file
diff --git a/deploy.sh b/deploy.sh
index b65b6c1..be6c037 100644
--- a/deploy.sh
+++ b/deploy.sh
@@ -1,9 +1,9 @@
 #!/usr/bin/env bash
 
 create_css_files() {
-    cd ui/public || exit 2
-    lessc --source-map less/print.less print.css
-    lessc --source-map less/global.less global.css
+    cd ui || exit 2
+    lessc --source-map less/print.less static/print.css
+    lessc --source-map less/global.less static/global.css
     cd ../..
 }
 
@@ -27,6 +27,13 @@ build_ui() {
     cd ..
 }
 
+codeception_install() {
+    pwd
+    cd api/ || exit 2
+    test -e ./tests/unit.suite.yml || ./vendor/bin/codecept build
+    cd ..
+}
+
 test_unit() {
     pwd
     cd api/ || exit 2
@@ -44,4 +51,4 @@ composer_run() {
     docker compose up -d
 }
 
-create_css_files && install_ui_dependence && install_api_dependence && build_ui && test_unit && composer_run && test_api
\ No newline at end of file
+create_css_files && install_ui_dependence && install_api_dependence && build_ui && codeception_install && test_unit && composer_run && test_api
\ No newline at end of file
diff --git a/ui/.dockerignore b/ui/.dockerignore
new file mode 100644
index 0000000..76add87
--- /dev/null
+++ b/ui/.dockerignore
@@ -0,0 +1,2 @@
+node_modules
+dist
\ No newline at end of file
diff --git a/ui/Dockerfile b/ui/Dockerfile
index 2ab11d1..c1ae596 100644
--- a/ui/Dockerfile
+++ b/ui/Dockerfile
@@ -1,3 +1,16 @@
-FROM httpd:2.4
+FROM node:22-alpine AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+RUN npm prune --production
 
-COPY ./public/ /usr/local/apache2/htdocs/
\ No newline at end of file
+FROM node:22-alpine
+WORKDIR /app
+COPY --from=builder /app/build build/
+COPY --from=builder /app/node_modules node_modules/
+COPY package.json .
+EXPOSE 3000
+ENV NODE_ENV=production
+CMD [ "node", "build" ]
\ No newline at end of file
diff --git a/ui/public/less/global.less b/ui/less/global.less
similarity index 100%
rename from ui/public/less/global.less
rename to ui/less/global.less
diff --git a/ui/public/less/lesslib/basics.less b/ui/less/lesslib/basics.less
similarity index 100%
rename from ui/public/less/lesslib/basics.less
rename to ui/less/lesslib/basics.less
diff --git a/ui/public/less/lesslib/colors.less b/ui/less/lesslib/colors.less
similarity index 100%
rename from ui/public/less/lesslib/colors.less
rename to ui/less/lesslib/colors.less
diff --git a/ui/public/less/lesslib/fonts.less b/ui/less/lesslib/fonts.less
similarity index 100%
rename from ui/public/less/lesslib/fonts.less
rename to ui/less/lesslib/fonts.less
diff --git a/ui/public/less/lesslib/layout.less b/ui/less/lesslib/layout.less
similarity index 63%
rename from ui/public/less/lesslib/layout.less
rename to ui/less/lesslib/layout.less
index d0bd78a..0c280e1 100644
--- a/ui/public/less/lesslib/layout.less
+++ b/ui/less/lesslib/layout.less
@@ -5,50 +5,66 @@
 html {
     body {
         background: @mainColorLight;
-        > header, > footer {
-            color: @mainColorDark;
-            background: @mainColor;
-            font-family: serif;
-            h1 {
-                font-size: 3rem;
-                text-align: center;
-            }
-            p {
-                text-indent: inherit;
-                &:first-letter {
-                    font-size: inherit;
+        div {
+            > header, > footer {
+                color: @mainColorDark;
+                background: @mainColor;
+                font-family: serif;
+
+                h1 {
+                    font-size: 3rem;
+                    text-align: center;
+                }
+
+                p {
+                    text-indent: inherit;
+
+                    &:first-letter {
+                        font-size: inherit;
+                    }
+
+                    font-style: italic;
                 }
-                font-style: italic;
             }
-        }
-        > header h1 {
-            margin: 1rem auto;
-        }
-        > footer {
-            color: contrast(@mainColorDark);
-        }
-        & > nav {
-            ul {
-                background: darken(@mainColorLight,33%,relativ);
-                li {
-                    font-weight: bold;
-                    &:not(:first-child) {
-                        border-left: @mainColorDark solid thin;
-                    }
-                    a {
-                        text-decoration: none;
-                        color: @mainColorDark;
-                    }
-                    &:hover {
-                        background: lighten(@mainColor,20%,relativ);
-                        a {
-                            color: lighten(@mainColor,66%,relativ);
+
+            > header h1 {
+                margin: 1rem auto;
+            }
+
+            > footer {
+                color: contrast(@mainColorDark);
+            }
+
+            & > nav {
+                ul {
+                    background: darken(@mainColorLight, 33%, relativ);
+
+                    li {
+                        font-weight: bold;
+
+                        &:not(:first-child) {
+                            border-left: @mainColorDark solid thin;
                         }
-                    }
-                    &.selected, &.selected:hover {
-                        background: lighten(@mainColor,10%,relativ);
+
                         a {
-                            color: lighten(@mainColor,66%,relativ);
+                            text-decoration: none;
+                            color: @mainColorDark;
+                        }
+
+                        &:hover {
+                            background: lighten(@mainColor, 20%, relativ);
+
+                            a {
+                                color: lighten(@mainColor, 66%, relativ);
+                            }
+                        }
+
+                        &.selected, &.selected:hover {
+                            background: lighten(@mainColor, 10%, relativ);
+
+                            a {
+                                color: lighten(@mainColor, 66%, relativ);
+                            }
                         }
                     }
                 }
@@ -63,15 +79,19 @@ main {
         border-color: @mainColorDark;
         border-width: medium;
     }
+
     section {
         @sectionMargin: 1rem;
+
         h1, h2 {
             margin: @sectionMargin;
         }
+
         p, ul, ol, dl {
             margin: @sectionMargin;
             text-indent: @sectionMargin * 2;
         }
+
         table {
             thead {
                 tr:last-child {
@@ -79,7 +99,9 @@ main {
                         border-bottom: @mainColor solid thin;
                     }
                 }
-            };
+            }
+        ;
+
             tbody {
                 td.absence-time {
                     color: @redColor;
@@ -87,15 +109,23 @@ main {
                     text-decoration-style: dashed;
                 }
             }
+            tfoot {
+                * {
+                    border: initial;
+                }
+            }
         }
+
         form {
             @formLabelWidth: 10rem;
             @formItemWidth: 40rem;
+
             nav.menu {
                 width: @formItemWidth + @formLabelWidth + 4rem;
                 border-color: @mainColor;
                 border-bottom-style: solid;
                 margin: 1rem auto;
+
                 span {
                     border-color: @mainColor;
                     border-style: solid solid none;
@@ -103,73 +133,89 @@ main {
                     display: inline-block;
                     font-weight: bolder;
                     margin-right: 1rem;
+
                     &:first-child {
                         margin-left: 1.5rem;
                     }
+
                     &:hover {
-                        background-color: darken(@mainColorLight,10%,relativ);
+                        background-color: darken(@mainColorLight, 10%, relativ);
                     }
+
                     &.active {
-                        background-color: darken(@mainColorLight,20%,relativ);
+                        background-color: darken(@mainColorLight, 20%, relativ);
                     }
                 }
             }
+
             fieldset {
                 width: @formItemWidth + @formLabelWidth + 2rem;
                 margin: 1rem auto;
-                border-style: solid ;
+                border-style: solid;
                 border-color: @mainColor;
                 padding: @sectionMargin;
+
                 &.tasten {
                     border: none;
                     background-color: @mainColorLight;
                 }
+
                 legend {
                     margin: @sectionMargin;
                     margin-left: @sectionMargin * 2;
                 }
+
                 div {
-                    &  > label {
+                    & > label {
                         width: @formLabelWidth;
                         display: inline-block;
                         margin: 0.5rem;
                     }
+
                     input {
                         display: inline-block;
                         width: @formItemWidth;
                         padding: 0.25rem;
                         margin-bottom: 1.0rem;
-                        border-style:  solid;
+                        border-style: solid;
                         border-width: thin;
                     }
                 }
             }
         }
+
         button {
-            .button(@mainColor, spin(lighten(@mainColor,66%,relativ),@subColor));
+            .button(@mainColor, spin(lighten(@mainColor, 66%, relativ), @subColor));
+
             &.sub-button {
-                .button(lighten(@mainColor,20%,relativ), spin(@mainColor,@subColor));
+                .button(lighten(@mainColor, 20%, relativ), spin(@mainColor, @subColor));
             }
         }
+
         footer {
             text-align: right;
             padding: 0;
+
             p {
                 padding: 0.5rem;
                 display: inline-block;
                 margin: inherit;
                 text-indent: inherit;
+
                 &:first-letter {
                     font-size: inherit;
                 }
-                background: @mainColorLight ;
-                color: @mainColor ;
+
+                background: @mainColorLight;
+                color: @mainColor;
                 font-style: italic;
                 font-size: 85%;
             }
+
             nav li {
                 padding: 0.5rem;
             }
+
             border-bottom-style: solid;
         }
     }
diff --git a/ui/public/less/lesslib/media_queries.less b/ui/less/lesslib/media_queries.less
similarity index 98%
rename from ui/public/less/lesslib/media_queries.less
rename to ui/less/lesslib/media_queries.less
index 0b57d01..78d7375 100644
--- a/ui/public/less/lesslib/media_queries.less
+++ b/ui/less/lesslib/media_queries.less
@@ -5,7 +5,7 @@
         font-size: 10pt;
     }
     header, footer, main, nav, aside {
-        body > & {
+        body div > & {
             width: 19cm;
             margin: auto;
             .border-box();
@@ -15,7 +15,7 @@
         padding: 0.5rem;
         ;
     }
-    body {
+    body div {
         & > header {
             font-size: 200%;
             font-weight: bolder;
@@ -71,7 +71,7 @@
 
 @media screen and (min-width: 831px) {
     header, footer, main, nav, aside {
-        body > & {
+        body div > & {
             width: @breiteMainBereich;
             margin: auto;
             .border-box();
@@ -80,7 +80,7 @@
     header, footer{
         padding: 0.5rem;
     }
-    body {
+    body div {
         & > header {
             font-size: 200%;
             font-weight: bolder;
@@ -139,7 +139,7 @@
 }
 
 @media screen and (max-width: 830px) {
-    html body {
+    html body div {
         @boxHeight: 5rem;
         & > header {
             height: @boxHeight;
@@ -267,7 +267,7 @@
     }
 }
 @media screen and (max-width: 720px) {
-    html body {
+    html body div {
         @boxHeight: 2.5rem;
         & > header {
             height: @boxHeight;
diff --git a/ui/public/less/lesslib/mixins.framework.less b/ui/less/lesslib/mixins.framework.less
similarity index 100%
rename from ui/public/less/lesslib/mixins.framework.less
rename to ui/less/lesslib/mixins.framework.less
diff --git a/ui/public/less/lesslib/mixins.less b/ui/less/lesslib/mixins.less
similarity index 100%
rename from ui/public/less/lesslib/mixins.less
rename to ui/less/lesslib/mixins.less
diff --git a/ui/public/less/lesslib/print/basics.less b/ui/less/lesslib/print/basics.less
similarity index 99%
rename from ui/public/less/lesslib/print/basics.less
rename to ui/less/lesslib/print/basics.less
index 63acfce..f464f04 100644
--- a/ui/public/less/lesslib/print/basics.less
+++ b/ui/less/lesslib/print/basics.less
@@ -2,7 +2,7 @@ html {
     font-size: 100%;
 }
 
-body {
+body div {
     color: #000;
     font-size: 1em;
     font-family: OpenSans, "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
diff --git a/ui/public/less/lesslib/print/colors.less b/ui/less/lesslib/print/colors.less
similarity index 100%
rename from ui/public/less/lesslib/print/colors.less
rename to ui/less/lesslib/print/colors.less
diff --git a/ui/public/less/lesslib/print/layout.less b/ui/less/lesslib/print/layout.less
similarity index 98%
rename from ui/public/less/lesslib/print/layout.less
rename to ui/less/lesslib/print/layout.less
index 0864ddf..864ebe6 100644
--- a/ui/public/less/lesslib/print/layout.less
+++ b/ui/less/lesslib/print/layout.less
@@ -1,5 +1,5 @@
 html {
-    body {
+    body div {
         > header, > footer {
             background: none;
             font-family: serif;
@@ -59,7 +59,7 @@ main {
                     }
                 }
             }
-            tbody {
+            tbody div {
                 th {
                     font-weight: bold;
                     text-align: center;
diff --git a/ui/public/less/print.less b/ui/less/print.less
similarity index 100%
rename from ui/public/less/print.less
rename to ui/less/print.less
diff --git a/ui/package.json b/ui/package.json
index 567b320..6814751 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -1,31 +1,38 @@
 {
-  "private": true,
-  "name": "svelte-demo",
-  "scripts": {
-    "build": "rollup -c",
-    "autobuild": "rollup -c -w",
-    "dev": "run-p start:dev autobuild",
-    "start": "sirv public --single",
-    "start:dev": "sirv public --dev --single"
-  },
-  "dependencies": {
-    "ganalytics": "^3.1.2",
-    "navaid": "^1.0.2",
-    "open-iconic": "^1.1.1"
-  },
-  "devDependencies": {
-    "@iconify-icons/oi": "^1.1.0",
-    "@iconify/svelte": "^1.0.4",
-    "@rollup/plugin-commonjs": "^15.0.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-replace": "^2.3.0",
-    "dotenv": "^8.2.0",
-    "npm-run-all": "^4.1.3",
-    "rollup": "^2.30.0",
-    "rollup-plugin-svelte": "^6.0.0",
-    "rollup-plugin-terser": "^7.0.0",
-    "sirv-cli": "^1.0.8",
-    "svelte": "^3.4.4",
-    "svelte-paginate": "^0.1.0"
-  }
+    "private": true,
+    "name": "svelte-demo",
+    "type": "module",
+    "scripts": {
+        "dev": "vite dev",
+        "build": "vite build",
+        "preview": "vite preview",
+        "prepare": "svelte-kit sync || echo ''",
+        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+    },
+    "dependencies": {
+        "ganalytics": "^3.1.2",
+        "navaid": "^1.0.2",
+        "open-iconic": "^1.1.1",
+        "papaparse": "^5.5.3"
+    },
+    "devDependencies": {
+        "@sveltejs/adapter-auto": "^6.0.0",
+        "@sveltejs/kit": "^2.16.0",
+        "@sveltejs/vite-plugin-svelte": "^5.0.0",
+        "@sveltejs/adapter-node": "^5.2.12",
+        "svelte": "^5.0.0",
+        "svelte-check": "^4.0.0",
+        "typescript": "^5.0.0",
+        "vite": "^6.2.6",
+        "dotenv": "^8.2.0",
+        "wx-svelte-grid": "^2.1.5",
+        "@iconify-icons/oi": "^1.1.0",
+        "@iconify/svelte": "^5.0.0"
+    },
+    "exports": {
+        ".": {
+            "svelte": "./puplic/index.js"
+        }
+    }
 }
diff --git a/ui/public/index.html b/ui/public/index.html
deleted file mode 100644
index a48646e..0000000
--- a/ui/public/index.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!doctype html>
-<!--suppress HtmlUnknownTarget -->
-<!--suppress JSUnresolvedLibraryURL -->
-<html lang="de">
-<head>
-	<base href="/" />
-	<meta charset="utf8">
-	<meta name="viewport" content="width=device-width">
-
-	<title>Svelte app</title>
-
-    <link rel='icon' type='image/png' href='/favicon.png'>
-	<link rel="stylesheet" href="/global.css" media="screen">
-	<link rel="stylesheet" href="/print.css" media="print">
-	<link rel="stylesheet" href="/bundle.css">
-    <script type="module" src="https://unpkg.com/dimport?module" data-main="/index.js"></script>
-    <script nomodule src="https://unpkg.com/dimport/nomodule" data-main="/index.js"></script>
-</head>
-
-<body>
-</body>
-</html>
diff --git a/ui/rollup.config.js b/ui/rollup.config.js
deleted file mode 100644
index 7b165f5..0000000
--- a/ui/rollup.config.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import svelte from 'rollup-plugin-svelte';
-import replace from '@rollup/plugin-replace';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import { terser } from 'rollup-plugin-terser';
-import {config} from 'dotenv';
-
-const production = !process.env.ROLLUP_WATCH;
-
-export default {
-	input: 'src/index.js',
-	output: {
-		name: 'app',
-		format: 'esm',
-		sourcemap: true,
-		dir: 'public',
-	},
-	preserveEntrySignatures: false,
-	plugins: [
-		svelte({
-			// enable run-time checks when not in production
-			dev: !production,
-			// we'll extract any component CSS out into
-			// a separate file — better for performance
-			css: css => {
-				css.write('bundle.css');
-			}
-		}),
-
-		// If you have external dependencies installed from
-		// npm, you'll most likely need these plugins. In
-		// some cases you'll need additional configuration —
-		// consult the documentation for details:
-		// https://github.com/rollup/rollup-plugin-commonjs
-		resolve(),
-		commonjs(),
-
-		replace({
-			'process.env.NODE_ENV': JSON.stringify(production ? 'production' : 'development'),
-            'env': JSON.stringify({...config().parsed /* attached the .env config*/})
-		}),
-
-		// If we're building for production (npm run build
-		// instead of npm run dev), minify
-		production && terser()
-	],
-
-	watch: {
-		clearScreen: false
-	}
-};
diff --git a/ui/src/app.html b/ui/src/app.html
new file mode 100644
index 0000000..025cb9c
--- /dev/null
+++ b/ui/src/app.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="de">
+    <head>
+        <base href="/"/>
+        <meta charset="utf8">
+        <meta name="viewport" content="width=device-width">
+
+        <title>Svelte app</title>
+
+        <link rel='icon' type='image/png' href='%sveltekit.assets%/favicon.png'>
+        <meta name="viewport" content="width=device-width, initial-scale=1"/>
+        <meta name="color-scheme" content="dark light"/>
+        %sveltekit.head%
+        <link rel="stylesheet" href="%sveltekit.assets%/global.css" media="screen">
+        <link rel="stylesheet" href="%sveltekit.assets%/print.css" media="print">
+    </head>
+
+    <body>
+        <div style="display: contents">
+            %sveltekit.body%
+        </div>
+    </body>
+</html>
diff --git a/ui/src/components/App.svelte b/ui/src/components/App.svelte
deleted file mode 100644
index 0577043..0000000
--- a/ui/src/components/App.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-<header>
-    Arbeitszeiten
-</header>
-<Nav {active} />
-<main>
-    <svelte:component this={Route} {params} />
-</main>
-<footer><p>© Torsten Lücke 2021</p></footer>
-
-<script>
-	import Navaid from 'navaid';
-	import { onDestroy } from 'svelte';
-	import Nav from './Nav.svelte';
-
-	let Route, params={}, active;
-	let uri = location.pathname;
-	$: active = uri.split('/').pop() || 'home';
-
-	function run(thunk, obj) {
-		const target = uri;
-
-		thunk.then(m => {
-			if (target !== uri) return;
-
-			params = obj || {};
-
-			if (m.preload) {
-				m.preload({ params }).then(() => {
-					if (target !== uri) return;
-					Route = m.default;
-					window.scrollTo(0, 0);
-				});
-			} else {
-				Route = m.default;
-				window.scrollTo(0, 0);
-			}
-		});
-	}
-
-	function track(obj) {
-		uri = obj.state || obj.uri || location.pathname;
-	}
-
-	addEventListener('replacestate', track);
-	addEventListener('pushstate', track);
-	addEventListener('popstate', track);
-
-	const router = Navaid('/')
-		.on('/', () => run(import('../routes/Home.svelte')))
-		.on('/views/weekly', () => run(import('../routes/WeeklyViews.svelte')))
-		.on('/views/monthly', () => run(import('../routes/MonthlyViews.svelte')))
-		.on('/views/yearly', () => run(import('../routes/YearlyViews.svelte')))
-		.on('/working-hours', () => run(import('../routes/WorkingHours.svelte')))
-		.listen();
-
-	onDestroy(router.unlisten);
-</script>
\ No newline at end of file
diff --git a/ui/src/components/Nav.svelte b/ui/src/components/Nav.svelte
deleted file mode 100644
index a8fad56..0000000
--- a/ui/src/components/Nav.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<!--suppress HtmlUnknownTarget -->
-<nav>
-	<ul>
-		<li class="{ isActive('home') }"><a href="/">Home</a></li>
-		<li class="{ isActive('weekly') }"><a href="/views/weekly">Wochenansicht</a></li>
-		<li class="{ isActive('monthly') }"><a href="/views/monthly">Monatsansicht</a></li>
-		<li class="{ isActive('yearly') }"><a href="/views/yearly">Jahresansicht</a></li>
-		<li class="{ isActive('working-hours') }"><a href="/working-hours">Einträge</a></li>
-	</ul>
-</nav>
-
-<script>
-	export let active;
-	$: isActive = str => active === str ? 'selected' : '';
-</script>
diff --git a/ui/src/components/Repositories.svelte b/ui/src/components/Repositories.svelte
deleted file mode 100644
index 15361bd..0000000
--- a/ui/src/components/Repositories.svelte
+++ /dev/null
@@ -1,110 +0,0 @@
-<script context="module">
-    const MyFetch = {
-        'post': async (rest_url, request_body) => {
-            return MyFetch._fetch(rest_url, MyFetch._buildRequestOptions(request_body), {})
-        },
-        'put': async (rest_url, http_body) => {
-            return MyFetch._fetch(rest_url, MyFetch._buildRequestOptions(http_body, true), {})
-        },
-        'get': async (rest_url, query_parameters) => {
-            if (query_parameters !== null) {
-                let filter = []
-                for (let parameter in query_parameters) {
-                    filter.push(parameter + '=' + query_parameters[parameter])
-                }
-                if (filter.length > 0) {
-                    rest_url += '?' + filter.join('&')
-                }
-            }
-            return MyFetch._fetch(rest_url, {})
-        },
-        '_fetch': async (rest_url, request_options) => {
-            // noinspection JSUnresolvedVariable
-            let response = await MyFetch._pureFetch(rest_url, request_options).catch(err => {
-                console.error(err)
-                return null
-            })
-            if (!response.ok) {
-                throw new Error('Fail!')
-            }
-            return response.json()
-        },
-        '_buildRequestOptions': (request_body, needPut) => {
-            return {
-                method: (needPut === true) ? 'PUT' : 'POST',
-                mode: 'cors',
-                cache: 'no-cache',
-                credentials: 'omit',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: request_body,
-            }
-        },
-        '_pureFetch': async (rest_url, request_options) => {
-            // noinspection JSUnresolvedVariable
-            return await fetch(env.API_URL + rest_url, request_options)
-        }
-    }
-
-    export const WorkingHoursRepository = {
-        'browse': (startDate = '', endDate = '') => {
-            let filter = {}
-            if (startDate !== '') {
-                filter['start-date'] = startDate
-            }
-            if (endDate !== '') {
-                filter['end-date'] = endDate
-            }
-            return MyFetch.get('/working-hours', filter)
-        },
-
-        'read': date => {
-            return MyFetch.get('/working-hours/' + date)
-        },
-
-        'readOrNew': async date => {
-            let response = await MyFetch._pureFetch('/working-hours/' + date)
-            if (response.status === 404) {
-                return {workingTime: '00:00:00', workingDay: date}
-            } else if (!response.ok) {
-                throw new Error('Fail!')
-            }
-            return response.json()
-        },
-
-        'add': async (record) => {
-            console.debug(record);
-            return MyFetch.post('/working-hours', JSON.stringify(record))
-        },
-
-        'update': async (date, record) => {
-            console.debug(record);
-            return MyFetch.put('/working-hours/' + date, JSON.stringify(record))
-        },
-
-        'addOrUpdate': async (date, record) => {
-            console.debug(record);
-            let request_options = MyFetch._buildRequestOptions(JSON.stringify(record))
-            let response = await MyFetch._pureFetch('/working-hours', request_options)
-            if (response.status === 409) {
-                return WorkingHoursRepository.update(date, record)
-            } else if (!response.ok) {
-                throw new Error('Fail!')
-            }
-            return response.json()
-        }
-    }
-
-    export const WorkingHoursViewsRepository = {
-        'weekly': async () => {
-            return MyFetch.get('/views/working-hours/weekly')
-        },
-        'monthly': async () => {
-            return MyFetch.get('/views/working-hours/monthly')
-        },
-        'yearly': async () => {
-            return MyFetch.get('/views/working-hours/yearly')
-        },
-    }
-</script>
\ No newline at end of file
diff --git a/ui/src/components/TimekeepingDate.svelte b/ui/src/components/TimekeepingDate.svelte
deleted file mode 100644
index 3d23739..0000000
--- a/ui/src/components/TimekeepingDate.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script context="module">
-    export class TimekeepingDate extends Date {
-        getDateString() {
-            return this.getFullYear() + "-"
-            + (this.getMonth() + 1).toString().padStart(2, '0') + "-"
-            + this.getDate().toString().padStart(2, '0')
-        }
-
-        getNextDay() {
-            let nextDay = new TimekeepingDate(this);
-            nextDay.setDate(this.getDate() + 1)
-            return nextDay
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/ui/src/index.js b/ui/src/index.js
deleted file mode 100644
index 8d5bff5..0000000
--- a/ui/src/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import App from './components/App.svelte';
-
-new App({
-	target: document.body
-});
diff --git a/ui/src/lib/Models.svelte.js b/ui/src/lib/Models.svelte.js
new file mode 100644
index 0000000..099129a
--- /dev/null
+++ b/ui/src/lib/Models.svelte.js
@@ -0,0 +1,17 @@
+export class PeriodRecord {
+    /**
+     * @param {{ workingDays: Number; totalHours: any; overtime: string; period: string; }} record
+     */
+    constructor(record) {
+        this.workingDays = Number(record.workingDays)
+        this.totalHours = String(record.totalHours)
+        this.period = String(record.period)
+        this.overtime = String('##:##:##')
+        this.isMinus = false
+        const interval = record.overtime.match(/^(-?)(\d\d:\d\d:\d\d)$/)
+        if (interval) {
+            this.overtime = String(interval[2])
+            this.isMinus = String(interval[1]) === '-'
+        }
+    }
+}
diff --git a/ui/src/lib/Repositories.svelte b/ui/src/lib/Repositories.svelte
new file mode 100644
index 0000000..24ff9a0
--- /dev/null
+++ b/ui/src/lib/Repositories.svelte
@@ -0,0 +1,163 @@
+<script module>
+
+    const MyFetch = {
+        /**
+         * @param {String} rest_url
+         * @param {String} request_body
+         */
+        'post': async (rest_url, request_body) => {
+            return MyFetch._fetch(rest_url, MyFetch._buildRequestOptions(request_body, false))
+        },
+        /**
+         * @param {String} rest_url
+         * @param {String} http_body
+         */
+        'put': async (rest_url, http_body) => {
+            return MyFetch._fetch(rest_url, MyFetch._buildRequestOptions(http_body, true))
+        },
+        /**
+         * @param {String} rest_url
+         * @param {Object|null} query_parameters
+         */
+        'get': async (rest_url, query_parameters = null) => {
+            if (query_parameters !== null) {
+                let filter = []
+                for (let parameter in query_parameters) {
+                    filter.push(parameter + '=' + query_parameters[parameter])
+                }
+                if (filter.length > 0) {
+                    rest_url += '?' + filter.join('&')
+                }
+            }
+            return MyFetch._fetch(rest_url, {})
+        },
+        /**
+         * @param {String} rest_url
+         * @param {Object} request_options
+         */
+        '_fetch': async (rest_url, request_options) => {
+            // noinspection JSUnresolvedVariable
+            let response = await MyFetch._pureFetch(rest_url, request_options).catch(err => {
+                console.error(err)
+                return null
+            })
+            if (response === null || !response.ok) {
+                throw new Error('Fail!')
+            }
+            return response.json()
+        },
+        /**
+         *  @param {String} request_body
+         * @param {Boolean} needPut
+         */
+        '_buildRequestOptions': (request_body, needPut) => {
+            return {
+                method: (needPut === true) ? 'PUT' : 'POST',
+                mode: 'cors',
+                cache: 'no-cache',
+                credentials: 'omit',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: request_body,
+            }
+        },
+        /**
+         * @param {String} rest_url
+         * @param {Object} request_options
+         */
+        '_pureFetch': async (rest_url, request_options = {}) => {
+            // noinspection JSUnresolvedVariable
+            return await fetch(rest_url, request_options)
+        }
+    }
+
+    export const WorkingHoursRepository = {
+        /**
+         * @param {String} api_url
+         * @param {String} startDate
+         * @param {String} endDate
+         */
+        'browse': (api_url, startDate = '', endDate = '') => {
+            let filter = {}
+            if (startDate !== '') {
+                filter['start-date'] = startDate
+            }
+            if (endDate !== '') {
+                filter['end-date'] = endDate
+            }
+            return MyFetch.get(api_url + '/working-hours', filter)
+        },
+        /**
+         * @param {String} api_url
+         * @param {String} date
+         */
+        'read': (api_url, date) => {
+            return MyFetch.get(api_url + '/working-hours/' + date)
+        },
+        /**
+         * @param {String} api_url
+         * @param {String} date
+         */
+        'readOrNew': async (api_url, date) => {
+            let response = await MyFetch._pureFetch(api_url + '/working-hours/' + date)
+            if (response.status === 404) {
+                return {workingTime: '00:00:00', workingDay: date}
+            } else if (!response.ok) {
+                throw new Error('Fail!')
+            }
+            return response.json()
+        },
+        /**
+         * @param {String} api_url
+         * @param {Object} record
+         */
+        'add': async (api_url, record) => {
+            return MyFetch.post(api_url + '/working-hours', JSON.stringify(record))
+        },
+        /**
+         * @param {String} api_url
+         * @param {String} date
+         * @param {Object} record
+         */
+        'update': async (api_url, date, record) => {
+            return MyFetch.put(api_url + '/working-hours/' + date, JSON.stringify(record))
+        },
+        /**
+         * @param {String} api_url
+         * @param {String} date
+         * @param {Object} record
+         */
+        'addOrUpdate': async (api_url, date, record) => {
+            let request_options = MyFetch._buildRequestOptions(JSON.stringify(record), false)
+            let response = await MyFetch._pureFetch(api_url + '/working-hours', request_options)
+            if (response.status === 409) {
+                return WorkingHoursRepository.update(api_url, date, record)
+            } else if (!response.ok) {
+                throw new Error('Fail!')
+            }
+            return response.json()
+        }
+    }
+
+    export const WorkingHoursViewsRepository = {
+        /**
+         * @param {String} api_url
+         */
+        'weekly': async api_url => {
+            return MyFetch.get(api_url + '/views/working-hours/weekly', {})
+        },
+        /**
+         * @param {String} api_url
+         */
+        'monthly': async api_url => {
+            return MyFetch.get(api_url + '/views/working-hours/monthly', {})
+        },
+        /**
+         * @param {String} api_url
+         */
+        'yearly': async api_url => {
+            return MyFetch.get(api_url + '/views/working-hours/yearly', {})
+        },
+    }
+</script>
\ No newline at end of file
diff --git a/ui/src/lib/Views.svelte b/ui/src/lib/Views.svelte
new file mode 100644
index 0000000..6b4556a
--- /dev/null
+++ b/ui/src/lib/Views.svelte
@@ -0,0 +1,63 @@
+<script>
+    import {PeriodRecord} from './Models.svelte.js'
+
+    /**
+     * @type {{ promise: Promise<object>; title: string;}}
+     */
+    let {params} = $props();
+    /** @type PeriodRecord[] **/
+    let records = $state([])
+    let isLoading = $state(true)
+    const init = async () => await params.promise.then(
+        /**
+         * @param {Array<object>} data
+         */
+        data => {
+            records = data.map(row => new PeriodRecord(row))
+            isLoading = false
+        }
+    )
+    init()
+</script>
+
+<svelte:head>
+    <title>{params.title}</title>
+</svelte:head>
+
+<section id="list-records">
+    <header>
+        <h1>{params.title}</h1>
+    </header>
+    <article>
+        {#if isLoading === true}
+            <p>Loading...</p>
+        {:else}
+            <table>
+                <colgroup>
+                    <col/>
+                    <col/>
+                    <col/>
+                    <col/>
+                </colgroup>
+                <thead>
+                <tr>
+                    <th>Zeitraum</th>
+                    <th>Arbeitstage</th>
+                    <th>Arbeitsstunden</th>
+                    <th>Über- / Unterstunden</th>
+                </tr>
+                </thead>
+                <tbody>
+                {#each records as record}
+                    <tr>
+                        <td>{record.period}</td>
+                        <td>{record.workingDays}</td>
+                        <td>{record.totalHours}</td>
+                        <td class="{record.isMinus ? 'absence-time' : ''}">{record.overtime}</td>
+                    </tr>
+                {/each}
+                </tbody>
+            </table>
+        {/if}
+    </article>
+</section>
\ No newline at end of file
diff --git a/ui/src/papaparse.min.js b/ui/src/papaparse.min.js
deleted file mode 100644
index 14c98ff..0000000
--- a/ui/src/papaparse.min.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/* @license
-Papa Parse
-v5.0.2
-https://github.com/mholt/PapaParse
-License: MIT
-*/
-!function(e,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof module&&"undefined"!=typeof exports?module.exports=t():e.Papa=t()}(this,function s(){"use strict";var f="undefined"!=typeof self?self:"undefined"!=typeof window?window:void 0!==f?f:{};var n=!f.document&&!!f.postMessage,o=n&&/blob:/i.test((f.location||{}).protocol),a={},h=0,b={parse:function(e,t){var r=(t=t||{}).dynamicTyping||!1;q(r)&&(t.dynamicTypingFunction=r,r={});if(t.dynamicTyping=r,t.transform=!!q(t.transform)&&t.transform,t.worker&&b.WORKERS_SUPPORTED){var i=function(){if(!b.WORKERS_SUPPORTED)return!1;var e=(r=f.URL||f.webkitURL||null,i=s.toString(),b.BLOB_URL||(b.BLOB_URL=r.createObjectURL(new Blob(["(",i,")();"],{type:"text/javascript"})))),t=new f.Worker(e);var r,i;return t.onmessage=_,t.id=h++,a[t.id]=t}();return i.userStep=t.step,i.userChunk=t.chunk,i.userComplete=t.complete,i.userError=t.error,t.step=q(t.step),t.chunk=q(t.chunk),t.complete=q(t.complete),t.error=q(t.error),delete t.worker,void i.postMessage({input:e,config:t,workerId:i.id})}var n=null;b.NODE_STREAM_INPUT,"string"==typeof e?n=t.download?new l(t):new p(t):!0===e.readable&&q(e.read)&&q(e.on)?n=new m(t):(f.File&&e instanceof File||e instanceof Object)&&(n=new c(t));return n.stream(e)},unparse:function(e,t){var i=!1,_=!0,g=",",v="\r\n",n='"',s=n+n,r=!1,a=null;!function(){if("object"!=typeof t)return;"string"!=typeof t.delimiter||b.BAD_DELIMITERS.filter(function(e){return-1!==t.delimiter.indexOf(e)}).length||(g=t.delimiter);("boolean"==typeof t.quotes||Array.isArray(t.quotes))&&(i=t.quotes);"boolean"!=typeof t.skipEmptyLines&&"string"!=typeof t.skipEmptyLines||(r=t.skipEmptyLines);"string"==typeof t.newline&&(v=t.newline);"string"==typeof t.quoteChar&&(n=t.quoteChar);"boolean"==typeof t.header&&(_=t.header);if(Array.isArray(t.columns)){if(0===t.columns.length)throw new Error("Option columns is empty");a=t.columns}void 0!==t.escapeChar&&(s=t.escapeChar+n)}();var o=new RegExp(U(n),"g");"string"==typeof e&&(e=JSON.parse(e));if(Array.isArray(e)){if(!e.length||Array.isArray(e[0]))return u(null,e,r);if("object"==typeof e[0])return u(a||h(e[0]),e,r)}else if("object"==typeof e)return"string"==typeof e.data&&(e.data=JSON.parse(e.data)),Array.isArray(e.data)&&(e.fields||(e.fields=e.meta&&e.meta.fields),e.fields||(e.fields=Array.isArray(e.data[0])?e.fields:h(e.data[0])),Array.isArray(e.data[0])||"object"==typeof e.data[0]||(e.data=[e.data])),u(e.fields||[],e.data||[],r);throw new Error("Unable to serialize unrecognized input");function h(e){if("object"!=typeof e)return[];var t=[];for(var r in e)t.push(r);return t}function u(e,t,r){var i="";"string"==typeof e&&(e=JSON.parse(e)),"string"==typeof t&&(t=JSON.parse(t));var n=Array.isArray(e)&&0<e.length,s=!Array.isArray(t[0]);if(n&&_){for(var a=0;a<e.length;a++)0<a&&(i+=g),i+=y(e[a],a);0<t.length&&(i+=v)}for(var o=0;o<t.length;o++){var h=n?e.length:t[o].length,u=!1,f=n?0===Object.keys(t[o]).length:0===t[o].length;if(r&&!n&&(u="greedy"===r?""===t[o].join("").trim():1===t[o].length&&0===t[o][0].length),"greedy"===r&&n){for(var d=[],l=0;l<h;l++){var c=s?e[l]:l;d.push(t[o][c])}u=""===d.join("").trim()}if(!u){for(var p=0;p<h;p++){0<p&&!f&&(i+=g);var m=n&&s?e[p]:p;i+=y(t[o][m],p)}o<t.length-1&&(!r||0<h&&!f)&&(i+=v)}}return i}function y(e,t){if(null==e)return"";if(e.constructor===Date)return JSON.stringify(e).slice(1,25);e=e.toString().replace(o,s);var r="boolean"==typeof i&&i||Array.isArray(i)&&i[t]||function(e,t){for(var r=0;r<t.length;r++)if(-1<e.indexOf(t[r]))return!0;return!1}(e,b.BAD_DELIMITERS)||-1<e.indexOf(g)||" "===e.charAt(0)||" "===e.charAt(e.length-1);return r?n+e+n:e}}};if(b.RECORD_SEP=String.fromCharCode(30),b.UNIT_SEP=String.fromCharCode(31),b.BYTE_ORDER_MARK="\ufeff",b.BAD_DELIMITERS=["\r","\n",'"',b.BYTE_ORDER_MARK],b.WORKERS_SUPPORTED=!n&&!!f.Worker,b.NODE_STREAM_INPUT=1,b.LocalChunkSize=10485760,b.RemoteChunkSize=5242880,b.DefaultDelimiter=",",b.Parser=E,b.ParserHandle=r,b.NetworkStreamer=l,b.FileStreamer=c,b.StringStreamer=p,b.ReadableStreamStreamer=m,f.jQuery){var d=f.jQuery;d.fn.parse=function(o){var r=o.config||{},h=[];return this.each(function(e){if(!("INPUT"===d(this).prop("tagName").toUpperCase()&&"file"===d(this).attr("type").toLowerCase()&&f.FileReader)||!this.files||0===this.files.length)return!0;for(var t=0;t<this.files.length;t++)h.push({file:this.files[t],inputElem:this,instanceConfig:d.extend({},r)})}),e(),this;function e(){if(0!==h.length){var e,t,r,i,n=h[0];if(q(o.before)){var s=o.before(n.file,n.inputElem);if("object"==typeof s){if("abort"===s.action)return e="AbortError",t=n.file,r=n.inputElem,i=s.reason,void(q(o.error)&&o.error({name:e},t,r,i));if("skip"===s.action)return void u();"object"==typeof s.config&&(n.instanceConfig=d.extend(n.instanceConfig,s.config))}else if("skip"===s)return void u()}var a=n.instanceConfig.complete;n.instanceConfig.complete=function(e){q(a)&&a(e,n.file,n.inputElem),u()},b.parse(n.file,n.instanceConfig)}else q(o.complete)&&o.complete()}function u(){h.splice(0,1),e()}}}function u(e){this._handle=null,this._finished=!1,this._completed=!1,this._halted=!1,this._input=null,this._baseIndex=0,this._partialLine="",this._rowCount=0,this._start=0,this._nextChunk=null,this.isFirstChunk=!0,this._completeResults={data:[],errors:[],meta:{}},function(e){var t=w(e);t.chunkSize=parseInt(t.chunkSize),e.step||e.chunk||(t.chunkSize=null);this._handle=new r(t),(this._handle.streamer=this)._config=t}.call(this,e),this.parseChunk=function(e,t){if(this.isFirstChunk&&q(this._config.beforeFirstChunk)){var r=this._config.beforeFirstChunk(e);void 0!==r&&(e=r)}this.isFirstChunk=!1,this._halted=!1;var i=this._partialLine+e;this._partialLine="";var n=this._handle.parse(i,this._baseIndex,!this._finished);if(!this._handle.paused()&&!this._handle.aborted()){var s=n.meta.cursor;this._finished||(this._partialLine=i.substring(s-this._baseIndex),this._baseIndex=s),n&&n.data&&(this._rowCount+=n.data.length);var a=this._finished||this._config.preview&&this._rowCount>=this._config.preview;if(o)f.postMessage({results:n,workerId:b.WORKER_ID,finished:a});else if(q(this._config.chunk)&&!t){if(this._config.chunk(n,this._handle),this._handle.paused()||this._handle.aborted())return void(this._halted=!0);n=void 0,this._completeResults=void 0}return this._config.step||this._config.chunk||(this._completeResults.data=this._completeResults.data.concat(n.data),this._completeResults.errors=this._completeResults.errors.concat(n.errors),this._completeResults.meta=n.meta),this._completed||!a||!q(this._config.complete)||n&&n.meta.aborted||(this._config.complete(this._completeResults,this._input),this._completed=!0),a||n&&n.meta.paused||this._nextChunk(),n}this._halted=!0},this._sendError=function(e){q(this._config.error)?this._config.error(e):o&&this._config.error&&f.postMessage({workerId:b.WORKER_ID,error:e,finished:!1})}}function l(e){var i;(e=e||{}).chunkSize||(e.chunkSize=b.RemoteChunkSize),u.call(this,e),this._nextChunk=n?function(){this._readChunk(),this._chunkLoaded()}:function(){this._readChunk()},this.stream=function(e){this._input=e,this._nextChunk()},this._readChunk=function(){if(this._finished)this._chunkLoaded();else{if(i=new XMLHttpRequest,this._config.withCredentials&&(i.withCredentials=this._config.withCredentials),n||(i.onload=y(this._chunkLoaded,this),i.onerror=y(this._chunkError,this)),i.open("GET",this._input,!n),this._config.downloadRequestHeaders){var e=this._config.downloadRequestHeaders;for(var t in e)i.setRequestHeader(t,e[t])}if(this._config.chunkSize){var r=this._start+this._config.chunkSize-1;i.setRequestHeader("Range","bytes="+this._start+"-"+r)}try{i.send()}catch(e){this._chunkError(e.message)}n&&0===i.status?this._chunkError():this._start+=this._config.chunkSize}},this._chunkLoaded=function(){4===i.readyState&&(i.status<200||400<=i.status?this._chunkError():(this._finished=!this._config.chunkSize||this._start>function(e){var t=e.getResponseHeader("Content-Range");if(null===t)return-1;return parseInt(t.substr(t.lastIndexOf("/")+1))}(i),this.parseChunk(i.responseText)))},this._chunkError=function(e){var t=i.statusText||e;this._sendError(new Error(t))}}function c(e){var i,n;(e=e||{}).chunkSize||(e.chunkSize=b.LocalChunkSize),u.call(this,e);var s="undefined"!=typeof FileReader;this.stream=function(e){this._input=e,n=e.slice||e.webkitSlice||e.mozSlice,s?((i=new FileReader).onload=y(this._chunkLoaded,this),i.onerror=y(this._chunkError,this)):i=new FileReaderSync,this._nextChunk()},this._nextChunk=function(){this._finished||this._config.preview&&!(this._rowCount<this._config.preview)||this._readChunk()},this._readChunk=function(){var e=this._input;if(this._config.chunkSize){var t=Math.min(this._start+this._config.chunkSize,this._input.size);e=n.call(e,this._start,t)}var r=i.readAsText(e,this._config.encoding);s||this._chunkLoaded({target:{result:r}})},this._chunkLoaded=function(e){this._start+=this._config.chunkSize,this._finished=!this._config.chunkSize||this._start>=this._input.size,this.parseChunk(e.target.result)},this._chunkError=function(){this._sendError(i.error)}}function p(e){var r;u.call(this,e=e||{}),this.stream=function(e){return r=e,this._nextChunk()},this._nextChunk=function(){if(!this._finished){var e=this._config.chunkSize,t=e?r.substr(0,e):r;return r=e?r.substr(e):"",this._finished=!r,this.parseChunk(t)}}}function m(e){u.call(this,e=e||{});var t=[],r=!0,i=!1;this.pause=function(){u.prototype.pause.apply(this,arguments),this._input.pause()},this.resume=function(){u.prototype.resume.apply(this,arguments),this._input.resume()},this.stream=function(e){this._input=e,this._input.on("data",this._streamData),this._input.on("end",this._streamEnd),this._input.on("error",this._streamError)},this._checkIsFinished=function(){i&&1===t.length&&(this._finished=!0)},this._nextChunk=function(){this._checkIsFinished(),t.length?this.parseChunk(t.shift()):r=!0},this._streamData=y(function(e){try{t.push("string"==typeof e?e:e.toString(this._config.encoding)),r&&(r=!1,this._checkIsFinished(),this.parseChunk(t.shift()))}catch(e){this._streamError(e)}},this),this._streamError=y(function(e){this._streamCleanUp(),this._sendError(e)},this),this._streamEnd=y(function(){this._streamCleanUp(),i=!0,this._streamData("")},this),this._streamCleanUp=y(function(){this._input.removeListener("data",this._streamData),this._input.removeListener("end",this._streamEnd),this._input.removeListener("error",this._streamError)},this)}function r(g){var a,o,h,i=Math.pow(2,53),n=-i,s=/^\s*-?(\d*\.?\d+|\d+\.?\d*)(e[-+]?\d+)?\s*$/i,u=/(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\d+([+-][0-2]\d:[0-5]\d|Z))|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d([+-][0-2]\d:[0-5]\d|Z))|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d([+-][0-2]\d:[0-5]\d|Z))/,t=this,r=0,f=0,d=!1,e=!1,l=[],c={data:[],errors:[],meta:{}};if(q(g.step)){var p=g.step;g.step=function(e){if(c=e,_())m();else{if(m(),0===c.data.length)return;r+=e.data.length,g.preview&&r>g.preview?o.abort():p(c,t)}}}function v(e){return"greedy"===g.skipEmptyLines?""===e.join("").trim():1===e.length&&0===e[0].length}function m(){if(c&&h&&(k("Delimiter","UndetectableDelimiter","Unable to auto-detect delimiting character; defaulted to '"+b.DefaultDelimiter+"'"),h=!1),g.skipEmptyLines)for(var e=0;e<c.data.length;e++)v(c.data[e])&&c.data.splice(e--,1);return _()&&function(){if(!c)return;function e(e){q(g.transformHeader)&&(e=g.transformHeader(e)),l.push(e)}if(Array.isArray(c.data[0])){for(var t=0;_()&&t<c.data.length;t++)c.data[t].forEach(e);c.data.splice(0,1)}else c.data.forEach(e)}(),function(){if(!c||!g.header&&!g.dynamicTyping&&!g.transform)return c;function e(e,t){var r,i=g.header?{}:[];for(r=0;r<e.length;r++){var n=r,s=e[r];g.header&&(n=r>=l.length?"__parsed_extra":l[r]),g.transform&&(s=g.transform(s,n)),s=y(n,s),"__parsed_extra"===n?(i[n]=i[n]||[],i[n].push(s)):i[n]=s}return g.header&&(r>l.length?k("FieldMismatch","TooManyFields","Too many fields: expected "+l.length+" fields but parsed "+r,f+t):r<l.length&&k("FieldMismatch","TooFewFields","Too few fields: expected "+l.length+" fields but parsed "+r,f+t)),i}var t=1;!c.data[0]||Array.isArray(c.data[0])?(c.data=c.data.map(e),t=c.data.length):c.data=e(c.data,0);g.header&&c.meta&&(c.meta.fields=l);return f+=t,c}()}function _(){return g.header&&0===l.length}function y(e,t){return r=e,g.dynamicTypingFunction&&void 0===g.dynamicTyping[r]&&(g.dynamicTyping[r]=g.dynamicTypingFunction(r)),!0===(g.dynamicTyping[r]||g.dynamicTyping)?"true"===t||"TRUE"===t||"false"!==t&&"FALSE"!==t&&(function(e){if(s.test(e)){var t=parseFloat(e);if(n<t&&t<i)return!0}return!1}(t)?parseFloat(t):u.test(t)?new Date(t):""===t?null:t):t;var r}function k(e,t,r,i){c.errors.push({type:e,code:t,message:r,row:i})}this.parse=function(e,t,r){var i=g.quoteChar||'"';if(g.newline||(g.newline=function(e,t){e=e.substr(0,1048576);var r=new RegExp(U(t)+"([^]*?)"+U(t),"gm"),i=(e=e.replace(r,"")).split("\r"),n=e.split("\n"),s=1<n.length&&n[0].length<i[0].length;if(1===i.length||s)return"\n";for(var a=0,o=0;o<i.length;o++)"\n"===i[o][0]&&a++;return a>=i.length/2?"\r\n":"\r"}(e,i)),h=!1,g.delimiter)q(g.delimiter)&&(g.delimiter=g.delimiter(e),c.meta.delimiter=g.delimiter);else{var n=function(e,t,r,i,n){var s,a,o,h;n=n||[",","\t","|",";",b.RECORD_SEP,b.UNIT_SEP];for(var u=0;u<n.length;u++){var f=n[u],d=0,l=0,c=0;o=void 0;for(var p=new E({comments:i,delimiter:f,newline:t,preview:10}).parse(e),m=0;m<p.data.length;m++)if(r&&v(p.data[m]))c++;else{var _=p.data[m].length;l+=_,void 0!==o?0<_&&(d+=Math.abs(_-o),o=_):o=_}0<p.data.length&&(l/=p.data.length-c),(void 0===a||d<=a)&&(void 0===h||h<l)&&1.99<l&&(a=d,s=f,h=l)}return{successful:!!(g.delimiter=s),bestDelimiter:s}}(e,g.newline,g.skipEmptyLines,g.comments,g.delimitersToGuess);n.successful?g.delimiter=n.bestDelimiter:(h=!0,g.delimiter=b.DefaultDelimiter),c.meta.delimiter=g.delimiter}var s=w(g);return g.preview&&g.header&&s.preview++,a=e,o=new E(s),c=o.parse(a,t,r),m(),d?{meta:{paused:!0}}:c||{meta:{paused:!1}}},this.paused=function(){return d},this.pause=function(){d=!0,o.abort(),a=a.substr(o.getCharIndex())},this.resume=function(){t.streamer._halted?(d=!1,t.streamer.parseChunk(a,!0)):setTimeout(this.resume,3)},this.aborted=function(){return e},this.abort=function(){e=!0,o.abort(),c.meta.aborted=!0,q(g.complete)&&g.complete(c),a=""}}function U(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function E(e){var O,D=(e=e||{}).delimiter,I=e.newline,T=e.comments,A=e.step,L=e.preview,F=e.fastMode,z=O=void 0===e.quoteChar?'"':e.quoteChar;if(void 0!==e.escapeChar&&(z=e.escapeChar),("string"!=typeof D||-1<b.BAD_DELIMITERS.indexOf(D))&&(D=","),T===D)throw new Error("Comment character same as delimiter");!0===T?T="#":("string"!=typeof T||-1<b.BAD_DELIMITERS.indexOf(T))&&(T=!1),"\n"!==I&&"\r"!==I&&"\r\n"!==I&&(I="\n");var M=0,j=!1;this.parse=function(a,r,t){if("string"!=typeof a)throw new Error("Input must be a string");var i=a.length,e=D.length,n=I.length,s=T.length,o=q(A),h=[],u=[],f=[],d=M=0;if(!a)return R();if(F||!1!==F&&-1===a.indexOf(O)){for(var l=a.split(I),c=0;c<l.length;c++){if(f=l[c],M+=f.length,c!==l.length-1)M+=I.length;else if(t)return R();if(!T||f.substr(0,s)!==T){if(o){if(h=[],b(f.split(D)),S(),j)return R()}else b(f.split(D));if(L&&L<=c)return h=h.slice(0,L),R(!0)}}return R()}for(var p=a.indexOf(D,M),m=a.indexOf(I,M),_=new RegExp(U(z)+U(O),"g"),g=a.indexOf(O,M);;)if(a[M]!==O)if(T&&0===f.length&&a.substr(M,s)===T){if(-1===m)return R();M=m+n,m=a.indexOf(I,M),p=a.indexOf(D,M)}else{if(-1!==p&&(p<m||-1===m)){if(-1===g){f.push(a.substring(M,p)),M=p+e,p=a.indexOf(D,M);continue}var v=x(p,g,m);if(v&&void 0!==v.nextDelim){p=v.nextDelim,g=v.quoteSearch,f.push(a.substring(M,p)),M=p+e,p=a.indexOf(D,M);continue}}if(-1===m)break;if(f.push(a.substring(M,m)),C(m+n),o&&(S(),j))return R();if(L&&h.length>=L)return R(!0)}else for(g=M,M++;;){if(-1===(g=a.indexOf(O,g+1)))return t||u.push({type:"Quotes",code:"MissingQuotes",message:"Quoted field unterminated",row:h.length,index:M}),w();if(g===i-1)return w(a.substring(M,g).replace(_,O));if(O!==z||a[g+1]!==z){if(O===z||0===g||a[g-1]!==z){var y=E(-1===m?p:Math.min(p,m));if(a[g+1+y]===D){f.push(a.substring(M,g).replace(_,O)),a[M=g+1+y+e]!==O&&(g=a.indexOf(O,M)),p=a.indexOf(D,M),m=a.indexOf(I,M);break}var k=E(m);if(a.substr(g+1+k,n)===I){if(f.push(a.substring(M,g).replace(_,O)),C(g+1+k+n),p=a.indexOf(D,M),g=a.indexOf(O,M),o&&(S(),j))return R();if(L&&h.length>=L)return R(!0);break}u.push({type:"Quotes",code:"InvalidQuotes",message:"Trailing quote on quoted field is malformed",row:h.length,index:M}),g++}}else g++}return w();function b(e){h.push(e),d=M}function E(e){var t=0;if(-1!==e){var r=a.substring(g+1,e);r&&""===r.trim()&&(t=r.length)}return t}function w(e){return t||(void 0===e&&(e=a.substr(M)),f.push(e),M=i,b(f),o&&S()),R()}function C(e){M=e,b(f),f=[],m=a.indexOf(I,M)}function R(e,t){return{data:t||!1?h[0]:h,errors:u,meta:{delimiter:D,linebreak:I,aborted:j,truncated:!!e,cursor:d+(r||0)}}}function S(){A(R(void 0,!0)),h=[],u=[]}function x(e,t,r){var i={nextDelim:void 0,quoteSearch:void 0},n=a.indexOf(O,t+1);if(t<e&&e<n&&(n<r||-1===r)){var s=a.indexOf(D,n);if(-1===s)return i;n<s&&(n=a.indexOf(O,n+1)),i=x(s,n,r)}else i={nextDelim:e,quoteSearch:t};return i}},this.abort=function(){j=!0},this.getCharIndex=function(){return M}}function _(e){var t=e.data,r=a[t.workerId],i=!1;if(t.error)r.userError(t.error,t.file);else if(t.results&&t.results.data){var n={abort:function(){i=!0,g(t.workerId,{data:[],errors:[],meta:{aborted:!0}})},pause:v,resume:v};if(q(r.userStep)){for(var s=0;s<t.results.data.length&&(r.userStep({data:t.results.data[s],errors:t.results.errors,meta:t.results.meta},n),!i);s++);delete t.results}else q(r.userChunk)&&(r.userChunk(t.results,n,t.file),delete t.results)}t.finished&&!i&&g(t.workerId,t.results)}function g(e,t){var r=a[e];q(r.userComplete)&&r.userComplete(t),r.terminate(),delete a[e]}function v(){throw new Error("Not implemented.")}function w(e){if("object"!=typeof e||null===e)return e;var t=Array.isArray(e)?[]:{};for(var r in e)t[r]=w(e[r]);return t}function y(e,t){return function(){e.apply(t,arguments)}}function q(e){return"function"==typeof e}return o&&(f.onmessage=function(e){var t=e.data;void 0===b.WORKER_ID&&t&&(b.WORKER_ID=t.workerId);if("string"==typeof t.input)f.postMessage({workerId:b.WORKER_ID,results:b.parse(t.input,t.config),finished:!0});else if(f.File&&t.input instanceof File||t.input instanceof Object){var r=b.parse(t.input,t.config);r&&f.postMessage({workerId:b.WORKER_ID,results:r,finished:!0})}}),(l.prototype=Object.create(u.prototype)).constructor=l,(c.prototype=Object.create(u.prototype)).constructor=c,(p.prototype=Object.create(p.prototype)).constructor=p,(m.prototype=Object.create(u.prototype)).constructor=m,b});
\ No newline at end of file
diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
new file mode 100644
index 0000000..ee2e041
--- /dev/null
+++ b/ui/src/routes/+layout.svelte
@@ -0,0 +1,24 @@
+<script>
+    import { page } from '$app/state';
+    let { children } = $props();
+    /** @param {String} str **/
+    const isActive = str => page.url.pathname === str;
+    /** @param {String} str **/
+    const isSelected = str => isActive(str) ? 'selected' : '';
+</script>
+
+<nav>
+    <ul>
+        <li class="{isSelected('/')}"><a href="/" aria-current={isActive('/')}>Home</a></li>
+        <li class="{isSelected('/views/weekly')}"><a href="/views/weekly" aria-current={isActive('/views/weekly')}>Wochenansicht</a></li>
+        <li class="{isSelected('/views/monthly')}"><a href="/views/monthly" aria-current={isActive('/views/monthly')}>Monatsansicht</a></li>
+        <li class="{isSelected('/views/yearly')}"><a href="/views/yearly" aria-current={isActive('/views/yearly')}>Jahresansicht</a></li>
+        <li class="{isSelected('/working-hours')}"><a href="/working-hours" aria-current={isActive('/working-hours')}>Einträge</a></li>
+    </ul>
+</nav>
+
+<main>
+{@render children()}
+</main>
+
+<footer><p>© Torsten Lücke 2021</p></footer>
\ No newline at end of file
diff --git a/ui/src/routes/+page.server.js b/ui/src/routes/+page.server.js
new file mode 100644
index 0000000..5327b34
--- /dev/null
+++ b/ui/src/routes/+page.server.js
@@ -0,0 +1,9 @@
+import {env} from '$env/dynamic/private';
+import {WorkingHoursViewsRepository} from "../lib/Repositories.svelte";
+
+export function load() {
+    return {
+        title: 'Wochenansicht',
+        promise: WorkingHoursViewsRepository.weekly(env.API_URL)
+    };
+}
\ No newline at end of file
diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
new file mode 100644
index 0000000..f542f37
--- /dev/null
+++ b/ui/src/routes/+page.svelte
@@ -0,0 +1,7 @@
+<script>
+    import Views from "$lib/Views.svelte";
+    let { data } = $props();
+</script>
+
+<Views params={data}/>
+
diff --git a/ui/src/routes/Home.svelte b/ui/src/routes/Home.svelte
deleted file mode 100644
index 1d66b11..0000000
--- a/ui/src/routes/Home.svelte
+++ /dev/null
@@ -1,6 +0,0 @@
-<WeeklyViews />
-
-<script>
-    import WeeklyViews from "./WeeklyViews.svelte";
-    export const params = {};
-</script>
\ No newline at end of file
diff --git a/ui/src/routes/MonthlyViews.svelte b/ui/src/routes/MonthlyViews.svelte
deleted file mode 100644
index b2ac1f2..0000000
--- a/ui/src/routes/MonthlyViews.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-    import Views from "./Views.svelte";
-    import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
-    export let params
-    params = {
-        title: 'Monatsansicht',
-        promise: WorkingHoursViewsRepository.monthly()
-    }
-</script>
-
-<Views {params} />
\ No newline at end of file
diff --git a/ui/src/routes/Views.svelte b/ui/src/routes/Views.svelte
deleted file mode 100644
index 3c6f255..0000000
--- a/ui/src/routes/Views.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script>
-    import { paginate, PaginationNav } from 'svelte-paginate'
-
-    export let params = {}
-    let records = []
-    let isLoading = true
-    console.log(params)
-    let currentPage = 1
-    let pageSize = 15
-    $: paginatedItems = paginate({ items: records, pageSize, currentPage })
-    if (!String.prototype.startsWith) {
-        String.prototype.startsWith = function (searchString, position) {
-            position = position || 0
-            return this.indexOf(searchString, position) === position
-        }
-    }
-    $: isNegative = time => time.startsWith('-') ? 'absence-time' : ''
-    $: cutMinusChar = time => time.startsWith('-') ? time.substr(1) : time
-
-    const init = async () => await params.promise.then(data => {
-        records = data
-        isLoading = false
-    })
-    init()
-</script>
-
-<svelte:head>
-    <title>{params.title}</title>
-</svelte:head>
-
-<section id="list-records">
-    <header>
-        <h1>{params.title}</h1>
-    </header>
-    <article>
-        {#if isLoading === true}
-            <p>Loading...</p>
-        {:else}
-            <table>
-                <colgroup>
-                    <col/>
-                    <col/>
-                    <col/>
-                    <col/>
-                </colgroup>
-                <thead>
-                <tr>
-                    <th>Zeitraum</th>
-                    <th>Arbeitstage</th>
-                    <th>Arbeitsstunden</th>
-                    <th>Über- / Unterstunden</th>
-                </tr>
-                </thead>
-                <tbody>
-                {#each paginatedItems as record}
-                    <tr>
-                        <td>{record.period}</td>
-                        <td>{record.workingDays}</td>
-                        <td>{record.totalHours}</td>
-                        <td class="{ isNegative(record.overtime) }">{cutMinusChar(record.overtime)}</td>
-                    </tr>
-                {/each}
-                </tbody>
-                <tfoot>
-                <tr>
-                    <td colspan="4">
-                        <PaginationNav
-                            totalItems="{records.length}"
-                            pageSize="{pageSize}"
-                            currentPage="{currentPage}"
-                            limit="{1}"
-                            showStepOptions="{true}"
-                            on:setPage="{(e) => currentPage = e.detail.page}"
-                        />
-                    </td>
-                </tr>
-                </tfoot>
-            </table>
-        {/if}
-    </article>
-</section>
\ No newline at end of file
diff --git a/ui/src/routes/WeeklyViews.svelte b/ui/src/routes/WeeklyViews.svelte
deleted file mode 100644
index 6700321..0000000
--- a/ui/src/routes/WeeklyViews.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-    import Views from "./Views.svelte";
-    import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
-    export let params
-    params = {
-        title: 'Wochenansicht',
-        promise: WorkingHoursViewsRepository.weekly()
-    }
-</script>
-
-<Views {params} />
\ No newline at end of file
diff --git a/ui/src/routes/WorkingHours.svelte b/ui/src/routes/WorkingHours.svelte
deleted file mode 100644
index e332845..0000000
--- a/ui/src/routes/WorkingHours.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script>
-    import List from "./WorkingHours/List.svelte";
-    import Formular from "./WorkingHours/Formular.svelte";
-    export const params = {};
-
-    let TITLE = "Bearbeitung Einträge"
-    let activeRecord = null;
-    let currentPage = 1
-</script>
-
-<svelte:head>
-    <title>{TITLE}</title>
-</svelte:head>
-
-{#if activeRecord === null}
-    <section id="list-records">
-        <header>
-            <h1>{TITLE}</h1>
-        </header>
-        <article>
-            <List bind:activeRecord={activeRecord} bind:currentPage/>
-        </article>
-    </section>
-{:else}
-    <section id="edit-record">
-        <header>
-            <h1>{TITLE}</h1>
-        </header>
-        <article>
-            <Formular bind:activeRecord={activeRecord}/>
-        </article>
-    </section>
-{/if}
diff --git a/ui/src/routes/WorkingHours/Formular.svelte b/ui/src/routes/WorkingHours/Formular.svelte
deleted file mode 100644
index 4403b29..0000000
--- a/ui/src/routes/WorkingHours/Formular.svelte
+++ /dev/null
@@ -1,126 +0,0 @@
-<script>
-    import {WorkingHoursRepository} from "../../components/Repositories.svelte"
-    import IconifyIcon from '@iconify/svelte'
-    import checkIcon from '@iconify-icons/oi/check'
-    import xIcon from '@iconify-icons/oi/x'
-    import EditByDay from "./Formular/EditByDay.svelte";
-    import EditByWeek from "./Formular/EditByWeek.svelte";
-    import ImportCsv from "./Formular/ImportCsv.svelte";
-    import {TimekeepingDate} from "../../components/TimekeepingDate.svelte";
-
-    const DAILY_EDIT = 0
-    const WEEKLY_EDIT = 1
-    const CSV_IMPORT = 2
-
-    const Controller = {
-        'saveRecord': () => {
-            activeRecordList.forEach((actualRecord) => {
-                if (actualRecord.workingTime === '00:00:00') {
-                    return
-                }
-                WorkingHoursRepository.addOrUpdate(actualRecord.workingDay, actualRecord);
-            })
-            activeDate = nextDate
-            makeTimekeepingList()
-        },
-        'cancelActiveRecord': () => {
-            activeRecordList = []
-            activeRecord = null
-        }
-    }
-    const WeekController = {
-        'makeTimekeepingList': () => {
-            let actualDay = WeekController.getMondayFromWeek(
-                activeDate === null ? new TimekeepingDate() : new TimekeepingDate(activeDate)
-            )
-            activeRecordList = []
-            activeDate = actualDay.getDateString()
-            for (const daysDiff in [0, 1, 2, 3, 4, 5, 6]) {
-                activeRecordList.push({workingTime: '00:00:00', workingDay: actualDay.getDateString()})
-                actualDay = actualDay.getNextDay()
-            }
-            nextDate = actualDay.getDateString()
-            WorkingHoursRepository.browse(activeRecordList[0].workingDay, activeRecordList[6].workingDay).then(data => {
-                data.forEach(item => {
-                    let actualDay = new TimekeepingDate(item.workingDay)
-                    activeRecordList[actualDay.getDay()-1].workingTime = item.workingTime
-                })
-            })
-        },
-        'getMondayFromWeek': actualDayObject => {
-            if (actualDayObject.getDate() === 0) {
-                actualDayObject.setDate(actualDayObject.getDate() - 7)
-            }
-            if (actualDayObject.getDate() !== 1) {
-                actualDayObject.setDate(actualDayObject.getDate() - (actualDayObject.getDay() - 1))
-            }
-            return actualDayObject
-        }
-    }
-    const DayController = {
-        'makeTimekeepingList': () => {
-            let actualDay = activeDate === null ? new TimekeepingDate() : new TimekeepingDate(activeDate)
-            WorkingHoursRepository.readOrNew(actualDay.getDateString()).then(data => {
-                activeRecordList = [ data ]
-                activeDate = actualDay.getDateString()
-                nextDate = actualDay.getNextDay().getDateString()
-            })
-        }
-    }
-    const CsvController = {
-        'makeTimekeepingList': () => {
-            MenuController.dailyEdit()
-        }
-    }
-    const MenuController = {
-        'dailyEdit': () => {
-            period_of_edit = DAILY_EDIT
-            makeTimekeepingList = DayController.makeTimekeepingList
-            makeTimekeepingList()
-        },
-        'weeklyEdit': () => {
-            period_of_edit = WEEKLY_EDIT
-            makeTimekeepingList = WeekController.makeTimekeepingList
-            makeTimekeepingList()
-        },
-        'csvImport': () => {
-            period_of_edit = CSV_IMPORT
-            activeRecordList = []
-            makeTimekeepingList = CsvController.makeTimekeepingList
-        }
-    }
-
-    let activeDate = null
-    let nextDate = null
-    let activeRecordList = []
-    export let activeRecord = null
-    let period_of_edit
-    let makeTimekeepingList
-
-    MenuController.dailyEdit()
-</script>
-<!--suppress HtmlUnknownTarget -->
-<form action="/working-hours" name="editRecord">
-    <nav class="menu">
-        <span on:click={MenuController.dailyEdit} on:keypress={() => {}} class:active={period_of_edit === DAILY_EDIT}>Täglich</span>
-        <span on:click={MenuController.weeklyEdit} on:keypress={() => {}} class:active={period_of_edit === WEEKLY_EDIT}>Wöchentlich</span>
-        <span on:click={MenuController.csvImport} on:keypress={() => {}} class:active={period_of_edit === CSV_IMPORT}>Import per CSV</span>
-    </nav>
-    {#if period_of_edit === DAILY_EDIT}
-        <EditByDay bind:activeRecordList bind:activeDate bind:makeTimekeepingList/>
-    {/if}
-    {#if period_of_edit === WEEKLY_EDIT}
-        <EditByWeek bind:activeRecordList bind:activeDate bind:makeTimekeepingList/>
-    {/if}
-    {#if period_of_edit === CSV_IMPORT}
-        <ImportCsv bind:activeRecordList bind:makeTimekeepingList/>
-    {/if}
-    <fieldset name="buttons">
-        <button on:click={Controller.saveRecord} type="button">Übernehmen und Weiter
-            <IconifyIcon icon={checkIcon} color="green"/>
-        </button>
-        <button on:click={Controller.cancelActiveRecord} type="button" class="sub-button">Abbrechen
-            <IconifyIcon icon={xIcon}/>
-        </button>
-    </fieldset>
-</form>
\ No newline at end of file
diff --git a/ui/src/routes/WorkingHours/Formular/EditByDay.svelte b/ui/src/routes/WorkingHours/Formular/EditByDay.svelte
deleted file mode 100644
index 3099bea..0000000
--- a/ui/src/routes/WorkingHours/Formular/EditByDay.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-    export let activeDate = null
-    export let activeRecordList = []
-    export let makeTimekeepingList = () => {}
-
-    makeTimekeepingList()
-</script>
-
-{#if activeRecordList.length < 1}
-    <p>Loading...</p>
-{:else}
-    <fieldset name="record-data-by-day">
-        <div>
-            <label for="workingDay">Arbeitstag</label>
-            <input bind:value={activeDate} type="date" on:change={makeTimekeepingList}
-                   id="workingDay" required pattern="\d\{4}-[0-1]\d-[0-3]\d\">
-        </div>
-        <div>
-            <label for="workingTime">Arbeitszeit</label>
-            <input bind:value={activeRecordList[0].workingTime} placeholder="Arbeitszeit" type="time"
-                   id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
-        </div>
-    </fieldset>
-{/if}
\ No newline at end of file
diff --git a/ui/src/routes/WorkingHours/Formular/EditByWeek.svelte b/ui/src/routes/WorkingHours/Formular/EditByWeek.svelte
deleted file mode 100644
index 3cd9e8b..0000000
--- a/ui/src/routes/WorkingHours/Formular/EditByWeek.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<script>
-    export let activeDate = null
-    export let activeRecordList = []
-    export let makeTimekeepingList = () => {}
-
-    makeTimekeepingList()
-</script>
-
-<style>
-    tbody.weekend td input, tbody.weekend td {
-        color: red;
-    }
-    input#monday {
-        display: inline;
-        width: auto;
-    }
-</style>
-
-
-{#if activeRecordList.length < 1}
-    <p>Loading...</p>
-{:else}
-    <fieldset name="how-week-is-use">
-        <div>
-            <label for="monday">Woche vom</label>
-            <input bind:value={activeDate} type="date" on:change={makeTimekeepingList}
-                   id="monday" required pattern="\d\{4}-[0-1]\d-[0-3]\d\">
-        </div>
-    </fieldset>
-    <fieldset name="record-data-by-week">
-        <div>
-            <table>
-                <tbody>
-                {#each ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag'] as day, index}
-                    <tr>
-                        <td>
-                            {day}
-                        </td>
-                        <td>
-                            <input bind:value={activeRecordList[index].workingTime} placeholder="Arbeitszeit" type="time"
-                                   required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
-                        </td>
-                    </tr>
-                {/each}
-                </tbody>
-                <tbody class="weekend">
-                {#each ['Samstag', 'Sontag'] as day, index}
-                    <tr>
-                        <td>
-                            {day}
-                        </td>
-                        <td>
-                            <input bind:value={activeRecordList[index+5].workingTime} placeholder="Arbeitszeit" type="time"
-                                   required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
-                        </td>
-                    </tr>
-                {/each}
-                </tbody>
-            </table>
-        </div>
-    </fieldset>
-{/if}
\ No newline at end of file
diff --git a/ui/src/routes/WorkingHours/Formular/ImportCsv.svelte b/ui/src/routes/WorkingHours/Formular/ImportCsv.svelte
deleted file mode 100644
index e42ef58..0000000
--- a/ui/src/routes/WorkingHours/Formular/ImportCsv.svelte
+++ /dev/null
@@ -1,96 +0,0 @@
-<script>
-    import Papa from '../../../papaparse.min'
-    import { paginate, PaginationNav } from 'svelte-paginate'
-
-    export let activeRecordList = []
-    let imported_data = []
-    export let currentPage = 1
-    let pageSize = 15
-    $: paginatedItems = paginate({ items: imported_data, pageSize, currentPage })
-
-    let files = null
-
-    const VerarbeiteDateien = () => {
-        for (const file of files) {
-            VerarbeiteCsv(file)
-        }
-    }
-
-    const VerarbeiteCsv = file => {
-        Papa.parse(file, {
-            header: true,
-            skipEmptyLines: true,
-            complete: results => {
-                let cash_work_days = {}
-                results.data.forEach(item => {
-                    // noinspection JSNonASCIINames
-                    let activity = item['Aktivität']
-                    if (activity.trim() === 'Mittagspause') {
-                        return
-                    }
-                    let work_from = new Date(item['Von'])
-                    let work_to = new Date(item['Bis'])
-                    let actual_day = work_from.toISOString().substring(0, 10)
-                    let actual_work_hours = (work_to - work_from) / (1000 * 60 * 60)
-                    cash_work_days[actual_day] ??= 0
-                    cash_work_days[actual_day] += actual_work_hours
-                })
-                for (let day in cash_work_days) {
-                    let hours = cash_work_days[day]
-                    let hours_digits = Math.trunc(hours)
-                    let minutes_digits = Math.round((hours - hours_digits) * 60)
-                    let working_time = String(hours_digits).padStart(2, '0') + ':'
-                        + String(minutes_digits).padStart(2, '0') + ':00'
-                    activeRecordList.push({ workingTime: working_time, workingDay: day })
-                }
-                imported_data = activeRecordList
-            },
-        })
-    }
-</script>
-
-
-<fieldset>
-    <legend>Download-Liste</legend>
-    <div class="zelle">
-        <label for="csv-file">Download der Zeiten von <i>aTimeLogger2</i></label>
-        <input type="file" accept="text/csv" id="csv-file" bind:files/>
-        <button type="button" on:click={VerarbeiteDateien}>Upload</button>
-    </div>
-</fieldset>
-<fieldset name="record-data-for-import">
-    <div>
-        {#if imported_data.length < 1}
-            <p>Loading...</p>
-        {:else}
-            <table>
-                <tbody>
-                {#each imported_data as item}
-                    <tr>
-                        <td>
-                            {item.workingDay}
-                        </td>
-                        <td>
-                            {item.workingTime}
-                        </td>
-                    </tr>
-                {/each}
-                </tbody>
-                <tfoot>
-                <tr>
-                    <td colspan="4">
-                        <PaginationNav
-                            totalItems="{imported_data.length}"
-                            pageSize="{pageSize}"
-                            currentPage="{currentPage}"
-                            limit="{1}"
-                            showStepOptions="{true}"
-                            on:setPage="{(e) => currentPage = e.detail.page}"
-                        />
-                    </td>
-                </tr>
-                </tfoot>
-            </table>
-        {/if}
-    </div>
-</fieldset>
diff --git a/ui/src/routes/WorkingHours/List.svelte b/ui/src/routes/WorkingHours/List.svelte
deleted file mode 100644
index e0a0761..0000000
--- a/ui/src/routes/WorkingHours/List.svelte
+++ /dev/null
@@ -1,95 +0,0 @@
-<script>
-    import { WorkingHoursRepository } from '../../components/Repositories.svelte'
-    import { TimekeepingDate } from '../../components/TimekeepingDate.svelte'
-    import { paginate, PaginationNav } from 'svelte-paginate'
-    import IconifyIcon from '@iconify/svelte'
-    import wrenchIcon from '@iconify-icons/oi/wrench'
-    import documentIcon from '@iconify-icons/oi/document'
-
-    export let activeRecord = null
-    let isLoading = true
-    let records = []
-    export let currentPage = 1
-    let pageSize = 15
-    $: paginatedItems = paginate({ items: records, pageSize, currentPage })
-
-    const Controller = {
-        'listRecords': () => {
-            Controller.cancelActiveRecord()
-            WorkingHoursRepository.browse().then(data => {
-                Controller.cancelActiveRecord()
-                records = data
-                isLoading = false
-            })
-        },
-        'newRecord': async () => {
-            const actDate = new TimekeepingDate()
-            activeRecord = await WorkingHoursRepository.readOrNew(actDate.getDateString())
-        },
-        'selectActiveRecord': record => WorkingHoursRepository.read(record.workingDay).then(data => {
-            if (data === null) {
-                Controller.listRecords()
-                return
-            }
-            activeRecord = data
-        }),
-        'cancelActiveRecord': () => {
-            activeRecord = null
-        },
-    }
-    Controller.listRecords()
-</script>
-
-<!--suppress HtmlUnknownTarget -->
-<form action="/working-hours">
-    <fieldset>
-        <button on:click={Controller.newRecord} type="button">Neuer Eintrag
-            <IconifyIcon icon={documentIcon}/>
-        </button>
-    </fieldset>
-</form>
-{#if isLoading === true}
-    <p>Loading...</p>
-{:else}
-    <table>
-        <colgroup>
-            <col/>
-            <col/>
-            <col/>
-        </colgroup>
-        <thead>
-        <tr>
-            <th>Datum</th>
-            <th>Arbeitsstunden</th>
-            <th>Aktionen</th>
-        </tr>
-        </thead>
-        <tbody>
-        {#each paginatedItems as record}
-            <tr>
-                <td>{record.workingDay}</td>
-                <td>{record.workingTime}</td>
-                <td>
-                    <button on:click={() => Controller.selectActiveRecord(record)} type="button">Bearbeiten
-                        <IconifyIcon icon={wrenchIcon}/>
-                    </button>
-                </td>
-            </tr>
-        {/each}
-        </tbody>
-        <tfoot>
-        <tr>
-            <td colspan="4">
-                <PaginationNav
-                    totalItems="{records.length}"
-                    pageSize="{pageSize}"
-                    currentPage="{currentPage}"
-                    limit="{1}"
-                    showStepOptions="{true}"
-                    on:setPage="{(e) => currentPage = e.detail.page}"
-                />
-            </td>
-        </tr>
-        </tfoot>
-    </table>
-{/if}
\ No newline at end of file
diff --git a/ui/src/routes/YearlyViews.svelte b/ui/src/routes/YearlyViews.svelte
deleted file mode 100644
index f3ea452..0000000
--- a/ui/src/routes/YearlyViews.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-    import Views from "./Views.svelte";
-    import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
-    export let params
-    params = {
-        title: 'Jahresansicht',
-        promise: WorkingHoursViewsRepository.yearly()
-    }
-</script>
-
-<Views {params} />
\ No newline at end of file
diff --git a/ui/src/routes/views/monthly/+page.server.js b/ui/src/routes/views/monthly/+page.server.js
new file mode 100644
index 0000000..86574cb
--- /dev/null
+++ b/ui/src/routes/views/monthly/+page.server.js
@@ -0,0 +1,9 @@
+import {env} from '$env/dynamic/private';
+import {WorkingHoursViewsRepository} from "$lib/Repositories.svelte";
+
+export function load() {
+    return {
+        title: 'Monatsansicht',
+        promise: WorkingHoursViewsRepository.monthly(env.API_URL)
+    };
+}
\ No newline at end of file
diff --git a/ui/src/routes/views/monthly/+page.svelte b/ui/src/routes/views/monthly/+page.svelte
new file mode 100644
index 0000000..f542f37
--- /dev/null
+++ b/ui/src/routes/views/monthly/+page.svelte
@@ -0,0 +1,7 @@
+<script>
+    import Views from "$lib/Views.svelte";
+    let { data } = $props();
+</script>
+
+<Views params={data}/>
+
diff --git a/ui/src/routes/views/weekly/+page.server.js b/ui/src/routes/views/weekly/+page.server.js
new file mode 100644
index 0000000..2c2d14f
--- /dev/null
+++ b/ui/src/routes/views/weekly/+page.server.js
@@ -0,0 +1,9 @@
+import {env} from '$env/dynamic/private';
+import {WorkingHoursViewsRepository} from "$lib/Repositories.svelte";
+
+export function load() {
+    return {
+        title: 'Wochenansicht',
+        promise: WorkingHoursViewsRepository.weekly(env.API_URL)
+    };
+}
\ No newline at end of file
diff --git a/ui/src/routes/views/weekly/+page.svelte b/ui/src/routes/views/weekly/+page.svelte
new file mode 100644
index 0000000..f542f37
--- /dev/null
+++ b/ui/src/routes/views/weekly/+page.svelte
@@ -0,0 +1,7 @@
+<script>
+    import Views from "$lib/Views.svelte";
+    let { data } = $props();
+</script>
+
+<Views params={data}/>
+
diff --git a/ui/src/routes/views/yearly/+page.server.js b/ui/src/routes/views/yearly/+page.server.js
new file mode 100644
index 0000000..80c2835
--- /dev/null
+++ b/ui/src/routes/views/yearly/+page.server.js
@@ -0,0 +1,9 @@
+import {env} from '$env/dynamic/private';
+import {WorkingHoursViewsRepository} from "$lib/Repositories.svelte";
+
+export function load() {
+    return {
+        title: 'Jahresansicht',
+        promise: WorkingHoursViewsRepository.yearly(env.API_URL)
+    };
+}
\ No newline at end of file
diff --git a/ui/src/routes/views/yearly/+page.svelte b/ui/src/routes/views/yearly/+page.svelte
new file mode 100644
index 0000000..f542f37
--- /dev/null
+++ b/ui/src/routes/views/yearly/+page.svelte
@@ -0,0 +1,7 @@
+<script>
+    import Views from "$lib/Views.svelte";
+    let { data } = $props();
+</script>
+
+<Views params={data}/>
+
diff --git a/ui/src/routes/working-hours/+page.server.js b/ui/src/routes/working-hours/+page.server.js
new file mode 100644
index 0000000..6656eaa
--- /dev/null
+++ b/ui/src/routes/working-hours/+page.server.js
@@ -0,0 +1,81 @@
+import {env} from '$env/dynamic/private';
+import {WorkingHoursRepository} from "$lib/Repositories.svelte";
+
+export function load() {
+    return {
+        promise: WorkingHoursRepository.browse(env.API_URL)
+    };
+}
+
+/** @param {Date} actualDayObject **/
+const getMonday = actualDayObject => {
+    if (actualDayObject.getDate() === 0) {
+        actualDayObject.setDate(actualDayObject.getDate() - 7)
+    }
+    if (actualDayObject.getDate() !== 1) {
+        actualDayObject.setDate(actualDayObject.getDate() - (actualDayObject.getDay() - 1))
+    }
+    return actualDayObject
+}
+
+/** @type {String[]} **/
+const weekday_list = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sontag']
+
+/** @param {Date} actualDayObject **/
+const getDateString = actualDayObject => {
+    return actualDayObject.getFullYear() + "-"
+        + (actualDayObject.getMonth() + 1).toString().padStart(2, '0') + "-"
+        + actualDayObject.getDate().toString().padStart(2, '0')
+}
+
+export const actions = {
+    update: async ({ request }) => {
+        const data = await request.formData();
+        const body_data = {
+            workingDay: data.get('workingDay'),
+            workingTime: data.get('workingTime'),
+        }
+        await WorkingHoursRepository.update(env.API_URL, data.get('workingDay'), body_data);
+    },
+    create: async ({ request }) => {
+        const form_data = await request.formData();
+        const body_data = {
+            workingDay: form_data.get('workingDay'),
+            workingTime: form_data.get('workingTime'),
+        }
+        await WorkingHoursRepository.add(env.API_URL, body_data);
+    },
+    "create-by-week": async ({ request }) => {
+        const form_data = await request.formData();
+        // @ts-ignore
+        let actualDayObject = getMonday(new Date(form_data.get('week')))
+        /** @type {Object<String,String>} **/
+        let day_list = {}
+        weekday_list.forEach(day => {
+            day_list[day] = getDateString(actualDayObject)
+            actualDayObject.setDate(actualDayObject.getDate() + 1)
+        })
+        for (const pair of form_data.entries()) {
+            const working_day = day_list[pair[0]] ?? null
+            if (working_day === null) {
+                continue
+            }
+            const body_data = {
+                workingDay: working_day,
+                workingTime: pair[1],
+            }
+            await WorkingHoursRepository.addOrUpdate(env.API_URL, working_day, body_data);
+        }
+    },
+    'import-csv': async ({ request }) => {
+        const form_data = await request.formData();
+        for (const pair of form_data.entries()) {
+            const working_day = pair[0]
+            const body_data = {
+                workingDay: working_day,
+                workingTime: pair[1],
+            }
+            await WorkingHoursRepository.addOrUpdate(env.API_URL, working_day, body_data);
+        }
+    }
+};
\ No newline at end of file
diff --git a/ui/src/routes/working-hours/+page.svelte b/ui/src/routes/working-hours/+page.svelte
new file mode 100644
index 0000000..ee61cef
--- /dev/null
+++ b/ui/src/routes/working-hours/+page.svelte
@@ -0,0 +1,76 @@
+<script>
+    import documentIcon from "@iconify-icons/oi/document.js";
+    import wrenchIcon from "@iconify-icons/oi/wrench.js";
+    import IconifyIcon from "@iconify/svelte";
+    let { data } = $props();
+    const TITLE = "Bearbeitung Einträge"
+    /** @type {{workingDay: String, workingTime: String, }[]|null} **/
+    let records = $state([])
+    const init = async () => await data.promise.then(
+        /**
+         * @param {{workingDay: String, workingTime: String, }[]} data
+         */
+        data => {
+            records = data
+        }
+    )
+    init()
+</script>
+
+<svelte:head>
+    <title>{TITLE}</title>
+</svelte:head>
+
+<section id="list-records">
+    <header>
+        <h1>{TITLE}</h1>
+    </header>
+    <article>
+        <!--suppress HtmlUnknownTarget -->
+        <form action="/working-hours">
+            <fieldset>
+                <legend>Neuer Eintrag</legend>
+                <button formaction="/working-hours/create-by-day" type="submit">per Tag
+                    <IconifyIcon icon={documentIcon}/>
+                </button>
+                <button formaction="/working-hours/create-by-week" type="submit">per Woche
+                    <IconifyIcon icon={documentIcon}/>
+                </button>
+                <button formaction="/working-hours/import-csv" type="submit">Import per CSV
+                    <IconifyIcon icon={documentIcon}/>
+                </button>
+            </fieldset>
+            {#if records === null}
+                <p>Loading...</p>
+            {:else}
+                <table>
+                    <colgroup>
+                        <col/>
+                        <col/>
+                        <col/>
+                    </colgroup>
+                    <thead>
+                    <tr>
+                        <th>Datum</th>
+                        <th>Arbeitsstunden</th>
+                        <th>Aktionen</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {#each records as record}
+                        <tr>
+                            <td>{record.workingDay}</td>
+                            <td>{record.workingTime}</td>
+                            <td>
+                                <button formaction={'/working-hours/' + record.workingDay} type="submit">Bearbeiten
+                                    <IconifyIcon icon={wrenchIcon}/>
+                                </button>
+                            </td>
+                        </tr>
+                    {/each}
+                    </tbody>
+                </table>
+            {/if}
+        </form>
+    </article>
+</section>
\ No newline at end of file
diff --git a/ui/src/routes/working-hours/[working_day]/+page.server.js b/ui/src/routes/working-hours/[working_day]/+page.server.js
new file mode 100644
index 0000000..a633bc5
--- /dev/null
+++ b/ui/src/routes/working-hours/[working_day]/+page.server.js
@@ -0,0 +1,9 @@
+import {env} from '$env/dynamic/private';
+import {WorkingHoursRepository} from "$lib/Repositories.svelte";
+
+export function load({ params }) {
+    return {
+        working_day: params.working_day,
+        promise: WorkingHoursRepository.read(env.API_URL, params.working_day)
+    };
+}
\ No newline at end of file
diff --git a/ui/src/routes/working-hours/[working_day]/+page.svelte b/ui/src/routes/working-hours/[working_day]/+page.svelte
new file mode 100644
index 0000000..d1e2dc1
--- /dev/null
+++ b/ui/src/routes/working-hours/[working_day]/+page.svelte
@@ -0,0 +1,57 @@
+<script>
+    import IconifyIcon from '@iconify/svelte'
+    import checkIcon from "@iconify-icons/oi/check";
+    import xIcon from "@iconify-icons/oi/x";
+    let { data } = $props();
+    const TITLE = "Bearbeitung eines Eintrags"
+    /** @type {{workingDay: String, workingTime: String, }|null} **/
+    let activeDate = $state(null)
+    const init = async () => await data.promise.then(
+        /**
+         * @param {{workingDay: String, workingTime: String, }} data
+         */
+        data => {
+            activeDate = data
+        }
+    )
+    init()
+</script>
+
+<svelte:head>
+    <title>{TITLE}</title>
+</svelte:head>
+
+
+<section id="edit-record">
+    <header>
+        <h1>{TITLE}</h1>
+    </header>
+    <article>
+        <form action="/working-hours?/update" name="editRecord" method="POST">
+            {#if activeDate === null}
+                <p>Loading...</p>
+            {:else}
+                <fieldset name="record-data-by-day">
+                    <div>
+                        <label for="workingDay">Arbeitstag</label>
+                        <input name="workingDay" type="date" id="workingDay" value="{activeDate.workingDay}" required pattern="\d\{4}-[0-1]\d-[0-3]\d">
+                    </div>
+                    <div>
+                        <label for="workingTime">Arbeitszeit</label>
+                        <input name="workingTime" placeholder="Arbeitszeit" type="time" step="1"
+                               value="{activeDate.workingTime}"
+                               id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
+                    </div>
+                </fieldset>
+            {/if}
+            <fieldset name="buttons">
+                <button type="submit">Übernehmen und Weiter
+                    <IconifyIcon icon={checkIcon} color="green"/>
+                </button>
+                <button formmethod="GET" type="submit" class="sub-button">Abbrechen
+                    <IconifyIcon icon={xIcon}/>
+                </button>
+            </fieldset>
+        </form>
+    </article>
+</section>
\ No newline at end of file
diff --git a/ui/src/routes/working-hours/create-by-day/+page.svelte b/ui/src/routes/working-hours/create-by-day/+page.svelte
new file mode 100644
index 0000000..80d1fd0
--- /dev/null
+++ b/ui/src/routes/working-hours/create-by-day/+page.svelte
@@ -0,0 +1,43 @@
+<script>
+    import IconifyIcon from '@iconify/svelte'
+    import checkIcon from "@iconify-icons/oi/check";
+    import xIcon from "@iconify-icons/oi/x";
+    import {goto} from "$app/navigation";
+
+    const TITLE = "Erstellung eines neuen Eintrags"
+</script>
+
+<svelte:head>
+    <title>{TITLE}</title>
+</svelte:head>
+
+
+<section id="edit-record">
+    <header>
+        <h1>{TITLE}</h1>
+    </header>
+    <article>
+        <form action="/working-hours?/create" name="newRecord" method="POST">
+            <fieldset name="record-data-by-day">
+                <div>
+                    <label for="workingDay">Arbeitstag</label>
+                    <input name="workingDay" type="date" id="workingDay" value="" required
+                           pattern="\d\{4}-[0-1]\d-[0-3]\d">
+                </div>
+                <div>
+                    <label for="workingTime">Arbeitszeit</label>
+                    <input name="workingTime" placeholder="Arbeitszeit" type="time" step="1" value=""
+                           id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
+                </div>
+            </fieldset>
+            <fieldset name="buttons">
+                <button type="submit">Übernehmen und Weiter
+                    <IconifyIcon icon={checkIcon} color="green"/>
+                </button>
+                <button type="button" class="sub-button" onclick={() => goto('/working-hours')}>Abbrechen
+                    <IconifyIcon icon={xIcon}/>
+                </button>
+            </fieldset>
+        </form>
+    </article>
+</section>
\ No newline at end of file
diff --git a/ui/src/routes/working-hours/create-by-week/+page.svelte b/ui/src/routes/working-hours/create-by-week/+page.svelte
new file mode 100644
index 0000000..0a0d9a3
--- /dev/null
+++ b/ui/src/routes/working-hours/create-by-week/+page.svelte
@@ -0,0 +1,74 @@
+<script>
+    import IconifyIcon from '@iconify/svelte'
+    import checkIcon from "@iconify-icons/oi/check";
+    import xIcon from "@iconify-icons/oi/x";
+    import {goto} from "$app/navigation";
+    const TITLE = "Erstellung neuer Einträge für eine Woche"
+</script>
+
+<svelte:head>
+    <title>{TITLE}</title>
+</svelte:head>
+
+<style>
+    tbody.weekend td input, tbody.weekend td {
+        color: red;
+    }
+</style>
+
+
+<section id="edit-record">
+    <header>
+        <h1>{TITLE}</h1>
+    </header>
+    <article>
+        <form action="/working-hours?/create-by-week" name="newRecord" method="POST">
+            <fieldset name="how-week-is-use">
+                <div>
+                    <label for="monday">Woche vom</label>
+                    <input name="week" type="date" id="week" required value="">
+                </div>
+            </fieldset>
+            <fieldset name="record-data-by-week">
+                <div>
+                    <table>
+                        <tbody>
+                        {#each ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag'] as day}
+                            <tr>
+                                <td>
+                                    {day}
+                                </td>
+                                <td>
+                                    <input name="{day}" value="08:00:00" type="time" step="1"
+                                           required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
+                                </td>
+                            </tr>
+                        {/each}
+                        </tbody>
+                        <tbody class="weekend">
+                        {#each ['Samstag', 'Sontag'] as day}
+                            <tr>
+                                <td>
+                                    {day}
+                                </td>
+                                <td>
+                                    <input name="{day}" value="00:00:00" type="time" step="1"
+                                           required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
+                                </td>
+                            </tr>
+                        {/each}
+                        </tbody>
+                    </table>
+                </div>
+            </fieldset>
+            <fieldset name="buttons">
+                <button type="submit">Übernehmen und Weiter
+                    <IconifyIcon icon={checkIcon} color="green"/>
+                </button>
+                <button type="button" class="sub-button" onclick={() => goto('/working-hours')}>Abbrechen
+                    <IconifyIcon icon={xIcon}/>
+                </button>
+            </fieldset>
+        </form>
+    </article>
+</section>
\ No newline at end of file
diff --git a/ui/src/routes/working-hours/import-csv/+page.svelte b/ui/src/routes/working-hours/import-csv/+page.svelte
new file mode 100644
index 0000000..15eddf2
--- /dev/null
+++ b/ui/src/routes/working-hours/import-csv/+page.svelte
@@ -0,0 +1,112 @@
+<script>
+    import IconifyIcon from '@iconify/svelte'
+    import checkIcon from "@iconify-icons/oi/check";
+    import xIcon from "@iconify-icons/oi/x";
+    import {goto} from "$app/navigation";
+    // @ts-ignore
+    import Papa from 'papaparse';
+
+    const TITLE = "Erstellung neuer Einträge für eine Woche"
+
+    /** @type {{ workingTime: String, workingDay: String, }[]} **/
+    let imported_data = $state([])
+
+
+    let files = $state(null)
+
+    const VerarbeiteDateien = () => {
+        for (const file of files ?? []) {
+            VerarbeiteCsv(file)
+        }
+    }
+
+
+    /** @param {File} file **/
+    const VerarbeiteCsv = file => {
+        Papa.parse(file, {
+            header: true,
+            skipEmptyLines: true,
+            // @ts-ignore
+            complete: results => {
+                /** @type {Object<String, Number>} **/
+                let cash_work_days = {}
+                results.data.forEach(
+                    /** @param {Object<String, any>} item **/
+                    item => {
+                        // noinspection JSNonASCIINames
+                        let activity = item['Aktivität']
+                        if (activity.trim() === 'Mittagspause') {
+                            return
+                        }
+                        let work_from = new Date(item['Von'])
+                        let work_to = new Date(item['Bis'])
+                        let actual_day = work_from.toISOString().substring(0, 10)
+                        let actual_work_hours = (work_to.getTime() - work_from.getTime()) / (1000 * 60 * 60)
+                        cash_work_days[actual_day] ??= 0
+                        cash_work_days[actual_day] += actual_work_hours
+                    }
+                )
+                for (let day in cash_work_days) {
+                    let hours = cash_work_days[day]
+                    let hours_digits = Math.trunc(hours)
+                    let minutes_digits = Math.round((hours - hours_digits) * 60)
+                    let working_time = String(hours_digits).padStart(2, '0') + ':'
+                        + String(minutes_digits).padStart(2, '0') + ':00'
+                    imported_data.push({workingTime: working_time, workingDay: day})
+                }
+            },
+        })
+    }
+</script>
+
+<svelte:head>
+    <title>{TITLE}</title>
+</svelte:head>
+
+
+<section id="edit-record">
+    <header>
+        <h1>{TITLE}</h1>
+    </header>
+    <article>
+        <form action="/working-hours?/import-csv" name="newRecord" method="POST">
+            {#if imported_data.length < 1}
+                <fieldset>
+                    <legend>Download-Liste</legend>
+                    <div class="zelle">
+                        <label for="csv-file">Download der Zeiten von <i>aTimeLogger2</i></label>
+                        <input type="file" accept="text/csv" id="csv-file" bind:files/>
+                        <button type="button" onclick={VerarbeiteDateien}>Upload</button>
+                    </div>
+                </fieldset>
+            {:else}
+                <fieldset name="record-data-for-import">
+                    <div>
+                        <table>
+                            <tbody>
+                            {#each imported_data as item}
+                                <tr>
+                                    <td>
+                                        {item.workingDay}
+                                    </td>
+                                    <td>
+                                        <input type="time" readonly name="{item.workingDay}" value="{item.workingTime}">
+                                    </td>
+                                </tr>
+                            {/each}
+                            </tbody>
+                        </table>
+                    </div>
+                </fieldset>
+                <fieldset name="buttons">
+                    <button type="submit">Übernehmen und Weiter
+                        <IconifyIcon icon={checkIcon} color="green"/>
+                    </button>
+                    <button type="button" class="sub-button" onclick={() => goto('/working-hours')}>Abbrechen
+                        <IconifyIcon icon={xIcon}/>
+                    </button>
+                </fieldset>
+            {/if}
+        </form>
+    </article>
+</section>
\ No newline at end of file
diff --git a/ui/public/favicon.png b/ui/static/favicon.png
similarity index 100%
rename from ui/public/favicon.png
rename to ui/static/favicon.png
diff --git a/ui/public/fonts/Lobster_1.3.otf b/ui/static/fonts/Lobster_1.3.otf
similarity index 100%
rename from ui/public/fonts/Lobster_1.3.otf
rename to ui/static/fonts/Lobster_1.3.otf
diff --git a/ui/public/fonts/opensans-bold.eot b/ui/static/fonts/opensans-bold.eot
similarity index 100%
rename from ui/public/fonts/opensans-bold.eot
rename to ui/static/fonts/opensans-bold.eot
diff --git a/ui/public/fonts/opensans-bold.svg b/ui/static/fonts/opensans-bold.svg
similarity index 100%
rename from ui/public/fonts/opensans-bold.svg
rename to ui/static/fonts/opensans-bold.svg
diff --git a/ui/public/fonts/opensans-bold.ttf b/ui/static/fonts/opensans-bold.ttf
similarity index 100%
rename from ui/public/fonts/opensans-bold.ttf
rename to ui/static/fonts/opensans-bold.ttf
diff --git a/ui/public/fonts/opensans-bold.woff b/ui/static/fonts/opensans-bold.woff
similarity index 100%
rename from ui/public/fonts/opensans-bold.woff
rename to ui/static/fonts/opensans-bold.woff
diff --git a/ui/public/fonts/opensans-bolditalic.eot b/ui/static/fonts/opensans-bolditalic.eot
similarity index 100%
rename from ui/public/fonts/opensans-bolditalic.eot
rename to ui/static/fonts/opensans-bolditalic.eot
diff --git a/ui/public/fonts/opensans-bolditalic.svg b/ui/static/fonts/opensans-bolditalic.svg
similarity index 100%
rename from ui/public/fonts/opensans-bolditalic.svg
rename to ui/static/fonts/opensans-bolditalic.svg
diff --git a/ui/public/fonts/opensans-bolditalic.ttf b/ui/static/fonts/opensans-bolditalic.ttf
similarity index 100%
rename from ui/public/fonts/opensans-bolditalic.ttf
rename to ui/static/fonts/opensans-bolditalic.ttf
diff --git a/ui/public/fonts/opensans-bolditalic.woff b/ui/static/fonts/opensans-bolditalic.woff
similarity index 100%
rename from ui/public/fonts/opensans-bolditalic.woff
rename to ui/static/fonts/opensans-bolditalic.woff
diff --git a/ui/public/fonts/opensans-italic.eot b/ui/static/fonts/opensans-italic.eot
similarity index 100%
rename from ui/public/fonts/opensans-italic.eot
rename to ui/static/fonts/opensans-italic.eot
diff --git a/ui/public/fonts/opensans-italic.svg b/ui/static/fonts/opensans-italic.svg
similarity index 100%
rename from ui/public/fonts/opensans-italic.svg
rename to ui/static/fonts/opensans-italic.svg
diff --git a/ui/public/fonts/opensans-italic.ttf b/ui/static/fonts/opensans-italic.ttf
similarity index 100%
rename from ui/public/fonts/opensans-italic.ttf
rename to ui/static/fonts/opensans-italic.ttf
diff --git a/ui/public/fonts/opensans-italic.woff b/ui/static/fonts/opensans-italic.woff
similarity index 100%
rename from ui/public/fonts/opensans-italic.woff
rename to ui/static/fonts/opensans-italic.woff
diff --git a/ui/public/fonts/opensans-regular.eot b/ui/static/fonts/opensans-regular.eot
similarity index 100%
rename from ui/public/fonts/opensans-regular.eot
rename to ui/static/fonts/opensans-regular.eot
diff --git a/ui/public/fonts/opensans-regular.svg b/ui/static/fonts/opensans-regular.svg
similarity index 100%
rename from ui/public/fonts/opensans-regular.svg
rename to ui/static/fonts/opensans-regular.svg
diff --git a/ui/public/fonts/opensans-regular.ttf b/ui/static/fonts/opensans-regular.ttf
similarity index 100%
rename from ui/public/fonts/opensans-regular.ttf
rename to ui/static/fonts/opensans-regular.ttf
diff --git a/ui/public/fonts/opensans-regular.woff b/ui/static/fonts/opensans-regular.woff
similarity index 100%
rename from ui/public/fonts/opensans-regular.woff
rename to ui/static/fonts/opensans-regular.woff
diff --git a/ui/public/meyer_resets.css b/ui/static/meyer_resets.css
similarity index 100%
rename from ui/public/meyer_resets.css
rename to ui/static/meyer_resets.css
diff --git a/ui/svelte.config.js b/ui/svelte.config.js
new file mode 100644
index 0000000..ec551aa
--- /dev/null
+++ b/ui/svelte.config.js
@@ -0,0 +1,10 @@
+import adapter from '@sveltejs/adapter-node';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+    kit: {
+        adapter: adapter()
+    }
+};
+
+export default config;
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
new file mode 100644
index 0000000..0b2d886
--- /dev/null
+++ b/ui/tsconfig.json
@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}
diff --git a/ui/vite.config.js b/ui/vite.config.js
new file mode 100644
index 0000000..a3eb481
--- /dev/null
+++ b/ui/vite.config.js
@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+    plugins: [sveltekit()]
+});