diff --git a/composer.lock b/composer.lock
index bf41929..802db96 100644
--- a/composer.lock
+++ b/composer.lock
@@ -6,6 +6,62 @@
     ],
     "content-hash": "09609461b05d589abb8bc0cbac9c653c",
     "packages": [
+        {
+            "name": "asm89/stack-cors",
+            "version": "v2.1.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/asm89/stack-cors.git",
+                "reference": "73e5b88775c64ccc0b84fb60836b30dc9d92ac4a"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/asm89/stack-cors/zipball/73e5b88775c64ccc0b84fb60836b30dc9d92ac4a",
+                "reference": "73e5b88775c64ccc0b84fb60836b30dc9d92ac4a",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.2|^8.0",
+                "symfony/http-foundation": "^4|^5|^6",
+                "symfony/http-kernel": "^4|^5|^6"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^7|^9",
+                "squizlabs/php_codesniffer": "^3.5"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.1-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Asm89\\Stack\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Alexander",
+                    "email": "iam.asm89@gmail.com"
+                }
+            ],
+            "description": "Cross-origin resource sharing library and stack middleware",
+            "homepage": "https://github.com/asm89/stack-cors",
+            "keywords": [
+                "cors",
+                "stack"
+            ],
+            "support": {
+                "issues": "https://github.com/asm89/stack-cors/issues",
+                "source": "https://github.com/asm89/stack-cors/tree/v2.1.1"
+            },
+            "time": "2022-01-18T09:12:03+00:00"
+        },
         {
             "name": "azuyalabs/yasumi",
             "version": "2.5.0",
@@ -763,20 +819,20 @@
         },
         {
             "name": "fruitcake/laravel-cors",
-            "version": "v2.1.0",
+            "version": "v2.2.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/fruitcake/laravel-cors.git",
-                "reference": "361d71f00a0eea8b74da26ae75d0d207c53aa5b3"
+                "reference": "783a74f5e3431d7b9805be8afb60fd0a8f743534"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/fruitcake/laravel-cors/zipball/361d71f00a0eea8b74da26ae75d0d207c53aa5b3",
-                "reference": "361d71f00a0eea8b74da26ae75d0d207c53aa5b3",
+                "url": "https://api.github.com/repos/fruitcake/laravel-cors/zipball/783a74f5e3431d7b9805be8afb60fd0a8f743534",
+                "reference": "783a74f5e3431d7b9805be8afb60fd0a8f743534",
                 "shasum": ""
             },
             "require": {
-                "fruitcake/php-cors": "^1",
+                "asm89/stack-cors": "^2.0.1",
                 "illuminate/contracts": "^6|^7|^8|^9",
                 "illuminate/support": "^6|^7|^8|^9",
                 "php": ">=7.2"
@@ -826,7 +882,7 @@
             ],
             "support": {
                 "issues": "https://github.com/fruitcake/laravel-cors/issues",
-                "source": "https://github.com/fruitcake/laravel-cors/tree/v2.1.0"
+                "source": "https://github.com/fruitcake/laravel-cors/tree/v2.2.0"
             },
             "funding": [
                 {
@@ -838,7 +894,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2022-02-19T14:17:28+00:00"
+            "time": "2022-02-23T14:25:13+00:00"
         },
         {
             "name": "fruitcake/php-cors",
@@ -1295,12 +1351,12 @@
                 }
             },
             "autoload": {
-                "psr-4": {
-                    "GuzzleHttp\\Promise\\": "src/"
-                },
                 "files": [
                     "src/functions_include.php"
-                ]
+                ],
+                "psr-4": {
+                    "GuzzleHttp\\Promise\\": "src/"
+                }
             },
             "notification-url": "https://packagist.org/downloads/",
             "license": [
@@ -1622,16 +1678,16 @@
         },
         {
             "name": "laravel/framework",
-            "version": "v9.1.0",
+            "version": "v9.2.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/framework.git",
-                "reference": "ca7ddd4782f120ae50569d04eb9e40e52f67a9d9"
+                "reference": "13372872bed31ae75df8709b9de5cde01d50646e"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/framework/zipball/ca7ddd4782f120ae50569d04eb9e40e52f67a9d9",
-                "reference": "ca7ddd4782f120ae50569d04eb9e40e52f67a9d9",
+                "url": "https://api.github.com/repos/laravel/framework/zipball/13372872bed31ae75df8709b9de5cde01d50646e",
+                "reference": "13372872bed31ae75df8709b9de5cde01d50646e",
                 "shasum": ""
             },
             "require": {
@@ -1640,6 +1696,7 @@
                 "egulias/email-validator": "^3.1",
                 "ext-mbstring": "*",
                 "ext-openssl": "*",
+                "fruitcake/php-cors": "^1.2",
                 "laravel/serializable-closure": "^1.0",
                 "league/commonmark": "^2.2",
                 "league/flysystem": "^3.0",
@@ -1714,7 +1771,7 @@
                 "league/flysystem-ftp": "^3.0",
                 "league/flysystem-sftp-v3": "^3.0",
                 "mockery/mockery": "^1.4.4",
-                "orchestra/testbench-core": "^7.0",
+                "orchestra/testbench-core": "^7.1",
                 "pda/pheanstalk": "^4.0",
                 "phpstan/phpstan": "^1.0",
                 "phpunit/phpunit": "^9.5.8",
@@ -1796,20 +1853,20 @@
                 "issues": "https://github.com/laravel/framework/issues",
                 "source": "https://github.com/laravel/framework"
             },
-            "time": "2022-02-15T15:06:44+00:00"
+            "time": "2022-02-22T15:30:23+00:00"
         },
         {
             "name": "laravel/sanctum",
-            "version": "v2.14.1",
+            "version": "v2.14.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/sanctum.git",
-                "reference": "89937617fa144ddb759a740861a47c4f2fd2245b"
+                "reference": "dc5d749ba9bfcfd68d8f5c272238f88bea223e66"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/sanctum/zipball/89937617fa144ddb759a740861a47c4f2fd2245b",
-                "reference": "89937617fa144ddb759a740861a47c4f2fd2245b",
+                "url": "https://api.github.com/repos/laravel/sanctum/zipball/dc5d749ba9bfcfd68d8f5c272238f88bea223e66",
+                "reference": "dc5d749ba9bfcfd68d8f5c272238f88bea223e66",
                 "shasum": ""
             },
             "require": {
@@ -1860,7 +1917,7 @@
                 "issues": "https://github.com/laravel/sanctum/issues",
                 "source": "https://github.com/laravel/sanctum"
             },
-            "time": "2022-02-15T08:08:57+00:00"
+            "time": "2022-02-16T14:40:23+00:00"
         },
         {
             "name": "laravel/serializable-closure",
@@ -2477,16 +2534,16 @@
         },
         {
             "name": "league/flysystem",
-            "version": "3.0.8",
+            "version": "3.0.9",
             "source": {
                 "type": "git",
                 "url": "https://github.com/thephpleague/flysystem.git",
-                "reference": "30f2c7069b2625da5b126ac66cbea7618a3db8b6"
+                "reference": "fb0801a60b7f9ea4188f01c25cb48aed26db7fb6"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/thephpleague/flysystem/zipball/30f2c7069b2625da5b126ac66cbea7618a3db8b6",
-                "reference": "30f2c7069b2625da5b126ac66cbea7618a3db8b6",
+                "url": "https://api.github.com/repos/thephpleague/flysystem/zipball/fb0801a60b7f9ea4188f01c25cb48aed26db7fb6",
+                "reference": "fb0801a60b7f9ea4188f01c25cb48aed26db7fb6",
                 "shasum": ""
             },
             "require": {
@@ -2546,7 +2603,7 @@
             ],
             "support": {
                 "issues": "https://github.com/thephpleague/flysystem/issues",
-                "source": "https://github.com/thephpleague/flysystem/tree/3.0.8"
+                "source": "https://github.com/thephpleague/flysystem/tree/3.0.9"
             },
             "funding": [
                 {
@@ -2562,7 +2619,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2022-02-16T18:51:54+00:00"
+            "time": "2022-02-22T07:37:40+00:00"
         },
         {
             "name": "league/mime-type-detection",
@@ -7739,9 +7796,6 @@
             "require": {
                 "php": "^7.1 || ^8.0"
             },
-            "replace": {
-                "myclabs/deep-copy": "self.version"
-            },
             "require-dev": {
                 "doctrine/collections": "^1.0",
                 "doctrine/common": "^2.6",
@@ -8272,16 +8326,16 @@
         },
         {
             "name": "phpunit/php-code-coverage",
-            "version": "9.2.11",
+            "version": "9.2.13",
             "source": {
                 "type": "git",
                 "url": "https://github.com/sebastianbergmann/php-code-coverage.git",
-                "reference": "665a1ac0a763c51afc30d6d130dac0813092b17f"
+                "reference": "deac8540cb7bd40b2b8cfa679b76202834fd04e8"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/sebastianbergmann/php-code-coverage/zipball/665a1ac0a763c51afc30d6d130dac0813092b17f",
-                "reference": "665a1ac0a763c51afc30d6d130dac0813092b17f",
+                "url": "https://api.github.com/repos/sebastianbergmann/php-code-coverage/zipball/deac8540cb7bd40b2b8cfa679b76202834fd04e8",
+                "reference": "deac8540cb7bd40b2b8cfa679b76202834fd04e8",
                 "shasum": ""
             },
             "require": {
@@ -8337,7 +8391,7 @@
             ],
             "support": {
                 "issues": "https://github.com/sebastianbergmann/php-code-coverage/issues",
-                "source": "https://github.com/sebastianbergmann/php-code-coverage/tree/9.2.11"
+                "source": "https://github.com/sebastianbergmann/php-code-coverage/tree/9.2.13"
             },
             "funding": [
                 {
@@ -8345,7 +8399,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2022-02-18T12:46:09+00:00"
+            "time": "2022-02-23T17:02:38+00:00"
         },
         {
             "name": "phpunit/php-file-iterator",
@@ -8590,16 +8644,16 @@
         },
         {
             "name": "phpunit/phpunit",
-            "version": "9.5.14",
+            "version": "9.5.16",
             "source": {
                 "type": "git",
                 "url": "https://github.com/sebastianbergmann/phpunit.git",
-                "reference": "1883687169c017d6ae37c58883ca3994cfc34189"
+                "reference": "5ff8c545a50226c569310a35f4fa89d79f1ddfdc"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/sebastianbergmann/phpunit/zipball/1883687169c017d6ae37c58883ca3994cfc34189",
-                "reference": "1883687169c017d6ae37c58883ca3994cfc34189",
+                "url": "https://api.github.com/repos/sebastianbergmann/phpunit/zipball/5ff8c545a50226c569310a35f4fa89d79f1ddfdc",
+                "reference": "5ff8c545a50226c569310a35f4fa89d79f1ddfdc",
                 "shasum": ""
             },
             "require": {
@@ -8615,7 +8669,7 @@
                 "phar-io/version": "^3.0.2",
                 "php": ">=7.3",
                 "phpspec/prophecy": "^1.12.1",
-                "phpunit/php-code-coverage": "^9.2.7",
+                "phpunit/php-code-coverage": "^9.2.13",
                 "phpunit/php-file-iterator": "^3.0.5",
                 "phpunit/php-invoker": "^3.1.1",
                 "phpunit/php-text-template": "^2.0.3",
@@ -8677,7 +8731,7 @@
             ],
             "support": {
                 "issues": "https://github.com/sebastianbergmann/phpunit/issues",
-                "source": "https://github.com/sebastianbergmann/phpunit/tree/9.5.14"
+                "source": "https://github.com/sebastianbergmann/phpunit/tree/9.5.16"
             },
             "funding": [
                 {
@@ -8689,7 +8743,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2022-02-18T12:54:07+00:00"
+            "time": "2022-02-23T17:10:58+00:00"
         },
         {
             "name": "sebastian/cli-parser",
@@ -10055,5 +10109,5 @@
         "ext-pdo": "*"
     },
     "platform-dev": [],
-    "plugin-api-version": "2.1.0"
+    "plugin-api-version": "2.2.0"
 }
diff --git a/package-lock.json b/package-lock.json
index 1d8d8f7..8994c3c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-    "name": "application",
+    "name": "toby",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
@@ -16,7 +16,7 @@
                 "@vue/compiler-sfc": "^3.2.26",
                 "autoprefixer": "^10.4.2",
                 "axios": "^0.25.0",
-                "echarts": "^5.2.2",
+                "echarts": "^5.3.0",
                 "flatpickr": "^4.6.9",
                 "laravel-mix": "^6.0.6",
                 "lodash": "^4.17.21",
diff --git a/package.json b/package.json
index 9588eff..f35c216 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
         "@vue/compiler-sfc": "^3.2.26",
         "autoprefixer": "^10.4.2",
         "axios": "^0.25.0",
-        "echarts": "^5.2.2",
+        "echarts": "^5.3.0",
         "flatpickr": "^4.6.9",
         "laravel-mix": "^6.0.6",
         "lodash": "^4.17.21",
diff --git a/resources/js/Pages/VacationRequest/Create.vue b/resources/js/Pages/VacationRequest/Create.vue
index d36105c..62711d9 100644
--- a/resources/js/Pages/VacationRequest/Create.vue
+++ b/resources/js/Pages/VacationRequest/Create.vue
@@ -1,273 +1,287 @@
 <template>
   <InertiaHead title="Złóż wniosek urlopowy" />
-  <div class="bg-white shadow-md">
-    <div class="p-4 sm:px-6">
-      <h2 class="text-lg leading-6 font-medium text-gray-900">
-        Złóż wniosek urlopowy
-      </h2>
-    </div>
-    <form
-      class="border-t border-gray-200 px-6"
-      @submit.prevent="createForm"
-    >
-      <div
-        v-if="form.errors.vacationRequest"
-        class="rounded-md bg-red-50 p-4 mt-2"
+  <div class="grid grid-cols-1 gap-4 items-start lg:grid-cols-3 lg:gap-8">
+    <div class="grid grid-cols-1 lg:col-span-2 bg-white shadow-md">
+      <div class="p-4 sm:px-6">
+        <h2 class="text-lg leading-6 font-medium text-gray-900">
+          Złóż wniosek urlopowy
+        </h2>
+      </div>
+      <form
+        class="border-t border-gray-200 px-6"
+        @submit.prevent="createForm"
       >
-        <div class="flex">
-          <div class="flex-shrink-0">
-            <XCircleIcon class="h-5 w-5 text-red-400" />
-          </div>
-          <div class="ml-3">
-            <h3 class="text-sm font-medium text-red-800">
-              Wniosek nie mógł zostać utworzony
-            </h3>
-            <div class="mt-2 text-sm text-red-700">
-              <span>{{ form.errors.vacationRequest }}</span>
+        <div
+          v-if="form.errors.vacationRequest"
+          class="rounded-md bg-red-50 p-4 mt-2"
+        >
+          <div class="flex">
+            <div class="flex-shrink-0">
+              <XCircleIcon class="h-5 w-5 text-red-400" />
+            </div>
+            <div class="ml-3">
+              <h3 class="text-sm font-medium text-red-800">
+                Wniosek nie mógł zostać utworzony
+              </h3>
+              <div class="mt-2 text-sm text-red-700">
+                <span>{{ form.errors.vacationRequest }}</span>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <Listbox
-        v-model="form.user"
-        as="div"
-        class="sm:grid sm:grid-cols-3 py-4 items-center"
-      >
-        <ListboxLabel class="block text-sm font-medium text-gray-700">
-          Osoba składająca wniosek
-        </ListboxLabel>
-        <div class="mt-1 relative sm:mt-0 sm:col-span-2">
-          <ListboxButton
-            class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
-          >
-            <span class="flex items-center">
-              <img
-                :src="form.user.avatar"
-                class="flex-shrink-0 h-6 w-6 rounded-full"
-              >
-              <span class="ml-3 block truncate">{{ form.user.name }}</span>
-            </span>
-            <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-              <SelectorIcon class="h-5 w-5 text-gray-400" />
-            </span>
-          </ListboxButton>
-
-          <transition
-            leave-active-class="transition ease-in duration-100"
-            leave-from-class="opacity-100"
-            leave-to-class="opacity-0"
-          >
-            <ListboxOptions
-              class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+        <Listbox
+          v-model="form.user"
+          as="div"
+          class="sm:grid sm:grid-cols-3 py-4 items-center"
+        >
+          <ListboxLabel class="block text-sm font-medium text-gray-700">
+            Osoba składająca wniosek
+          </ListboxLabel>
+          <div class="mt-1 relative sm:mt-0 sm:col-span-2">
+            <ListboxButton
+              class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
             >
-              <ListboxOption
-                v-for="user in users.data"
-                :key="user.id"
-                v-slot="{ active, selected }"
-                as="template"
-                :value="user"
-              >
-                <li :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
-                  <div class="flex items-center">
-                    <img
-                      :src="user.avatar"
-                      alt=""
-                      class="flex-shrink-0 h-6 w-6 rounded-full"
-                    >
-                    <span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
-                      {{ user.name }}
-                    </span>
-                  </div>
-
-                  <span
-                    v-if="selected"
-                    :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
-                  >
-                    <CheckIcon class="h-5 w-5" />
-                  </span>
-                </li>
-              </ListboxOption>
-            </ListboxOptions>
-          </transition>
-          <p
-            v-if="form.errors.type"
-            class="mt-2 text-sm text-red-600"
-          >
-            {{ form.errors.type }}
-          </p>
-        </div>
-      </Listbox>
-      <Listbox
-        v-model="form.type"
-        as="div"
-        class="sm:grid sm:grid-cols-3 py-4 items-center"
-      >
-        <ListboxLabel class="block text-sm font-medium text-gray-700">
-          Rodzaj wniosku
-        </ListboxLabel>
-        <div class="mt-1 relative sm:mt-0 sm:col-span-2">
-          <ListboxButton
-            class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
-          >
-            <span class="block truncate">{{ form.type.label }}</span>
-            <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-              <SelectorIcon class="h-5 w-5 text-gray-400" />
-            </span>
-          </ListboxButton>
-
-          <transition
-            leave-active-class="transition ease-in duration-100"
-            leave-from-class="opacity-100"
-            leave-to-class="opacity-0"
-          >
-            <ListboxOptions
-              class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
-            >
-              <ListboxOption
-                v-for="type in vacationTypes"
-                :key="type.value"
-                v-slot="{ active, selected }"
-                as="template"
-                :value="type"
-              >
-                <li
-                  :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
+              <span class="flex items-center">
+                <img
+                  :src="form.user.avatar"
+                  class="flex-shrink-0 h-6 w-6 rounded-full"
                 >
-                  <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
-                    {{ type.label }}
-                  </span>
+                <span class="ml-3 block truncate">{{ form.user.name }}</span>
+              </span>
+              <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+                <SelectorIcon class="h-5 w-5 text-gray-400" />
+              </span>
+            </ListboxButton>
 
-                  <span
-                    v-if="selected"
-                    :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
+            <transition
+              leave-active-class="transition ease-in duration-100"
+              leave-from-class="opacity-100"
+              leave-to-class="opacity-0"
+            >
+              <ListboxOptions
+                class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+              >
+                <ListboxOption
+                  v-for="user in users.data"
+                  :key="user.id"
+                  v-slot="{ active, selected }"
+                  as="template"
+                  :value="user"
+                >
+                  <li :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
+                    <div class="flex items-center">
+                      <img
+                        :src="user.avatar"
+                        alt=""
+                        class="flex-shrink-0 h-6 w-6 rounded-full"
+                      >
+                      <span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">
+                        {{ user.name }}
+                      </span>
+                    </div>
+
+                    <span
+                      v-if="selected"
+                      :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
+                    >
+                      <CheckIcon class="h-5 w-5" />
+                    </span>
+                  </li>
+                </ListboxOption>
+              </ListboxOptions>
+            </transition>
+            <p
+              v-if="form.errors.type"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.type }}
+            </p>
+          </div>
+        </Listbox>
+        <Listbox
+          v-model="form.type"
+          as="div"
+          class="sm:grid sm:grid-cols-3 py-4 items-center"
+        >
+          <ListboxLabel class="block text-sm font-medium text-gray-700">
+            Rodzaj wniosku
+          </ListboxLabel>
+          <div class="mt-1 relative sm:mt-0 sm:col-span-2">
+            <ListboxButton
+              class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
+            >
+              <span class="block truncate">{{ form.type.label }}</span>
+              <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+                <SelectorIcon class="h-5 w-5 text-gray-400" />
+              </span>
+            </ListboxButton>
+
+            <transition
+              leave-active-class="transition ease-in duration-100"
+              leave-from-class="opacity-100"
+              leave-to-class="opacity-0"
+            >
+              <ListboxOptions
+                class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+              >
+                <ListboxOption
+                  v-for="type in vacationTypes"
+                  :key="type.value"
+                  v-slot="{ active, selected }"
+                  as="template"
+                  :value="type"
+                >
+                  <li
+                    :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']"
                   >
-                    <CheckIcon class="h-5 w-5" />
-                  </span>
-                </li>
-              </ListboxOption>
-            </ListboxOptions>
-          </transition>
-          <p
-            v-if="form.errors.type"
-            class="mt-2 text-sm text-red-600"
+                    <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
+                      {{ type.label }}
+                    </span>
+
+                    <span
+                      v-if="selected"
+                      :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
+                    >
+                      <CheckIcon class="h-5 w-5" />
+                    </span>
+                  </li>
+                </ListboxOption>
+              </ListboxOptions>
+            </transition>
+            <p
+              v-if="form.errors.type"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.type }}
+            </p>
+          </div>
+        </Listbox>
+        <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+          <label
+            for="date_from"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
           >
-            {{ form.errors.type }}
-          </p>
-        </div>
-      </Listbox>
-      <div class="sm:grid sm:grid-cols-3 py-4 items-center">
-        <label
-          for="date_from"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Planowany urlop od
-        </label>
-        <div class="mt-1 sm:mt-0 sm:col-span-2">
-          <FlatPickr
-            id="date_from"
-            v-model="form.from"
-            :config="fromInputConfig"
-            placeholder="Wybierz datę"
-            class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.from, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.from }"
-            @on-change="onFromChange"
-          />
-          <p
-            v-if="form.errors.from"
-            class="mt-2 text-sm text-red-600"
-          >
-            {{ form.errors.from }}
-          </p>
-        </div>
-      </div>
-      <div class="sm:grid sm:grid-cols-3 py-4 items-center">
-        <label
-          for="date_from"
-          class="block text-sm font-medium text-gray-700 sm:mt-px"
-        >
-          Planowany urlop do
-        </label>
-        <div class="mt-1 sm:mt-0 sm:col-span-2">
-          <FlatPickr
-            id="date_to"
-            v-model="form.to"
-            :config="toInputConfig"
-            placeholder="Wybierz datę"
-            class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
-            :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.to, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.to }"
-            @on-change="onToChange"
-          />
-          <p
-            v-if="form.errors.to"
-            class="mt-2 text-sm text-red-600"
-          >
-            {{ form.errors.to }}
-          </p>
-        </div>
-      </div>
-      <div class="sm:grid sm:grid-cols-3 py-4 items-center">
-        <span class="block text-sm font-medium text-gray-700 sm:mt-px">Liczba dni urlopu</span>
-        <div
-          class="mt-1 sm:mt-0 sm:col-span-2 w-full max-w-lg bg-gray-50 border border-gray-300 rounded-md px-4 py-2 inline-flex items-center text-gray-500 sm:text-sm"
-        >
-          {{ estimatedDays.length }}
-        </div>
-      </div>
-      <div class="sm:grid sm:grid-cols-3 py-4 items-center">
-        <label
-          for="comment"
-          class="block text-sm font-medium text-gray-700"
-        >
-          Komentarz
-        </label>
-        <div class="mt-1 sm:mt-0 sm:col-span-2">
-          <textarea
-            id="comment"
-            v-model="form.comment"
-            rows="4"
-            class="shadow-sm focus:ring-blumilk-500 focus:border-blumilk-500 block w-full max-w-lg sm:text-sm border-gray-300 rounded-md"
-          />
-        </div>
-      </div>
-      <div class="sm:grid sm:grid-cols-3 py-4 items-center">
-        <label
-          for="flowSkipped"
-          class="block text-sm font-medium text-gray-700"
-        >
-          Natychmiastowo zatwierdź wniosek
-        </label>
-        <div class="mt-1 sm:mt-0 sm:col-span-2">
-          <Switch
-            id="flowSkipped"
-            v-model="form.flowSkipped"
-            :class="[form.flowSkipped ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
-          >
-            <span
-              :class="[form.flowSkipped ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']"
+            Planowany urlop od
+          </label>
+          <div class="mt-1 sm:mt-0 sm:col-span-2">
+            <FlatPickr
+              id="date_from"
+              v-model="form.from"
+              :config="fromInputConfig"
+              placeholder="Wybierz datę"
+              class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.from, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.from }"
+              @on-change="onFromChange"
             />
-          </Switch>
+            <p
+              v-if="form.errors.from"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.from }}
+            </p>
+          </div>
+        </div>
+        <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+          <label
+            for="date_from"
+            class="block text-sm font-medium text-gray-700 sm:mt-px"
+          >
+            Planowany urlop do
+          </label>
+          <div class="mt-1 sm:mt-0 sm:col-span-2">
+            <FlatPickr
+              id="date_to"
+              v-model="form.to"
+              :config="toInputConfig"
+              placeholder="Wybierz datę"
+              class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
+              :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.to, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.to }"
+              @on-change="onToChange"
+            />
+            <p
+              v-if="form.errors.to"
+              class="mt-2 text-sm text-red-600"
+            >
+              {{ form.errors.to }}
+            </p>
+          </div>
+        </div>
+        <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+          <span class="block text-sm font-medium text-gray-700 sm:mt-px">Liczba dni urlopu</span>
+          <div
+            class="mt-1 sm:mt-0 sm:col-span-2 w-full max-w-lg bg-gray-50 border border-gray-300 rounded-md px-4 py-2 inline-flex items-center text-gray-500 sm:text-sm"
+          >
+            {{ estimatedDays.length }}
+          </div>
+        </div>
+        <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+          <label
+            for="comment"
+            class="block text-sm font-medium text-gray-700"
+          >
+            Komentarz
+          </label>
+          <div class="mt-1 sm:mt-0 sm:col-span-2">
+            <textarea
+              id="comment"
+              v-model="form.comment"
+              rows="4"
+              class="shadow-sm focus:ring-blumilk-500 focus:border-blumilk-500 block w-full max-w-lg sm:text-sm border-gray-300 rounded-md"
+            />
+          </div>
+        </div>
+        <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+          <label
+            for="flowSkipped"
+            class="block text-sm font-medium text-gray-700"
+          >
+            Natychmiastowo zatwierdź wniosek
+          </label>
+          <div class="mt-1 sm:mt-0 sm:col-span-2">
+            <Switch
+              id="flowSkipped"
+              v-model="form.flowSkipped"
+              :class="[form.flowSkipped ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
+            >
+              <span
+                :class="[form.flowSkipped ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']"
+              />
+            </Switch>
+          </div>
+        </div>
+        <div class="flex justify-end py-3">
+          <div class="space-x-3">
+            <InertiaLink
+              href="/vacation-requests"
+              class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+            >
+              Anuluj
+            </InertiaLink>
+            <button
+              type="submit"
+              :disabled="form.processing"
+              class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+            >
+              Zapisz
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div class="grid grid-cols-1 bg-white shadow-md h-full">
+      <div>
+        <div class="p-4 sm:px-6">
+          <h2 class="text-lg leading-6 font-medium text-gray-900">
+            Urlop wypoczynkowy
+          </h2>
+        </div>
+        <div class="border-t border-gray-200 px-6 pt-8">
+          <Test />
         </div>
       </div>
-      <div class="flex justify-end py-3">
-        <div class="space-x-3">
-          <InertiaLink
-            href="/vacation-requests"
-            class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
-          >
-            Anuluj
-          </InertiaLink>
-          <button
-            type="submit"
-            :disabled="form.processing"
-            class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
-          >
-            Zapisz
-          </button>
-        </div>
-      </div>
-    </form>
+    </div>
   </div>
 </template>
 
@@ -279,10 +293,12 @@ import {CheckIcon, SelectorIcon, XCircleIcon} from '@heroicons/vue/solid'
 import {reactive, ref} from 'vue'
 import axios from 'axios'
 import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
+import Test from '@/Shared/Test'
 
 export default {
   name: 'VacationRequestCreate',
   components: {
+    Test,
     Switch,
     FlatPickr,
     Listbox,
diff --git a/resources/js/Shared/Test.vue b/resources/js/Shared/Test.vue
new file mode 100644
index 0000000..a990289
--- /dev/null
+++ b/resources/js/Shared/Test.vue
@@ -0,0 +1,84 @@
+<template>
+  <v-chart
+    :option="option"
+    style="min-height: 400px;"
+  />
+</template>
+
+<script>
+import {use} from 'echarts/core'
+import {CanvasRenderer} from 'echarts/renderers'
+import {PieChart} from 'echarts/charts'
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+} from 'echarts/components'
+import VChart from 'vue-echarts'
+import {ref} from 'vue'
+
+use([
+  CanvasRenderer,
+  PieChart,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+])
+
+export default {
+  name: 'TestTest',
+  components: {
+    VChart,
+  },
+  setup() {
+    const option = ref({
+      tooltip: {
+        trigger: 'item',
+        formatter: '{a} <br/>{b} : {c} ({d}%)',
+      },
+      legend: {
+        orient: 'vertical',
+        left: 'left',
+        data: ['Przetwarzane', 'Wykorzystane', 'Pozostałe'],
+      },
+      color: [
+        '#2C466F',
+        '#8CA7D1',
+        '#527ABA',
+      ],
+      series: [
+        {
+          name: 'Urlop wypoczynkowy',
+          type: 'pie',
+          data: [
+            {value: 8, name: 'Wykorzystane'},
+            {value: 5, name: 'Przetwarzane'},
+            {value: 12, name: 'Pozostałe'},
+          ],
+          center: ['50%', '60%'],
+          radius: ['40%', '70%'],
+          itemStyle : {
+            normal : {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2,
+              label : {
+                position: 'inner',
+                formatter : params => params.value,
+                fontWeight: 'bold',
+                fontSize: 16,
+                color: '#FFFFFF',
+              },
+              labelLine : {
+                show : false,
+              },
+            },
+          },
+        },
+      ],
+    })
+
+    return {option}
+  },
+}
+</script>
diff --git a/routes/api.php b/routes/api.php
index f418a99..7b8abca 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -2,9 +2,17 @@
 
 declare(strict_types=1);
 
+use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 use Toby\Infrastructure\Http\Controllers\Api\CalculateVacationDaysController;
 
 Route::middleware("auth:sanctum")->group(function (): void {
     Route::post("calculate-vacation-days", CalculateVacationDaysController::class);
+    Route::get("get-vacations-info", function (Request $request) {
+        return [
+            "pending" => 4,
+            "used" => 10,
+            "other" => 12,
+        ];
+    });
 });