diff --git a/app/Architecture/Providers/AuthServiceProvider.php b/app/Architecture/Providers/AuthServiceProvider.php
index f2c8a5f..afa2b3b 100644
--- a/app/Architecture/Providers/AuthServiceProvider.php
+++ b/app/Architecture/Providers/AuthServiceProvider.php
@@ -31,5 +31,6 @@ class AuthServiceProvider extends ServiceProvider
         Gate::define("manageHolidays", fn(User $user) => $user->role === Role::AdministrativeApprover);
         Gate::define("manageVacationLimits", fn(User $user) => $user->role === Role::AdministrativeApprover);
         Gate::define("generateTimesheet", fn(User $user) => $user->role === Role::AdministrativeApprover);
+        Gate::define("listMonthlyUsage", fn(User $user) => $user->role === Role::AdministrativeApprover);
     }
 }
diff --git a/app/Infrastructure/Http/Controllers/MonthlyUsage.php b/app/Infrastructure/Http/Controllers/MonthlyUsage.php
new file mode 100644
index 0000000..e74c8ac
--- /dev/null
+++ b/app/Infrastructure/Http/Controllers/MonthlyUsage.php
@@ -0,0 +1,35 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Toby\Infrastructure\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Inertia\Response;
+use Toby\Eloquent\Models\User;
+use Toby\Infrastructure\Http\Resources\UserResource;
+
+class MonthlyUsage extends Controller
+{
+    public function index(Request $request): Response
+    {
+        $this->authorize("listMonthlyUsage");
+
+        $currentUser = $request->user();
+
+        $users = User::query()
+            ->where("id", "!=", $currentUser->id)
+            ->orderBy("last_name")
+            ->orderBy("first_name")
+            ->get();
+
+        $users->prepend($currentUser);
+
+        return inertia("MonthlyUsage", [
+            "users" => UserResource::collection($users),
+            "can" => [
+                "listMonthlyUsage" => $request->user()->can("listMonthlyUsage"),
+            ],
+        ]);
+    }
+}
diff --git a/app/Infrastructure/Http/Middleware/HandleInertiaRequests.php b/app/Infrastructure/Http/Middleware/HandleInertiaRequests.php
index 8f45e25..63dbbea 100644
--- a/app/Infrastructure/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Infrastructure/Http/Middleware/HandleInertiaRequests.php
@@ -27,6 +27,7 @@ class HandleInertiaRequests extends Middleware
                     "manageVacationLimits" => $user ? $user->can("manageVacationLimits") : false,
                     "manageUsers" => $user ? $user->can("manageUsers") : false,
                     "listAllVacationRequests" => $user ? $user->can("listAll", VacationRequest::class) : false,
+                    "listMonthlyUsage" => $user ? $user->can("listMonthlyUsage") : false,
                 ],
             ],
             "flash" => fn() => [
diff --git a/resources/js/Composables/monthInfo.js b/resources/js/Composables/monthInfo.js
index 3d7af0a..d0379ca 100644
--- a/resources/js/Composables/monthInfo.js
+++ b/resources/js/Composables/monthInfo.js
@@ -2,50 +2,62 @@ const months = [
   {
     'name': 'Styczeń',
     'value': 'january',
+    'shortcut': 'Sty',
   },
   {
     'name': 'Luty',
     'value': 'february',
+    'shortcut': 'Lut',
   },
   {
     'name': 'Marzec',
     'value': 'march',
+    'shortcut': 'Mar',
   },
   {
     'name': 'Kwiecień',
     'value': 'april',
+    'shortcut': 'Kwi',
   },
   {
     'name': 'Maj',
     'value': 'may',
+    'shortcut':'Maj',
   },
   {
     'name': 'Czerwiec',
     'value': 'june',
+    'shortcut': 'Cze',
   },
   {
     'name': 'Lipiec',
     'value': 'july',
+    'shortcut': 'Lip',
   },
   {
     'name': 'Sierpień',
     'value': 'august',
+    'shortcut': 'Sie',
   },
   {
     'name': 'Wrzesień',
     'value': 'september',
+    'shortcut': 'Wrz',
   },
   {
     'name': 'Październik',
     'value': 'october',
+    'shortcut': 'Paź',
   },
   {
     'name': 'Listopad',
     'value': 'november',
+    'shortcut': 'Lis',
   },
   {
     'name': 'Grudzień',
     'value': 'december',
+    'shortcut': 'Gru',
   },
 ]
 
diff --git a/resources/js/Pages/MonthlyUsage.vue b/resources/js/Pages/MonthlyUsage.vue
new file mode 100644
index 0000000..8d882e3
--- /dev/null
+++ b/resources/js/Pages/MonthlyUsage.vue
@@ -0,0 +1,120 @@
+<template>
+  <InertiaHead title="Wykorzystanie miesięczne urlopu" />
+  <div class="bg-white shadow-md">
+    <div class="flex justify-between items-center p-4 sm:px-6">
+      <div class="flex items-center">
+        <h2 class="text-lg leading-6 font-medium text-gray-900">
+          Wykorzystanie miesięczne urlopu
+        </h2>
+        <div class="ml-5">
+          ROK TUTAJ
+        </div>
+        <div class="ml-5">
+          Select z typami urlopów
+        </div>
+      </div>
+    </div>
+    <div class="overflow-x-auto">
+      <table class="w-full text-center text-sm border border-gray-300">
+        <thead>
+          <tr>
+            <th class="w-64 py-2 border text-lg font-semibold text-gray-800 border-gray-300" />
+            <th
+              class="border border-gray-300 text-sm font-semibold text-gray-900 py-4 px-2"
+            >
+              Limit zaległy (2021)
+            </th>
+            <th
+              class="border border-gray-300 text-sm font-semibold text-gray-900 py-4 px-2"
+            >
+              Limit obecny (2022)
+            </th>
+            <th
+              v-for="month in months"
+              :key="month"
+              class="border border-gray-300 text-sm font-semibold text-gray-900 py-4 px-2"
+              style="min-width: 46px;"
+            >
+              <div>
+                {{ month.shortcut }}
+              </div>
+            </th>
+            <th
+              class="border border-gray-300 text-sm font-semibold text-gray-900 py-4 px-2"
+            >
+              Wykorzystany
+            </th>
+            <th
+              class="border border-gray-300 text-sm font-semibold text-gray-900 py-4 px-2"
+            >
+              Rozpatrywany
+            </th>
+            <th
+              class="border border-gray-300 text-sm font-semibold text-gray-900 py-4 px-2"
+            >
+              Pozostało
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="user in users.data"
+            :key="user.id"
+          >
+            <th
+              class="border border-gray-300 py-2 px-4"
+            >
+              <div class="flex justify-start items-center">
+                <span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
+                  <img
+                    class="h-10 w-10 rounded-full"
+                    :src="user.avatar"
+                  >
+                </span>
+                <div class="ml-3">
+                  <div
+                    class="text-sm font-medium text-gray-900 whitespace-nowrap"
+                  >
+                    {{ user.name }}
+                  </div>
+                </div>
+              </div>
+            </th>
+            <td
+              v-for="index in 17"
+              :key="index"
+              class="border border-gray-300"
+            />
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import {useMonthInfo} from '@/Composables/monthInfo'
+
+export default {
+  name: 'MonthlyUsage',
+  components: {
+  },
+  props: {
+    users: {
+      type: Object,
+      default: () => null,
+    },
+    can: {
+      type: Object,
+      default: () => null,
+    },
+  },
+  setup() {
+    const {getMonths} = useMonthInfo()
+    const months = getMonths()
+    return {
+      months,
+    }
+  },
+}
+</script>
diff --git a/resources/js/Shared/MainMenu.vue b/resources/js/Shared/MainMenu.vue
index 0320d31..304c539 100644
--- a/resources/js/Shared/MainMenu.vue
+++ b/resources/js/Shared/MainMenu.vue
@@ -281,7 +281,9 @@ import {
   XIcon,
   SunIcon,
   StarIcon,
-  CalendarIcon, DocumentTextIcon,
+  CalendarIcon,
+  DocumentTextIcon,
+  AdjustmentsIcon,
 } from '@heroicons/vue/outline'
 import {
   CashIcon,
@@ -320,6 +322,7 @@ export default {
     UserGroupIcon,
     SunIcon,
     CalendarIcon,
+    AdjustmentsIcon,
   },
   setup() {
     const sidebarOpen = ref(false)
@@ -332,6 +335,7 @@ export default {
         {name: 'Moje wnioski', href: '/vacation-requests/me', component: 'VacationRequest/Index' , icon: DocumentTextIcon, can: true},
         {name: 'Wnioski urlopowe', href: '/vacation-requests', component: 'VacationRequest/IndexForApprovers', icon: CollectionIcon, can: auth.value.can.listAllVacationRequests},
         {name: 'Kalendarz urlopów', href: '/vacation-calendar', component: 'Calendar', icon: CalendarIcon, can: true},
+        {name: 'Wykorzystanie urlopu', href: '/monthly-usage', component: 'MonthlyUsage', icon: AdjustmentsIcon, can: auth.value.can.listMonthlyUsage},
         {name: 'Dni wolne', href: '/holidays', component: 'Holidays/Index', icon: StarIcon, can: true},
         {name: 'Limity urlopów', href: '/vacation-limits', component: 'VacationLimits', icon: SunIcon, can: auth.value.can.manageVacationLimits},
         {name: 'Użytkownicy', href: '/users', component: 'Users/Index', icon: UserGroupIcon, can: auth.value.can.manageUsers},
diff --git a/routes/web.php b/routes/web.php
index c3505ad..d8f997e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -7,6 +7,7 @@ use Toby\Infrastructure\Http\Controllers\DashboardController;
 use Toby\Infrastructure\Http\Controllers\GoogleController;
 use Toby\Infrastructure\Http\Controllers\HolidayController;
 use Toby\Infrastructure\Http\Controllers\LogoutController;
+use Toby\Infrastructure\Http\Controllers\MonthlyUsage;
 use Toby\Infrastructure\Http\Controllers\SelectYearPeriodController;
 use Toby\Infrastructure\Http\Controllers\TimesheetController;
 use Toby\Infrastructure\Http\Controllers\UserController;
@@ -63,6 +64,8 @@ Route::middleware("auth")->group(function (): void {
 
     Route::post("year-periods/{yearPeriod}/select", SelectYearPeriodController::class)
         ->name("year-periods.select");
+
+    Route::get("/monthly-usage", [MonthlyUsage::class, "index"])->name("monthly-usage");
 });
 
 Route::middleware("guest")->group(function (): void {