diff --git a/.github/workflows/test-and-lint-js.yml b/.github/workflows/test-and-lint-js.yml
index f08ced38..0e2291cd 100644
--- a/.github/workflows/test-and-lint-js.yml
+++ b/.github/workflows/test-and-lint-js.yml
@@ -35,7 +35,7 @@ jobs:
       - name: Set up node
         uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
         with:
-          node-version: 22
+          node-version: 22.4.1
 
       - name: Instal npm dependencies
         run: npm clean-install
diff --git a/app/Http/Controllers/VacationCalendarController.php b/app/Http/Controllers/VacationCalendarController.php
index 88c8b156..f3dbafba 100644
--- a/app/Http/Controllers/VacationCalendarController.php
+++ b/app/Http/Controllers/VacationCalendarController.php
@@ -4,14 +4,17 @@
 
 namespace Toby\Http\Controllers;
 
+use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Carbon;
+use Illuminate\Support\Facades\Cache;
 use Inertia\Response;
 use Toby\Domain\CalendarGenerator;
 use Toby\Enums\Month;
 use Toby\Helpers\YearPeriodRetriever;
 use Toby\Http\Resources\SimpleUserResource;
 use Toby\Models\User;
+use Toby\Models\YearPeriod;
 
 class VacationCalendarController extends Controller
 {
@@ -20,12 +23,25 @@ public function index(
         YearPeriodRetriever $yearPeriodRetriever,
         CalendarGenerator $calendarGenerator,
         ?string $month = null,
-    ): Response {
+        ?int $year = null,
+    ): Response|RedirectResponse {
+        if ($year !== null) {
+            return $this->changeYearPeriod($request, $month, $year);
+        }
+
         $month = Month::fromNameOrCurrent((string)$month);
         $currentUser = $request->user();
         $withTrashedUsers = $currentUser->canSeeInactiveUsers();
 
         $yearPeriod = $yearPeriodRetriever->selected();
+        $previousYearPeriod = YearPeriod::query()
+            ->where("year", "<", $yearPeriod->year)
+            ->orderBy("year", "desc")
+            ->first();
+        $nextYearPeriod = YearPeriod::query()
+            ->where("year", ">", $yearPeriod->year)
+            ->orderBy("year")
+            ->first();
         $carbonMonth = Carbon::create($yearPeriod->year, $month->toCarbonNumber());
 
         $users = User::query()
@@ -42,9 +58,21 @@ public function index(
         return inertia("Calendar", [
             "calendar" => $calendar,
             "current" => Month::current(),
-            "selected" => $month->value,
+            "selectedMonth" => $month->value,
             "users" => SimpleUserResource::collection($users),
             "withBlockedUsers" => $withTrashedUsers,
+            "previousYearPeriod" => $previousYearPeriod,
+            "nextYearPeriod" => $nextYearPeriod,
         ]);
     }
+
+    private function changeYearPeriod(Request $request, string $month, int $year): RedirectResponse
+    {
+        $yearPeriod = YearPeriod::query()->where("year", $year)->firstOrFail();
+        $request->session()->put(YearPeriodRetriever::SESSION_KEY, $yearPeriod->id);
+        Cache::forget("selected_year_period");
+
+        return redirect()->route("calendar", ["month" => $month])
+            ->with("info", __("Year period changed."));
+    }
 }
diff --git a/lang/pl.json b/lang/pl.json
index 5e28ac3d..e17f4a6d 100644
--- a/lang/pl.json
+++ b/lang/pl.json
@@ -41,6 +41,7 @@
   "Holiday updated.": "Dzień wolny zaktualizowany.",
   "Holiday deleted.": "Dzień wolny usunięty.",
   "Selected year period changed.": "Wybrany rok zmieniony.",
+  "Year period changed.": "Zmieniono rok.",
   "Vacation limits updated.": "Limity urlopów zaktualizowane.",
   "Request created.": "Wniosek utworzony.",
   "Request accepted.": "Wniosek zaakceptowany.",
diff --git a/package-lock.json b/package-lock.json
index 1495421a..77c4fd27 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
                 "@heroicons/vue": "^2.1.4",
                 "@inertiajs/inertia": "^0.11.1",
                 "@inertiajs/inertia-vue3": "^0.6.0",
-                "@inertiajs/progress": "^0.2.7",
+                "@inertiajs/progress": "^0.1.2",
                 "@tailwindcss/forms": "^0.5.7",
                 "@tailwindcss/line-clamp": "^0.4.4",
                 "@tailwindcss/typography": "^0.5.13",
@@ -53,9 +53,9 @@
             }
         },
         "node_modules/@babel/parser": {
-            "version": "7.24.7",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.7.tgz",
-            "integrity": "sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==",
+            "version": "7.24.8",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.8.tgz",
+            "integrity": "sha512-WzfbgXOkGzZiXXCqk43kKwZjzwx4oulxZi3nq2TYL9mOjQv6kYwul9mz6ID36njuL7Xkp6nJEfok848Zj10j/w==",
             "license": "MIT",
             "bin": {
                 "parser": "bin/babel-parser.js"
@@ -516,9 +516,9 @@
             }
         },
         "node_modules/@heroicons/vue": {
-            "version": "2.1.4",
-            "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.1.4.tgz",
-            "integrity": "sha512-wykVSZ/fqEG49lIeHgFGT9TCvBw9THuRTtA/sPp7FVk3iBob/HcmitMcLDwtXOW82TXb38HeLRl1/pcElPeSdg==",
+            "version": "2.1.5",
+            "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.1.5.tgz",
+            "integrity": "sha512-IpqR72sFqFs55kyKfFS7tN+Ww6odFNeH/7UxycIOrlVYfj4WUGAdzQtLBnJspucSeqWFQsKM0g0YrgU655BEfA==",
             "license": "MIT",
             "peerDependencies": {
                 "vue": ">= 3"
@@ -597,15 +597,12 @@
             }
         },
         "node_modules/@inertiajs/progress": {
-            "version": "0.2.7",
-            "resolved": "https://registry.npmjs.org/@inertiajs/progress/-/progress-0.2.7.tgz",
-            "integrity": "sha512-zxadfLlBPIUvTE9g5k71V/Ayzo8P9kEp4hV4UKywCC2kURufxV7bycbZqU1GeMCFGDT+VRrjXNl676Pwwa1HoQ==",
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/@inertiajs/progress/-/progress-0.1.2.tgz",
+            "integrity": "sha512-XazXCp9ezY2GLfS37O+LUf6Ni1xYLtrQg+svUi+videi3Aby28d4xRCtrqLvyo3HIWQE5DvNqCPQ8BFbaPZTOA==",
             "license": "MIT",
             "dependencies": {
                 "nprogress": "^0.2.0"
-            },
-            "peerDependencies": {
-                "@inertiajs/inertia": "^0.6.0 || ^0.7.0 || ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0"
             }
         },
         "node_modules/@isaacs/cliui": {
@@ -696,9 +693,9 @@
             }
         },
         "node_modules/@jridgewell/sourcemap-codec": {
-            "version": "1.4.15",
-            "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-            "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+            "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
             "license": "MIT"
         },
         "node_modules/@jridgewell/trace-mapping": {
@@ -803,9 +800,9 @@
             }
         },
         "node_modules/@tanstack/virtual-core": {
-            "version": "3.8.1",
-            "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.8.1.tgz",
-            "integrity": "sha512-uNtAwenT276M9QYCjTBoHZ8X3MUeCRoGK59zPi92hMIxdfS9AyHjkDWJ94WroDxnv48UE+hIeo21BU84jKc8aQ==",
+            "version": "3.8.3",
+            "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.8.3.tgz",
+            "integrity": "sha512-vd2A2TnM5lbnWZnHi9B+L2gPtkSeOtJOAw358JqokIH1+v2J7vUAzFVPwB/wrye12RFOurffXu33plm4uQ+JBQ==",
             "license": "MIT",
             "funding": {
                 "type": "github",
@@ -813,12 +810,12 @@
             }
         },
         "node_modules/@tanstack/vue-virtual": {
-            "version": "3.8.1",
-            "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.8.1.tgz",
-            "integrity": "sha512-uhty1LzUbbcVc5zdMMSUjUt/ECTlMCtK49Ww7dH2m4lNNLGYwkj5SbfrAD8uCZxV1VeV7DRMXqhwUTELyR5rrA==",
+            "version": "3.8.3",
+            "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.8.3.tgz",
+            "integrity": "sha512-xrFLkOiqLoGwohgr1+Q880hkNdQWqwi19EXzx38iAjVEm1Db3KIAV0aVP57/dnNXU3NO1Vx8wnIHII5J4n1LyA==",
             "license": "MIT",
             "dependencies": {
-                "@tanstack/virtual-core": "3.8.1"
+                "@tanstack/virtual-core": "3.8.3"
             },
             "funding": {
                 "type": "github",
@@ -865,9 +862,9 @@
             "peer": true
         },
         "node_modules/@types/node": {
-            "version": "20.14.9",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.9.tgz",
-            "integrity": "sha512-06OCtnTXtWOZBJlRApleWndH4JsRVs1pDCc8dLSQp+7PpUpX3ePdHyeNSFTeSe7FtKyQkrlPvHwJOW3SLd8Oyg==",
+            "version": "20.14.11",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.11.tgz",
+            "integrity": "sha512-kprQpL8MMeszbz6ojB5/tU8PLN4kesnN8Gjzw349rDlNgsSzg90lAVj3llK99Dh7JON+t9AuscPPFW6mPbTnSA==",
             "license": "MIT",
             "peer": true,
             "dependencies": {
@@ -895,103 +892,103 @@
             }
         },
         "node_modules/@vue/compiler-core": {
-            "version": "3.4.31",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.31.tgz",
-            "integrity": "sha512-skOiodXWTV3DxfDhB4rOf3OGalpITLlgCeOwb+Y9GJpfQ8ErigdBUHomBzvG78JoVE8MJoQsb+qhZiHfKeNeEg==",
+            "version": "3.4.32",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.32.tgz",
+            "integrity": "sha512-8tCVWkkLe/QCWIsrIvExUGnhYCAOroUs5dzhSoKL5w4MJS8uIYiou+pOPSVIOALOQ80B0jBs+Ri+kd5+MBnCDw==",
             "license": "MIT",
             "dependencies": {
                 "@babel/parser": "^7.24.7",
-                "@vue/shared": "3.4.31",
+                "@vue/shared": "3.4.32",
                 "entities": "^4.5.0",
                 "estree-walker": "^2.0.2",
                 "source-map-js": "^1.2.0"
             }
         },
         "node_modules/@vue/compiler-dom": {
-            "version": "3.4.31",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.31.tgz",
-            "integrity": "sha512-wK424WMXsG1IGMyDGyLqB+TbmEBFM78hIsOJ9QwUVLGrcSk0ak6zYty7Pj8ftm7nEtdU/DGQxAXp0/lM/2cEpQ==",
+            "version": "3.4.32",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.32.tgz",
+            "integrity": "sha512-PbSgt9KuYo4fyb90dynuPc0XFTfFPs3sCTbPLOLlo+PrUESW1gn/NjSsUvhR+mI2AmmEzexwYMxbHDldxSOr2A==",
             "license": "MIT",
             "dependencies": {
-                "@vue/compiler-core": "3.4.31",
-                "@vue/shared": "3.4.31"
+                "@vue/compiler-core": "3.4.32",
+                "@vue/shared": "3.4.32"
             }
         },
         "node_modules/@vue/compiler-sfc": {
-            "version": "3.4.31",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.31.tgz",
-            "integrity": "sha512-einJxqEw8IIJxzmnxmJBuK2usI+lJonl53foq+9etB2HAzlPjAS/wa7r0uUpXw5ByX3/0uswVSrjNb17vJm1kQ==",
+            "version": "3.4.32",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.32.tgz",
+            "integrity": "sha512-STy9im/WHfaguJnfKjjVpMHukxHUrOKjm2vVCxiojQJyo3Sb6Os8SMXBr/MI+ekpstEGkDONfqAQoSbZhspLYw==",
             "license": "MIT",
             "dependencies": {
                 "@babel/parser": "^7.24.7",
-                "@vue/compiler-core": "3.4.31",
-                "@vue/compiler-dom": "3.4.31",
-                "@vue/compiler-ssr": "3.4.31",
-                "@vue/shared": "3.4.31",
+                "@vue/compiler-core": "3.4.32",
+                "@vue/compiler-dom": "3.4.32",
+                "@vue/compiler-ssr": "3.4.32",
+                "@vue/shared": "3.4.32",
                 "estree-walker": "^2.0.2",
                 "magic-string": "^0.30.10",
-                "postcss": "^8.4.38",
+                "postcss": "^8.4.39",
                 "source-map-js": "^1.2.0"
             }
         },
         "node_modules/@vue/compiler-ssr": {
-            "version": "3.4.31",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.31.tgz",
-            "integrity": "sha512-RtefmITAje3fJ8FSg1gwgDhdKhZVntIVbwupdyZDSifZTRMiWxWehAOTCc8/KZDnBOcYQ4/9VWxsTbd3wT0hAA==",
+            "version": "3.4.32",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.32.tgz",
+            "integrity": "sha512-nyu/txTecF6DrxLrpLcI34xutrvZPtHPBj9yRoPxstIquxeeyywXpYZrQMsIeDfBhlw1abJb9CbbyZvDw2kjdg==",
             "license": "MIT",
             "dependencies": {
-                "@vue/compiler-dom": "3.4.31",
-                "@vue/shared": "3.4.31"
+                "@vue/compiler-dom": "3.4.32",
+                "@vue/shared": "3.4.32"
             }
         },
         "node_modules/@vue/reactivity": {
-            "version": "3.4.31",
-            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.31.tgz",
-            "integrity": "sha512-VGkTani8SOoVkZNds1PfJ/T1SlAIOf8E58PGAhIOUDYPC4GAmFA2u/E14TDAFcf3vVDKunc4QqCe/SHr8xC65Q==",
+            "version": "3.4.32",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.32.tgz",
+            "integrity": "sha512-1P7QvghAzhSIWmiNmh4MNkLVjr2QTNDcFv2sKmytEWhR6t7BZzNicgm5ENER4uU++wbWxgRh/pSEYgdI3MDcvg==",
             "license": "MIT",
             "dependencies": {
-                "@vue/shared": "3.4.31"
+                "@vue/shared": "3.4.32"
             }
         },
         "node_modules/@vue/runtime-core": {
-            "version": "3.4.31",
-            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.31.tgz",
-            "integrity": "sha512-LDkztxeUPazxG/p8c5JDDKPfkCDBkkiNLVNf7XZIUnJ+66GVGkP+TIh34+8LtPisZ+HMWl2zqhIw0xN5MwU1cw==",
+            "version": "3.4.32",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.32.tgz",
+            "integrity": "sha512-FxT2dTHUs1Hki8Ui/B1Hu339mx4H5kRJooqrNM32tGUHBPStJxwMzLIRbeGO/B1NMplU4Pg9fwOqrJtrOzkdfA==",
             "license": "MIT",
             "dependencies": {
-                "@vue/reactivity": "3.4.31",
-                "@vue/shared": "3.4.31"
+                "@vue/reactivity": "3.4.32",
+                "@vue/shared": "3.4.32"
             }
         },
         "node_modules/@vue/runtime-dom": {
-            "version": "3.4.31",
-            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.31.tgz",
-            "integrity": "sha512-2Auws3mB7+lHhTFCg8E9ZWopA6Q6L455EcU7bzcQ4x6Dn4cCPuqj6S2oBZgN2a8vJRS/LSYYxwFFq2Hlx3Fsaw==",
+            "version": "3.4.32",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.32.tgz",
+            "integrity": "sha512-Xz9G+ZViRyPFQtRBCPFkhMzKn454ihCPMKUiacNaUhuTIXvyfkAq8l89IZ/kegFVyw/7KkJGRGqYdEZrf27Xsg==",
             "license": "MIT",
             "dependencies": {
-                "@vue/reactivity": "3.4.31",
-                "@vue/runtime-core": "3.4.31",
-                "@vue/shared": "3.4.31",
+                "@vue/reactivity": "3.4.32",
+                "@vue/runtime-core": "3.4.32",
+                "@vue/shared": "3.4.32",
                 "csstype": "^3.1.3"
             }
         },
         "node_modules/@vue/server-renderer": {
-            "version": "3.4.31",
-            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.31.tgz",
-            "integrity": "sha512-D5BLbdvrlR9PE3by9GaUp1gQXlCNadIZytMIb8H2h3FMWJd4oUfkUTEH2wAr3qxoRz25uxbTcbqd3WKlm9EHQA==",
+            "version": "3.4.32",
+            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.32.tgz",
+            "integrity": "sha512-3c4rd0522Ao8hKjzgmUAbcjv2mBnvnw0Ld2f8HOMCuWJZjYie/p8cpIoYJbeP0VV2JYmrJJMwGQDO5RH4iQ30A==",
             "license": "MIT",
             "dependencies": {
-                "@vue/compiler-ssr": "3.4.31",
-                "@vue/shared": "3.4.31"
+                "@vue/compiler-ssr": "3.4.32",
+                "@vue/shared": "3.4.32"
             },
             "peerDependencies": {
-                "vue": "3.4.31"
+                "vue": "3.4.32"
             }
         },
         "node_modules/@vue/shared": {
-            "version": "3.4.31",
-            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.31.tgz",
-            "integrity": "sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA==",
+            "version": "3.4.32",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.32.tgz",
+            "integrity": "sha512-ep4mF1IVnX/pYaNwxwOpJHyBtOMKWoKZMbnUyd+z0udqIxLUh7YCCd/JfDna8aUrmnG9SFORyIq2HzEATRrQsg==",
             "license": "MIT"
         },
         "node_modules/@webassemblyjs/ast": {
@@ -1170,9 +1167,9 @@
             "peer": true
         },
         "node_modules/acorn": {
-            "version": "8.12.0",
-            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz",
-            "integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==",
+            "version": "8.12.1",
+            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
+            "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
             "license": "MIT",
             "bin": {
                 "acorn": "bin/acorn"
@@ -1386,9 +1383,9 @@
             }
         },
         "node_modules/browserslist": {
-            "version": "4.23.1",
-            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.1.tgz",
-            "integrity": "sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==",
+            "version": "4.23.2",
+            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.2.tgz",
+            "integrity": "sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -1405,10 +1402,10 @@
             ],
             "license": "MIT",
             "dependencies": {
-                "caniuse-lite": "^1.0.30001629",
-                "electron-to-chromium": "^1.4.796",
+                "caniuse-lite": "^1.0.30001640",
+                "electron-to-chromium": "^1.4.820",
                 "node-releases": "^2.0.14",
-                "update-browserslist-db": "^1.0.16"
+                "update-browserslist-db": "^1.1.0"
             },
             "bin": {
                 "browserslist": "cli.js"
@@ -1463,9 +1460,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001639",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001639.tgz",
-            "integrity": "sha512-eFHflNTBIlFwP2AIKaYuBQN/apnUoKNhBdza8ZnW/h2di4LCZ4xFqYlxUxo+LQ76KFI1PGcC1QDxMbxTZpSCAg==",
+            "version": "1.0.30001642",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001642.tgz",
+            "integrity": "sha512-3XQ0DoRgLijXJErLSl+bLnJ+Et4KqV1PY6JJBGAFlsNsz31zeAIncyeZfLCabHK/jtSh+671RM9YMldxjUPZtA==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -1730,9 +1727,9 @@
             }
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.4.815",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.815.tgz",
-            "integrity": "sha512-OvpTT2ItpOXJL7IGcYakRjHCt8L5GrrN/wHCQsRB4PQa1X9fe+X9oen245mIId7s14xvArCGSTIq644yPUKKLg==",
+            "version": "1.4.830",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.830.tgz",
+            "integrity": "sha512-TrPKKH20HeN0J1LHzsYLs2qwXrp8TF4nHdu4sq61ozGbzMpWhI7iIOPYPPkxeq1azMT9PZ8enPFcftbs/Npcjg==",
             "license": "ISC"
         },
         "node_modules/emoji-regex": {
@@ -1911,9 +1908,9 @@
             }
         },
         "node_modules/eslint-plugin-vue": {
-            "version": "9.26.0",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.26.0.tgz",
-            "integrity": "sha512-eTvlxXgd4ijE1cdur850G6KalZqk65k1JKoOI2d1kT3hr8sPD07j1q98FRFdNnpxBELGPWxZmInxeHGF/GxtqQ==",
+            "version": "9.27.0",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.27.0.tgz",
+            "integrity": "sha512-5Dw3yxEyuBSXTzT5/Ge1X5kIkRTQ3nvBn/VwPwInNiZBSJOO/timWMUaflONnFBzU6NhB68lxnCda7ULV5N7LA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -1923,7 +1920,7 @@
                 "nth-check": "^2.1.1",
                 "postcss-selector-parser": "^6.0.15",
                 "semver": "^7.6.0",
-                "vue-eslint-parser": "^9.4.2",
+                "vue-eslint-parser": "^9.4.3",
                 "xml-name-validator": "^4.0.0"
             },
             "engines": {
@@ -1934,9 +1931,9 @@
             }
         },
         "node_modules/eslint-plugin-vue/node_modules/postcss-selector-parser": {
-            "version": "6.1.0",
-            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
-            "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
+            "version": "6.1.1",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz",
+            "integrity": "sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -1996,9 +1993,9 @@
             }
         },
         "node_modules/esquery": {
-            "version": "1.5.0",
-            "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
-            "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+            "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
             "dev": true,
             "license": "BSD-3-Clause",
             "dependencies": {
@@ -2525,9 +2522,9 @@
             }
         },
         "node_modules/is-core-module": {
-            "version": "2.14.0",
-            "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.14.0.tgz",
-            "integrity": "sha512-a5dFJih5ZLYlRtDc0dZWP7RiKr6xIKzmn/oAYCDvdLThadVgyJwlaoQPmRtMSpz+rk0OGAgIu+TcM9HUF0fk1A==",
+            "version": "2.15.0",
+            "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.0.tgz",
+            "integrity": "sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==",
             "license": "MIT",
             "dependencies": {
                 "hasown": "^2.0.2"
@@ -2595,16 +2592,13 @@
             "license": "ISC"
         },
         "node_modules/jackspeak": {
-            "version": "3.4.0",
-            "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.0.tgz",
-            "integrity": "sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==",
+            "version": "3.4.3",
+            "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+            "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
             "license": "BlueOak-1.0.0",
             "dependencies": {
                 "@isaacs/cliui": "^8.0.2"
             },
-            "engines": {
-                "node": ">=14"
-            },
             "funding": {
                 "url": "https://github.com/sponsors/isaacs"
             },
@@ -2810,13 +2804,10 @@
             "license": "MIT"
         },
         "node_modules/lru-cache": {
-            "version": "10.3.0",
-            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.3.0.tgz",
-            "integrity": "sha512-CQl19J/g+Hbjbv4Y3mFNNXFEL/5t/KCg8POCuUqd4rMKjGG+j1ybER83hxV58zL+dFI1PTkt3GNFSHRt+d8qEQ==",
-            "license": "ISC",
-            "engines": {
-                "node": "14 || >=16.14"
-            }
+            "version": "10.4.3",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+            "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+            "license": "ISC"
         },
         "node_modules/luxon": {
             "version": "3.4.4",
@@ -2968,9 +2959,9 @@
             "peer": true
         },
         "node_modules/node-releases": {
-            "version": "2.0.14",
-            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
-            "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
+            "version": "2.0.17",
+            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.17.tgz",
+            "integrity": "sha512-Ww6ZlOiEQfPfXM45v17oabk77Z7mg5bOt7AjDyzy7RjK9OrLrLC8dyZQoAPEOtFX9SaNf1Tdvr5gRJWdTJj7GA==",
             "license": "MIT"
         },
         "node_modules/normalize-path": {
@@ -3337,9 +3328,9 @@
             }
         },
         "node_modules/postcss-nested/node_modules/postcss-selector-parser": {
-            "version": "6.1.0",
-            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
-            "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
+            "version": "6.1.1",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz",
+            "integrity": "sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==",
             "license": "MIT",
             "dependencies": {
                 "cssesc": "^3.0.0",
@@ -3394,9 +3385,9 @@
             }
         },
         "node_modules/qs": {
-            "version": "6.12.1",
-            "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.1.tgz",
-            "integrity": "sha512-zWmv4RSuB9r2mYQw3zxQuHWeU+42aKi1wWig/j4ele4ygELZ7PEO6MM7rim9oAQH2A5MWfsAVf/jPvTPgCbvUQ==",
+            "version": "6.12.3",
+            "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.3.tgz",
+            "integrity": "sha512-AWJm14H1vVaO/iNZ4/hO+HyaTehuy9nRqVdkTqlJt0HWvBiBIEXFmb4C0DGeYo3Xes9rrEW+TxHsaigCbN5ICQ==",
             "license": "BSD-3-Clause",
             "dependencies": {
                 "side-channel": "^1.0.6"
@@ -3599,9 +3590,9 @@
             }
         },
         "node_modules/semver": {
-            "version": "7.6.2",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
-            "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
+            "version": "7.6.3",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+            "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
             "dev": true,
             "license": "ISC",
             "bin": {
@@ -3860,9 +3851,9 @@
             }
         },
         "node_modules/sucrase/node_modules/glob": {
-            "version": "10.4.2",
-            "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.2.tgz",
-            "integrity": "sha512-GwMlUF6PkPo3Gk21UxkCohOv0PLcIXVtKyLlpEI28R/cO/4eNOdmLk3CMW1wROV/WR/EsZOWAfBbBOqYvs88/w==",
+            "version": "10.4.5",
+            "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+            "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
             "license": "ISC",
             "dependencies": {
                 "foreground-child": "^3.1.0",
@@ -3875,9 +3866,6 @@
             "bin": {
                 "glob": "dist/esm/bin.mjs"
             },
-            "engines": {
-                "node": ">=16 || 14 >=14.18"
-            },
             "funding": {
                 "url": "https://github.com/sponsors/isaacs"
             }
@@ -3922,9 +3910,9 @@
             }
         },
         "node_modules/tailwindcss": {
-            "version": "3.4.4",
-            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
-            "integrity": "sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==",
+            "version": "3.4.6",
+            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.6.tgz",
+            "integrity": "sha512-1uRHzPB+Vzu57ocybfZ4jh5Q3SdlH7XW23J5sQoM9LhE9eIOlzxer/3XPSsycvih3rboRsvt0QCmzSrqyOYUIA==",
             "license": "MIT",
             "dependencies": {
                 "@alloc/quick-lru": "^5.2.0",
@@ -3959,9 +3947,9 @@
             }
         },
         "node_modules/tailwindcss/node_modules/postcss-selector-parser": {
-            "version": "6.1.0",
-            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
-            "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
+            "version": "6.1.1",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz",
+            "integrity": "sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==",
             "license": "MIT",
             "dependencies": {
                 "cssesc": "^3.0.0",
@@ -3982,9 +3970,9 @@
             }
         },
         "node_modules/terser": {
-            "version": "5.31.1",
-            "resolved": "https://registry.npmjs.org/terser/-/terser-5.31.1.tgz",
-            "integrity": "sha512-37upzU1+viGvuFtBo9NPufCb9dwM0+l9hMxYyWfBA+fbwrPqNJAhbZ6W47bBFnZHKHTUBnMvi87434qq+qnxOg==",
+            "version": "5.31.3",
+            "resolved": "https://registry.npmjs.org/terser/-/terser-5.31.3.tgz",
+            "integrity": "sha512-pAfYn3NIZLyZpa83ZKigvj6Rn9c/vd5KfYGX7cN1mnzqgDcxWvrU5ZtAfIKhEXz9nRecw4z3LXkjaq96/qZqAA==",
             "license": "BSD-2-Clause",
             "peer": true,
             "dependencies": {
@@ -4128,9 +4116,9 @@
             "peer": true
         },
         "node_modules/update-browserslist-db": {
-            "version": "1.0.16",
-            "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz",
-            "integrity": "sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==",
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
+            "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -4228,9 +4216,9 @@
             }
         },
         "node_modules/vite-plugin-full-reload": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/vite-plugin-full-reload/-/vite-plugin-full-reload-1.1.0.tgz",
-            "integrity": "sha512-3cObNDzX6DdfhD9E7kf6w2mNunFpD7drxyNgHLw+XwIYAgb+Xt16SEXo0Up4VH+TMf3n+DSVJZtW2POBGcBYAA==",
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/vite-plugin-full-reload/-/vite-plugin-full-reload-1.2.0.tgz",
+            "integrity": "sha512-kz18NW79x0IHbxRSHm0jttP4zoO9P9gXh+n6UTwlNKnviTTEpOlum6oS9SmecrTtSr+muHEn5TUuC75UovQzcA==",
             "license": "MIT",
             "dependencies": {
                 "picocolors": "^1.0.0",
@@ -4238,16 +4226,16 @@
             }
         },
         "node_modules/vue": {
-            "version": "3.4.31",
-            "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.31.tgz",
-            "integrity": "sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==",
+            "version": "3.4.32",
+            "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.32.tgz",
+            "integrity": "sha512-9mCGIAi/CAq7GtaLLLp2J92pEic+HArstG+pq6F+H7+/jB9a0Z7576n4Bh4k79/50L1cKMIhZC3MC0iGpl+1IA==",
             "license": "MIT",
             "dependencies": {
-                "@vue/compiler-dom": "3.4.31",
-                "@vue/compiler-sfc": "3.4.31",
-                "@vue/runtime-dom": "3.4.31",
-                "@vue/server-renderer": "3.4.31",
-                "@vue/shared": "3.4.31"
+                "@vue/compiler-dom": "3.4.32",
+                "@vue/compiler-sfc": "3.4.32",
+                "@vue/runtime-dom": "3.4.32",
+                "@vue/server-renderer": "3.4.32",
+                "@vue/shared": "3.4.32"
             },
             "peerDependencies": {
                 "typescript": "*"
@@ -4437,9 +4425,9 @@
             }
         },
         "node_modules/webpack": {
-            "version": "5.92.1",
-            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.92.1.tgz",
-            "integrity": "sha512-JECQ7IwJb+7fgUFBlrJzbyu3GEuNBcdqr1LD7IbSzwkSmIevTm8PF+wej3Oxuz/JFBUZ6O1o43zsPkwm1C4TmA==",
+            "version": "5.93.0",
+            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.93.0.tgz",
+            "integrity": "sha512-Y0m5oEY1LRuwly578VqluorkXbvXKh7U3rLoQCEO04M97ScRr44afGVkI0FQFsXzysk5OgFAxjZAb9rsGQVihA==",
             "license": "MIT",
             "peer": true,
             "dependencies": {
diff --git a/package.json b/package.json
index 331f2ab8..25f47d4a 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
         "@heroicons/vue": "^2.1.4",
         "@inertiajs/inertia": "^0.11.1",
         "@inertiajs/inertia-vue3": "^0.6.0",
-        "@inertiajs/progress": "^0.2.7",
+        "@inertiajs/progress": "^0.1.2",
         "@tailwindcss/forms": "^0.5.7",
         "@tailwindcss/line-clamp": "^0.4.4",
         "@tailwindcss/typography": "^0.5.13",
diff --git a/resources/js/Pages/Calendar.vue b/resources/js/Pages/Calendar.vue
index 1414a104..c942eba1 100644
--- a/resources/js/Pages/Calendar.vue
+++ b/resources/js/Pages/Calendar.vue
@@ -1,18 +1,23 @@
 <script setup>
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/solid'
-import { computed, ref } from 'vue'
+import { ChevronLeftIcon, ChevronRightIcon, ChevronDoubleRightIcon, ChevronDoubleLeftIcon, ChevronUpDownIcon } from '@heroicons/vue/24/solid'
+import { computed, ref, watch } from 'vue'
 import { useMonthInfo } from '@/Composables/monthInfo.js'
 import VacationTypeCalendarIcon from '@/Shared/VacationTypeCalendarIcon.vue'
 import CalendarDay from '@/Shared/CalendarDay.vue'
 import UserProfileLink from '@/Shared/UserProfileLink.vue'
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
+import { useForm } from '@inertiajs/inertia-vue3'
+import { Inertia } from '@inertiajs/inertia'
 
 const props = defineProps({
   users: Object,
   auth: Object,
   calendar: Object,
   current: String,
-  selected: String,
+  selectedMonth: String,
   years: Object,
+  previousYearPeriod: Object,
+  nextYearPeriod: Object,
 })
 
 let activeElement = ref(undefined)
@@ -21,8 +26,17 @@ const { getMonths, findMonth } = useMonthInfo()
 
 const months = getMonths()
 
-const currentMonth = computed(() => findMonth(props.current))
-const selectedMonth = computed(() => findMonth(props.selected))
+const form = useForm({
+  selectedMonth: months.find(month => month.value === props.selectedMonth),
+})
+
+watch(() => form.selectedMonth, (value) => {
+  if (value) {
+    Inertia.visit(`/calendar/${value.value}`)
+  }
+})
+
+const selectedMonth = computed(() => findMonth(props.selectedMonth))
 const previousMonth = computed(() => months[months.indexOf(selectedMonth.value) - 1])
 const nextMonth = computed(() => months[months.indexOf(selectedMonth.value) + 1])
 
@@ -52,33 +66,76 @@ function linkVacationRequest(user) {
   <InertiaHead title="Kalendarz" />
   <div class="bg-white shadow-md">
     <div class="flex-row sm:flex justify-between items-center p-4 sm:px-6">
-      <div class="flex items-center">
-        <h2 class="text-lg font-medium leading-6 text-center text-gray-900">
+      <div class="flex-row sm:flex items-center">
+        <h2 class="text-lg font-medium leading-6 sm:text-center mb-2 sm:mb-0 text-gray-900">
           Kalendarz
         </h2>
-        <div class="flex items-center ml-3 rounded-md shadow-sm md:items-stretch">
+        <div class="flex items-center sm:ml-3 md:items-stretch">
           <InertiaLink
             v-if="previousMonth"
             :href="`/calendar/${previousMonth.value}`"
             as="button"
-            class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50"
+            class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
           >
             <ChevronLeftIcon class="w-5 h-5" />
           </InertiaLink>
+          <InertiaLink
+            v-else-if="previousYearPeriod"
+            :href="`/calendar/${months[11].value}/${previousYearPeriod.year}`"
+            as="button"
+            class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9 md:hover:bg-gray-50"
+          >
+            <ChevronDoubleLeftIcon class="w-5 h-5" />
+          </InertiaLink>
           <span
             v-else
-            class="flex justify-center items-center p-2 text-gray-400 bg-gray-100 rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9"
+            class="flex justify-center items-center text-gray-400 bg-gray-100 rounded-l-md border border-r-0 border-gray-300 md:px-2 md:w-9"
           >
-            <ChevronLeftIcon class="w-5 h-5" />
+            <ChevronDoubleLeftIcon class="w-5 h-5" />
           </span>
-          <InertiaLink
-            v-if="years.current.year === years.selected.year"
-            :href="`/calendar/${currentMonth.value}`"
-            as="button"
-            class="hidden focus:relative items-center p-2 text-sm font-medium text-gray-700 hover:text-gray-900 bg-white hover:bg-gray-50 border-y border-gray-300 focus:outline-blumilk-500 md:flex"
+          <Listbox
+            v-model="form.selectedMonth"
+            as="div"
+            class="items-center grid-cols-3 w-[135px] h-[] text-sm font-medium text-gray-700 hover:text-gray-900 bg-white hover:bg-gray-50 border-y border-gray-300 focus:outline-blumilk-500"
           >
-            Dzisiaj
-          </InertiaLink>
+            <div class="relative sm:col-span-2 sm:mt-0">
+              <ListboxButton
+                class="relative pr-10 pl-3 w-full h-[36px] max-w-lg text-left bg-white focus:outline-none shadow-sm sm:text-sm cursor-pointer"
+              >
+                <template v-if="form.selectedMonth">
+                  <span class="block truncate text-center">
+                    {{ form.selectedMonth.name }}
+                  </span>
+                  <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+                    <ChevronUpDownIcon class="w-5 h-5 text-gray-400" />
+                  </span>
+                </template>
+              </ListboxButton>
+              <transition
+                leave-active-class="transition ease-in duration-100"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+              >
+                <ListboxOptions
+                  class="overflow-auto absolute z-10 py-1 mt-1 w-auto max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+                >
+                  <ListboxOption
+                    v-for="month in months"
+                    :key="month.value"
+                    v-slot="{ active, selected }"
+                    :value="month"
+                    as="template"
+                  >
+                    <li :class="[active ? 'bg-gray-100' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9 cursor-pointer']">
+                      <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
+                        {{ month.name }}
+                      </span>
+                    </li>
+                  </ListboxOption>
+                </ListboxOptions>
+              </transition>
+            </div>
+          </Listbox>
           <InertiaLink
             v-if="nextMonth"
             :href="`/calendar/${nextMonth.value}`"
@@ -87,11 +144,19 @@ function linkVacationRequest(user) {
           >
             <ChevronRightIcon class="w-5 h-5" />
           </InertiaLink>
+          <InertiaLink
+            v-else-if="nextYearPeriod"
+            :href="`/calendar/${months[0].value}/${nextYearPeriod.year}`"
+            as="button"
+            class="flex focus:relative justify-center items-center p-2 text-gray-400 hover:text-gray-500 bg-white rounded-r-md border border-l-0 border-gray-300 focus:outline-blumilk-500 md:px-2 md:w-9 md:hover:bg-gray-50"
+          >
+            <ChevronDoubleRightIcon class="w-5 h-5" />
+          </InertiaLink>
           <span
             v-else
-            class="flex justify-center items-center p-2 text-gray-400 bg-gray-100 rounded-r-md border border-l-0 border-gray-300 md:px-2 md:w-9"
+            class="flex justify-center items-center text-gray-400 bg-gray-100 rounded-r-md border border-l-0 border-gray-300 md:px-2 md:w-9"
           >
-            <ChevronRightIcon class="w-5 h-5" />
+            <ChevronDoubleRightIcon class="w-5 h-5" />
           </span>
         </div>
       </div>
diff --git a/routes/web.php b/routes/web.php
index e48d1df3..26f21ff2 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -129,7 +129,7 @@
         ->whereNumber("yearPeriod")
         ->name("year-periods.select");
 
-    Route::get("/calendar/{month?}", [VacationCalendarController::class, "index"])
+    Route::get("/calendar/{month?}/{year?}", [VacationCalendarController::class, "index"])
         ->name("calendar");
 
     Route::prefix("/vacation")->as("vacation.")->group(function (): void {
diff --git a/tests/Feature/CalendarTest.php b/tests/Feature/CalendarTest.php
new file mode 100644
index 00000000..3fcc812b
--- /dev/null
+++ b/tests/Feature/CalendarTest.php
@@ -0,0 +1,62 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tests\Feature;
+
+use Illuminate\Foundation\Testing\DatabaseMigrations;
+use Tests\FeatureTestCase;
+use Toby\Models\User;
+use Toby\Models\YearPeriod;
+
+class CalendarTest extends FeatureTestCase
+{
+    use DatabaseMigrations;
+
+    protected User $user;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->user = User::factory()->create();
+    }
+
+    public function testUserCanChangeYearPeriodOnTheCalendar(): void
+    {
+        $currentYearPeriod = YearPeriod::current();
+        $nextYearPeriod = YearPeriod::query()
+            ->create([
+                "year" => $currentYearPeriod->year + 1,
+            ]);
+
+        $this->assertNotEquals($currentYearPeriod->year, $nextYearPeriod->year);
+
+        $this->actingAs($this->user)
+            ->get("/calendar/january/$nextYearPeriod->year")
+            ->assertRedirect();
+
+        $selectedYearPeriod = YearPeriod::query()->where("id", session()->get("selected_year_period"))->first();
+        $this->assertEquals($selectedYearPeriod->year, $nextYearPeriod->year);
+    }
+
+    public function testUserCannotChangeYearPeriodIfYearPeriodDoesNotExist(): void
+    {
+        $currentYearPeriod = YearPeriod::current();
+
+        $this->actingAs($this->user)
+            ->get("/calendar/january/" . ($currentYearPeriod->year + 1))
+            ->assertStatus(404);
+
+        $this->actingAs($this->user)
+            ->get("/calendar/january/$currentYearPeriod->year")
+            ->assertStatus(302);
+    }
+
+    public function testUserCanSeeCalendar(): void
+    {
+        $this->actingAs($this->user)
+            ->get("/calendar")
+            ->assertOk();
+    }
+}