diff --git a/Application/Timerecording/Application.php b/Application/Timerecording/Application.php
new file mode 100644
index 0000000..31cd8a4
--- /dev/null
+++ b/Application/Timerecording/Application.php
@@ -0,0 +1,466 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 7.4
+ *
+ * @package   Web\Timerecording
+ * @copyright Dennis Eichhorn
+ * @license   OMS License 1.0
+ * @version   1.0.0
+ * @link      https://orange-management.org
+ */
+declare(strict_types=1);
+
+namespace Web\Timerecording;
+
+use Model\CoreSettings;
+use Model\Settings;
+
+use Modules\Admin\Models\AccountMapper;
+use Modules\Admin\Models\LocalizationMapper;
+use Modules\Organization\Models\UnitMapper;
+use Modules\Profile\Models\ProfileMapper;
+
+use phpOMS\Account\Account;
+use phpOMS\Account\AccountManager;
+use phpOMS\Account\NullAccount;
+use phpOMS\Account\PermissionType;
+use phpOMS\Asset\AssetType;
+use phpOMS\Auth\Auth;
+use phpOMS\DataStorage\Cache\CachePool;
+use phpOMS\DataStorage\Cookie\CookieJar;
+use phpOMS\DataStorage\Database\Connection\ConnectionAbstract;
+use phpOMS\DataStorage\Database\DatabasePool;
+use phpOMS\DataStorage\Database\DatabaseStatus;
+use phpOMS\DataStorage\Database\DataMapperAbstract;
+use phpOMS\DataStorage\Session\HttpSession;
+use phpOMS\Dispatcher\Dispatcher;
+use phpOMS\Event\EventManager;
+use phpOMS\Localization\L11nManager;
+use phpOMS\Message\Http\HttpRequest;
+use phpOMS\Message\Http\HttpResponse;
+use phpOMS\Message\Http\RequestMethod;
+use phpOMS\Message\Http\RequestStatusCode;
+use phpOMS\Model\Html\Head;
+use phpOMS\Module\ModuleManager;
+use phpOMS\Router\RouteVerb;
+use phpOMS\Router\WebRouter;
+use phpOMS\System\File\PathException;
+use phpOMS\Uri\UriFactory;
+use phpOMS\Views\View;
+
+use Web\WebApplication;
+
+/**
+ * Application class.
+ *
+ * @package Web\Timerecording
+ * @license OMS License 1.0
+ * @link    https://orange-management.org
+ * @since   1.0.0
+ * @codeCoverageIgnore
+ */
+final class Application
+{
+    /**
+     * WebApplication.
+     *
+     * @var WebApplication
+     * @since 1.0.0
+     */
+    private WebApplication $app;
+
+    /**
+     * Temp config.
+     *
+     * @var array{db:array{core:array{masters:array{select:array{db:string, host:string, port:int, login:string, password:string, database:string, prefix:string}}}}, log:array{file:array{path:string}}, app:array{path:string, default:string, domains:array}, page:array{root:string, https:bool}, language:string[]}
+     * @since 1.0.0
+     */
+    private array $config;
+
+    /**
+     * Constructor.
+     *
+     * @param WebApplication                                                                                                                                                                                                                                                                                               $app    WebApplication
+     * @param array{db:array{core:array{masters:array{select:array{db:string, host:string, port:int, login:string, password:string, database:string, prefix:string}}}}, log:array{file:array{path:string}}, app:array{path:string, default:string, domains:array}, page:array{root:string, https:bool}, language:string[]} $config Application config
+     *
+     * @since 1.0.0
+     */
+    public function __construct(WebApplication $app, array $config)
+    {
+        $this->app          = $app;
+        $this->app->appName = 'Timerecording';
+        $this->config       = $config;
+        UriFactory::setQuery('/app', \strtolower($this->app->appName));
+    }
+
+    /**
+     * Rendering timerecording.
+     *
+     * @param HttpRequest  $request  Request
+     * @param HttpResponse $response Response
+     *
+     * @return void
+     *
+     * @since 1.0.0
+     */
+    public function run(HttpRequest $request, HttpResponse $response) : void
+    {
+        $this->app->l11nManager = new L11nManager($this->app->appName);
+
+        $pageView = new TimerecordingView($this->app->l11nManager, $request, $response);
+        $head     = new Head();
+
+        $pageView->setData('head', $head);
+        $response->set('Content', $pageView);
+
+        /* Timerecording only allows GET */
+        if ($request->getMethod() !== RequestMethod::GET) {
+            $this->create406Response($response, $pageView);
+
+            return;
+        }
+
+        $this->app->dbPool = new DatabasePool();
+        $this->app->router = new WebRouter();
+        $this->app->router->importFromFile(__DIR__ . '/Routes.php');
+        $this->app->router->add(
+            '/timerecording/e403',
+            function() use ($request, $response) {
+                $view = new View($this->app->l11nManager, $request, $response);
+                $view->setTemplate('/Web/Timerecording/Error/403_inline');
+                $response->getHeader()->setStatusCode(RequestStatusCode::R_403);
+
+                return $view;
+            },
+            RouteVerb::GET
+        );
+
+        $this->app->sessionManager = new HttpSession(60);
+        $this->app->cookieJar      = new CookieJar();
+        $this->app->moduleManager  = new ModuleManager($this->app, __DIR__ . '/../../Modules');
+        $this->app->dispatcher     = new Dispatcher($this->app);
+
+        $this->app->dbPool->create('select', $this->config['db']['core']['masters']['select']);
+
+        /* Database OK? */
+        if ($this->app->dbPool->get()->getStatus() !== DatabaseStatus::OK) {
+            $this->create503Response($response, $pageView);
+
+            return;
+        }
+
+        /* CSRF token OK? */
+        if ($request->getData('CSRF') !== null
+            && !\hash_equals($this->app->sessionManager->get('CSRF'), $request->getData('CSRF'))
+        ) {
+            $response->getHeader()->setStatusCode(RequestStatusCode::R_403);
+
+            return;
+        }
+
+        /** @var ConnectionAbstract $con */
+        $con = $this->app->dbPool->get();
+        DataMapperAbstract::setConnection($con);
+
+        $this->app->cachePool      = new CachePool();
+        $this->app->appSettings    = new CoreSettings($con);
+        $this->app->eventManager   = new EventManager($this->app->dispatcher);
+        $this->app->accountManager = new AccountManager($this->app->sessionManager);
+        $this->app->l11nServer     = LocalizationMapper::get(1);
+
+        $this->app->orgId = $this->getApplicationOrganization($request, $this->config);
+        $pageView->setData('orgId', $this->app->orgId);
+
+        $aid = Auth::authenticate($this->app->sessionManager);
+        $request->getHeader()->setAccount($aid);
+        $response->getHeader()->setAccount($aid);
+
+        $account = $this->loadAccount($request);
+
+        if (!($account instanceof NullAccount)) {
+            $response->getHeader()->setL11n($account->getL11n());
+        } elseif ($this->app->sessionManager->get('language') !== null) {
+            $response->getHeader()->getL11n()
+                ->loadFromLanguage(
+                    $this->app->sessionManager->get('language'),
+                    $this->app->sessionManager->get('country') ?? '*'
+                );
+        } elseif ($this->app->cookieJar->get('language') !== null) {
+            $response->getHeader()->getL11n()
+                ->loadFromLanguage(
+                    $this->app->cookieJar->get('language'),
+                    $this->app->cookieJar->get('country') ?? '*'
+                );
+        }
+
+        UriFactory::setQuery('/lang', $response->getHeader()->getL11n()->getLanguage());
+
+        $this->loadLanguageFromPath(
+            $response->getHeader()->getL11n()->getLanguage(),
+            __DIR__ . '/lang/' . $response->getHeader()->getL11n()->getLanguage() . '.lang.php'
+        );
+
+        $response->getHeader()->set('content-language', $response->getHeader()->getL11n()->getLanguage(), true);
+
+        /* Create html head */
+        $this->initResponseHead($head, $request, $response);
+
+        /* Handle not logged in */
+        if ($account->getId() < 1) {
+            $this->createLoggedOutResponse($response, $head, $pageView);
+
+            return;
+        }
+
+        /* No reading permission */
+        if (!$account->hasPermission(PermissionType::READ, $this->app->orgId, $this->app->appName, 'Dashboard')) {
+            $this->create403Response($response, $pageView);
+
+            return;
+        }
+
+        $this->app->moduleManager->initRequestModules($request);
+        $this->createDefaultPageView($request, $response, $pageView);
+
+        $dispatched = $this->app->dispatcher->dispatch(
+            $this->app->router->route(
+                $request->getUri()->getRoute(),
+                $request->getData('CSRF'),
+                $request->getRouteVerb(),
+                $this->app->appName,
+                $this->app->orgId,
+                $account,
+                $request->getData()
+            ),
+            $request,
+            $response
+        );
+        $pageView->addData('dispatch', $dispatched);
+    }
+
+    /**
+     * Get application organization
+     *
+     * @param HttpRequest $request Client request
+     * @param array       $config  App config
+     *
+     * @return int Organization id
+     *
+     * @since 1.0.0
+     */
+    private function getApplicationOrganization(HttpRequest $request, array $config) : int
+    {
+        return (int) (
+            $request->getData('u') ?? (
+                $config['domains'][$request->getUri()->getHost()]['org'] ?? $this->app->appSettings->get(
+                    Settings::DEFAULT_ORGANIZATION
+                ) ?? 1
+            )
+        );
+    }
+
+    /**
+     * Create 406 response.
+     *
+     * @param HttpResponse $response Response
+     * @param View         $pageView View
+     *
+     * @return void
+     *
+     * @since 1.0.0
+     */
+    private function create406Response(HttpResponse $response, View $pageView) : void
+    {
+        $response->getHeader()->setStatusCode(RequestStatusCode::R_406);
+        $pageView->setTemplate('/Web/Timerecording/Error/406');
+        $this->loadLanguageFromPath(
+            $response->getHeader()->getL11n()->getLanguage(),
+            __DIR__ . '/Error/lang/' . $response->getHeader()->getL11n()->getLanguage() . '.lang.php'
+        );
+    }
+
+    /**
+     * Create 406 response.
+     *
+     * @param HttpResponse $response Response
+     * @param View         $pageView View
+     *
+     * @return void
+     *
+     * @since 1.0.0
+     */
+    private function create503Response(HttpResponse $response, View $pageView) : void
+    {
+        $response->getHeader()->setStatusCode(RequestStatusCode::R_503);
+        $pageView->setTemplate('/Web/Timerecording/Error/503');
+        $this->loadLanguageFromPath(
+            $response->getHeader()->getL11n()->getLanguage(),
+            __DIR__ . '/Error/lang/' . $response->getHeader()->getL11n()->getLanguage() . '.lang.php'
+        );
+    }
+
+    /**
+     * Load theme language from path
+     *
+     * @param string $language Language name
+     * @param string $path     Language path
+     *
+     * @return void
+     *
+     * @since 1.0.0
+     */
+    private function loadLanguageFromPath(string $language, string $path) : void
+    {
+        /* Load theme language */
+        if (($absPath = \realpath($path)) === false) {
+            throw new PathException($path);
+        }
+
+        /** @noinspection PhpIncludeInspection */
+        $themeLanguage = include $absPath;
+        $this->app->l11nManager->loadLanguage($language, '0', $themeLanguage);
+    }
+
+    /**
+     * Load permission
+     *
+     * @param HttpRequest $request Current request
+     *
+     * @return Account
+     *
+     * @since 1.0.0
+     */
+    private function loadAccount(HttpRequest $request) : Account
+    {
+        $account = AccountMapper::getWithPermissions($request->getHeader()->getAccount());
+        $this->app->accountManager->add($account);
+
+        return $account;
+    }
+
+    /**
+     * Create 406 response.
+     *
+     * @param HttpResponse $response Response
+     * @param View         $pageView View
+     *
+     * @return void
+     *
+     * @since 1.0.0
+     */
+    private function create403Response(HttpResponse $response, View $pageView) : void
+    {
+        $response->getHeader()->setStatusCode(RequestStatusCode::R_403);
+        $pageView->setTemplate('/Web/Timerecording/Error/403');
+        $this->loadLanguageFromPath(
+            $response->getHeader()->getL11n()->getLanguage(),
+            __DIR__ . '/Error/lang/' . $response->getHeader()->getL11n()->getLanguage() . '.lang.php'
+        );
+    }
+
+    /**
+     * Initialize response head
+     *
+     * @param Head         $head     Head to fill
+     * @param HttpRequest  $request  Request
+     * @param HttpResponse $response Response
+     *
+     * @return void
+     *
+     * @since 1.0.0
+     */
+    private function initResponseHead(Head $head, HttpRequest $request, HttpResponse $response) : void
+    {
+        /* Load assets */
+        $head->addAsset(AssetType::CSS, 'Resources/fontawesome/css/font-awesome.min.css');
+        $head->addAsset(AssetType::CSS, 'cssOMS/styles.css');
+        $head->addAsset(AssetType::CSS, '//fonts.googleapis.com/css?family=Roboto:100,300,300i,400,700,900');
+
+        // Framework
+        $head->addAsset(AssetType::JS, 'jsOMS/Utils/oLib.js');
+        $head->addAsset(AssetType::JS, 'jsOMS/UnhandledException.js');
+        $head->addAsset(AssetType::JS, 'Web/Timerecording/js/timerecording.js', ['type' => 'module']);
+        $head->addAsset(AssetType::JSLATE, 'Modules/Navigation/Controller.js', ['type' => 'module']);
+
+        $script = '';
+        $response->getHeader()->set(
+            'content-security-policy',
+            'base-uri \'self\'; script-src \'self\' blob: \'sha256-'
+            . \base64_encode(\hash('sha256', $script, true))
+            . '\'; worker-src \'self\'',
+            true
+        );
+
+        if ($request->hasData('debug')) {
+            $head->addAsset(AssetType::CSS, 'cssOMS/debug.css');
+        }
+
+        $css = \file_get_contents(__DIR__ . '/css/timerecording-small.css');
+        if ($css === false) {
+            $css = '';
+        }
+
+        $css = \preg_replace('!\s+!', ' ', $css);
+        $head->setStyle('core', $css ?? '');
+        $head->setTitle('Orange Management Timerecording');
+    }
+
+    /**
+     * Create logged out response
+     *
+     * @param HttpResponse $response Response
+     * @param Head         $head     Head to fill
+     * @param View         $pageView View
+     *
+     * @return void
+     *
+     * @since 1.0.0
+     */
+    private function createLoggedOutResponse(HttpResponse $response, Head $head, View $pageView) : void
+    {
+        $response->getHeader()->setStatusCode(RequestStatusCode::R_403);
+        $pageView->setTemplate('/Web/Timerecording/login');
+        $head->addAsset(AssetType::JS, 'Web/Timerecording/js/login.js', ['type' => 'module']);
+    }
+
+    /**
+     * Create default page view
+     *
+     * @param HttpRequest       $request  Request
+     * @param HttpResponse      $response Response
+     * @param TimerecordingView $pageView View
+     *
+     * @return void
+     *
+     * @since 1.0.0
+     */
+    private function createDefaultPageView(HttpRequest $request, HttpResponse $response, TimerecordingView $pageView) : void
+    {
+        $pageView->setOrganizations(UnitMapper::getAll());
+        $pageView->setProfile(ProfileMapper::getFor($request->getHeader()->getAccount(), 'account'));
+        $pageView->setData('nav', $this->getNavigation($request, $response));
+
+        $pageView->setTemplate('/Web/Timerecording/index');
+    }
+
+    /**
+     * Create navigation
+     *
+     * @param HttpRequest  $request  Request
+     * @param HttpResponse $response Response
+     *
+     * @return View
+     *
+     * @since 1.0.0
+     */
+    private function getNavigation(HttpRequest $request, HttpResponse $response) : View
+    {
+        /** @var \Modules\Navigation\Controller\TimerecordingController $navController */
+        $navController = $this->app->moduleManager->get('Navigation');
+        $navController->loadLanguage($request, $response);
+
+        return $navController->getView($request, $response);
+    }
+}
diff --git a/Application/Timerecording/Error/403_inline.tpl.php b/Application/Timerecording/Error/403_inline.tpl.php
new file mode 100644
index 0000000..e76b530
--- /dev/null
+++ b/Application/Timerecording/Error/403_inline.tpl.php
@@ -0,0 +1 @@
+Inline
\ No newline at end of file
diff --git a/Application/Timerecording/Routes.php b/Application/Timerecording/Routes.php
new file mode 100644
index 0000000..b9ed83e
--- /dev/null
+++ b/Application/Timerecording/Routes.php
@@ -0,0 +1,24 @@
+<?php return [
+    '^/timerecording$' => [
+        0 => [
+            'dest' => '\Modules\HumanResourceTimeRecording\Controller\TimerecordingController:viewDashboard',
+            'verb' => 1,
+            'permission' => [
+                'module' => 'HumanResourceTimeRecording',
+                'type' => 2,
+                'state' => 1,
+            ],
+        ],
+    ],
+    '^.*/timerecording/dashboard.*$' => [
+        0 => [
+            'dest' => '\Modules\HumanResourceTimeRecording\Controller\TimerecordingController:viewDashboard',
+            'verb' => 1,
+            'permission' => [
+                'module' => 'HumanResourceTimeRecording',
+                'type' => 2,
+                'state' => 1,
+            ],
+        ],
+    ],
+];
\ No newline at end of file
diff --git a/Application/Timerecording/Themes/Akebi/timerecording-small.css b/Application/Timerecording/Themes/Akebi/timerecording-small.css
new file mode 100644
index 0000000..7562f51
--- /dev/null
+++ b/Application/Timerecording/Themes/Akebi/timerecording-small.css
@@ -0,0 +1,190 @@
+:root {
+    --main-background: rgb(46, 26, 90);
+    --main-background-highlight: rgb(158, 81, 197);
+    --input-border: rgba(166, 135, 232, .4);
+    --input-border-active: rgba(166, 135, 232, .7);
+    --input-color: rgb(116, 67, 161);
+    --input-color-active: rgb(94, 52, 133);
+    --input-background: rgba(255, 255, 255);
+    --input-background-active: rgba(255, 255, 255);
+    --input-icon-color: rgba(166, 135, 232, .6);
+    --input-icon-color-active: rgba(166, 135, 232, 1);
+    --button-main-background: rgba(166, 135, 232, .6);
+    --button-main-background-active: rgba(166, 135, 232, .8);
+    --button-main-color: rgba(255, 255, 255, .9);
+    --text-on-background-color: rgba(255, 255, 255, 0.7);
+    --text-on-background-color-2: rgba(255, 255, 255, 0.85);
+    --nav-category-background: rgb(43, 58, 101);
+    --nav-category-background-highlight: rgb(113, 43, 145);
+    --nav-category-background-hover: rgb(120, 50, 153);
+    --nav-sub-background: rgb(72, 39, 102);
+    --nav-sub-background-highlight: rgb(94, 52, 133);
+    --nav-sub-background-hover: rgb(116, 67, 161);
+    --nav-header-background: rgb(72, 39, 102);
+    --nav-header-background-highlight: rgb(94, 52, 133);
+    --nav-header-background-hover: rgb(116, 67, 161);
+    --nav-content-hover: rgb(177, 97, 218);
+    --font-family: 'Roboto', sans-serif;
+    --button-colored-background: rgb(158, 81, 197);
+    --button-colored-background-hover: rgb(177, 97, 218);
+    --table-caption-background: rgb(255, 255, 255);
+    --table-head-background: rgb(236, 232, 255);
+    --table-row-background: rgb(255, 255, 255);
+    --table-row-background-alt: rgb(255, 255, 255);
+    --table-row-background-hover: rgb(220, 211, 255);
+    --link-color: rgb(72, 39, 102);
+    --link-hover: rgb(158, 81, 197);
+    --badge-size: .55rem;
+    --badge-color: rgb(255, 255, 255);
+    --badge-background: rgb(158, 81, 197);
+    --box-border: rgb(218, 218, 218); }
+
+  html, body {
+    width: 100%;
+    height: 100%;
+    min-width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    font-family: var(--font-family);
+    color: #000; }
+
+  body {
+    display: flex; flex-direction: column;}
+
+header {
+    background: #f8f8f8;
+    border-bottom: 1px solid var(--box-border);
+    padding: 1rem;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    flex-flow: row;
+    flex: 0; }
+  header > form {
+      display: flex;
+      flex: 1;
+      padding: 0 5px 0 5px;
+      max-width: 800px; }
+  header .inputWrapper {
+      flex: 1; }
+  header input[type=text] {
+      width: 100%;
+      background: white;
+      border: 1px solid var(--input-border);
+      text-shadow: none;
+      box-shadow: none;
+      transition: border 500ms ease-out;
+      outline: none;
+      box-sizing: border-box;
+      padding-left: 2rem; }
+
+  #logo {
+    flex: 1;
+    text-align: right; }
+    #logo select {
+      background: none;
+      color: rgba(255, 255, 255, 0.8);
+      font-size: .8rem; }
+
+  .ham-trigger {
+    display: flex;
+    color: #000;
+    align-items: center;
+    flex: 0;
+    margin-right: 5px; }
+    .ham-trigger i {
+      font-size: 1.5rem; }
+
+  nav .ham-trigger {
+    color: var(--text-on-background-color-2);
+    margin: 0 0 0 5px;
+    display: none; }
+
+  #t-nav-container {
+    margin-left: auto; }
+
+  #content {
+    flex: 1;
+    padding-left: 1rem;
+    overflow-y: auto; }
+
+  #t-nav {
+    font-size: .8rem;
+    color: #000;
+    font-weight: bold; }
+    #t-nav a {
+      padding: 0 5px 0 5px;
+      line-height: 25px; }
+    #t-nav i {
+      margin-right: 5px; }
+    #t-nav li {
+      display: inline; }
+      #t-nav li:hover {
+        color: var(--link-hover); }
+
+  main {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: #f1f1f1;
+    flex: 1;
+    box-sizing: border-box; }
+
+  #dim {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: 0.5;
+    z-index: 5; }
+
+  #u-box {
+    display: flex;
+    align-items: center;
+    padding: 0 1rem 0 1rem;
+    height: 60px;
+    border-bottom: 1px solid var(--input-border);
+    box-sizing: border-box; }
+    #u-box img {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%; }
+    #u-box a {
+      display: inline-block; }
+
+      #app-message-container {
+        position: absolute;
+        margin: 0 auto;
+        right: 0;
+        top: 0;
+        padding: 85px 10px 0 0;
+    }
+
+    .log-msg {
+      z-index: 11;
+      position: relative;
+      margin: 0 auto;
+      right: 0;
+      top: 0;
+      margin-bottom: 10px;
+  }
+
+  @media only screen and (max-width: 500px) {
+    nav .ham-trigger {
+      display: flex; } }
+  @media only screen and (max-width: 600px) {
+header {
+      flex-flow: column;
+      height: auto;
+      padding: 1rem; }
+  header form {
+        width: 100%; }
+
+    #t-nav-container {
+      order: -1;
+      margin-bottom: .5rem; } }
+  @media only screen and (max-width: 1000px) {
+    #t-nav .link {
+      display: none; } }
diff --git a/Application/Timerecording/Themes/Akebi/timerecording-small.scss b/Application/Timerecording/Themes/Akebi/timerecording-small.scss
new file mode 100644
index 0000000..7252f9d
--- /dev/null
+++ b/Application/Timerecording/Themes/Akebi/timerecording-small.scss
@@ -0,0 +1,153 @@
+@import "backend_vars";
+
+html, body {
+    width: 100%;
+    height: 100%;
+    min-width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    font-family: var(--font-family);
+    color: #000;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+}
+
+header {
+    background: rgb(248, 248, 248);
+    border-bottom: 1px solid var(--box-border);
+    padding: 1rem;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    flex-flow: row;
+    flex: 0;
+
+    > form {
+        display: flex;
+        flex: 1;
+        padding: 0 5px 0 5px;
+        max-width: 800px;
+    }
+
+    .inputWrapper {
+        flex: 1;
+    }
+
+    input[type=text] {
+        width: 100%;
+        background: rgba(255, 255, 255, 1);
+        border: 1px solid var(--input-border);
+        text-shadow: none;
+        box-shadow: none;
+        transition : border 500ms ease-out;
+        outline: none;
+        box-sizing: border-box;
+        padding-left: 2rem;
+    }
+}
+
+#logo {
+    flex: 1;
+    text-align: right;
+
+    select {
+        background: none;
+        color: rgba(255, 255, 255, 0.8);
+        font-size: .8rem;
+    }
+}
+
+#t-nav-container {
+    margin-left: auto;
+}
+
+#content {
+    flex: 1;
+    padding-left: 1rem;
+    overflow-y: auto;
+}
+
+#t-nav {
+    font-size: .8rem;
+    color: #000;
+    font-weight: bold;
+
+    a {
+        padding: 0 5px 0 5px;
+        line-height: 25px;
+    }
+
+    i {
+        margin-right: 5px;
+    }
+
+    li {
+        display: inline;
+
+        &:hover {
+            color: var(--link-hover);
+        }
+    }
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: #f1f1f1;
+
+    flex: 1;
+    box-sizing: border-box;
+}
+
+#dim {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: 0.5;
+    z-index: 5;
+}
+
+#u-box {
+    display: flex;
+    align-items: center;
+    padding: 0 1rem 0 1rem;
+    height: 60px;
+    border-bottom: 1px solid var(--input-border);
+    box-sizing: border-box;
+
+    img {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+    }
+
+    a {
+        display: inline-block;
+    }
+}
+
+#app-message-container {
+    position: absolute;
+    margin: 0 auto;
+    right: 0;
+    top: 0;
+    padding: 85px 10px 0 0;
+
+    .log-msg {
+        z-index: 11;
+        position: relative;
+        margin: 0 auto;
+        right: 0;
+        top: 0;
+        margin-bottom: 10px;
+    }
+}
+
+@import "timerecording_media";
\ No newline at end of file
diff --git a/Application/Timerecording/Themes/Akebi/timerecording_media.css b/Application/Timerecording/Themes/Akebi/timerecording_media.css
new file mode 100644
index 0000000..cc491bf
--- /dev/null
+++ b/Application/Timerecording/Themes/Akebi/timerecording_media.css
@@ -0,0 +1,39 @@
+@media only screen and (min-width: 1101px) {
+  .b-1 {
+    width: 31.5%;
+    width: calc(33.3% - 10px); }
+
+  .b-2 {
+    width: 48.5%;
+    width: calc(50% - 10px); }
+
+  .b-3 {
+    width: 63%;
+    width: calc(66.6% - 10px); } }
+@media only screen and (min-width: 801px) and (max-width: 1100px) {
+  .b-1 {
+    width: 48.5%;
+    width: calc(50% - 10px); } }
+@media only screen and (max-width: 1100px) {
+  .b-2, .b-3 {
+    width: 100%;
+    width: calc(100% - 10px); } }
+@media only screen and (min-width: 801px) {
+  .b-4 {
+    width: 48.5%;
+    width: calc(50% - 10px); } }
+@media only screen and (max-width: 800px) {
+  .b-1, .b-3 {
+    width: 100%;
+    width: calc(100% - 10px); }
+
+  #logo {
+    display: none; }
+
+  #s-nav {
+    width: 100%; }
+
+  #s-bar input[type=text] {
+    margin-left: 35px;
+    width: 80%;
+    width: calc(100% - 90px); } }
diff --git a/Application/Timerecording/Themes/Akebi/timerecording_media.scss b/Application/Timerecording/Themes/Akebi/timerecording_media.scss
new file mode 100644
index 0000000..089e346
--- /dev/null
+++ b/Application/Timerecording/Themes/Akebi/timerecording_media.scss
@@ -0,0 +1,22 @@
+@media only screen and (max-width: 600px) {
+    header  {
+        flex-flow: column;
+        height: auto;
+        padding: 1rem;
+
+        form {
+            width: 100%;
+        }
+    }
+
+    nav {
+        order: -1;
+        margin-bottom: .5rem;
+    }
+}
+
+@media only screen and (max-width: 1000px) {
+    nav .link {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/Application/Timerecording/Themes/Akebi/timerecording_vars.css b/Application/Timerecording/Themes/Akebi/timerecording_vars.css
new file mode 100644
index 0000000..1f5ee22
--- /dev/null
+++ b/Application/Timerecording/Themes/Akebi/timerecording_vars.css
@@ -0,0 +1,24 @@
+:root {
+  --main-background: rgb(46, 26, 90);
+  --main-background-highlight: rgb(158, 81, 197);
+  --input-border: rgba(166, 135, 232, .4);
+  --input-border-active: rgba(166, 135, 232, .7);
+  --input-color: rgba(166, 135, 232, .6);
+  --input-color-active: rgba(166, 135, 232, .8);
+  --input-icon-color: rgba(166, 135, 232, .6);
+  --input-icon-color-active: rgba(166, 135, 232, 1);
+  --button-main-background: rgba(166, 135, 232, .6);
+  --button-main-background-active: rgba(166, 135, 232, .8);
+  --button-main-color: rgba(255, 255, 255, .9);
+  --text-on-background-color: rgba(255, 255, 255, 0.7);
+  --nav-category-background: rgb(43, 58, 101);
+  --nav-category-background-highlight: rgb(113, 43, 145);
+  --nav-category-background-hover: rgb(120, 50, 153);
+  --nav-sub-background: rgb(72, 39, 102);
+  --nav-sub-background-highlight: rgb(94, 52, 133);
+  --nav-sub-background-hover: rgb(116, 67, 161);
+  --nav-header-background: rgb(72, 39, 102);
+  --nav-header-background-highlight: rgb(94, 52, 133);
+  --nav-header-background-hover: rgb(116, 67, 161);
+  --font-family: 'Roboto', sans-serif;
+  --box-border-color: rgb(202, 202, 202); }
diff --git a/Application/Timerecording/Themes/Akebi/timerecording_vars.scss b/Application/Timerecording/Themes/Akebi/timerecording_vars.scss
new file mode 100644
index 0000000..d13715e
--- /dev/null
+++ b/Application/Timerecording/Themes/Akebi/timerecording_vars.scss
@@ -0,0 +1,55 @@
+:root {
+    --main-background: rgb(46, 26, 90);
+    --main-background-highlight: rgb(158, 81, 197);
+
+    --input-border: rgba(166, 135, 232, .4);
+    --input-border-active: rgba(166, 135, 232, .7);
+    --input-color: rgb(116, 67, 161);
+    --input-color-active: rgb(94, 52, 133);
+    --input-background: rgba(255, 255, 255);
+    --input-background-active: rgba(255, 255, 255);
+
+    --input-icon-color: rgba(166, 135, 232, .6);
+    --input-icon-color-active: rgba(166, 135, 232, 1);
+
+    --button-main-background: rgba(166, 135, 232, .6);
+    --button-main-background-active: rgba(166, 135, 232, .8);
+    --button-main-color: rgba(255, 255, 255, .9);
+
+    --text-on-background-color: rgba(255, 255, 255, 0.7);
+    --text-on-background-color-2: rgba(255, 255, 255, 0.85);
+
+    --nav-category-background: rgb(43, 58, 101);
+    --nav-category-background-highlight: rgb(113, 43, 145);
+    --nav-category-background-hover: rgb(120, 50, 153);
+
+    --nav-sub-background: rgb(72, 39, 102);
+    --nav-sub-background-highlight: rgb(94, 52, 133);
+    --nav-sub-background-hover: rgb(116, 67, 161);
+
+    --nav-header-background: rgb(72, 39, 102);
+    --nav-header-background-highlight: rgb(94, 52, 133);
+    --nav-header-background-hover: rgb(116, 67, 161);
+
+    --nav-content-hover: rgb(177, 97, 218);
+
+    --font-family: 'Roboto', sans-serif;
+
+    --button-colored-background: rgb(158, 81, 197);
+    --button-colored-background-hover: rgb(177, 97, 218);
+
+    --table-caption-background: rgb(255, 255, 255);
+    --table-head-background: rgb(236, 232, 255);
+    --table-row-background: rgb(255, 255, 255);
+    --table-row-background-alt: rgb(255, 255, 255);
+    --table-row-background-hover: rgb(220, 211, 255);
+
+    --link-color: rgb(72, 39, 102);
+    --link-hover: rgb(158, 81, 197);
+
+    --badge-size: .55rem;
+    --badge-color: rgb(255, 255, 255);
+    --badge-background: rgb(158, 81, 197);
+
+    --box-border: rgb(218, 218, 218);
+}
diff --git a/Application/Timerecording/TimerecordingView.php b/Application/Timerecording/TimerecordingView.php
new file mode 100644
index 0000000..25e9fb4
--- /dev/null
+++ b/Application/Timerecording/TimerecordingView.php
@@ -0,0 +1,116 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 7.4
+ *
+ * @package   Web\Timerecording
+ * @copyright Dennis Eichhorn
+ * @license   OMS License 1.0
+ * @version   1.0.0
+ * @link      https://orange-management.org
+ */
+declare(strict_types=1);
+
+namespace Web\Timerecording;
+
+use Modules\Organization\Models\Unit;
+use Modules\Profile\Models\Profile;
+use phpOMS\Uri\UriFactory;
+use phpOMS\Views\View;
+
+/**
+ * Main view.
+ *
+ * @package Web\Timerecording
+ * @license OMS License 1.0
+ * @link    https://orange-management.org
+ * @since   1.0.0
+ */
+class TimerecordingView extends View
+{
+    /**
+     * Navigation view
+     *
+     * @var View
+     * @since 1.0.0
+     */
+    protected $nav = null;
+
+    /**
+     * User profile.
+     *
+     * @var Profile
+     * @since 1.0.0
+     */
+    protected $profile = null;
+
+    /**
+     * Organizations.
+     *
+     * @var Unit[]
+     * @since 1.0.0
+     */
+    protected $organizations = null;
+
+    /**
+     * Set navigation view.
+     *
+     * @param View $nav Navigation view
+     *
+     * @return void
+     *
+     * @since 1.0.0
+     * @codeCoverageIgnore
+     */
+    public function setNavigation(View $nav) : void
+    {
+        $this->nav = $nav;
+    }
+
+    /**
+     * Set user profile.
+     *
+     * @param Profile $profile user account
+     *
+     * @return void
+     *
+     * @since 1.0.0
+     * @codeCoverageIgnore
+     */
+    public function setProfile(Profile $profile) : void
+    {
+        $this->profile = $profile;
+    }
+
+    /**
+     * Get profile image
+     *
+     * @return string Profile image link
+     *
+     * @since 1.0.0
+     */
+    public function getProfileImage() : string
+    {
+        if ($this->profile === null || $this->profile->getImage()->getPath() === '') {
+            return UriFactory::build('Web/Timerecording/img/user_default_' . \mt_rand(1, 6) . '.png');
+        }
+
+        return UriFactory::build($this->profile->getImage()->getPath());
+    }
+
+    /**
+     * Set organizations
+     *
+     * @param Unit[] $organizations Organizations
+     *
+     * @return void
+     *
+     * @since 1.0.0
+     * @codeCoverageIgnore
+     */
+    public function setOrganizations(array $organizations) : void
+    {
+        $this->organizations = $organizations;
+    }
+}
diff --git a/Application/Timerecording/css/timerecording-small.css b/Application/Timerecording/css/timerecording-small.css
new file mode 100644
index 0000000..7562f51
--- /dev/null
+++ b/Application/Timerecording/css/timerecording-small.css
@@ -0,0 +1,190 @@
+:root {
+    --main-background: rgb(46, 26, 90);
+    --main-background-highlight: rgb(158, 81, 197);
+    --input-border: rgba(166, 135, 232, .4);
+    --input-border-active: rgba(166, 135, 232, .7);
+    --input-color: rgb(116, 67, 161);
+    --input-color-active: rgb(94, 52, 133);
+    --input-background: rgba(255, 255, 255);
+    --input-background-active: rgba(255, 255, 255);
+    --input-icon-color: rgba(166, 135, 232, .6);
+    --input-icon-color-active: rgba(166, 135, 232, 1);
+    --button-main-background: rgba(166, 135, 232, .6);
+    --button-main-background-active: rgba(166, 135, 232, .8);
+    --button-main-color: rgba(255, 255, 255, .9);
+    --text-on-background-color: rgba(255, 255, 255, 0.7);
+    --text-on-background-color-2: rgba(255, 255, 255, 0.85);
+    --nav-category-background: rgb(43, 58, 101);
+    --nav-category-background-highlight: rgb(113, 43, 145);
+    --nav-category-background-hover: rgb(120, 50, 153);
+    --nav-sub-background: rgb(72, 39, 102);
+    --nav-sub-background-highlight: rgb(94, 52, 133);
+    --nav-sub-background-hover: rgb(116, 67, 161);
+    --nav-header-background: rgb(72, 39, 102);
+    --nav-header-background-highlight: rgb(94, 52, 133);
+    --nav-header-background-hover: rgb(116, 67, 161);
+    --nav-content-hover: rgb(177, 97, 218);
+    --font-family: 'Roboto', sans-serif;
+    --button-colored-background: rgb(158, 81, 197);
+    --button-colored-background-hover: rgb(177, 97, 218);
+    --table-caption-background: rgb(255, 255, 255);
+    --table-head-background: rgb(236, 232, 255);
+    --table-row-background: rgb(255, 255, 255);
+    --table-row-background-alt: rgb(255, 255, 255);
+    --table-row-background-hover: rgb(220, 211, 255);
+    --link-color: rgb(72, 39, 102);
+    --link-hover: rgb(158, 81, 197);
+    --badge-size: .55rem;
+    --badge-color: rgb(255, 255, 255);
+    --badge-background: rgb(158, 81, 197);
+    --box-border: rgb(218, 218, 218); }
+
+  html, body {
+    width: 100%;
+    height: 100%;
+    min-width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    font-family: var(--font-family);
+    color: #000; }
+
+  body {
+    display: flex; flex-direction: column;}
+
+header {
+    background: #f8f8f8;
+    border-bottom: 1px solid var(--box-border);
+    padding: 1rem;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    flex-flow: row;
+    flex: 0; }
+  header > form {
+      display: flex;
+      flex: 1;
+      padding: 0 5px 0 5px;
+      max-width: 800px; }
+  header .inputWrapper {
+      flex: 1; }
+  header input[type=text] {
+      width: 100%;
+      background: white;
+      border: 1px solid var(--input-border);
+      text-shadow: none;
+      box-shadow: none;
+      transition: border 500ms ease-out;
+      outline: none;
+      box-sizing: border-box;
+      padding-left: 2rem; }
+
+  #logo {
+    flex: 1;
+    text-align: right; }
+    #logo select {
+      background: none;
+      color: rgba(255, 255, 255, 0.8);
+      font-size: .8rem; }
+
+  .ham-trigger {
+    display: flex;
+    color: #000;
+    align-items: center;
+    flex: 0;
+    margin-right: 5px; }
+    .ham-trigger i {
+      font-size: 1.5rem; }
+
+  nav .ham-trigger {
+    color: var(--text-on-background-color-2);
+    margin: 0 0 0 5px;
+    display: none; }
+
+  #t-nav-container {
+    margin-left: auto; }
+
+  #content {
+    flex: 1;
+    padding-left: 1rem;
+    overflow-y: auto; }
+
+  #t-nav {
+    font-size: .8rem;
+    color: #000;
+    font-weight: bold; }
+    #t-nav a {
+      padding: 0 5px 0 5px;
+      line-height: 25px; }
+    #t-nav i {
+      margin-right: 5px; }
+    #t-nav li {
+      display: inline; }
+      #t-nav li:hover {
+        color: var(--link-hover); }
+
+  main {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: #f1f1f1;
+    flex: 1;
+    box-sizing: border-box; }
+
+  #dim {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: 0.5;
+    z-index: 5; }
+
+  #u-box {
+    display: flex;
+    align-items: center;
+    padding: 0 1rem 0 1rem;
+    height: 60px;
+    border-bottom: 1px solid var(--input-border);
+    box-sizing: border-box; }
+    #u-box img {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%; }
+    #u-box a {
+      display: inline-block; }
+
+      #app-message-container {
+        position: absolute;
+        margin: 0 auto;
+        right: 0;
+        top: 0;
+        padding: 85px 10px 0 0;
+    }
+
+    .log-msg {
+      z-index: 11;
+      position: relative;
+      margin: 0 auto;
+      right: 0;
+      top: 0;
+      margin-bottom: 10px;
+  }
+
+  @media only screen and (max-width: 500px) {
+    nav .ham-trigger {
+      display: flex; } }
+  @media only screen and (max-width: 600px) {
+header {
+      flex-flow: column;
+      height: auto;
+      padding: 1rem; }
+  header form {
+        width: 100%; }
+
+    #t-nav-container {
+      order: -1;
+      margin-bottom: .5rem; } }
+  @media only screen and (max-width: 1000px) {
+    #t-nav .link {
+      display: none; } }
diff --git a/Application/Timerecording/css/timerecording-small.scss b/Application/Timerecording/css/timerecording-small.scss
new file mode 100644
index 0000000..7252f9d
--- /dev/null
+++ b/Application/Timerecording/css/timerecording-small.scss
@@ -0,0 +1,153 @@
+@import "backend_vars";
+
+html, body {
+    width: 100%;
+    height: 100%;
+    min-width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    font-family: var(--font-family);
+    color: #000;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+}
+
+header {
+    background: rgb(248, 248, 248);
+    border-bottom: 1px solid var(--box-border);
+    padding: 1rem;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    flex-flow: row;
+    flex: 0;
+
+    > form {
+        display: flex;
+        flex: 1;
+        padding: 0 5px 0 5px;
+        max-width: 800px;
+    }
+
+    .inputWrapper {
+        flex: 1;
+    }
+
+    input[type=text] {
+        width: 100%;
+        background: rgba(255, 255, 255, 1);
+        border: 1px solid var(--input-border);
+        text-shadow: none;
+        box-shadow: none;
+        transition : border 500ms ease-out;
+        outline: none;
+        box-sizing: border-box;
+        padding-left: 2rem;
+    }
+}
+
+#logo {
+    flex: 1;
+    text-align: right;
+
+    select {
+        background: none;
+        color: rgba(255, 255, 255, 0.8);
+        font-size: .8rem;
+    }
+}
+
+#t-nav-container {
+    margin-left: auto;
+}
+
+#content {
+    flex: 1;
+    padding-left: 1rem;
+    overflow-y: auto;
+}
+
+#t-nav {
+    font-size: .8rem;
+    color: #000;
+    font-weight: bold;
+
+    a {
+        padding: 0 5px 0 5px;
+        line-height: 25px;
+    }
+
+    i {
+        margin-right: 5px;
+    }
+
+    li {
+        display: inline;
+
+        &:hover {
+            color: var(--link-hover);
+        }
+    }
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: #f1f1f1;
+
+    flex: 1;
+    box-sizing: border-box;
+}
+
+#dim {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: 0.5;
+    z-index: 5;
+}
+
+#u-box {
+    display: flex;
+    align-items: center;
+    padding: 0 1rem 0 1rem;
+    height: 60px;
+    border-bottom: 1px solid var(--input-border);
+    box-sizing: border-box;
+
+    img {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+    }
+
+    a {
+        display: inline-block;
+    }
+}
+
+#app-message-container {
+    position: absolute;
+    margin: 0 auto;
+    right: 0;
+    top: 0;
+    padding: 85px 10px 0 0;
+
+    .log-msg {
+        z-index: 11;
+        position: relative;
+        margin: 0 auto;
+        right: 0;
+        top: 0;
+        margin-bottom: 10px;
+    }
+}
+
+@import "timerecording_media";
\ No newline at end of file
diff --git a/Application/Timerecording/css/timerecording_media.css b/Application/Timerecording/css/timerecording_media.css
new file mode 100644
index 0000000..cc491bf
--- /dev/null
+++ b/Application/Timerecording/css/timerecording_media.css
@@ -0,0 +1,39 @@
+@media only screen and (min-width: 1101px) {
+  .b-1 {
+    width: 31.5%;
+    width: calc(33.3% - 10px); }
+
+  .b-2 {
+    width: 48.5%;
+    width: calc(50% - 10px); }
+
+  .b-3 {
+    width: 63%;
+    width: calc(66.6% - 10px); } }
+@media only screen and (min-width: 801px) and (max-width: 1100px) {
+  .b-1 {
+    width: 48.5%;
+    width: calc(50% - 10px); } }
+@media only screen and (max-width: 1100px) {
+  .b-2, .b-3 {
+    width: 100%;
+    width: calc(100% - 10px); } }
+@media only screen and (min-width: 801px) {
+  .b-4 {
+    width: 48.5%;
+    width: calc(50% - 10px); } }
+@media only screen and (max-width: 800px) {
+  .b-1, .b-3 {
+    width: 100%;
+    width: calc(100% - 10px); }
+
+  #logo {
+    display: none; }
+
+  #s-nav {
+    width: 100%; }
+
+  #s-bar input[type=text] {
+    margin-left: 35px;
+    width: 80%;
+    width: calc(100% - 90px); } }
diff --git a/Application/Timerecording/css/timerecording_media.scss b/Application/Timerecording/css/timerecording_media.scss
new file mode 100644
index 0000000..089e346
--- /dev/null
+++ b/Application/Timerecording/css/timerecording_media.scss
@@ -0,0 +1,22 @@
+@media only screen and (max-width: 600px) {
+    header  {
+        flex-flow: column;
+        height: auto;
+        padding: 1rem;
+
+        form {
+            width: 100%;
+        }
+    }
+
+    nav {
+        order: -1;
+        margin-bottom: .5rem;
+    }
+}
+
+@media only screen and (max-width: 1000px) {
+    nav .link {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/Application/Timerecording/css/timerecording_vars.css b/Application/Timerecording/css/timerecording_vars.css
new file mode 100644
index 0000000..1f5ee22
--- /dev/null
+++ b/Application/Timerecording/css/timerecording_vars.css
@@ -0,0 +1,24 @@
+:root {
+  --main-background: rgb(46, 26, 90);
+  --main-background-highlight: rgb(158, 81, 197);
+  --input-border: rgba(166, 135, 232, .4);
+  --input-border-active: rgba(166, 135, 232, .7);
+  --input-color: rgba(166, 135, 232, .6);
+  --input-color-active: rgba(166, 135, 232, .8);
+  --input-icon-color: rgba(166, 135, 232, .6);
+  --input-icon-color-active: rgba(166, 135, 232, 1);
+  --button-main-background: rgba(166, 135, 232, .6);
+  --button-main-background-active: rgba(166, 135, 232, .8);
+  --button-main-color: rgba(255, 255, 255, .9);
+  --text-on-background-color: rgba(255, 255, 255, 0.7);
+  --nav-category-background: rgb(43, 58, 101);
+  --nav-category-background-highlight: rgb(113, 43, 145);
+  --nav-category-background-hover: rgb(120, 50, 153);
+  --nav-sub-background: rgb(72, 39, 102);
+  --nav-sub-background-highlight: rgb(94, 52, 133);
+  --nav-sub-background-hover: rgb(116, 67, 161);
+  --nav-header-background: rgb(72, 39, 102);
+  --nav-header-background-highlight: rgb(94, 52, 133);
+  --nav-header-background-hover: rgb(116, 67, 161);
+  --font-family: 'Roboto', sans-serif;
+  --box-border-color: rgb(202, 202, 202); }
diff --git a/Application/Timerecording/css/timerecording_vars.scss b/Application/Timerecording/css/timerecording_vars.scss
new file mode 100644
index 0000000..d13715e
--- /dev/null
+++ b/Application/Timerecording/css/timerecording_vars.scss
@@ -0,0 +1,55 @@
+:root {
+    --main-background: rgb(46, 26, 90);
+    --main-background-highlight: rgb(158, 81, 197);
+
+    --input-border: rgba(166, 135, 232, .4);
+    --input-border-active: rgba(166, 135, 232, .7);
+    --input-color: rgb(116, 67, 161);
+    --input-color-active: rgb(94, 52, 133);
+    --input-background: rgba(255, 255, 255);
+    --input-background-active: rgba(255, 255, 255);
+
+    --input-icon-color: rgba(166, 135, 232, .6);
+    --input-icon-color-active: rgba(166, 135, 232, 1);
+
+    --button-main-background: rgba(166, 135, 232, .6);
+    --button-main-background-active: rgba(166, 135, 232, .8);
+    --button-main-color: rgba(255, 255, 255, .9);
+
+    --text-on-background-color: rgba(255, 255, 255, 0.7);
+    --text-on-background-color-2: rgba(255, 255, 255, 0.85);
+
+    --nav-category-background: rgb(43, 58, 101);
+    --nav-category-background-highlight: rgb(113, 43, 145);
+    --nav-category-background-hover: rgb(120, 50, 153);
+
+    --nav-sub-background: rgb(72, 39, 102);
+    --nav-sub-background-highlight: rgb(94, 52, 133);
+    --nav-sub-background-hover: rgb(116, 67, 161);
+
+    --nav-header-background: rgb(72, 39, 102);
+    --nav-header-background-highlight: rgb(94, 52, 133);
+    --nav-header-background-hover: rgb(116, 67, 161);
+
+    --nav-content-hover: rgb(177, 97, 218);
+
+    --font-family: 'Roboto', sans-serif;
+
+    --button-colored-background: rgb(158, 81, 197);
+    --button-colored-background-hover: rgb(177, 97, 218);
+
+    --table-caption-background: rgb(255, 255, 255);
+    --table-head-background: rgb(236, 232, 255);
+    --table-row-background: rgb(255, 255, 255);
+    --table-row-background-alt: rgb(255, 255, 255);
+    --table-row-background-hover: rgb(220, 211, 255);
+
+    --link-color: rgb(72, 39, 102);
+    --link-hover: rgb(158, 81, 197);
+
+    --badge-size: .55rem;
+    --badge-color: rgb(255, 255, 255);
+    --badge-background: rgb(158, 81, 197);
+
+    --box-border: rgb(218, 218, 218);
+}
diff --git a/Application/Timerecording/img/favicon.ico b/Application/Timerecording/img/favicon.ico
new file mode 100644
index 0000000..ec514e2
Binary files /dev/null and b/Application/Timerecording/img/favicon.ico differ
diff --git a/Application/Timerecording/img/logo.png b/Application/Timerecording/img/logo.png
new file mode 100644
index 0000000..27d7f3c
Binary files /dev/null and b/Application/Timerecording/img/logo.png differ
diff --git a/Application/Timerecording/index.tpl.php b/Application/Timerecording/index.tpl.php
new file mode 100644
index 0000000..fe06b1d
--- /dev/null
+++ b/Application/Timerecording/index.tpl.php
@@ -0,0 +1,69 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 7.4
+ *
+ * @package   Web\Timerecording
+ * @copyright Dennis Eichhorn
+ * @license   OMS License 1.0
+ * @version   1.0.0
+ * @link      https://orange-management.org
+ */
+declare(strict_types=1);
+
+$nav = $this->getData('nav');
+
+$nav->setTemplate('/Modules/Navigation/Theme/Backend/top');
+$top = $nav->render();
+
+/** @var phpOMS\Model\Html\Head $head */
+$head = $this->getData('head');
+
+/** @var array $dispatch */
+$dispatch = $this->getData('dispatch') ?? [];
+?>
+<!DOCTYPE HTML>
+<html lang="<?= $this->printHtml($this->response->getHeader()->getL11n()->getLanguage()); ?>">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#712b91">
+    <meta name="msapplication-navbutton-color" content="#712b91">
+    <meta name="apple-mobile-web-app-status-bar-style" content="#712b91">
+    <meta name="description" content="<?= $this->getHtml(':meta', '0', '0'); ?>">
+    <?= $head->getMeta()->render(); ?>
+
+    <base href="<?= \phpOMS\Uri\UriFactory::build('{/base}'); ?>/">
+
+    <link rel="manifest" href="<?= \phpOMS\Uri\UriFactory::build('Web/Timerecording/manifest.json'); ?>">
+    <link rel="shortcut icon" href="<?= \phpOMS\Uri\UriFactory::build('Web/Timerecording/img/favicon.ico'); ?>" type="image/x-icon">
+
+    <title><?= $this->printHtml($head->getTitle()); ?></title>
+
+    <?= $head->renderAssets(); ?>
+
+    <style><?= $head->renderStyle(); ?></style>
+    <script><?= $head->renderScript(); ?></script>
+</head>
+<body>
+<div class="vh" id="dim"></div>
+<header><div id="t-nav-container"><?= $top ?></div></header>
+<main id="content" class="container-fluid" role="main">
+<?php
+foreach ($dispatch as $view) {
+    if ($view instanceof \phpOMS\Contract\RenderableInterface) {
+        echo $view->render();
+    }
+}
+?>
+</main>
+<div id="app-message-container">
+    <template id="app-message-tpl">
+        <div class="log-msg">
+            <h1 class="log-msg-title"></h1>
+            <div class="log-msg-content"></div>
+        </div>
+    </template>
+</div>
+<?= $head->renderAssetsLate(); ?>
\ No newline at end of file
diff --git a/Application/Timerecording/js/global/ActionEvents.js b/Application/Timerecording/js/global/ActionEvents.js
new file mode 100644
index 0000000..54e6334
--- /dev/null
+++ b/Application/Timerecording/js/global/ActionEvents.js
@@ -0,0 +1,5 @@
+import { redirectMessage } from '../../../../jsOMS/Model/Message/Redirect.js';
+
+export const ACTION_EVENTS = {
+    'redirect': redirectMessage, /** global: redirectMessage */
+};
\ No newline at end of file
diff --git a/Application/Timerecording/js/global/KeyboardEvents.js b/Application/Timerecording/js/global/KeyboardEvents.js
new file mode 100644
index 0000000..4dc44d1
--- /dev/null
+++ b/Application/Timerecording/js/global/KeyboardEvents.js
@@ -0,0 +1,3 @@
+/** global: jsOMS */
+export const KEYBOARD_EVENTS = [
+];
\ No newline at end of file
diff --git a/Application/Timerecording/js/global/MouseEvents.js b/Application/Timerecording/js/global/MouseEvents.js
new file mode 100644
index 0000000..1fb6b1e
--- /dev/null
+++ b/Application/Timerecording/js/global/MouseEvents.js
@@ -0,0 +1,3 @@
+/** global: jsOMS */
+export const MOUSE_EVENTS = [
+];
\ No newline at end of file
diff --git a/Application/Timerecording/js/global/ResponseEvents.js b/Application/Timerecording/js/global/ResponseEvents.js
new file mode 100644
index 0000000..6a3eed5
--- /dev/null
+++ b/Application/Timerecording/js/global/ResponseEvents.js
@@ -0,0 +1,12 @@
+import { notifyMessage } from '../../../../jsOMS/Model/Message/Notify.js';
+import { formValidationMessage } from '../../../../jsOMS/Model/Message/FormValidation.js';
+import { redirectMessage } from '../../../../jsOMS/Model/Message/Redirect.js';
+import { reloadMessage } from '../../../../jsOMS/Model/Message/Reload.js';
+
+/** global: jsOMS */
+export const RESPONSE_EVENTS = {
+    'notify': notifyMessage, /** global: notifyMessage */
+    'validation': formValidationMessage, /** global: formValidationMessage */
+    'redirect': redirectMessage, /** global: redirectMessage */
+    'reload': reloadMessage /** global: reloadMessage */
+};
\ No newline at end of file
diff --git a/Application/Timerecording/js/global/TouchEvents.js b/Application/Timerecording/js/global/TouchEvents.js
new file mode 100644
index 0000000..72a2598
--- /dev/null
+++ b/Application/Timerecording/js/global/TouchEvents.js
@@ -0,0 +1,2 @@
+/** global: jsOMS */
+export const TOUCH_EVENTS = {};
\ No newline at end of file
diff --git a/Application/Timerecording/js/global/VoiceEvents.js b/Application/Timerecording/js/global/VoiceEvents.js
new file mode 100644
index 0000000..31905de
--- /dev/null
+++ b/Application/Timerecording/js/global/VoiceEvents.js
@@ -0,0 +1,6 @@
+import { Logger } from '../../../../jsOMS/Log/Logger.js';
+
+/** global: jsOMS */
+export const VOICE_EVENTS = {
+    'login': function() { document.getElementById('iCameraLoginButton').click(); },
+};
\ No newline at end of file
diff --git a/Application/Timerecording/js/login.js b/Application/Timerecording/js/login.js
new file mode 100644
index 0000000..aa62637
--- /dev/null
+++ b/Application/Timerecording/js/login.js
@@ -0,0 +1,90 @@
+jsOMS.ready(function ()
+{
+    "use strict";
+
+    const logo         = document.getElementById('login-logo');
+    const cLogin       = document.getElementById('iCameraLoginButton');
+    const pLogin       = document.getElementById('iPasswordLoginButton');
+    const cancel       = document.getElementsByClassName('cancelButton');
+    const cancelLength = cancel.length;
+    let timer          = 10000;
+
+    cLogin.addEventListener('click', function() {
+        if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+            const clock     = document.getElementById('iCameraCountdownClock');
+            const countdown = document.getElementById('iCameraCountdown');
+            const video     = document.getElementById('iVideoCanvas');
+
+            navigator.mediaDevices.getUserMedia({ video: true, audio: false }).then(function(stream) {
+                video.srcObject = stream;
+                video.play();
+
+                jsOMS.addClass(logo, 'hidden');
+                jsOMS.addClass(cLogin, 'hidden');
+                jsOMS.addClass(pLogin, 'hidden');
+                jsOMS.removeClass(document.getElementById('cameraLogin'), 'hidden');
+
+                timer           = 10000;
+                clock.innerHTML = timer / 1000;
+
+                jsOMS.removeClass(countdown, 'hidden');
+
+                const cameraTimer = setInterval(function() {
+                    timer -= 100;
+
+                    if (timer % 1000 === 0) {
+                        clock.innerHTML = timer / 1000;
+                    }
+
+                    if (timer <= 0) {
+                        jsOMS.addClass(document.getElementById('cameraLogin'), 'hidden');
+                        jsOMS.removeClass(cLogin, 'hidden');
+                        jsOMS.removeClass(pLogin, 'hidden');
+                        jsOMS.removeClass(logo, 'hidden');
+
+                        video.pause();
+                        stream.getVideoTracks()[0].stop();;
+
+                        clearInterval(cameraTimer);
+                    }
+                }, 100);
+            });
+        }
+    });
+
+    pLogin.addEventListener('click', function() {
+        const clock     = document.getElementById('iPasswordCountdownClock');
+        const countdown = document.getElementById('iPasswordCountdown');
+
+        jsOMS.addClass(pLogin, 'hidden');
+        jsOMS.addClass(cLogin, 'hidden');
+        jsOMS.removeClass(document.getElementById('passwordLogin'), 'hidden');
+
+        timer           = 10000;
+        clock.innerHTML = timer / 1000;
+
+        jsOMS.removeClass(countdown, 'hidden');
+
+        const passwordTimer = setInterval(function() {
+            timer -= 100;
+
+            if (timer % 1000 === 0) {
+                clock.innerHTML = timer / 1000;
+            }
+
+            if (timer <= 0) {
+                jsOMS.addClass(document.getElementById('passwordLogin'), 'hidden');
+                jsOMS.removeClass(pLogin, 'hidden');
+                jsOMS.removeClass(cLogin, 'hidden');
+
+                clearInterval(passwordTimer);
+            }
+        }, 100);
+    });
+
+    for (let i = 0; i < cancelLength; ++i) {
+        cancel[i].addEventListener('click', function() {
+            timer = 0;
+        });
+    }
+});
diff --git a/Application/Timerecording/js/timerecording.js b/Application/Timerecording/js/timerecording.js
new file mode 100644
index 0000000..dfbf7bf
--- /dev/null
+++ b/Application/Timerecording/js/timerecording.js
@@ -0,0 +1,137 @@
+import { AssetManager } from '../../../jsOMS/Asset/AssetManager.js';
+import { Logger } from '../../../jsOMS/Log/Logger.js';
+import { CacheManager } from '../../../jsOMS/DataStorage/CacheManager.js';
+import { StorageManager } from '../../../jsOMS/DataStorage/StorageManager.js';
+import { EventManager } from '../../../jsOMS/Event/EventManager.js';
+import { ResponseManager } from '../../../jsOMS/Message/Response/ResponseManager.js';
+import { Dispatcher } from '../../../jsOMS/Dispatcher/Dispatcher.js';
+import { AccountManager } from '../../../jsOMS/Account/AccountManager.js';
+import { UIManager } from '../../../jsOMS/UI/UIManager.js';
+import { InputManager } from '../../../jsOMS/UI/Input/InputManager.js';
+import { ModuleManager } from '../../../jsOMS/Module/ModuleManager.js';
+import { ReadManager } from '../../../jsOMS/UI/Input/Voice/ReadManager.js';
+import { VoiceManager } from '../../../jsOMS/UI/Input/Voice/VoiceManager.js';
+import { NotificationManager } from '../../../jsOMS/Message/Notification/NotificationManager.js';
+import { HttpUri } from '../../../jsOMS/Uri/HttpUri.js';
+import { UriFactory } from '../../../jsOMS/Uri/UriFactory.js';
+
+import { ACTION_EVENTS } from './global/ActionEvents.js';
+import { KEYBOARD_EVENTS } from './global/KeyboardEvents.js';
+import { MOUSE_EVENTS } from './global/MouseEvents.js';
+import { RESPONSE_EVENTS } from './global/ResponseEvents.js';
+import { TOUCH_EVENTS } from './global/TouchEvents.js';
+import { VOICE_EVENTS } from './global/VoiceEvents.js';
+
+export class Application {
+    constructor ()
+    {
+        //jsOMS.Autoloader.initPreloaded();
+
+        this.logger   = Logger.getInstance();
+        window.logger = this.logger;
+
+        this.cacheManager    = new CacheManager();
+        this.storageManager  = new StorageManager();
+        this.eventManager    = new EventManager();
+        this.responseManager = new ResponseManager();
+        this.dispatcher      = new Dispatcher();
+        this.assetManager    = new AssetManager();
+        this.accountManager  = new AccountManager();
+        this.uiManager       = new UIManager(this);
+        this.inputManager    = new InputManager(this);
+        this.moduleManager   = new ModuleManager(this);
+        this.readManager     = new ReadManager();
+        this.voiceManager    = new VoiceManager(this);
+        this.notifyManager   = new NotificationManager();
+        this.request         = new HttpUri(window.location.href);
+
+        this.request.setRootPath(
+            HttpUri.parseUrl(
+                document.getElementsByTagName('base')[0].href
+            ).path
+        );
+
+        this.setResponseMessages();
+
+        this.setActions();
+        this.setKeyboardActions();
+        this.setMouseActions();
+        this.setVoiceActions();
+
+        UriFactory.setupUriBuilder(this.request);
+        UriFactory.setQuery('/lang', window.location.href.substr(this.request.getBase().length).split('/')[0]);
+
+        this.uiManager.bind();
+    };
+
+    setResponseMessages ()
+    {
+        /** global: RESPONSE_EVENTS */
+        for (const key in RESPONSE_EVENTS) {
+            if (RESPONSE_EVENTS.hasOwnProperty(key)) {
+                this.responseManager.add(key, RESPONSE_EVENTS[key]);
+            }
+        }
+    };
+
+    setActions ()
+    {
+        /** global: ACTION_EVENTS */
+        for (const key in ACTION_EVENTS) {
+            if (ACTION_EVENTS.hasOwnProperty(key)) {
+                this.uiManager.getActionManager().add(key, ACTION_EVENTS[key]);
+            }
+        }
+    };
+
+    setKeyboardActions ()
+    {
+        /** global: KEYBOARD_EVENTS */
+        let length = KEYBOARD_EVENTS.length;
+
+        for (let i = 0; i < length; i++) {
+            this.inputManager.getKeyboardManager().add(
+                KEYBOARD_EVENTS[i]['element'],
+                KEYBOARD_EVENTS[i]['keys'],
+                KEYBOARD_EVENTS[i]['callback']
+            );
+        }
+    };
+
+    setMouseActions ()
+    {
+        /** global: MOUSE_EVENTS */
+        let length = MOUSE_EVENTS.length;
+
+        for (let i = 0; i < length; i++) {
+            this.inputManager.getMouseManager().add(
+                MOUSE_EVENTS[i]['element'],
+                MOUSE_EVENTS[i]['type'],
+                MOUSE_EVENTS[i]['button'],
+                MOUSE_EVENTS[i]['callback'],
+                MOUSE_EVENTS[i]['exact']
+            );
+        }
+    };
+
+    setVoiceActions ()
+    {
+        /** global: VOICE_EVENTS */
+        for (const key in VOICE_EVENTS) {
+            if (VOICE_EVENTS.hasOwnProperty(key)) {
+                this.voiceManager.add(key, VOICE_EVENTS[key]);
+            }
+        }
+
+        this.voiceManager.setup();
+        this.voiceManager.start();
+    };
+};
+
+jsOMS.ready(function ()
+{
+    "use strict";
+
+    /** global: jsOMS */
+    window.omsApp = new Application();
+});
diff --git a/Application/Timerecording/lang/en.lang.php b/Application/Timerecording/lang/en.lang.php
new file mode 100644
index 0000000..f669941
--- /dev/null
+++ b/Application/Timerecording/lang/en.lang.php
@@ -0,0 +1,27 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 7.4
+ *
+ * @package   Web\Timerecording
+ * @copyright Dennis Eichhorn
+ * @license   OMS License 1.0
+ * @version   1.0.0
+ * @link      https://orange-management.org
+ */
+declare(strict_types=1);
+
+return [[
+    'CameraLogin'   => 'Camera Login',
+    'Cancel'        => 'Cancel',
+    'IDCard'        => 'ID Card',
+    'Login'         => 'Login',
+    'Logo'          => 'Logo',
+    'Password'      => 'Password',
+    'PasswordLogin' => 'Password Login',
+    'TimerCamera'   => 'Camera turns off in: %s (s)',
+    'TimerLogin'    => 'Login turns off in: %s (s)',
+    'Username'      => 'Username',
+    ':meta'         => 'Time recording application',
+]];
diff --git a/Application/Timerecording/login.tpl.php b/Application/Timerecording/login.tpl.php
new file mode 100644
index 0000000..56c62b7
--- /dev/null
+++ b/Application/Timerecording/login.tpl.php
@@ -0,0 +1,267 @@
+<?php declare(strict_types=1);
+/**
+ * Orange Management
+ *
+ * PHP Version 7.4
+ *
+ * @package   Web\Timerecording
+ * @copyright Dennis Eichhorn
+ * @license   OMS License 1.0
+ * @version   1.0.0
+ * @link      https://orange-management.org
+ */
+$head = $this->getData('head');
+?>
+<!DOCTYPE HTML>
+<html lang="<?= $this->printHtml($this->response->getHeader()->getL11n()->getLanguage()); ?>">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="utf-8">
+    <base href="<?= \phpOMS\Uri\UriFactory::build('{/base}'); ?>/">
+    <meta name="theme-color" content="#9e51c5">
+    <meta name="msapplication-navbutton-color" content="#9e51c5">
+    <meta name="theme-color" content="#9e51c5">
+    <meta name="description" content="<?= $this->getHtml(':meta', '0', '0'); ?>">
+    <link rel="manifest" href="<?= \phpOMS\Uri\UriFactory::build('Web/Timerecording/manifest.json'); ?>">
+    <link rel="shortcut icon" href="<?= \phpOMS\Uri\UriFactory::build('Web/Timerecording/img/favicon.ico'); ?>" type="image/x-icon">
+    <?= $head->getMeta()->render(); ?>
+    <title><?= $this->printHtml($head->getTitle()); ?></title>
+    <style><?= $head->renderStyle(); ?></style>
+    <script><?= $head->renderScript(); ?></script>
+    <?= $head->renderAssets(); ?>
+    <style type="text/css">
+        :root {
+            --main-background: #2e1a5a;
+            --main-background-highlight: #9e51c5;
+
+            --input-border: rgba(166, 135, 232, .4);
+            --input-border-active: rgba(166, 135, 232, .7);
+            --input-color: rgba(166, 135, 232, .6);
+            --input-color-active: rgba(166, 135, 232, .8);
+
+            --input-icon-color: rgba(166, 135, 232, .6);
+            --input-icon-color-active: rgba(166, 135, 232, 1);
+
+            --button-main-background: rgba(166, 135, 232, .6);
+            --button-main-background-active: rgba(166, 135, 232, .8);
+            --button-main-color: rgba(255, 255, 255, .9);
+
+            --text-on-background-color: rgba(255, 255, 255, 0.7);
+        }
+
+        html, body {
+            height: 100%;
+            font-family: 'Roboto', sans-serif;
+            background-image: linear-gradient(var(--main-background-highlight), var(--main-background));
+            color: var(--text-on-background-color);
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 100%;
+            flex-direction: column;
+            font-weight: 300;
+        }
+
+        #login-container {
+            width: 90%;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        #login-logo {
+            height: 185px;
+        }
+
+        #login-logo img {
+            animation: pulse 1.5s ease infinite alternate;
+            width: 20%;
+            min-width: 200px;
+        }
+
+        @keyframes pulse {
+            0% {
+                width: 20%;
+                min-width: 200px;
+            }
+
+            30%, 100% {
+                width: 25%;
+                min-width: 210px;
+            }
+        }
+
+        h1 {
+            text-shadow: 2px 2px 3px rgba(0,0,0,0.3);
+        }
+
+        #login-logo {
+            margin-bottom: 2rem;
+        }
+
+        #login-logo, #login-form {
+            text-align: center;
+        }
+
+        #passwordLogin, #cameraLogin {
+            text-align: left;
+        }
+
+        form {
+            margin-bottom: 1rem;
+            display: inline-block;
+            text-align: center;
+            width: 100%;
+        }
+
+        form label {
+            text-shadow: none;
+            color: var(--text-on-background-color);
+            cursor: pointer;
+        }
+
+        form input[type=text],
+        form input[type=password] {
+            margin-bottom: .5rem;
+            background: rgba(0, 0, 0, .15);
+            border: 1px solid var(--input-border);
+            text-shadow: none;
+            box-shadow: none;
+            color: var(--text-on-background-color);
+            width: 100%;
+            transition : border 500ms ease-out;
+            outline: none;
+            box-sizing: border-box;
+            line-height: 1rem;
+        }
+
+        .inputWithIcon {
+            position: relative;
+        }
+
+        .inputWithIcon input {
+            padding-left: 2.5rem;
+        }
+
+        .inputWithIcon .frontIcon {
+            color: var(--input-icon-color);
+            font-size: 1rem;
+            position: absolute;
+            left: 0;
+            top: 0;
+            padding: .65rem;
+        }
+
+        .inputWithIcon .endIcon {
+            color: var(--input-icon-color);
+            font-size: 1rem;
+            position: absolute;
+            right: 0;
+            top: 0;
+            padding: .65rem;
+        }
+
+        form input[type=text]:active, form input[type=text]:focus,
+        form input[type=password]:active, form input[type=password]:focus {
+            border: 1px solid var(--input-border-active);
+            color: var(--text-on-background-color);
+        }
+
+        form input[type=text]:active~.frontIcon, form input[type=text]:focus~.frontIcon,
+        form input[type=password]:active~.frontIcon, form input[type=password]:focus~.frontIcon,
+        form input[type=text]:active~.endIcon, form input[type=text]:focus~.endIcon,
+        form input[type=password]:active~.endIcon, form input[type=password]:focus~.endIcon {
+            color: var(--input-icon-color-active);
+        }
+
+        form input[type=text]~.endIcon, form input[type=text]~.endIcon,
+        form input[type=password]~.endIcon, form input[type=password]~.endIcon {
+            cursor: pointer;
+        }
+
+        form input[type=submit], button {
+            width: calc(50% - 10px);
+            background-color: var(--button-main-background);
+            border: none;
+            text-shadow: none;
+            box-shadow: none;
+            color: var(--button-main-color);
+            cursor: pointer;
+            transition : background-color 500ms ease-out;
+            margin-bottom: 1rem;
+            white-space: nowrap;
+        }
+
+        button+button, input+button {
+            margin-left: 14px;
+        }
+
+        form input[type=submit]:hover, button:hover,
+        form input[type=submit]:focus, button:focus {
+            background-color: var(--button-main-background-active);
+            border: none;
+            text-shadow: none;
+            box-shadow: none;
+        }
+
+        #forgot-password {
+            text-align: center;
+        }
+
+        #forgot-password a {
+            padding-bottom: .5rem;
+            cursor: pointer;
+            transition : border-bottom 100ms ease-out;
+        }
+
+        #forgot-password a:hover,
+        #forgot-password a:focus {
+            color: rgba(255, 255, 255, .8);
+            border-bottom: 1px solid rgba(255, 255, 255, .6);
+        }
+
+        video {
+            width: 100%;
+            height: 100%;
+            border: 1px solid var(--input-border);
+        }
+    </style>
+</head>
+<body>
+<div id="login-container">
+    <div id="login-logo">
+        <img alt="<?= $this->getHtml('Logo', '0', '0'); ?>" src="<?= \phpOMS\Uri\UriFactory::build('Web/Backend/img/logo.png'); ?>">
+    </div>
+    <div id="login-form">
+        <form id="login" method="POST" action="<?= \phpOMS\Uri\UriFactory::build('{/api}login?{?}'); ?>">
+            <button id="iCameraLoginButton" name="cameraLoginButton" type="button" tabindex="1"><?= $this->getHtml('CameraLogin', '0', '0'); ?></button>
+            <button id="iPasswordLoginButton" name="passwordLoginButton" type="button" tabindex="2"><?= $this->getHtml('PasswordLogin', '0', '0'); ?></button>
+            <div id="cameraLogin" class="hidden">
+                <h1><?= $this->getHtml('IDCard', '0', '0'); ?>:</h1>
+                <video id="iVideoCanvas"></video>
+                <button class="cancelButton" name="cancelButton" type="button" tabindex="6"><?= $this->getHtml('Cancel', '0', '0'); ?></button>
+                <div id="iCameraCountdown"><?php \printf($this->getHtml('TimerCamera', '0', '0'), '<span id="iCameraCountdownClock"></span>'); ?></div>
+            </div>
+            <div id="passwordLogin" class="hidden">
+            <h1><?= $this->getHtml('Login', '0', '0'); ?>:</h1>
+                <label for="iName"><?= $this->getHtml('Username', '0', '0'); ?>:</label>
+                <div class="inputWithIcon">
+                    <input id="iName" type="text" name="user" tabindex="3" value="admin" autofocus>
+                    <i class="frontIcon fa fa-user fa-lg fa-fw" aria-hidden="true"></i>
+                    <i class="endIcon fa fa-times fa-lg fa-fw" aria-hidden="true"></i>
+                </div>
+                <label for="iPassword"><?= $this->getHtml('Password', '0', '0'); ?>:</label>
+                <div class="inputWithIcon">
+                    <input id="iPassword" type="password" name="pass" tabindex="4" value="orange">
+                    <i class="frontIcon fa fa-lock fa-lg fa-fw" aria-hidden="true"></i>
+                    <i class="endIcon fa fa-times fa-lg fa-fw" aria-hidden="true"></i>
+                </div>
+                <input id="iLoginButton" name="loginButton" type="submit" value="<?= $this->getHtml('Login', '0', '0'); ?>" tabindex="5">
+                <button class="cancelButton" name="cancelButton" type="button" tabindex="6"><?= $this->getHtml('Cancel', '0', '0'); ?></button>
+                <div id="iPasswordCountdown"><?php \printf($this->getHtml('TimerLogin', '0', '0'), '<span id="iPasswordCountdownClock"></span>'); ?></div>
+            </div>
+        </form>
+    </div>
+</div>
+<?= $head->renderAssetsLate(); ?>
diff --git a/Application/Timerecording/manifest.json b/Application/Timerecording/manifest.json
new file mode 100644
index 0000000..5fa5a0b
--- /dev/null
+++ b/Application/Timerecording/manifest.json
@@ -0,0 +1,32 @@
+{
+    "lang": "en",
+    "dir": "ltr",
+    "start_url": "../../en/timerecording",
+    "type": "privileged",
+    "name": "Orange Management Time Recording",
+    "description": "OMS timerecording application.",
+    "short_name": "OMS Backend",
+    "icons": [
+        {
+            "src": "/Web/Timerecording/img/logo.png",
+            "sizes": "64x64 128x128 256x256 512x512",
+            "type": "image/png"
+        }
+    ],
+    "scope": "/",
+    "display": "standalone",
+    "orientation": "any",
+    "theme_color": "#712b91",
+    "background_color": "white",
+    "permissions": {
+        "audio-capture" : {
+            "description" : "Audio capture"
+        },
+        "video-capture": {
+            "description": "Video capture"
+        },
+        "speech-recognition" : {
+            "description" : "Speech recognition"
+        }
+    }
+}
\ No newline at end of file