diff --git a/e2e/time.spec.ts b/e2e/time.spec.ts
new file mode 100644
index 00000000..82e5f5ab
--- /dev/null
+++ b/e2e/time.spec.ts
@@ -0,0 +1,433 @@
+import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
+import { test } from '../playwright/fixtures';
+import { expect, Locator, Page } from '@playwright/test';
+import {
+    assertThatTimerHasStarted,
+    assertThatTimerIsStopped,
+    newTimeEntryResponse,
+    startOrStopTimerWithButton,
+    stoppedTimeEntryResponse,
+} from './utils/currentTimeEntry';
+
+async function goToTimeOverview(page: Page) {
+    await page.goto(PLAYWRIGHT_BASE_URL + '/time');
+}
+
+async function createEmptyTimeEntry(page: Page) {
+    await Promise.all([
+        newTimeEntryResponse(page),
+        startOrStopTimerWithButton(page),
+        assertThatTimerHasStarted(page),
+    ]);
+    await page.waitForTimeout(1500);
+    await Promise.all([
+        stoppedTimeEntryResponse(page),
+        startOrStopTimerWithButton(page),
+        assertThatTimerIsStopped(page),
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/time-entries') &&
+                response.status() === 200
+        ),
+    ]);
+}
+
+test('test that starting and stopping an empty time entry shows a new time entry in the overview', async ({
+    page,
+}) => {
+    await Promise.all([
+        goToTimeOverview(page),
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/time-entries') &&
+                response.status() === 200
+        ),
+    ]);
+
+    // check that there are not testid time_entry_row elements on the page
+    const timeEntryRows = page.locator('[data-testid="time_entry_row"]');
+    const initialTimeEntryCount = await timeEntryRows.count();
+    await createEmptyTimeEntry(page);
+
+    await expect(timeEntryRows).toHaveCount(initialTimeEntryCount + 1);
+});
+
+// Test that description update works
+
+async function assertThatTimeEntryRowIsStopped(newTimeEntry: Locator) {
+    await expect(newTimeEntry.getByTestId('timer_button')).toHaveClass(
+        /bg-accent-300\/50/
+    );
+}
+
+async function assertThatTimeEntryRowIsStarted(newTimeEntry: Locator) {
+    await expect(newTimeEntry.getByTestId('timer_button')).toHaveClass(
+        /bg-red-400\/80/
+    );
+}
+
+test('test that updating a description of a time entry in the overview works on blur', async ({
+    page,
+}) => {
+    await goToTimeOverview(page);
+    const timeEntryRows = page.locator('[data-testid="time_entry_row"]');
+    await createEmptyTimeEntry(page);
+    const newTimeEntry = timeEntryRows.first();
+    await assertThatTimeEntryRowIsStopped(newTimeEntry);
+
+    const newDescription = Math.floor(Math.random() * 1000000).toString();
+    const descriptionElement = newTimeEntry.getByTestId(
+        'time_entry_description'
+    );
+    await descriptionElement.fill(newDescription);
+    await Promise.all([
+        descriptionElement.press('Tab'),
+        page.waitForResponse(async (response) => {
+            return (
+                response.status() === 200 &&
+                (await response.headerValue('Content-Type')) ===
+                    'application/json' &&
+                (await response.json()).data.id !== null &&
+                (await response.json()).data.start !== null &&
+                (await response.json()).data.end !== null &&
+                (await response.json()).data.project_id === null &&
+                (await response.json()).data.description == newDescription &&
+                (await response.json()).data.task_id === null &&
+                (await response.json()).data.duration !== null &&
+                (await response.json()).data.user_id !== null &&
+                JSON.stringify((await response.json()).data.tags) ===
+                    JSON.stringify([])
+            );
+        }),
+    ]);
+});
+
+test('test that updating a description of a time entry in the overview works on enter', async ({
+    page,
+}) => {
+    await goToTimeOverview(page);
+    const timeEntryRows = page.locator('[data-testid="time_entry_row"]');
+    await createEmptyTimeEntry(page);
+
+    const newTimeEntry = timeEntryRows.first();
+    await assertThatTimeEntryRowIsStopped(newTimeEntry);
+    const newDescription = Math.floor(Math.random() * 1000000).toString();
+    const descriptionElement = newTimeEntry.getByTestId(
+        'time_entry_description'
+    );
+    await descriptionElement.fill(newDescription);
+    await Promise.all([
+        descriptionElement.press('Enter'),
+        page.waitForResponse(async (response) => {
+            return (
+                response.status() === 200 &&
+                (await response.headerValue('Content-Type')) ===
+                    'application/json' &&
+                (await response.json()).data.id !== null &&
+                (await response.json()).data.start !== null &&
+                (await response.json()).data.end !== null &&
+                (await response.json()).data.project_id === null &&
+                (await response.json()).data.description == newDescription &&
+                (await response.json()).data.task_id === null &&
+                (await response.json()).data.duration !== null &&
+                (await response.json()).data.user_id !== null &&
+                JSON.stringify((await response.json()).data.tags) ===
+                    JSON.stringify([])
+            );
+        }),
+    ]);
+});
+
+test('test that adding a new tag to an existing time entry works', async ({
+    page,
+}) => {
+    await goToTimeOverview(page);
+    const timeEntryRows = page.locator('[data-testid="time_entry_row"]');
+    await createEmptyTimeEntry(page);
+
+    const newTimeEntry = timeEntryRows.first();
+    await assertThatTimeEntryRowIsStopped(newTimeEntry);
+    const newTagName = Math.floor(Math.random() * 1000000).toString();
+
+    await newTimeEntry.getByTestId('time_entry_tag_dropdown').click();
+    await newTimeEntry.getByTestId('tag_dropdown_search').fill(newTagName);
+
+    const [tagReponse] = await Promise.all([
+        page.waitForResponse(async (response) => {
+            return (
+                response.status() === 201 &&
+                (await response.headerValue('Content-Type')) ===
+                    'application/json' &&
+                (await response.json()).data.name === newTagName
+            );
+        }),
+        newTimeEntry.getByTestId('tag_dropdown_search').press('Enter'),
+    ]);
+
+    await page.waitForResponse(async (response) => {
+        return (
+            response.status() === 200 &&
+            (await response.headerValue('Content-Type')) ===
+            'application/json' &&
+            (await response.json()).data.id !== null &&
+            (await response.json()).data.start !== null &&
+            (await response.json()).data.end !== null &&
+            JSON.stringify((await response.json()).data.tags) ===
+            JSON.stringify([(await tagReponse.json()).data.id])
+        );
+    });
+
+    await expect(newTimeEntry.getByTestId('tag_dropdown_search')).toHaveValue(
+        ''
+    );
+    await expect(
+        newTimeEntry.getByRole('option', { name: newTagName })
+    ).toBeVisible();
+});
+
+// Test that Start / End Time Update Works
+test('test that updating a the start of an existing time entry in the overview works on blur', async ({
+    page,
+}) => {
+    await goToTimeOverview(page);
+    const timeEntryRows = page.locator('[data-testid="time_entry_row"]');
+    await createEmptyTimeEntry(page);
+
+    const newTimeEntry = timeEntryRows.first();
+    await assertThatTimeEntryRowIsStopped(newTimeEntry);
+    await page.waitForTimeout(1500);
+    const timeEntryRangeElement = newTimeEntry.getByTestId(
+        'time_entry_range_selector'
+    );
+    await timeEntryRangeElement.click();
+    await newTimeEntry
+        .getByTestId('time_entry_range_start')
+        .getByTestId('time_picker_hour')
+        .fill('1');
+    await newTimeEntry
+        .getByTestId('time_entry_range_start')
+        .getByTestId('time_picker_minute')
+        .fill('1');
+    await Promise.all([
+        page.waitForResponse(async (response) => {
+            return (
+                response.status() === 200 &&
+                (await response.headerValue('Content-Type')) ===
+                    'application/json' &&
+                (await response.json()).data.id !== null &&
+                // TODO! Actually check the value
+                (await response.json()).data.start !== null &&
+                (await response.json()).data.end !== null
+            );
+        }),
+        newTimeEntry
+            .getByTestId('time_entry_range_end')
+            .getByTestId('time_picker_minute')
+            .press('Tab'),
+    ]);
+});
+
+test('test that updating a the duration in the overview works on blur', async ({
+    page,
+}) => {
+    await goToTimeOverview(page);
+    const timeEntryRows = page.locator('[data-testid="time_entry_row"]');
+    await createEmptyTimeEntry(page);
+
+    const newTimeEntry = timeEntryRows.first();
+    await assertThatTimeEntryRowIsStopped(newTimeEntry);
+    await page.waitForTimeout(1500);
+    const timeEntryDurationInput = newTimeEntry.getByTestId(
+        'time_entry_duration_input'
+    );
+    await timeEntryDurationInput.fill('20min');
+
+    await Promise.all([
+        page.waitForResponse(async (response) => {
+            return (
+                response.status() === 200 &&
+                (await response.headerValue('Content-Type')) ===
+                    'application/json' &&
+                (await response.json()).data.id !== null &&
+                // TODO! Actually check the value
+                (await response.json()).data.start !== null &&
+                (await response.json()).data.end !== null
+            );
+        }),
+        timeEntryDurationInput.press('Tab'),
+    ]);
+
+    await expect(
+        newTimeEntry.getByTestId('time_entry_duration_input')
+    ).toHaveValue('00h 20min');
+});
+
+// Test that start stop button stops running timer
+test('test that stopping a time entry from the overview works', async ({
+    page,
+}) => {
+    await goToTimeOverview(page);
+    const timeEntryRows = page.locator('[data-testid="time_entry_row"]');
+    await Promise.all([
+        newTimeEntryResponse(page),
+        startOrStopTimerWithButton(page),
+        assertThatTimerHasStarted(page),
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/time-entries') &&
+                response.status() === 200
+        ),
+    ]);
+
+    await page.waitForTimeout(1500);
+
+    const newTimeEntry = timeEntryRows.first();
+    const stopButton = newTimeEntry.getByTestId('timer_button');
+    await assertThatTimeEntryRowIsStarted(newTimeEntry);
+
+    await Promise.all([
+        page.waitForResponse(async (response) => {
+            return (
+                response.status() === 200 &&
+                (await response.headerValue('Content-Type')) ===
+                    'application/json' &&
+                (await response.json()).data.id !== null &&
+                (await response.json()).data.start !== null &&
+                (await response.json()).data.end !== null
+            );
+        }),
+        stopButton.click(),
+    ]);
+
+    await expect(newTimeEntry.getByTestId('timer_button')).toHaveClass(
+        /bg-accent-300\/50/
+    );
+});
+
+// Test that start stop button stops running timer
+test('test that starting a time entry from the overview works', async ({
+    page,
+}) => {
+    await goToTimeOverview(page);
+    const timeEntryRows = page.locator('[data-testid="time_entry_row"]');
+    await createEmptyTimeEntry(page);
+
+    const newTimeEntry = timeEntryRows.first();
+    const startButton = newTimeEntry.getByTestId('timer_button');
+    await expect(startButton).toHaveClass(/bg-accent-300\/50/);
+
+    await Promise.all([
+        page.waitForResponse(async (response) => {
+            return (
+                response.status() === 200 &&
+                (await response.headerValue('Content-Type')) ===
+                    'application/json' &&
+                (await response.json()).data.id !== null &&
+                (await response.json()).data.start !== null &&
+                (await response.json()).data.end !== null
+            );
+        }),
+        startButton.click(),
+    ]);
+
+    await expect(startButton).toHaveClass(/bg-red-500\/80/);
+    await page.waitForTimeout(1500);
+    await Promise.all([
+        page.waitForResponse(async (response) => {
+            return (
+                response.status() === 200 &&
+                (await response.headerValue('Content-Type')) ===
+                    'application/json' &&
+                (await response.json()).data.id !== null &&
+                (await response.json()).data.start !== null &&
+                (await response.json()).data.end !== null
+            );
+        }),
+        startOrStopTimerWithButton(page),
+        expect(startButton).toHaveClass(/bg-accent-300\/50/),
+    ]);
+});
+
+test('test that updating a the duration in the overview for a running timer works on blur', async ({
+    page,
+}) => {
+    await goToTimeOverview(page);
+    const timeEntryRows = page.locator('[data-testid="time_entry_row"]');
+
+    await Promise.all([
+        newTimeEntryResponse(page),
+        startOrStopTimerWithButton(page),
+        assertThatTimerHasStarted(page),
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/time-entries') &&
+                response.status() === 200
+        ),
+    ]);
+
+    await page.waitForTimeout(1500);
+
+    const newTimeEntry = timeEntryRows.first();
+    const startButton = newTimeEntry.getByTestId('timer_button');
+    await page.waitForTimeout(1500);
+    const timeEntryDurationInput = newTimeEntry.getByTestId(
+        'time_entry_duration_input'
+    );
+    await timeEntryDurationInput.fill('20min');
+
+    await Promise.all([
+        page.waitForResponse(async (response) => {
+            return (
+                response.status() === 200 &&
+                (await response.headerValue('Content-Type')) ===
+                    'application/json' &&
+                (await response.json()).data.id !== null &&
+                // TODO! Actually check the value
+                (await response.json()).data.start !== null &&
+                (await response.json()).data.end !== null
+            );
+        }),
+        timeEntryDurationInput.press('Tab'),
+    ]);
+
+    await expect(page.getByTestId('time_entry_time')).toHaveValue('00:20:00');
+
+    await Promise.all([
+        page.waitForResponse(async (response) => {
+            return (
+                response.status() === 200 &&
+                (await response.headerValue('Content-Type')) ===
+                    'application/json' &&
+                (await response.json()).data.id !== null &&
+                (await response.json()).data.start !== null &&
+                (await response.json()).data.end !== null
+            );
+        }),
+        startOrStopTimerWithButton(page),
+        expect(startButton).toHaveClass(/bg-accent-300\/50/),
+    ]);
+});
+
+test('test that deleting a time entry from the overview works', async ({
+    page,
+}) => {
+    await goToTimeOverview(page);
+    const timeEntryRows = page.locator('[data-testid="time_entry_row"]');
+    await createEmptyTimeEntry(page);
+    const timeEntryCount = await timeEntryRows.count();
+
+    const newTimeEntry = timeEntryRows.first();
+    const actionsDropdown = newTimeEntry.getByTestId('time_entry_actions');
+    await actionsDropdown.click();
+    const deleteButton = newTimeEntry.getByTestId('time_entry_delete');
+    await deleteButton.click();
+    await expect(timeEntryRows).toHaveCount(timeEntryCount - 1);
+});
+
+// TODO: Test that updating the time entry start / end times works while it is running
+
+// TODO: Test for project update
+
+// TODO: Test for resume button click works with project / task
+
+// TODO: Test that time entries are loaded at the end of the page
diff --git a/e2e/timetracker.spec.ts b/e2e/timetracker.spec.ts
index 06cebfd0..7701a682 100644
--- a/e2e/timetracker.spec.ts
+++ b/e2e/timetracker.spec.ts
@@ -1,75 +1,29 @@
 import { expect, test } from '../playwright/fixtures';
 import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
+import {
+    assertThatTimerHasStarted,
+    assertThatTimerIsStopped,
+    newTimeEntryResponse,
+    startOrStopTimerWithButton,
+    stoppedTimeEntryResponse,
+} from './utils/currentTimeEntry';
 
 async function goToDashboard(page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/dashboard');
 }
 
-async function startOrStopTimerWithButton(page) {
-    await page
-        .locator('[data-testid="dashboard_timer"] [data-testid="timer_button"]')
-        .click();
-}
-
-async function assertThatTimerHasStarted(page) {
-    await page.locator(
-        '[data-testid="dashboard_timer"] [data-testid="timer_button"].bg-red-400/80'
-    );
-}
-
-function newTimeEntryResponse(page) {
-    return page.waitForResponse(async (response) => {
-        return (
-            response.status() === 201 &&
-            (await response.headerValue('Content-Type')) ===
-                'application/json' &&
-            (await response.json()).data.id !== null &&
-            (await response.json()).data.start !== null &&
-            (await response.json()).data.end === null &&
-            (await response.json()).data.project_id === null &&
-            (await response.json()).data.description === '' &&
-            (await response.json()).data.task_id === null &&
-            (await response.json()).data.duration === null &&
-            (await response.json()).data.user_id !== null &&
-            JSON.stringify((await response.json()).data.tags) ===
-                JSON.stringify([])
-        );
-    });
-}
-
-async function assertThatTimerIsStopped(page) {
-    await page.locator(
-        '[data-testid="dashboard_timer"] [data-testid="timer_button"].bg-accent-300/70'
-    );
-}
-
 test('test that starting and stopping a timer without description and project works', async ({
     page,
 }) => {
     await goToDashboard(page);
-    const newTimeEntryPromise = newTimeEntryResponse(page);
-    await startOrStopTimerWithButton(page);
-    await newTimeEntryPromise;
-    await assertThatTimerHasStarted(page);
+    await Promise.all([
+        newTimeEntryResponse(page),
+        startOrStopTimerWithButton(page),
+        assertThatTimerHasStarted(page),
+    ]);
     await page.waitForTimeout(1500);
     await Promise.all([
-        page.waitForResponse(async (response) => {
-            return (
-                response.status() === 200 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
-                (await response.json()).data.id !== null &&
-                (await response.json()).data.start !== null &&
-                (await response.json()).data.end !== null &&
-                (await response.json()).data.project_id === null &&
-                (await response.json()).data.description === '' &&
-                (await response.json()).data.task_id === null &&
-                (await response.json()).data.duration !== null &&
-                (await response.json()).data.user_id !== null &&
-                JSON.stringify((await response.json()).data.tags) ===
-                    JSON.stringify([])
-            );
-        }),
+        stoppedTimeEntryResponse(page),
         startOrStopTimerWithButton(page),
     ]);
     await assertThatTimerIsStopped(page);
@@ -471,6 +425,12 @@ test('test that adding a new tag when the timer is running', async ({
     await assertThatTimerIsStopped(page);
 });
 
-// test that adding a new tag when the timer is running
-
 // test that search is working
+
+// test that adding a tag and project and starting the timer afterwards works and sets the project and tag correctly
+
+// test that changing the project works
+
+// test that sidebar timetracker starts and stops timer
+
+// test that sidebar timetracker changes state when tmer on dashboard is started
diff --git a/e2e/utils/currentTimeEntry.ts b/e2e/utils/currentTimeEntry.ts
new file mode 100644
index 00000000..c64ccf99
--- /dev/null
+++ b/e2e/utils/currentTimeEntry.ts
@@ -0,0 +1,61 @@
+import { expect, Page } from '@playwright/test';
+
+export async function startOrStopTimerWithButton(page: Page) {
+    await page
+        .locator('[data-testid="dashboard_timer"] [data-testid="timer_button"]')
+        .click();
+}
+
+export async function assertThatTimerHasStarted(page: Page) {
+    await page.locator(
+        '[data-testid="dashboard_timer"] [data-testid="timer_button"].bg-red-400/80'
+    );
+}
+
+export function newTimeEntryResponse(page: Page) {
+    return page.waitForResponse(async (response) => {
+        return (
+            response.status() === 201 &&
+            (await response.headerValue('Content-Type')) ===
+                'application/json' &&
+            (await response.json()).data.id !== null &&
+            (await response.json()).data.start !== null &&
+            (await response.json()).data.end === null &&
+            (await response.json()).data.project_id === null &&
+            (await response.json()).data.description === '' &&
+            (await response.json()).data.task_id === null &&
+            (await response.json()).data.duration === null &&
+            (await response.json()).data.user_id !== null &&
+            JSON.stringify((await response.json()).data.tags) ===
+                JSON.stringify([])
+        );
+    });
+}
+
+export async function assertThatTimerIsStopped(page: Page) {
+    await expect(
+        page.locator(
+            '[data-testid="dashboard_timer"] [data-testid="timer_button"]'
+        )
+    ).toHaveClass(/bg-accent-300\/50/);
+}
+
+export async function stoppedTimeEntryResponse(page: Page) {
+    return page.waitForResponse(async (response) => {
+        return (
+            response.status() === 200 &&
+            (await response.headerValue('Content-Type')) ===
+                'application/json' &&
+            (await response.json()).data.id !== null &&
+            (await response.json()).data.start !== null &&
+            (await response.json()).data.end !== null &&
+            (await response.json()).data.project_id === null &&
+            (await response.json()).data.description === '' &&
+            (await response.json()).data.task_id === null &&
+            (await response.json()).data.duration !== null &&
+            (await response.json()).data.user_id !== null &&
+            JSON.stringify((await response.json()).data.tags) ===
+                JSON.stringify([])
+        );
+    });
+}
diff --git a/openapi.json.client.ts b/openapi.json.client.ts
index 5b7b3add..154762a2 100644
--- a/openapi.json.client.ts
+++ b/openapi.json.client.ts
@@ -13,6 +13,16 @@ const ClientCollection = z.array(ClientResource);
 const v1_import_import_Body = z
     .object({ type: z.string(), data: z.string() })
     .passthrough();
+const MemberResource = z
+    .object({
+        id: z.string(),
+        name: z.string(),
+        email: z.string(),
+        role: z.string(),
+        is_placeholder: z.boolean(),
+    })
+    .passthrough();
+const MemberCollection = z.array(MemberResource);
 const OrganizationResource = z
     .object({ id: z.string(), name: z.string(), is_personal: z.string() })
     .passthrough();
@@ -53,43 +63,40 @@ const TimeEntryResource = z
         project_id: z.union([z.string(), z.null()]),
         user_id: z.string(),
         tags: z.array(z.string()),
+        billable: z.boolean(),
     })
     .passthrough();
 const TimeEntryCollection = z.array(TimeEntryResource);
 const createTimeEntry_Body = z
     .object({
         user_id: z.string().uuid(),
+        project_id: z.union([z.string(), z.null()]).optional(),
         task_id: z.union([z.string(), z.null()]).optional(),
         start: z.string(),
         end: z.union([z.string(), z.null()]).optional(),
+        billable: z.boolean(),
         description: z.union([z.string(), z.null()]).optional(),
         tags: z.union([z.array(z.string()), z.null()]).optional(),
     })
     .passthrough();
 const updateTimeEntry_Body = z
     .object({
+        project_id: z.union([z.string(), z.null()]).optional(),
         task_id: z.union([z.string(), z.null()]).optional(),
         start: z.string(),
         end: z.union([z.string(), z.null()]).optional(),
+        billable: z.boolean().optional(),
         description: z.union([z.string(), z.null()]).optional(),
         tags: z.union([z.array(z.string()), z.null()]).optional(),
     })
     .passthrough();
-const UserResource = z
-    .object({
-        id: z.string(),
-        name: z.string(),
-        email: z.string(),
-        role: z.string(),
-        is_placeholder: z.boolean(),
-    })
-    .passthrough();
-const UserCollection = z.array(UserResource);
 
 export const schemas = {
     ClientResource,
     ClientCollection,
     v1_import_import_Body,
+    MemberResource,
+    MemberCollection,
     OrganizationResource,
     ProjectResource,
     ProjectCollection,
@@ -101,8 +108,6 @@ export const schemas = {
     TimeEntryCollection,
     createTimeEntry_Body,
     updateTimeEntry_Body,
-    UserResource,
-    UserCollection,
 };
 
 const endpoints = makeApi([
@@ -392,6 +397,89 @@ const endpoints = makeApi([
             },
         ],
     },
+    {
+        method: 'get',
+        path: '/v1/organizations/:organization/members',
+        alias: 'v1.users.index',
+        requestFormat: 'json',
+        parameters: [
+            {
+                name: 'organization',
+                type: 'Path',
+                schema: z.string().uuid(),
+            },
+        ],
+        response: z.object({ data: MemberCollection }).passthrough(),
+        errors: [
+            {
+                status: 403,
+                description: `Authorization error`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+            {
+                status: 404,
+                description: `Not found`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+            {
+                status: 422,
+                description: `Validation error`,
+                schema: z
+                    .object({
+                        message: z.string(),
+                        errors: z.record(z.array(z.string())),
+                    })
+                    .passthrough(),
+            },
+        ],
+    },
+    {
+        method: 'post',
+        path: '/v1/organizations/:organization/members/:user/invite-placeholder',
+        alias: 'v1.users.invite-placeholder',
+        requestFormat: 'json',
+        parameters: [
+            {
+                name: 'body',
+                type: 'Body',
+                schema: z.object({}).partial().passthrough(),
+            },
+            {
+                name: 'organization',
+                type: 'Path',
+                schema: z.string().uuid(),
+            },
+            {
+                name: 'user',
+                type: 'Path',
+                schema: z.string().uuid(),
+            },
+        ],
+        response: z.null(),
+        errors: [
+            {
+                status: 400,
+                description: `API exception`,
+                schema: z
+                    .object({
+                        error: z.boolean(),
+                        key: z.string(),
+                        message: z.string(),
+                    })
+                    .passthrough(),
+            },
+            {
+                status: 403,
+                description: `Authorization error`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+            {
+                status: 404,
+                description: `Not found`,
+                schema: z.object({ message: z.string() }).passthrough(),
+            },
+        ],
+    },
     {
         method: 'get',
         path: '/v1/organizations/:organization/projects',
@@ -806,6 +894,17 @@ const endpoints = makeApi([
         ],
         response: z.object({ data: TimeEntryResource }).passthrough(),
         errors: [
+            {
+                status: 400,
+                description: `API exception`,
+                schema: z
+                    .object({
+                        error: z.boolean(),
+                        key: z.string(),
+                        message: z.string(),
+                    })
+                    .passthrough(),
+            },
             {
                 status: 403,
                 description: `Authorization error`,
@@ -910,78 +1009,6 @@ const endpoints = makeApi([
             },
         ],
     },
-    {
-        method: 'get',
-        path: '/v1/organizations/:organization/users',
-        alias: 'v1.users.index',
-        requestFormat: 'json',
-        parameters: [
-            {
-                name: 'organization',
-                type: 'Path',
-                schema: z.string().uuid(),
-            },
-        ],
-        response: z.object({ data: UserCollection }).passthrough(),
-        errors: [
-            {
-                status: 403,
-                description: `Authorization error`,
-                schema: z.object({ message: z.string() }).passthrough(),
-            },
-            {
-                status: 404,
-                description: `Not found`,
-                schema: z.object({ message: z.string() }).passthrough(),
-            },
-            {
-                status: 422,
-                description: `Validation error`,
-                schema: z
-                    .object({
-                        message: z.string(),
-                        errors: z.record(z.array(z.string())),
-                    })
-                    .passthrough(),
-            },
-        ],
-    },
-    {
-        method: 'post',
-        path: '/v1/organizations/:organization/users/:user/invite-placeholder',
-        alias: 'v1.users.invite-placeholder',
-        requestFormat: 'json',
-        parameters: [
-            {
-                name: 'body',
-                type: 'Body',
-                schema: z.object({}).partial().passthrough(),
-            },
-            {
-                name: 'organization',
-                type: 'Path',
-                schema: z.string().uuid(),
-            },
-            {
-                name: 'user',
-                type: 'Path',
-                schema: z.string().uuid(),
-            },
-        ],
-        response: z.string(),
-        errors: [
-            {
-                status: 403,
-                description: `Authorization error`,
-                schema: z.object({ message: z.string() }).passthrough(),
-            },
-            {
-                status: 404,
-                description: `Not found`,
-                schema: z.object({ message: z.string() }).passthrough(),
-            },
-        ],
-    },
 ]);
 
 export const api = new Zodios('/api', endpoints);
diff --git a/package-lock.json b/package-lock.json
index 496c0b7a..b58c4bf4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,13 +7,15 @@
             "dependencies": {
                 "@heroicons/vue": "^2.1.1",
                 "@rushstack/eslint-patch": "^1.7.0",
+                "@tailwindcss/container-queries": "^0.1.1",
                 "@vue/eslint-config-prettier": "^9.0.0",
-                "@vue/eslint-config-typescript": "^12.0.0",
+                "@vue/eslint-config-typescript": "^13.0.0",
+                "@vueuse/core": "^10.9.0",
                 "dayjs": "^1.11.10",
                 "echarts": "^5.5.0",
                 "parse-duration": "^1.1.0",
                 "pinia": "^2.1.7",
-                "radix-vue": "^1.4.9",
+                "radix-vue": "^1.5.2",
                 "tailwind-merge": "^2.2.1",
                 "vue-echarts": "^6.6.9"
             },
@@ -30,11 +32,12 @@
                 "laravel-vite-plugin": "^1.0.0",
                 "openapi-zod-client": "^1.16.2",
                 "postcss": "^8.4.14",
+                "postcss-nesting": "^12.1.0",
                 "tailwindcss": "^3.1.0",
                 "typescript": "^5.3.3",
                 "vite": "^5.0.0",
                 "vite-plugin-checker": "^0.6.2",
-                "vue": "^3.2.31",
+                "vue": "^3.4.0",
                 "vue-tsc": "^1.8.27",
                 "ziggy-js": "^1.8.1"
             }
@@ -52,7 +55,6 @@
             "version": "5.2.0",
             "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
             "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-            "dev": true,
             "engines": {
                 "node": ">=10"
             },
@@ -176,113 +178,42 @@
             "dev": true
         },
         "node_modules/@babel/code-frame": {
-            "version": "7.23.5",
-            "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
-            "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
+            "version": "7.24.2",
+            "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
+            "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==",
             "dev": true,
             "dependencies": {
-                "@babel/highlight": "^7.23.4",
-                "chalk": "^2.4.2"
+                "@babel/highlight": "^7.24.2",
+                "picocolors": "^1.0.0"
             },
             "engines": {
                 "node": ">=6.9.0"
             }
         },
-        "node_modules/@babel/code-frame/node_modules/ansi-styles": {
-            "version": "3.2.1",
-            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-            "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-            "dev": true,
-            "dependencies": {
-                "color-convert": "^1.9.0"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/@babel/code-frame/node_modules/chalk": {
-            "version": "2.4.2",
-            "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-            "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-            "dev": true,
-            "dependencies": {
-                "ansi-styles": "^3.2.1",
-                "escape-string-regexp": "^1.0.5",
-                "supports-color": "^5.3.0"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/@babel/code-frame/node_modules/color-convert": {
-            "version": "1.9.3",
-            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-            "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-            "dev": true,
-            "dependencies": {
-                "color-name": "1.1.3"
-            }
-        },
-        "node_modules/@babel/code-frame/node_modules/color-name": {
-            "version": "1.1.3",
-            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-            "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-            "dev": true
-        },
-        "node_modules/@babel/code-frame/node_modules/escape-string-regexp": {
-            "version": "1.0.5",
-            "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-            "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-            "dev": true,
-            "engines": {
-                "node": ">=0.8.0"
-            }
-        },
-        "node_modules/@babel/code-frame/node_modules/has-flag": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-            "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-            "dev": true,
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/@babel/code-frame/node_modules/supports-color": {
-            "version": "5.5.0",
-            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-            "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-            "dev": true,
-            "dependencies": {
-                "has-flag": "^3.0.0"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
         "node_modules/@babel/compat-data": {
-            "version": "7.23.5",
-            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz",
-            "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==",
+            "version": "7.24.1",
+            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.1.tgz",
+            "integrity": "sha512-Pc65opHDliVpRHuKfzI+gSA4zcgr65O4cl64fFJIWEEh8JoHIHh0Oez1Eo8Arz8zq/JhgKodQaxEwUPRtZylVA==",
             "dev": true,
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/core": {
-            "version": "7.24.0",
-            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.0.tgz",
-            "integrity": "sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==",
+            "version": "7.24.3",
+            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.3.tgz",
+            "integrity": "sha512-5FcvN1JHw2sHJChotgx8Ek0lyuh4kCKelgMTTqhYJJtloNvUfpAFMeNQUtdlIaktwrSV9LtCdqwk48wL2wBacQ==",
             "dev": true,
             "dependencies": {
                 "@ampproject/remapping": "^2.2.0",
-                "@babel/code-frame": "^7.23.5",
-                "@babel/generator": "^7.23.6",
+                "@babel/code-frame": "^7.24.2",
+                "@babel/generator": "^7.24.1",
                 "@babel/helper-compilation-targets": "^7.23.6",
                 "@babel/helper-module-transforms": "^7.23.3",
-                "@babel/helpers": "^7.24.0",
-                "@babel/parser": "^7.24.0",
+                "@babel/helpers": "^7.24.1",
+                "@babel/parser": "^7.24.1",
                 "@babel/template": "^7.24.0",
-                "@babel/traverse": "^7.24.0",
+                "@babel/traverse": "^7.24.1",
                 "@babel/types": "^7.24.0",
                 "convert-source-map": "^2.0.0",
                 "debug": "^4.1.0",
@@ -308,14 +239,14 @@
             }
         },
         "node_modules/@babel/generator": {
-            "version": "7.23.6",
-            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
-            "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
+            "version": "7.24.1",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.1.tgz",
+            "integrity": "sha512-DfCRfZsBcrPEHUfuBMgbJ1Ut01Y/itOs+hY2nFLgqsqXd52/iSiVq5TITtUasIUgm+IIKdY2/1I7auiQOEeC9A==",
             "dev": true,
             "dependencies": {
-                "@babel/types": "^7.23.6",
-                "@jridgewell/gen-mapping": "^0.3.2",
-                "@jridgewell/trace-mapping": "^0.3.17",
+                "@babel/types": "^7.24.0",
+                "@jridgewell/gen-mapping": "^0.3.5",
+                "@jridgewell/trace-mapping": "^0.3.25",
                 "jsesc": "^2.5.1"
             },
             "engines": {
@@ -382,12 +313,12 @@
             }
         },
         "node_modules/@babel/helper-module-imports": {
-            "version": "7.22.15",
-            "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
-            "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+            "version": "7.24.3",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz",
+            "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==",
             "dev": true,
             "dependencies": {
-                "@babel/types": "^7.22.15"
+                "@babel/types": "^7.24.0"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -437,9 +368,9 @@
             }
         },
         "node_modules/@babel/helper-string-parser": {
-            "version": "7.23.4",
-            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
-            "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
+            "version": "7.24.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz",
+            "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==",
             "dev": true,
             "engines": {
                 "node": ">=6.9.0"
@@ -464,13 +395,13 @@
             }
         },
         "node_modules/@babel/helpers": {
-            "version": "7.24.0",
-            "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.0.tgz",
-            "integrity": "sha512-ulDZdc0Aj5uLc5nETsa7EPx2L7rM0YJM8r7ck7U73AXi7qOV44IHHRAYZHY6iU1rr3C5N4NtTmMRUJP6kwCWeA==",
+            "version": "7.24.1",
+            "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.1.tgz",
+            "integrity": "sha512-BpU09QqEe6ZCHuIHFphEFgvNSrubve1FtyMton26ekZ85gRGi6LrTF7zArARp2YvyFxloeiRmtSCq5sjh1WqIg==",
             "dev": true,
             "dependencies": {
                 "@babel/template": "^7.24.0",
-                "@babel/traverse": "^7.24.0",
+                "@babel/traverse": "^7.24.1",
                 "@babel/types": "^7.24.0"
             },
             "engines": {
@@ -478,14 +409,15 @@
             }
         },
         "node_modules/@babel/highlight": {
-            "version": "7.23.4",
-            "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
-            "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
+            "version": "7.24.2",
+            "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.2.tgz",
+            "integrity": "sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==",
             "dev": true,
             "dependencies": {
                 "@babel/helper-validator-identifier": "^7.22.20",
                 "chalk": "^2.4.2",
-                "js-tokens": "^4.0.0"
+                "js-tokens": "^4.0.0",
+                "picocolors": "^1.0.0"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -563,9 +495,9 @@
             }
         },
         "node_modules/@babel/parser": {
-            "version": "7.24.0",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz",
-            "integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==",
+            "version": "7.24.1",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.1.tgz",
+            "integrity": "sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==",
             "bin": {
                 "parser": "bin/babel-parser.js"
             },
@@ -574,9 +506,9 @@
             }
         },
         "node_modules/@babel/runtime": {
-            "version": "7.24.0",
-            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz",
-            "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==",
+            "version": "7.24.1",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz",
+            "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==",
             "dependencies": {
                 "regenerator-runtime": "^0.14.0"
             },
@@ -599,18 +531,18 @@
             }
         },
         "node_modules/@babel/traverse": {
-            "version": "7.24.0",
-            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.0.tgz",
-            "integrity": "sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==",
+            "version": "7.24.1",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.1.tgz",
+            "integrity": "sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==",
             "dev": true,
             "dependencies": {
-                "@babel/code-frame": "^7.23.5",
-                "@babel/generator": "^7.23.6",
+                "@babel/code-frame": "^7.24.1",
+                "@babel/generator": "^7.24.1",
                 "@babel/helper-environment-visitor": "^7.22.20",
                 "@babel/helper-function-name": "^7.23.0",
                 "@babel/helper-hoist-variables": "^7.22.5",
                 "@babel/helper-split-export-declaration": "^7.22.6",
-                "@babel/parser": "^7.24.0",
+                "@babel/parser": "^7.24.1",
                 "@babel/types": "^7.24.0",
                 "debug": "^4.3.1",
                 "globals": "^11.1.0"
@@ -643,9 +575,9 @@
             }
         },
         "node_modules/@esbuild/aix-ppc64": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
-            "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+            "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
             "cpu": [
                 "ppc64"
             ],
@@ -659,9 +591,9 @@
             }
         },
         "node_modules/@esbuild/android-arm": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz",
-            "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+            "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
             "cpu": [
                 "arm"
             ],
@@ -675,9 +607,9 @@
             }
         },
         "node_modules/@esbuild/android-arm64": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz",
-            "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+            "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
             "cpu": [
                 "arm64"
             ],
@@ -691,9 +623,9 @@
             }
         },
         "node_modules/@esbuild/android-x64": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz",
-            "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+            "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
             "cpu": [
                 "x64"
             ],
@@ -707,9 +639,9 @@
             }
         },
         "node_modules/@esbuild/darwin-arm64": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz",
-            "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+            "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
             "cpu": [
                 "arm64"
             ],
@@ -723,9 +655,9 @@
             }
         },
         "node_modules/@esbuild/darwin-x64": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz",
-            "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+            "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
             "cpu": [
                 "x64"
             ],
@@ -739,9 +671,9 @@
             }
         },
         "node_modules/@esbuild/freebsd-arm64": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz",
-            "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+            "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
             "cpu": [
                 "arm64"
             ],
@@ -755,9 +687,9 @@
             }
         },
         "node_modules/@esbuild/freebsd-x64": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz",
-            "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+            "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
             "cpu": [
                 "x64"
             ],
@@ -771,9 +703,9 @@
             }
         },
         "node_modules/@esbuild/linux-arm": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz",
-            "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+            "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
             "cpu": [
                 "arm"
             ],
@@ -787,9 +719,9 @@
             }
         },
         "node_modules/@esbuild/linux-arm64": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz",
-            "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+            "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
             "cpu": [
                 "arm64"
             ],
@@ -803,9 +735,9 @@
             }
         },
         "node_modules/@esbuild/linux-ia32": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz",
-            "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+            "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
             "cpu": [
                 "ia32"
             ],
@@ -819,9 +751,9 @@
             }
         },
         "node_modules/@esbuild/linux-loong64": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz",
-            "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+            "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
             "cpu": [
                 "loong64"
             ],
@@ -835,9 +767,9 @@
             }
         },
         "node_modules/@esbuild/linux-mips64el": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz",
-            "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+            "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
             "cpu": [
                 "mips64el"
             ],
@@ -851,9 +783,9 @@
             }
         },
         "node_modules/@esbuild/linux-ppc64": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz",
-            "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+            "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
             "cpu": [
                 "ppc64"
             ],
@@ -867,9 +799,9 @@
             }
         },
         "node_modules/@esbuild/linux-riscv64": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz",
-            "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+            "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
             "cpu": [
                 "riscv64"
             ],
@@ -883,9 +815,9 @@
             }
         },
         "node_modules/@esbuild/linux-s390x": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz",
-            "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+            "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
             "cpu": [
                 "s390x"
             ],
@@ -899,9 +831,9 @@
             }
         },
         "node_modules/@esbuild/linux-x64": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz",
-            "integrity": "sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+            "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
             "cpu": [
                 "x64"
             ],
@@ -915,9 +847,9 @@
             }
         },
         "node_modules/@esbuild/netbsd-x64": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz",
-            "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+            "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
             "cpu": [
                 "x64"
             ],
@@ -931,9 +863,9 @@
             }
         },
         "node_modules/@esbuild/openbsd-x64": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz",
-            "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+            "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
             "cpu": [
                 "x64"
             ],
@@ -947,9 +879,9 @@
             }
         },
         "node_modules/@esbuild/sunos-x64": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz",
-            "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+            "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
             "cpu": [
                 "x64"
             ],
@@ -963,9 +895,9 @@
             }
         },
         "node_modules/@esbuild/win32-arm64": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz",
-            "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+            "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
             "cpu": [
                 "arm64"
             ],
@@ -979,9 +911,9 @@
             }
         },
         "node_modules/@esbuild/win32-ia32": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz",
-            "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+            "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
             "cpu": [
                 "ia32"
             ],
@@ -995,9 +927,9 @@
             }
         },
         "node_modules/@esbuild/win32-x64": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz",
-            "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+            "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
             "cpu": [
                 "x64"
             ],
@@ -1144,9 +1076,9 @@
             }
         },
         "node_modules/@heroicons/vue": {
-            "version": "2.1.1",
-            "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.1.1.tgz",
-            "integrity": "sha512-Yi5nh/89L193ALgHyJUQUdNLsKXPrrE3yj5yiR8WAlo7nZyXGxGauQcEAmBsa2XJGMhBMuEdoOiuZ8wEwTBxVQ==",
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.1.3.tgz",
+            "integrity": "sha512-CP4ipIwFbV4NEn8ULUCN110wkV0wZq6dsViDL3HwgIh+jn5yQGlRm6QaRN+Mv+o+UsUBbRDei3Je/q0NZHf5Gg==",
             "peerDependencies": {
                 "vue": ">= 3"
             }
@@ -1244,7 +1176,6 @@
             "version": "8.0.2",
             "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
             "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-            "dev": true,
             "dependencies": {
                 "string-width": "^5.1.2",
                 "string-width-cjs": "npm:string-width@^4.2.0",
@@ -1261,7 +1192,6 @@
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
             "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-            "dev": true,
             "engines": {
                 "node": ">=12"
             },
@@ -1273,7 +1203,6 @@
             "version": "7.1.0",
             "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
             "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-            "dev": true,
             "dependencies": {
                 "ansi-regex": "^6.0.1"
             },
@@ -1288,7 +1217,6 @@
             "version": "0.3.5",
             "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
             "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-            "dev": true,
             "dependencies": {
                 "@jridgewell/set-array": "^1.2.1",
                 "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -1302,7 +1230,6 @@
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
             "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-            "dev": true,
             "engines": {
                 "node": ">=6.0.0"
             }
@@ -1311,7 +1238,6 @@
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
             "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-            "dev": true,
             "engines": {
                 "node": ">=6.0.0"
             }
@@ -1325,7 +1251,6 @@
             "version": "0.3.25",
             "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
             "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-            "dev": true,
             "dependencies": {
                 "@jridgewell/resolve-uri": "^3.1.0",
                 "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -1383,7 +1308,6 @@
             "version": "0.11.0",
             "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
             "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-            "dev": true,
             "optional": true,
             "engines": {
                 "node": ">=14"
@@ -1585,14 +1509,14 @@
             ]
         },
         "node_modules/@rushstack/eslint-patch": {
-            "version": "1.7.2",
-            "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.7.2.tgz",
-            "integrity": "sha512-RbhOOTCNoCrbfkRyoXODZp75MlpiHMgbE5MEBZAnnnLyQNgrigEj4p0lzsMDyc1zVsJDLrivB58tgg3emX0eEA=="
+            "version": "1.8.0",
+            "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.8.0.tgz",
+            "integrity": "sha512-0HejFckBN2W+ucM6cUOlwsByTKt9/+0tWhqUffNIcHqCXkthY/mZ7AuYPK/2IIaGWhdl0h+tICDO0ssLMd6XMQ=="
         },
         "node_modules/@swc/helpers": {
-            "version": "0.5.6",
-            "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.6.tgz",
-            "integrity": "sha512-aYX01Ke9hunpoCexYAgQucEpARGQ5w/cqHFrIR+e9gdKb1QWTsVJuTJ2ozQzIAxLyRQe/m+2RqzkyOOGiMKRQA==",
+            "version": "0.5.7",
+            "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.7.tgz",
+            "integrity": "sha512-BVvNZhx362+l2tSwSuyEUV4h7+jk9raNdoTSdLfwTshXJSaGmYKluGRJznziCI3KX02Z19DdsQrdfrpXAU3Hfg==",
             "dependencies": {
                 "tslib": "^2.4.0"
             }
@@ -1602,6 +1526,14 @@
             "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
             "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
         },
+        "node_modules/@tailwindcss/container-queries": {
+            "version": "0.1.1",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/container-queries/-/container-queries-0.1.1.tgz",
+            "integrity": "sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==",
+            "peerDependencies": {
+                "tailwindcss": ">=3.2.0"
+            }
+        },
         "node_modules/@tailwindcss/forms": {
             "version": "0.5.7",
             "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
@@ -1615,9 +1547,9 @@
             }
         },
         "node_modules/@tailwindcss/typography": {
-            "version": "0.5.10",
-            "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
-            "integrity": "sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==",
+            "version": "0.5.11",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.11.tgz",
+            "integrity": "sha512-ahOULqBQGCdSqL3vMNjH1R5cU2gxTh059fJIKF2enHXE8c/s3yKGDSKZ1+4poCr7BZRREJS8n5cCFmwsW4Ok3A==",
             "dev": true,
             "dependencies": {
                 "lodash.castarray": "^4.4.0",
@@ -1650,9 +1582,9 @@
             "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="
         },
         "node_modules/@types/node": {
-            "version": "20.11.27",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.27.tgz",
-            "integrity": "sha512-qyUZfMnCg1KEz57r7pzFtSGt49f6RPkPBis3Vo4PbS7roQEDn22hiHzl/Lo1q4i4hDEgBJmBF/NTNg2XR0HbFg==",
+            "version": "20.11.30",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.30.tgz",
+            "integrity": "sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==",
             "dev": true,
             "dependencies": {
                 "undici-types": "~5.26.4"
@@ -1663,16 +1595,21 @@
             "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
             "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ=="
         },
+        "node_modules/@types/web-bluetooth": {
+            "version": "0.0.20",
+            "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+            "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+        },
         "node_modules/@typescript-eslint/eslint-plugin": {
-            "version": "6.21.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz",
-            "integrity": "sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==",
+            "version": "7.4.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.4.0.tgz",
+            "integrity": "sha512-yHMQ/oFaM7HZdVrVm/M2WHaNPgyuJH4WelkSVEWSSsir34kxW2kDJCxlXRhhGWEsMN0WAW/vLpKfKVcm8k+MPw==",
             "dependencies": {
                 "@eslint-community/regexpp": "^4.5.1",
-                "@typescript-eslint/scope-manager": "6.21.0",
-                "@typescript-eslint/type-utils": "6.21.0",
-                "@typescript-eslint/utils": "6.21.0",
-                "@typescript-eslint/visitor-keys": "6.21.0",
+                "@typescript-eslint/scope-manager": "7.4.0",
+                "@typescript-eslint/type-utils": "7.4.0",
+                "@typescript-eslint/utils": "7.4.0",
+                "@typescript-eslint/visitor-keys": "7.4.0",
                 "debug": "^4.3.4",
                 "graphemer": "^1.4.0",
                 "ignore": "^5.2.4",
@@ -1681,15 +1618,15 @@
                 "ts-api-utils": "^1.0.1"
             },
             "engines": {
-                "node": "^16.0.0 || >=18.0.0"
+                "node": "^18.18.0 || >=20.0.0"
             },
             "funding": {
                 "type": "opencollective",
                 "url": "https://opencollective.com/typescript-eslint"
             },
             "peerDependencies": {
-                "@typescript-eslint/parser": "^6.0.0 || ^6.0.0-alpha",
-                "eslint": "^7.0.0 || ^8.0.0"
+                "@typescript-eslint/parser": "^7.0.0",
+                "eslint": "^8.56.0"
             },
             "peerDependenciesMeta": {
                 "typescript": {
@@ -1698,25 +1635,25 @@
             }
         },
         "node_modules/@typescript-eslint/parser": {
-            "version": "6.21.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz",
-            "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
-            "dependencies": {
-                "@typescript-eslint/scope-manager": "6.21.0",
-                "@typescript-eslint/types": "6.21.0",
-                "@typescript-eslint/typescript-estree": "6.21.0",
-                "@typescript-eslint/visitor-keys": "6.21.0",
+            "version": "7.4.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.4.0.tgz",
+            "integrity": "sha512-ZvKHxHLusweEUVwrGRXXUVzFgnWhigo4JurEj0dGF1tbcGh6buL+ejDdjxOQxv6ytcY1uhun1p2sm8iWStlgLQ==",
+            "dependencies": {
+                "@typescript-eslint/scope-manager": "7.4.0",
+                "@typescript-eslint/types": "7.4.0",
+                "@typescript-eslint/typescript-estree": "7.4.0",
+                "@typescript-eslint/visitor-keys": "7.4.0",
                 "debug": "^4.3.4"
             },
             "engines": {
-                "node": "^16.0.0 || >=18.0.0"
+                "node": "^18.18.0 || >=20.0.0"
             },
             "funding": {
                 "type": "opencollective",
                 "url": "https://opencollective.com/typescript-eslint"
             },
             "peerDependencies": {
-                "eslint": "^7.0.0 || ^8.0.0"
+                "eslint": "^8.56.0"
             },
             "peerDependenciesMeta": {
                 "typescript": {
@@ -1725,15 +1662,15 @@
             }
         },
         "node_modules/@typescript-eslint/scope-manager": {
-            "version": "6.21.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz",
-            "integrity": "sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==",
+            "version": "7.4.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.4.0.tgz",
+            "integrity": "sha512-68VqENG5HK27ypafqLVs8qO+RkNc7TezCduYrx8YJpXq2QGZ30vmNZGJJJC48+MVn4G2dCV8m5ZTVnzRexTVtw==",
             "dependencies": {
-                "@typescript-eslint/types": "6.21.0",
-                "@typescript-eslint/visitor-keys": "6.21.0"
+                "@typescript-eslint/types": "7.4.0",
+                "@typescript-eslint/visitor-keys": "7.4.0"
             },
             "engines": {
-                "node": "^16.0.0 || >=18.0.0"
+                "node": "^18.18.0 || >=20.0.0"
             },
             "funding": {
                 "type": "opencollective",
@@ -1741,24 +1678,24 @@
             }
         },
         "node_modules/@typescript-eslint/type-utils": {
-            "version": "6.21.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.21.0.tgz",
-            "integrity": "sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==",
+            "version": "7.4.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.4.0.tgz",
+            "integrity": "sha512-247ETeHgr9WTRMqHbbQdzwzhuyaJ8dPTuyuUEMANqzMRB1rj/9qFIuIXK7l0FX9i9FXbHeBQl/4uz6mYuCE7Aw==",
             "dependencies": {
-                "@typescript-eslint/typescript-estree": "6.21.0",
-                "@typescript-eslint/utils": "6.21.0",
+                "@typescript-eslint/typescript-estree": "7.4.0",
+                "@typescript-eslint/utils": "7.4.0",
                 "debug": "^4.3.4",
                 "ts-api-utils": "^1.0.1"
             },
             "engines": {
-                "node": "^16.0.0 || >=18.0.0"
+                "node": "^18.18.0 || >=20.0.0"
             },
             "funding": {
                 "type": "opencollective",
                 "url": "https://opencollective.com/typescript-eslint"
             },
             "peerDependencies": {
-                "eslint": "^7.0.0 || ^8.0.0"
+                "eslint": "^8.56.0"
             },
             "peerDependenciesMeta": {
                 "typescript": {
@@ -1767,11 +1704,11 @@
             }
         },
         "node_modules/@typescript-eslint/types": {
-            "version": "6.21.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz",
-            "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==",
+            "version": "7.4.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.4.0.tgz",
+            "integrity": "sha512-mjQopsbffzJskos5B4HmbsadSJQWaRK0UxqQ7GuNA9Ga4bEKeiO6b2DnB6cM6bpc8lemaPseh0H9B/wyg+J7rw==",
             "engines": {
-                "node": "^16.0.0 || >=18.0.0"
+                "node": "^18.18.0 || >=20.0.0"
             },
             "funding": {
                 "type": "opencollective",
@@ -1779,12 +1716,12 @@
             }
         },
         "node_modules/@typescript-eslint/typescript-estree": {
-            "version": "6.21.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz",
-            "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==",
+            "version": "7.4.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.4.0.tgz",
+            "integrity": "sha512-A99j5AYoME/UBQ1ucEbbMEmGkN7SE0BvZFreSnTd1luq7yulcHdyGamZKizU7canpGDWGJ+Q6ZA9SyQobipePg==",
             "dependencies": {
-                "@typescript-eslint/types": "6.21.0",
-                "@typescript-eslint/visitor-keys": "6.21.0",
+                "@typescript-eslint/types": "7.4.0",
+                "@typescript-eslint/visitor-keys": "7.4.0",
                 "debug": "^4.3.4",
                 "globby": "^11.1.0",
                 "is-glob": "^4.0.3",
@@ -1793,7 +1730,7 @@
                 "ts-api-utils": "^1.0.1"
             },
             "engines": {
-                "node": "^16.0.0 || >=18.0.0"
+                "node": "^18.18.0 || >=20.0.0"
             },
             "funding": {
                 "type": "opencollective",
@@ -1806,39 +1743,39 @@
             }
         },
         "node_modules/@typescript-eslint/utils": {
-            "version": "6.21.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.21.0.tgz",
-            "integrity": "sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==",
+            "version": "7.4.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.4.0.tgz",
+            "integrity": "sha512-NQt9QLM4Tt8qrlBVY9lkMYzfYtNz8/6qwZg8pI3cMGlPnj6mOpRxxAm7BMJN9K0AiY+1BwJ5lVC650YJqYOuNg==",
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.4.0",
                 "@types/json-schema": "^7.0.12",
                 "@types/semver": "^7.5.0",
-                "@typescript-eslint/scope-manager": "6.21.0",
-                "@typescript-eslint/types": "6.21.0",
-                "@typescript-eslint/typescript-estree": "6.21.0",
+                "@typescript-eslint/scope-manager": "7.4.0",
+                "@typescript-eslint/types": "7.4.0",
+                "@typescript-eslint/typescript-estree": "7.4.0",
                 "semver": "^7.5.4"
             },
             "engines": {
-                "node": "^16.0.0 || >=18.0.0"
+                "node": "^18.18.0 || >=20.0.0"
             },
             "funding": {
                 "type": "opencollective",
                 "url": "https://opencollective.com/typescript-eslint"
             },
             "peerDependencies": {
-                "eslint": "^7.0.0 || ^8.0.0"
+                "eslint": "^8.56.0"
             }
         },
         "node_modules/@typescript-eslint/visitor-keys": {
-            "version": "6.21.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz",
-            "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==",
+            "version": "7.4.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.4.0.tgz",
+            "integrity": "sha512-0zkC7YM0iX5Y41homUUeW1CHtZR01K3ybjM1l6QczoMuay0XKtrb93kv95AxUGwdjGr64nNqnOCwmEl616N8CA==",
             "dependencies": {
-                "@typescript-eslint/types": "6.21.0",
+                "@typescript-eslint/types": "7.4.0",
                 "eslint-visitor-keys": "^3.4.1"
             },
             "engines": {
-                "node": "^16.0.0 || >=18.0.0"
+                "node": "^18.18.0 || >=20.0.0"
             },
             "funding": {
                 "type": "opencollective",
@@ -1957,21 +1894,21 @@
             }
         },
         "node_modules/@vue/eslint-config-typescript": {
-            "version": "12.0.0",
-            "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-12.0.0.tgz",
-            "integrity": "sha512-StxLFet2Qe97T8+7L8pGlhYBBr8Eg05LPuTDVopQV6il+SK6qqom59BA/rcFipUef2jD8P2X44Vd8tMFytfvlg==",
+            "version": "13.0.0",
+            "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-13.0.0.tgz",
+            "integrity": "sha512-MHh9SncG/sfqjVqjcuFLOLD6Ed4dRAis4HNt0dXASeAuLqIAx4YMB1/m2o4pUKK1vCt8fUvYG8KKX2Ot3BVZTg==",
             "dependencies": {
-                "@typescript-eslint/eslint-plugin": "^6.7.0",
-                "@typescript-eslint/parser": "^6.7.0",
+                "@typescript-eslint/eslint-plugin": "^7.1.1",
+                "@typescript-eslint/parser": "^7.1.1",
                 "vue-eslint-parser": "^9.3.1"
             },
             "engines": {
-                "node": "^14.17.0 || >=16.0.0"
+                "node": "^18.18.0 || >=20.0.0"
             },
             "peerDependencies": {
-                "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0",
+                "eslint": "^8.56.0",
                 "eslint-plugin-vue": "^9.0.0",
-                "typescript": "*"
+                "typescript": ">=4.7.4"
             },
             "peerDependenciesMeta": {
                 "typescript": {
@@ -2054,6 +1991,89 @@
             "integrity": "sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==",
             "dev": true
         },
+        "node_modules/@vueuse/core": {
+            "version": "10.9.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",
+            "integrity": "sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==",
+            "dependencies": {
+                "@types/web-bluetooth": "^0.0.20",
+                "@vueuse/metadata": "10.9.0",
+                "@vueuse/shared": "10.9.0",
+                "vue-demi": ">=0.14.7"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/core/node_modules/vue-demi": {
+            "version": "0.14.7",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+            "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@vueuse/metadata": {
+            "version": "10.9.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.9.0.tgz",
+            "integrity": "sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==",
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/shared": {
+            "version": "10.9.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.9.0.tgz",
+            "integrity": "sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==",
+            "dependencies": {
+                "vue-demi": ">=0.14.7"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/shared/node_modules/vue-demi": {
+            "version": "0.14.7",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+            "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@zodios/core": {
             "version": "10.9.6",
             "resolved": "https://registry.npmjs.org/@zodios/core/-/core-10.9.6.tgz",
@@ -2151,14 +2171,12 @@
         "node_modules/any-promise": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-            "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-            "dev": true
+            "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
         },
         "node_modules/anymatch": {
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
             "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-            "dev": true,
             "dependencies": {
                 "normalize-path": "^3.0.0",
                 "picomatch": "^2.0.4"
@@ -2170,8 +2188,7 @@
         "node_modules/arg": {
             "version": "5.0.2",
             "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-            "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-            "dev": true
+            "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
         },
         "node_modules/argparse": {
             "version": "2.0.1",
@@ -2194,9 +2211,9 @@
             "dev": true
         },
         "node_modules/autoprefixer": {
-            "version": "10.4.18",
-            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.18.tgz",
-            "integrity": "sha512-1DKbDfsr6KUElM6wg+0zRNkB/Q7WcKYAaK+pzXn+Xqmszm/5Xa9coeNdtP88Vi+dPzZnMjhge8GIV49ZQkDa+g==",
+            "version": "10.4.19",
+            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
+            "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
             "dev": true,
             "funding": [
                 {
@@ -2214,7 +2231,7 @@
             ],
             "dependencies": {
                 "browserslist": "^4.23.0",
-                "caniuse-lite": "^1.0.30001591",
+                "caniuse-lite": "^1.0.30001599",
                 "fraction.js": "^4.3.7",
                 "normalize-range": "^0.1.2",
                 "picocolors": "^1.0.0",
@@ -2231,12 +2248,12 @@
             }
         },
         "node_modules/axios": {
-            "version": "1.6.7",
-            "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
-            "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
+            "version": "1.6.8",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+            "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
             "dev": true,
             "dependencies": {
-                "follow-redirects": "^1.15.4",
+                "follow-redirects": "^1.15.6",
                 "form-data": "^4.0.0",
                 "proxy-from-env": "^1.1.0"
             }
@@ -2247,12 +2264,14 @@
             "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
         },
         "node_modules/binary-extensions": {
-            "version": "2.2.0",
-            "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-            "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-            "dev": true,
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+            "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
             "engines": {
                 "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
             }
         },
         "node_modules/boolbase": {
@@ -2359,15 +2378,14 @@
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
             "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-            "dev": true,
             "engines": {
                 "node": ">= 6"
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001597",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001597.tgz",
-            "integrity": "sha512-7LjJvmQU6Sj7bL0j5b5WY/3n7utXUJvAe1lxhsHDbLmwX9mdL86Yjtr+5SRCyf8qME4M7pU2hswj0FpyBVCv9w==",
+            "version": "1.0.30001600",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001600.tgz",
+            "integrity": "sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==",
             "dev": true,
             "funding": [
                 {
@@ -2403,7 +2421,6 @@
             "version": "3.6.0",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
             "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-            "dev": true,
             "dependencies": {
                 "anymatch": "~3.1.2",
                 "braces": "~3.0.2",
@@ -2427,7 +2444,6 @@
             "version": "5.1.2",
             "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
             "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-            "dev": true,
             "dependencies": {
                 "is-glob": "^4.0.1"
             },
@@ -2467,7 +2483,6 @@
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
             "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-            "dev": true,
             "engines": {
                 "node": ">= 6"
             }
@@ -2589,8 +2604,7 @@
         "node_modules/didyoumean": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-            "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-            "dev": true
+            "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
         },
         "node_modules/dir-glob": {
             "version": "3.0.1",
@@ -2606,8 +2620,7 @@
         "node_modules/dlv": {
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-            "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-            "dev": true
+            "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
         },
         "node_modules/doctrine": {
             "version": "3.0.0",
@@ -2624,8 +2637,7 @@
         "node_modules/eastasianwidth": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-            "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-            "dev": true
+            "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
         },
         "node_modules/echarts": {
             "version": "5.5.0",
@@ -2637,16 +2649,15 @@
             }
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.4.703",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.703.tgz",
-            "integrity": "sha512-094ZZC4nHXPKl/OwPinSMtLN9+hoFkdfQGKnvXbY+3WEAYtVDpz9UhJIViiY6Zb8agvqxiaJzNG9M+pRZWvSZw==",
+            "version": "1.4.717",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.717.tgz",
+            "integrity": "sha512-6Fmg8QkkumNOwuZ/5mIbMU9WI3H2fmn5ajcVya64I5Yr5CcNmO7vcLt0Y7c96DCiMO5/9G+4sI2r6eEvdg1F7A==",
             "dev": true
         },
         "node_modules/emoji-regex": {
             "version": "9.2.2",
             "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-            "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-            "dev": true
+            "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
         },
         "node_modules/entities": {
             "version": "4.5.0",
@@ -2681,9 +2692,9 @@
             }
         },
         "node_modules/esbuild": {
-            "version": "0.19.12",
-            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz",
-            "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==",
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+            "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
             "dev": true,
             "hasInstallScript": true,
             "bin": {
@@ -2693,29 +2704,29 @@
                 "node": ">=12"
             },
             "optionalDependencies": {
-                "@esbuild/aix-ppc64": "0.19.12",
-                "@esbuild/android-arm": "0.19.12",
-                "@esbuild/android-arm64": "0.19.12",
-                "@esbuild/android-x64": "0.19.12",
-                "@esbuild/darwin-arm64": "0.19.12",
-                "@esbuild/darwin-x64": "0.19.12",
-                "@esbuild/freebsd-arm64": "0.19.12",
-                "@esbuild/freebsd-x64": "0.19.12",
-                "@esbuild/linux-arm": "0.19.12",
-                "@esbuild/linux-arm64": "0.19.12",
-                "@esbuild/linux-ia32": "0.19.12",
-                "@esbuild/linux-loong64": "0.19.12",
-                "@esbuild/linux-mips64el": "0.19.12",
-                "@esbuild/linux-ppc64": "0.19.12",
-                "@esbuild/linux-riscv64": "0.19.12",
-                "@esbuild/linux-s390x": "0.19.12",
-                "@esbuild/linux-x64": "0.19.12",
-                "@esbuild/netbsd-x64": "0.19.12",
-                "@esbuild/openbsd-x64": "0.19.12",
-                "@esbuild/sunos-x64": "0.19.12",
-                "@esbuild/win32-arm64": "0.19.12",
-                "@esbuild/win32-ia32": "0.19.12",
-                "@esbuild/win32-x64": "0.19.12"
+                "@esbuild/aix-ppc64": "0.20.2",
+                "@esbuild/android-arm": "0.20.2",
+                "@esbuild/android-arm64": "0.20.2",
+                "@esbuild/android-x64": "0.20.2",
+                "@esbuild/darwin-arm64": "0.20.2",
+                "@esbuild/darwin-x64": "0.20.2",
+                "@esbuild/freebsd-arm64": "0.20.2",
+                "@esbuild/freebsd-x64": "0.20.2",
+                "@esbuild/linux-arm": "0.20.2",
+                "@esbuild/linux-arm64": "0.20.2",
+                "@esbuild/linux-ia32": "0.20.2",
+                "@esbuild/linux-loong64": "0.20.2",
+                "@esbuild/linux-mips64el": "0.20.2",
+                "@esbuild/linux-ppc64": "0.20.2",
+                "@esbuild/linux-riscv64": "0.20.2",
+                "@esbuild/linux-s390x": "0.20.2",
+                "@esbuild/linux-x64": "0.20.2",
+                "@esbuild/netbsd-x64": "0.20.2",
+                "@esbuild/openbsd-x64": "0.20.2",
+                "@esbuild/sunos-x64": "0.20.2",
+                "@esbuild/win32-arm64": "0.20.2",
+                "@esbuild/win32-ia32": "0.20.2",
+                "@esbuild/win32-x64": "0.20.2"
             }
         },
         "node_modules/escalade": {
@@ -2835,12 +2846,13 @@
             }
         },
         "node_modules/eslint-plugin-vue": {
-            "version": "9.23.0",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.23.0.tgz",
-            "integrity": "sha512-Bqd/b7hGYGrlV+wP/g77tjyFmp81lh5TMw0be9093X02SyelxRRfCI6/IsGq/J7Um0YwB9s0Ry0wlFyjPdmtUw==",
+            "version": "9.24.0",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.24.0.tgz",
+            "integrity": "sha512-9SkJMvF8NGMT9aQCwFc5rj8Wo1XWSMSHk36i7ZwdI614BU7sIOR28ZjuFPKp8YGymZN12BSEbiSwa7qikp+PBw==",
             "peer": true,
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.4.0",
+                "globals": "^13.24.0",
                 "natural-compare": "^1.4.0",
                 "nth-check": "^2.1.1",
                 "postcss-selector-parser": "^6.0.15",
@@ -3111,9 +3123,9 @@
             "peer": true
         },
         "node_modules/follow-redirects": {
-            "version": "1.15.5",
-            "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
-            "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+            "version": "1.15.6",
+            "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+            "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
             "dev": true,
             "funding": [
                 {
@@ -3134,7 +3146,6 @@
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
             "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
-            "dev": true,
             "dependencies": {
                 "cross-spawn": "^7.0.0",
                 "signal-exit": "^4.0.1"
@@ -3197,7 +3208,6 @@
             "version": "2.3.2",
             "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
             "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-            "dev": true,
             "hasInstallScript": true,
             "optional": true,
             "os": [
@@ -3211,7 +3221,6 @@
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
             "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-            "dev": true,
             "funding": {
                 "url": "https://github.com/sponsors/ljharb"
             }
@@ -3423,7 +3432,6 @@
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
             "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-            "dev": true,
             "dependencies": {
                 "function-bind": "^1.1.2"
             },
@@ -3493,7 +3501,6 @@
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
             "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-            "dev": true,
             "dependencies": {
                 "binary-extensions": "^2.0.0"
             },
@@ -3505,7 +3512,6 @@
             "version": "2.13.1",
             "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
             "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-            "dev": true,
             "dependencies": {
                 "hasown": "^2.0.0"
             },
@@ -3525,7 +3531,6 @@
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
             "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-            "dev": true,
             "engines": {
                 "node": ">=8"
             }
@@ -3567,7 +3572,6 @@
             "version": "2.3.6",
             "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
             "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
-            "dev": true,
             "dependencies": {
                 "@isaacs/cliui": "^8.0.2"
             },
@@ -3585,7 +3589,6 @@
             "version": "1.21.0",
             "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
             "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
-            "dev": true,
             "bin": {
                 "jiti": "bin/jiti.js"
             }
@@ -3707,7 +3710,6 @@
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
             "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-            "dev": true,
             "engines": {
                 "node": ">=10"
             }
@@ -3715,8 +3717,7 @@
         "node_modules/lines-and-columns": {
             "version": "1.2.4",
             "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-            "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-            "dev": true
+            "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
         },
         "node_modules/locate-path": {
             "version": "6.0.0",
@@ -3864,7 +3865,6 @@
             "version": "7.0.4",
             "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
             "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
-            "dev": true,
             "engines": {
                 "node": ">=16 || 14 >=14.17"
             }
@@ -3884,7 +3884,6 @@
             "version": "2.7.0",
             "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
             "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-            "dev": true,
             "dependencies": {
                 "any-promise": "^1.0.0",
                 "object-assign": "^4.0.1",
@@ -3929,7 +3928,6 @@
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
             "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-            "dev": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -3977,7 +3975,6 @@
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
             "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-            "dev": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -3986,7 +3983,6 @@
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
             "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-            "dev": true,
             "engines": {
                 "node": ">= 6"
             }
@@ -4016,9 +4012,9 @@
             "dev": true
         },
         "node_modules/openapi-zod-client": {
-            "version": "1.16.2",
-            "resolved": "https://registry.npmjs.org/openapi-zod-client/-/openapi-zod-client-1.16.2.tgz",
-            "integrity": "sha512-cN8rb7bzWqvsJzzDGoi9sUJJNid8triuH5ry2dYhJ++Xw/TStkCaOwe2NaNnIrLp7uVgIu+cEIE608Y9YS3/aw==",
+            "version": "1.16.3",
+            "resolved": "https://registry.npmjs.org/openapi-zod-client/-/openapi-zod-client-1.16.3.tgz",
+            "integrity": "sha512-TPUhFnsbA9yX2WMXJPFwy/8ctag9gkUlaWIHbJcK9YWWJVUK32lHakZPd2+9/5SBgUeBtYr9zzeYMg7/R0uTDw==",
             "dev": true,
             "dependencies": {
                 "@apidevtools/swagger-parser": "^10.1.0",
@@ -4201,14 +4197,12 @@
         "node_modules/path-parse": {
             "version": "1.0.7",
             "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-            "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-            "dev": true
+            "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
         },
         "node_modules/path-scurry": {
             "version": "1.10.1",
             "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz",
             "integrity": "sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==",
-            "dev": true,
             "dependencies": {
                 "lru-cache": "^9.1.1 || ^10.0.0",
                 "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
@@ -4224,7 +4218,6 @@
             "version": "10.2.0",
             "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
             "integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
-            "dev": true,
             "engines": {
                 "node": "14 || >=16.14"
             }
@@ -4257,7 +4250,6 @@
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
             "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-            "dev": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -4316,7 +4308,6 @@
             "version": "4.0.6",
             "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
             "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-            "dev": true,
             "engines": {
                 "node": ">= 6"
             }
@@ -4352,9 +4343,9 @@
             }
         },
         "node_modules/postcss": {
-            "version": "8.4.35",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
-            "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
+            "version": "8.4.38",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+            "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -4372,7 +4363,7 @@
             "dependencies": {
                 "nanoid": "^3.3.7",
                 "picocolors": "^1.0.0",
-                "source-map-js": "^1.0.2"
+                "source-map-js": "^1.2.0"
             },
             "engines": {
                 "node": "^10 || ^12 || >=14"
@@ -4382,7 +4373,6 @@
             "version": "15.1.0",
             "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
             "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-            "dev": true,
             "dependencies": {
                 "postcss-value-parser": "^4.0.0",
                 "read-cache": "^1.0.0",
@@ -4399,7 +4389,6 @@
             "version": "4.0.1",
             "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
             "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-            "dev": true,
             "dependencies": {
                 "camelcase-css": "^2.0.1"
             },
@@ -4418,7 +4407,6 @@
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
             "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-            "dev": true,
             "funding": [
                 {
                     "type": "opencollective",
@@ -4453,7 +4441,6 @@
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.1.tgz",
             "integrity": "sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==",
-            "dev": true,
             "engines": {
                 "node": ">=14"
             },
@@ -4465,7 +4452,6 @@
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
             "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
-            "dev": true,
             "dependencies": {
                 "postcss-selector-parser": "^6.0.11"
             },
@@ -4481,6 +4467,89 @@
             }
         },
         "node_modules/postcss-nested/node_modules/postcss-selector-parser": {
+            "version": "6.0.16",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
+            "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
+            "dependencies": {
+                "cssesc": "^3.0.0",
+                "util-deprecate": "^1.0.2"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/postcss-nesting": {
+            "version": "12.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.1.0.tgz",
+            "integrity": "sha512-QOYnosaZ+mlP6plQrAxFw09UUp2Sgtxj1BVHN+rSVbtV0Yx48zRt9/9F/ZOoxOKBBEsaJk2MYhhVRjeRRw5yuw==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/csstools"
+                },
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/csstools"
+                }
+            ],
+            "dependencies": {
+                "@csstools/selector-resolve-nested": "^1.1.0",
+                "@csstools/selector-specificity": "^3.0.2",
+                "postcss-selector-parser": "^6.0.13"
+            },
+            "engines": {
+                "node": "^14 || ^16 || >=18"
+            },
+            "peerDependencies": {
+                "postcss": "^8.4"
+            }
+        },
+        "node_modules/postcss-nesting/node_modules/@csstools/selector-resolve-nested": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-1.1.0.tgz",
+            "integrity": "sha512-uWvSaeRcHyeNenKg8tp17EVDRkpflmdyvbE0DHo6D/GdBb6PDnCYYU6gRpXhtICMGMcahQmj2zGxwFM/WC8hCg==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/csstools"
+                },
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/csstools"
+                }
+            ],
+            "engines": {
+                "node": "^14 || ^16 || >=18"
+            },
+            "peerDependencies": {
+                "postcss-selector-parser": "^6.0.13"
+            }
+        },
+        "node_modules/postcss-nesting/node_modules/@csstools/selector-specificity": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.2.tgz",
+            "integrity": "sha512-RpHaZ1h9LE7aALeQXmXrJkRG84ZxIsctEN2biEUmFyKpzFM3zZ35eUMcIzZFsw/2olQE6v69+esEqU2f1MKycg==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/csstools"
+                },
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/csstools"
+                }
+            ],
+            "engines": {
+                "node": "^14 || ^16 || >=18"
+            },
+            "peerDependencies": {
+                "postcss-selector-parser": "^6.0.13"
+            }
+        },
+        "node_modules/postcss-nesting/node_modules/postcss-selector-parser": {
             "version": "6.0.16",
             "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
             "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
@@ -4509,8 +4578,7 @@
         "node_modules/postcss-value-parser": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-            "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-            "dev": true
+            "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
         },
         "node_modules/prelude-ls": {
             "version": "1.2.1",
@@ -4596,9 +4664,9 @@
             ]
         },
         "node_modules/radix-vue": {
-            "version": "1.5.2",
-            "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.5.2.tgz",
-            "integrity": "sha512-XyXB6mYm7dthW56LDHG4ttR3x+XtspTi48nSq4vHoHldgGZzAEa5VXlqUCr2J21fNKrt3NIYhIIRLB6kKwWwrA==",
+            "version": "1.5.3",
+            "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.5.3.tgz",
+            "integrity": "sha512-K1JF8P238jGKRwwlWe0LNCd80bamfWFnDhLNBAgoWvSRORRIsoo7DODnC4TLE62JE55tf/6ABSs5JIvp2BvYPA==",
             "dependencies": {
                 "@floating-ui/dom": "^1.5.4",
                 "@floating-ui/vue": "^1.0.4",
@@ -4628,7 +4696,6 @@
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
             "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-            "dev": true,
             "dependencies": {
                 "pify": "^2.3.0"
             }
@@ -4637,7 +4704,6 @@
             "version": "3.6.0",
             "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
             "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-            "dev": true,
             "dependencies": {
                 "picomatch": "^2.2.1"
             },
@@ -4668,7 +4734,6 @@
             "version": "1.22.8",
             "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
             "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-            "dev": true,
             "dependencies": {
                 "is-core-module": "^2.13.0",
                 "path-parse": "^1.0.7",
@@ -4856,7 +4921,6 @@
             "version": "4.1.0",
             "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
             "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-            "dev": true,
             "engines": {
                 "node": ">=14"
             },
@@ -4882,9 +4946,9 @@
             }
         },
         "node_modules/source-map-js": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-            "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+            "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -4899,7 +4963,6 @@
             "version": "5.1.2",
             "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
             "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-            "dev": true,
             "dependencies": {
                 "eastasianwidth": "^0.2.0",
                 "emoji-regex": "^9.2.2",
@@ -4917,7 +4980,6 @@
             "version": "4.2.3",
             "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
             "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-            "dev": true,
             "dependencies": {
                 "emoji-regex": "^8.0.0",
                 "is-fullwidth-code-point": "^3.0.0",
@@ -4930,14 +4992,12 @@
         "node_modules/string-width-cjs/node_modules/emoji-regex": {
             "version": "8.0.0",
             "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-            "dev": true
+            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
         },
         "node_modules/string-width/node_modules/ansi-regex": {
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
             "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-            "dev": true,
             "engines": {
                 "node": ">=12"
             },
@@ -4949,7 +5009,6 @@
             "version": "7.1.0",
             "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
             "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-            "dev": true,
             "dependencies": {
                 "ansi-regex": "^6.0.1"
             },
@@ -4976,7 +5035,6 @@
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
             "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-            "dev": true,
             "dependencies": {
                 "ansi-regex": "^5.0.1"
             },
@@ -5000,7 +5058,6 @@
             "version": "3.35.0",
             "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
             "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-            "dev": true,
             "dependencies": {
                 "@jridgewell/gen-mapping": "^0.3.2",
                 "commander": "^4.0.0",
@@ -5022,7 +5079,6 @@
             "version": "10.3.10",
             "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
             "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
-            "dev": true,
             "dependencies": {
                 "foreground-child": "^3.1.0",
                 "jackspeak": "^2.3.5",
@@ -5055,7 +5111,6 @@
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
             "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-            "dev": true,
             "engines": {
                 "node": ">= 0.4"
             },
@@ -5084,11 +5139,11 @@
             "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
         },
         "node_modules/tailwind-merge": {
-            "version": "2.2.1",
-            "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.2.1.tgz",
-            "integrity": "sha512-o+2GTLkthfa5YUt4JxPfzMIpQzZ3adD1vLVkvKE1Twl9UAhGsEbIZhHHZVRttyW177S8PDJI3bTQNaebyofK3Q==",
+            "version": "2.2.2",
+            "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.2.2.tgz",
+            "integrity": "sha512-tWANXsnmJzgw6mQ07nE3aCDkCK4QdT3ThPMCzawoYA2Pws7vSTCvz3Vrjg61jVUGfFZPJzxEP+NimbcW+EdaDw==",
             "dependencies": {
-                "@babel/runtime": "^7.23.7"
+                "@babel/runtime": "^7.24.0"
             },
             "funding": {
                 "type": "github",
@@ -5099,7 +5154,6 @@
             "version": "3.4.1",
             "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
             "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==",
-            "dev": true,
             "dependencies": {
                 "@alloc/quick-lru": "^5.2.0",
                 "arg": "^5.0.2",
@@ -5136,7 +5190,6 @@
             "version": "6.0.16",
             "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
             "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
-            "dev": true,
             "dependencies": {
                 "cssesc": "^3.0.0",
                 "util-deprecate": "^1.0.2"
@@ -5184,7 +5237,6 @@
             "version": "3.3.1",
             "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
             "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-            "dev": true,
             "dependencies": {
                 "any-promise": "^1.0.0"
             }
@@ -5193,7 +5245,6 @@
             "version": "1.6.0",
             "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
             "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-            "dev": true,
             "dependencies": {
                 "thenify": ">= 3.1.0 < 4"
             },
@@ -5241,8 +5292,7 @@
         "node_modules/ts-interface-checker": {
             "version": "0.1.13",
             "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-            "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-            "dev": true
+            "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
         },
         "node_modules/ts-pattern": {
             "version": "5.0.8",
@@ -5286,9 +5336,9 @@
             }
         },
         "node_modules/typescript": {
-            "version": "5.4.2",
-            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz",
-            "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==",
+            "version": "5.4.3",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz",
+            "integrity": "sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==",
             "bin": {
                 "tsc": "bin/tsc",
                 "tsserver": "bin/tsserver"
@@ -5369,14 +5419,14 @@
             "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
         },
         "node_modules/vite": {
-            "version": "5.1.6",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.6.tgz",
-            "integrity": "sha512-yYIAZs9nVfRJ/AiOLCA91zzhjsHUgMjB+EigzFb6W2XTLO8JixBCKCjvhKZaye+NKYHCrkv3Oh50dH9EdLU2RA==",
+            "version": "5.2.6",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.6.tgz",
+            "integrity": "sha512-FPtnxFlSIKYjZ2eosBQamz4CbyrTizbZ3hnGJlh/wMtCrlp1Hah6AzBLjGI5I2urTfNnpovpHdrL6YRuBOPnCA==",
             "dev": true,
             "dependencies": {
-                "esbuild": "^0.19.3",
-                "postcss": "^8.4.35",
-                "rollup": "^4.2.0"
+                "esbuild": "^0.20.1",
+                "postcss": "^8.4.36",
+                "rollup": "^4.13.0"
             },
             "bin": {
                 "vite": "bin/vite.js"
@@ -5774,7 +5824,6 @@
             "version": "8.1.0",
             "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
             "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-            "dev": true,
             "dependencies": {
                 "ansi-styles": "^6.1.0",
                 "string-width": "^5.0.1",
@@ -5792,7 +5841,6 @@
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
             "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-            "dev": true,
             "dependencies": {
                 "ansi-styles": "^4.0.0",
                 "string-width": "^4.1.0",
@@ -5808,14 +5856,12 @@
         "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
             "version": "8.0.0",
             "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-            "dev": true
+            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
         },
         "node_modules/wrap-ansi-cjs/node_modules/string-width": {
             "version": "4.2.3",
             "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
             "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-            "dev": true,
             "dependencies": {
                 "emoji-regex": "^8.0.0",
                 "is-fullwidth-code-point": "^3.0.0",
@@ -5829,7 +5875,6 @@
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
             "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-            "dev": true,
             "engines": {
                 "node": ">=12"
             },
@@ -5841,7 +5886,6 @@
             "version": "6.2.1",
             "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
             "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-            "dev": true,
             "engines": {
                 "node": ">=12"
             },
@@ -5853,7 +5897,6 @@
             "version": "7.1.0",
             "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
             "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-            "dev": true,
             "dependencies": {
                 "ansi-regex": "^6.0.1"
             },
@@ -5889,7 +5932,6 @@
             "version": "2.4.1",
             "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.1.tgz",
             "integrity": "sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==",
-            "dev": true,
             "bin": {
                 "yaml": "bin.mjs"
             },
diff --git a/package.json b/package.json
index cb10fff8..b16099e5 100644
--- a/package.json
+++ b/package.json
@@ -23,24 +23,27 @@
         "laravel-vite-plugin": "^1.0.0",
         "openapi-zod-client": "^1.16.2",
         "postcss": "^8.4.14",
+        "postcss-nesting": "^12.1.0",
         "tailwindcss": "^3.1.0",
         "typescript": "^5.3.3",
         "vite": "^5.0.0",
         "vite-plugin-checker": "^0.6.2",
-        "vue": "^3.2.31",
+        "vue": "^3.4.0",
         "vue-tsc": "^1.8.27",
         "ziggy-js": "^1.8.1"
     },
     "dependencies": {
         "@heroicons/vue": "^2.1.1",
         "@rushstack/eslint-patch": "^1.7.0",
+        "@tailwindcss/container-queries": "^0.1.1",
         "@vue/eslint-config-prettier": "^9.0.0",
-        "@vue/eslint-config-typescript": "^12.0.0",
+        "@vue/eslint-config-typescript": "^13.0.0",
+        "@vueuse/core": "^10.9.0",
         "dayjs": "^1.11.10",
         "echarts": "^5.5.0",
         "parse-duration": "^1.1.0",
         "pinia": "^2.1.7",
-        "radix-vue": "^1.4.9",
+        "radix-vue": "^1.5.2",
         "tailwind-merge": "^2.2.1",
         "vue-echarts": "^6.6.9"
     }
diff --git a/playwright.config.ts b/playwright.config.ts
index 0eddd35c..c61073e5 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -18,7 +18,7 @@ export default defineConfig({
     /* Retry on CI only */
     retries: process.env.CI ? 1 : 0,
     /* Opt out of parallel tests on CI. */
-    workers: process.env.CI ? 1 : 1,
+    workers: 1,
     /* Reporter to use. See https://playwright.dev/docs/test-reporters */
     reporter: process.env.CI ? 'line' : 'html',
     /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
diff --git a/postcss.config.js b/postcss.config.js
index 49c0612d..67d9d238 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,5 +1,7 @@
 export default {
     plugins: {
+        'postcss-import': {},
+        'tailwindcss/nesting': {},
         tailwindcss: {},
         autoprefixer: {},
     },
diff --git a/resources/css/app.css b/resources/css/app.css
index 6697dea9..145ba691 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -8,6 +8,11 @@
     --theme-color-card-background: #13152B;
 }
 
+*{
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
 
 [x-cloak] {
     display: none;
diff --git a/resources/js/Components/common/ProjectBadge.vue b/resources/js/Components/Common/Badge.vue
similarity index 63%
rename from resources/js/Components/common/ProjectBadge.vue
rename to resources/js/Components/Common/Badge.vue
index bfe33f71..58a3b05b 100644
--- a/resources/js/Components/common/ProjectBadge.vue
+++ b/resources/js/Components/Common/Badge.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { twMerge } from 'tailwind-merge';
+import { computed } from 'vue';
 
 const props = withDefaults(
     defineProps<{
@@ -8,23 +9,27 @@ const props = withDefaults(
         tag: string;
         class?: string;
         color: string;
+        border: boolean;
     }>(),
     {
         size: 'base',
         tag: 'div',
         color: 'var(--theme-color-icon-default)',
+        border: true,
     }
 );
 
-const indicatorClasses = {
-    base: 'w-2.5 h-2.5',
-    large: 'w-3 h-3',
-};
-
 const badgeClasses = {
     base: 'py-1 px-2 space-x-1.5 text-xs',
     large: 'py-1.5 px-3 space-x-2 text-sm text-muted',
 };
+
+const borderClasses = computed(() => {
+    if (props.border) {
+        return 'border-input-border border';
+    }
+    return '';
+});
 </script>
 
 <template>
@@ -34,17 +39,11 @@ const badgeClasses = {
             twMerge(
                 props.class,
                 badgeClasses[size],
-                'border-input-border border rounded inline-flex items-center font-semibold text-white'
+                borderClasses,
+                'rounded inline-flex items-center font-semibold text-white'
             )
         ">
-        <div
-            :style="{ backgroundColor: color }"
-            :class="
-                twMerge(indicatorClasses[size], 'inline-block rounded-full')
-            "></div>
-        <span>
-            {{ name }}
-        </span>
+        <slot></slot>
     </component>
 </template>
 
diff --git a/resources/js/Components/Common/BillableToggleButton.vue b/resources/js/Components/Common/BillableToggleButton.vue
new file mode 100644
index 00000000..85792698
--- /dev/null
+++ b/resources/js/Components/Common/BillableToggleButton.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { twMerge } from 'tailwind-merge';
+const active = defineModel({ default: false });
+function toggleBillable() {
+    active.value = !active.value;
+}
+
+const iconColorClasses = computed(() => {
+    if (active.value) {
+        return 'text-accent-200/80 focus:text-accent-200 hover:text-accent-200';
+    } else {
+        return 'text-icon-default focus:text-icon-active hover:text-icon-active';
+    }
+});
+</script>
+
+<template>
+    <button
+        @click="toggleBillable"
+        :class="
+            twMerge(
+                iconColorClasses,
+                'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-seperator hover:bg-card-background-seperator rounded-full w-11 h-11 flex items-center justify-center'
+            )
+        ">
+        <svg
+            class="h-7"
+            viewBox="0 0 8 14"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+                d="M4 1V13M1 10.182L1.879 10.841C3.05 11.72 4.949 11.72 6.121 10.841C7.293 9.962 7.293 8.538 6.121 7.659C5.536 7.219 4.768 7 4 7C3.275 7 2.55 6.78 1.997 6.341C0.891 5.462 0.891 4.038 1.997 3.159C3.103 2.28 4.897 2.28 6.003 3.159L6.418 3.489"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round" />
+        </svg>
+    </button>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Common/CardTitle.vue b/resources/js/Components/Common/CardTitle.vue
new file mode 100644
index 00000000..1696d69c
--- /dev/null
+++ b/resources/js/Components/Common/CardTitle.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { Component } from 'vue';
+
+defineProps<{
+    title: string;
+    icon?: Component;
+}>();
+</script>
+
+<template>
+    <h3
+        class="text-white font-bold pb-4 text-base flex items-center space-x-2.5">
+        <component
+            v-if="icon"
+            :is="icon"
+            class="w-6 text-icon-default"></component>
+        <span>
+            {{ title }}
+        </span>
+    </h3>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Common/DaySectionHeader.vue b/resources/js/Components/Common/DaySectionHeader.vue
new file mode 100644
index 00000000..10cc2473
--- /dev/null
+++ b/resources/js/Components/Common/DaySectionHeader.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { formatDate, formatHumanReadableDate } from '@/utils/time';
+
+defineProps<{
+    date: string;
+}>();
+</script>
+
+<template>
+    <div class="flex items-center space-x-2">
+        <svg class="w-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <g fill="none">
+                <path
+                    d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
+                <path
+                    fill="currentColor"
+                    d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7zm-5-9a1 1 0 0 1 1 1v1h2a2 2 0 0 1 2 2v3H3V7a2 2 0 0 1 2-2h2V4a1 1 0 0 1 2 0v1h6V4a1 1 0 0 1 1-1" />
+            </g>
+        </svg>
+        <span class="font-semibold text-white">
+            {{ formatHumanReadableDate(date) }}
+        </span>
+        <span class="font-semibold">
+            {{ formatDate(date) }}
+        </span>
+    </div>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Common/Project/ProjectBadge.vue b/resources/js/Components/Common/Project/ProjectBadge.vue
new file mode 100644
index 00000000..1908d8da
--- /dev/null
+++ b/resources/js/Components/Common/Project/ProjectBadge.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { twMerge } from 'tailwind-merge';
+import Badge from '@/Components/Common/Badge.vue';
+
+const props = withDefaults(
+    defineProps<{
+        name: string;
+        size: 'base' | 'large';
+        tag: string;
+        class?: string;
+        color: string;
+        border: boolean;
+    }>(),
+    {
+        size: 'base',
+        tag: 'div',
+        color: 'var(--theme-color-icon-default)',
+        border: true,
+    }
+);
+
+const indicatorClasses = {
+    base: 'w-2.5 h-2.5',
+    large: 'w-3 h-3',
+};
+</script>
+
+<template>
+    <Badge :name :size :tag :class="props.class" :color :border>
+        <div
+            :style="{ backgroundColor: props.color }"
+            :class="
+                twMerge(indicatorClasses[size], 'inline-block rounded-full')
+            "></div>
+        <span>
+            {{ name }}
+        </span>
+    </Badge>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/common/ProjectDropdown.vue b/resources/js/Components/Common/Project/ProjectDropdown.vue
similarity index 79%
rename from resources/js/Components/common/ProjectDropdown.vue
rename to resources/js/Components/Common/Project/ProjectDropdown.vue
index 34de4c78..a0c0d003 100644
--- a/resources/js/Components/common/ProjectDropdown.vue
+++ b/resources/js/Components/Common/Project/ProjectDropdown.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import ProjectBadge from '@/Components/common/ProjectBadge.vue';
+import ProjectBadge from '@/Components/Common/Project/ProjectBadge.vue';
 import { computed, nextTick, ref, watch } from 'vue';
-import { type Project, useProjectsStore } from '@/utils/useProjects';
+import { useProjectsStore } from '@/utils/useProjects';
 import Dropdown from '@/Components/Dropdown.vue';
 import {
     ComboboxAnchor,
@@ -12,19 +12,21 @@ import {
     ComboboxViewport,
 } from 'radix-vue';
 import { PlusCircleIcon } from '@heroicons/vue/20/solid';
-import ProjectDropdownItem from '@/Components/common/ProjectDropdownItem.vue';
+import ProjectDropdownItem from '@/Components/Common/Project/ProjectDropdownItem.vue';
 import { storeToRefs } from 'pinia';
-import { api } from '../../../../openapi.json.client';
+import { api } from '../../../../../openapi.json.client';
 import { usePage } from '@inertiajs/vue3';
 import { getRandomColor } from '@/utils/color';
+import type { Project } from '@/utils/api';
 
 const searchValue = ref('');
 const searchInput = ref<HTMLElement | null>(null);
-const model = defineModel<Project>({
-    default: undefined,
+const model = defineModel<string | null>({
+    default: null,
 });
 const open = ref(false);
 const projectsStore = useProjectsStore();
+const emit = defineEmits(['update:modelValue', 'changed']);
 
 const { projects } = storeToRefs(projectsStore);
 const projectDropdownTrigger = ref<HTMLElement | null>(null);
@@ -36,6 +38,15 @@ const shownProjects = computed(() => {
     });
 });
 
+withDefaults(
+    defineProps<{
+        border: boolean;
+    }>(),
+    {
+        border: true,
+    }
+);
+
 const page = usePage<{
     auth: {
         user: {
@@ -54,7 +65,7 @@ async function addProjectIfNoneExists() {
             { params: { organization: page.props.auth.user.current_team_id } }
         );
         projects.value.unshift(response.data);
-        model.value = response.data;
+        model.value = response.data.id;
         searchValue.value = '';
         open.value = false;
     }
@@ -67,23 +78,32 @@ watch(open, (isOpen) => {
             searchInput.value?.$el?.focus();
         });
 
-        projects.value.sort((a) => {
-            return model.value === a ? -1 : 1;
+        projects.value.sort((iteratingProject) => {
+            return model.value === iteratingProject.id ? -1 : 1;
         });
     }
 });
 
+const currentProject = computed(() => {
+    return projects.value.find((project) => project.id === model.value);
+});
+
 function isProjectSelected(project: Project) {
-    return model.value?.id === project.id;
+    return model.value === project.id;
 }
 
 const selectedProjectName = computed(() => {
-    return model.value?.name || 'No Project';
+    return currentProject.value?.name || 'No Project';
 });
 
 const selectedProjectColor = computed(() => {
-    return model.value?.color || 'var(--theme-color-icon-default)';
+    return currentProject.value?.color || 'var(--theme-color-icon-default)';
 });
+
+function updateValue(project: Project) {
+    model.value = project.id;
+    emit('changed');
+}
 </script>
 
 <template>
@@ -93,6 +113,7 @@ const selectedProjectColor = computed(() => {
                 ref="projectDropdownTrigger"
                 :color="selectedProjectColor"
                 size="large"
+                :border
                 tag="button"
                 :name="selectedProjectName"
                 class="focus:border-input-border-active focus:outline-0 focus:bg-card-background-seperator hover:bg-card-background-seperator"></ProjectBadge>
@@ -101,8 +122,10 @@ const selectedProjectColor = computed(() => {
         <template #content>
             <ComboboxRoot
                 :open="open"
-                v-model="model"
-                v-model:searchTerm="searchValue"
+                :modelValue="currentProject"
+                @update:modelValue="updateValue"
+                @update:searchTerm="(e) => console.log(e)"
+                :searchTerm="searchValue"
                 class="relative">
                 <ComboboxAnchor>
                     <ComboboxInput
@@ -119,7 +142,8 @@ const selectedProjectColor = computed(() => {
                             :data-project-id="null"
                             :value="{
                                 id: null,
-                                name: '',
+                                name: 'No Project',
+                                color: 'var(--theme-color-icon-default)',
                             }">
                             <ProjectDropdownItem
                                 name="No Project"
diff --git a/resources/js/Components/common/ProjectDropdownItem.vue b/resources/js/Components/Common/Project/ProjectDropdownItem.vue
similarity index 100%
rename from resources/js/Components/common/ProjectDropdownItem.vue
rename to resources/js/Components/Common/Project/ProjectDropdownItem.vue
diff --git a/resources/js/Components/Common/StatCard.vue b/resources/js/Components/Common/StatCard.vue
new file mode 100644
index 00000000..7a83c2cd
--- /dev/null
+++ b/resources/js/Components/Common/StatCard.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineProps<{
+    title: string;
+    value: string;
+}>();
+</script>
+
+<template>
+    <div
+        class="rounded-lg bg-card-background border-card-border border px-3.5 py-2.5">
+        <dt class="font-bold text-sm text-muted">{{ title }}</dt>
+        <dd class="text-2xl text-white pt-1 font-bold">
+            {{ value }}
+        </dd>
+    </div>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Common/Tag/TagBadge.vue b/resources/js/Components/Common/Tag/TagBadge.vue
new file mode 100644
index 00000000..db036d85
--- /dev/null
+++ b/resources/js/Components/Common/Tag/TagBadge.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { twMerge } from 'tailwind-merge';
+import Badge from '@/Components/Common/Badge.vue';
+import { TagIcon } from '@heroicons/vue/20/solid';
+
+const props = withDefaults(
+    defineProps<{
+        name: string;
+        size: 'base' | 'large';
+        tag: string;
+        class?: string;
+        color: string;
+        border: boolean;
+    }>(),
+    {
+        size: 'base',
+        tag: 'div',
+        color: 'var(--theme-color-icon-default)',
+        border: true,
+    }
+);
+
+const indicatorClasses = {
+    base: 'w-3 h-3',
+    large: 'w-5 h-5',
+};
+</script>
+
+<template>
+    <Badge :name :size :tag :class="props.class" :color :border>
+        <TagIcon
+            :style="{ color: color }"
+            :class="twMerge(indicatorClasses[size])"></TagIcon>
+        <span>
+            {{ name }}
+        </span>
+    </Badge>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Common/Tag/TagDropdown.vue b/resources/js/Components/Common/Tag/TagDropdown.vue
new file mode 100644
index 00000000..98a142de
--- /dev/null
+++ b/resources/js/Components/Common/Tag/TagDropdown.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { PlusCircleIcon } from '@heroicons/vue/20/solid';
+import Dropdown from '@/Components/Dropdown.vue';
+import { type Component, computed, nextTick, ref, watch } from 'vue';
+import TagDropdownItem from '@/Components/Common/Tag/TagDropdownItem.vue';
+import { useTagsStore } from '@/utils/useTags';
+import { storeToRefs } from 'pinia';
+
+const tagsStore = useTagsStore();
+const { tags } = storeToRefs(tagsStore);
+
+const model = defineModel<string[]>({
+    default: [],
+});
+
+const searchInput = ref<HTMLInputElement | null>(null);
+const open = ref(false);
+const dropdownViewport = ref<Component | null>(null);
+
+const searchValue = ref('');
+
+function isTagSelected(id: string) {
+    return model.value.includes(id);
+}
+
+function addOrRemoveTagFromSelection(id: string) {
+    if (model.value.includes(id)) {
+        model.value = model.value.filter((tagId) => tagId !== id);
+    } else {
+        model.value.push(id);
+    }
+    emit('changed');
+}
+
+watch(open, (isOpen) => {
+    if (isOpen) {
+        nextTick(() => {
+            searchInput.value?.focus();
+        });
+
+        // sort tags alphabetically
+        tags.value.sort((a, b) => {
+            const aIsSelected = model.value.includes(a.id);
+            const bIsSelected = model.value.includes(b.id);
+            if (aIsSelected === bIsSelected) {
+                return a.name.localeCompare(b.name);
+            }
+            return model.value.includes(a.id) ? -1 : 1;
+        });
+    }
+});
+
+const filteredTags = computed(() => {
+    return tags.value.filter((tag) => {
+        return tag.name
+            .toLowerCase()
+            .includes(searchValue.value?.toLowerCase()?.trim() || '');
+    });
+});
+
+async function addTagIfNoneExists() {
+    if (searchValue.value.length > 0 && filteredTags.value.length === 0) {
+        const newTag = await tagsStore.createTag(searchValue.value);
+        addOrRemoveTagFromSelection(newTag.id);
+        searchValue.value = '';
+    } else {
+        if (highlightedItemId.value) {
+            addOrRemoveTagFromSelection(highlightedItemId.value);
+        }
+    }
+}
+
+watch(filteredTags, () => {
+    if (filteredTags.value.length > 0) {
+        highlightedItemId.value = filteredTags.value[0].id;
+    }
+});
+
+function updateSearchValue(event: Event) {
+    const newInput = (event.target as HTMLInputElement).value;
+    if (newInput === ' ') {
+        searchValue.value = '';
+        const highlightedTagId = highlightedItemId.value;
+        if (highlightedTagId) {
+            const highlightedTag = tags.value.find(
+                (tag) => tag.id === highlightedTagId
+            );
+            if (highlightedTag) {
+                addOrRemoveTagFromSelection(highlightedTag.id);
+            }
+        }
+    } else {
+        searchValue.value = newInput;
+    }
+}
+
+const emit = defineEmits(['update:modelValue', 'changed']);
+
+function toggleTag(newValue: string) {
+    if (model.value.includes(newValue)) {
+        model.value = model.value.filter((id) => id !== newValue);
+    } else {
+        model.value.push(newValue);
+    }
+    emit('changed');
+}
+
+function moveHighlightUp() {
+    if (highlightedItem.value) {
+        const currentHightlightedIndex = filteredTags.value.indexOf(
+            highlightedItem.value
+        );
+        if (currentHightlightedIndex === 0) {
+            highlightedItemId.value =
+                filteredTags.value[filteredTags.value.length - 1].id;
+        } else {
+            highlightedItemId.value =
+                filteredTags.value[currentHightlightedIndex - 1].id;
+        }
+    }
+}
+
+function moveHighlightDown() {
+    if (highlightedItem.value) {
+        const currentHightlightedIndex = filteredTags.value.indexOf(
+            highlightedItem.value
+        );
+        if (currentHightlightedIndex === filteredTags.value.length - 1) {
+            highlightedItemId.value = filteredTags.value[0].id;
+        } else {
+            highlightedItemId.value =
+                filteredTags.value[currentHightlightedIndex + 1].id;
+        }
+    }
+    console.log('move down');
+}
+
+const highlightedItemId = ref<string | null>(null);
+const highlightedItem = computed(() => {
+    return tags.value.find((tag) => tag.id === highlightedItemId.value);
+});
+</script>
+
+<template>
+    <Dropdown width="120" v-model="open" :closeOnContentClick="false">
+        <template #trigger>
+            <slot name="trigger"></slot>
+        </template>
+        <template #content>
+            <input
+                :value="searchValue"
+                @input="updateSearchValue"
+                @keydown.enter="addTagIfNoneExists"
+                data-testid="tag_dropdown_search"
+                @keydown.up.prevent="moveHighlightUp"
+                @keydown.down.prevent="moveHighlightDown"
+                ref="searchInput"
+                class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-seperator focus:border-card-background-seperator w-full"
+                placeholder="Search for a tag..." />
+            <div ref="dropdownViewport" class="w-60">
+                <div
+                    v-if="searchValue.length > 0 && filteredTags.length === 0"
+                    class="bg-card-background-active">
+                    <div
+                        class="flex space-x-3 items-center px-4 py-3 text-xs font-medium border-t rounded-b-lg border-card-background-seperator">
+                        <PlusCircleIcon
+                            class="w-5 flex-shrink-0"></PlusCircleIcon>
+                        <span>Add "{{ searchValue }}" as a new Tag</span>
+                    </div>
+                </div>
+                <div v-else></div>
+                <div
+                    v-for="tag in filteredTags"
+                    :key="tag.id"
+                    role="option"
+                    :value="tag.id"
+                    :class="{
+                        'bg-card-background-active':
+                            tag.id === highlightedItemId,
+                    }"
+                    data-testid="tag_dropdown_entries"
+                    :data-tag-id="tag.id">
+                    <TagDropdownItem
+                        :selected="isTagSelected(tag.id)"
+                        @click="toggleTag(tag.id)"
+                        :name="tag.name"></TagDropdownItem>
+                </div>
+            </div>
+        </template>
+    </Dropdown>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/common/TagDropdownItem.vue b/resources/js/Components/Common/Tag/TagDropdownItem.vue
similarity index 100%
rename from resources/js/Components/common/TagDropdownItem.vue
rename to resources/js/Components/Common/Tag/TagDropdownItem.vue
diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue b/resources/js/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue
new file mode 100644
index 00000000..fec1ad82
--- /dev/null
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+const value = defineModel();
+const emit = defineEmits(['changed']);
+
+function onChange(event: Event) {
+    const target = event.target as HTMLInputElement;
+    emit('changed', target.value);
+}
+</script>
+
+<template>
+    <div>
+        <label class="input-sizer text-sm font-medium" :data-value="value">
+            <input
+                data-testid="time_entry_description"
+                v-model="value"
+                @blur="onChange"
+                @keydown.enter="onChange"
+                placeholder="Add a description"
+                class="text-white placeholder-muted font-medium bg-transparent hover:bg-card-background rounded-lg border border-transparent hover:border-card-border" />
+        </label>
+    </div>
+</template>
+
+<style scoped lang="postcss">
+.input-sizer {
+    display: inline-grid;
+    vertical-align: top;
+    align-items: center;
+    position: relative;
+
+    &.stacked {
+        align-items: stretch;
+
+        &::after,
+        input,
+        textarea {
+            grid-area: 2 / 1;
+        }
+    }
+
+    &::after,
+    input,
+    textarea {
+        width: auto;
+        min-width: 1em;
+        grid-area: 1 / 2;
+        padding: 0.5rem 0.75rem;
+        margin: 0;
+        font: inherit;
+        resize: none;
+        background: none;
+        appearance: none;
+        border: none;
+    }
+
+    &::after {
+        content: attr(data-value) ' ';
+        visibility: hidden;
+        white-space: pre-wrap;
+    }
+}
+</style>
diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryMoreOptionsDropdown.vue b/resources/js/Components/Common/TimeEntry/TimeEntryMoreOptionsDropdown.vue
new file mode 100644
index 00000000..ba9bdfb8
--- /dev/null
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryMoreOptionsDropdown.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import Dropdown from '@/Components/Dropdown.vue';
+import { TrashIcon } from '@heroicons/vue/20/solid';
+const emit = defineEmits<{
+    delete: [];
+}>();
+</script>
+
+<template>
+    <Dropdown>
+        <template #trigger>
+            <svg
+                data-testid="time_entry_actions"
+                class="h-10 w-10 p-2 rounded-full hover:bg-card-background opacity-20 group-hover:opacity-100 transition"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg">
+                <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="1.5"
+                    d="M12 5.92A.96.96 0 1 0 12 4a.96.96 0 0 0 0 1.92m0 7.04a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92M12 20a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92" />
+            </svg>
+        </template>
+        <template #content>
+            <button
+                @click="emit('delete')"
+                data-testid="time_entry_delete"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                <TrashIcon class="w-5 text-icon-active"></TrashIcon>
+                <span>Delete</span>
+            </button>
+        </template>
+    </Dropdown>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryRangeSelector.vue b/resources/js/Components/Common/TimeEntry/TimeEntryRangeSelector.vue
new file mode 100644
index 00000000..74adc1f9
--- /dev/null
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryRangeSelector.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import Dropdown from '@/Components/Dropdown.vue';
+import { defineProps, ref, watch } from 'vue';
+import { formatTime } from '@/utils/time';
+import TimePicker from '@/Components/Common/TimePicker.vue';
+import { useFocusWithin } from '@vueuse/core';
+
+const props = defineProps<{
+    start: string;
+    end: string | null;
+}>();
+
+function formatStartEnd(start: string, end: string | null) {
+    if (end) {
+        return `${formatTime(start)} - ${formatTime(end)}`;
+    } else {
+        return `${formatTime(start)} - ...`;
+    }
+}
+const emit = defineEmits(['changed']);
+const tempStart = ref(props.start);
+const tempEnd = ref(props.end || null);
+
+watch(props, () => {
+    tempStart.value = props.start;
+    tempEnd.value = props.end;
+});
+function updateTimeEntry() {
+    emit('changed', tempStart.value, tempEnd.value);
+}
+
+const dropdownContent = ref();
+const { focused } = useFocusWithin(dropdownContent);
+
+watch(focused, (newValue, oldValue) => {
+    if (oldValue === true && newValue === false) {
+        console.log(newValue, oldValue);
+        updateTimeEntry();
+    }
+});
+</script>
+
+<template>
+    <div class="relative">
+        <Dropdown
+            align="right"
+            :close-on-content-click="false"
+            @submit="updateTimeEntry">
+            <template #trigger>
+                <button
+                    data-testid="time_entry_range_selector"
+                    class="text-muted w-[110px] px-2 py-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium">
+                    {{ formatStartEnd(start, end) }}
+                </button>
+            </template>
+            <template #content>
+                <div
+                    ref="dropdownContent"
+                    class="grid grid-cols-2 divide-x divide-card-background-seperator text-center py-1">
+                    <div>
+                        <div class="font-bold text-white text-sm pb-1">
+                            Start
+                        </div>
+                        <TimePicker
+                            data-testid="time_entry_range_start"
+                            @updated="updateTimeEntry"
+                            v-model="tempStart"></TimePicker>
+                    </div>
+                    <div>
+                        <div class="font-bold text-white text-sm pb-1">End</div>
+                        <TimePicker
+                            data-testid="time_entry_range_end"
+                            @updated="updateTimeEntry"
+                            v-model="tempEnd"></TimePicker>
+                    </div>
+                </div>
+            </template>
+        </Dropdown>
+    </div>
+</template>
+
+<style></style>
diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryRow.vue b/resources/js/Components/Common/TimeEntry/TimeEntryRow.vue
new file mode 100644
index 00000000..07700bc8
--- /dev/null
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryRow.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import MainContainer from '@/Pages/MainContainer.vue';
+import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
+import TimeEntryRangeSelector from '@/Components/Common/TimeEntry/TimeEntryRangeSelector.vue';
+import type { Project, TimeEntry } from '@/utils/api';
+import { computed } from 'vue';
+import { useProjectsStore } from '@/utils/useProjects';
+import { storeToRefs } from 'pinia';
+import ProjectDropdown from '@/Components/Common/Project/ProjectDropdown.vue';
+import TimeEntryDescriptionInput from '@/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue';
+import { useTimeEntriesStore } from '@/utils/useTimeEntries';
+import TimeEntryRowTagDropdown from '@/Components/Common/TimeEntry/TimeEntryRowTagDropdown.vue';
+import TimeEntryRowDurationInput from '@/Components/Common/TimeEntry/TimeEntryRowDurationInput.vue';
+import dayjs from 'dayjs';
+import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
+import TimeEntryMoreOptionsDropdown from '@/Components/Common/TimeEntry/TimeEntryMoreOptionsDropdown.vue';
+
+const projectsStore = useProjectsStore();
+const { projects } = storeToRefs(projectsStore);
+
+const currentTimeEntryStore = useCurrentTimeEntryStore();
+const { stopTimer, updateTimer } = currentTimeEntryStore;
+const { currentTimeEntry } = storeToRefs(currentTimeEntryStore);
+
+const props = defineProps<{
+    timeEntry: TimeEntry;
+}>();
+
+const { updateTimeEntry, createTimeEntry, fetchTimeEntries } =
+    useTimeEntriesStore();
+
+const timeEntryProject = computed<Project | undefined>(() => {
+    return projects.value.find(
+        (project) => project.id === props.timeEntry.project_id
+    );
+});
+
+async function updateStartEndTime(start: string, end: string | null) {
+    if (currentTimeEntry.value.id === props.timeEntry.id) {
+        currentTimeEntry.value.start = start;
+        currentTimeEntry.value.end = end;
+        await updateTimer();
+    } else {
+        await updateTimeEntry({ ...props.timeEntry, start, end });
+    }
+    await fetchTimeEntries();
+}
+
+async function onStartStopClick() {
+    if (props.timeEntry.start && !props.timeEntry.end) {
+        await updateTimeEntry({
+            ...props.timeEntry,
+            end: dayjs().utc().format(),
+        });
+    } else {
+        if (currentTimeEntry.value.id) {
+            await stopTimer();
+        }
+        await createTimeEntry({
+            ...props.timeEntry,
+            start: dayjs().utc().format(),
+            end: null,
+        });
+    }
+    useCurrentTimeEntryStore().fetchCurrentTimeEntry();
+    fetchTimeEntries();
+}
+
+function deleteTimeEntry() {
+    useTimeEntriesStore().deleteTimeEntry(props.timeEntry.id);
+    fetchTimeEntries();
+}
+
+function updateTimeEntryDescription(description: string) {
+    updateTimeEntry({ ...props.timeEntry, description });
+}
+</script>
+
+<template>
+    <div
+        class="border-b border-card-border transition"
+        data-testid="time_entry_row">
+        <MainContainer>
+            <div class="flex py-1.5 items-center justify-between group">
+                <div class="flex space-x-1 items-center">
+                    <input
+                        type="checkbox"
+                        class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
+                    <TimeEntryDescriptionInput
+                        @changed="updateTimeEntryDescription"
+                        :modelValue="
+                            timeEntry.description
+                        "></TimeEntryDescriptionInput>
+                    <ProjectDropdown
+                        :border="false"
+                        :value="timeEntryProject"></ProjectDropdown>
+                </div>
+                <div class="flex items-center font-medium space-x-2">
+                    <TimeEntryRowTagDropdown
+                        @changed="updateTimeEntry(timeEntry)"
+                        :modelValue="timeEntry.tags"></TimeEntryRowTagDropdown>
+                    <div>
+                        <TimeEntryRangeSelector
+                            :start="timeEntry.start"
+                            :end="timeEntry.end"
+                            @changed="
+                                updateStartEndTime
+                            "></TimeEntryRangeSelector>
+                    </div>
+                    <TimeEntryRowDurationInput
+                        :start="timeEntry.start"
+                        :end="timeEntry.end"
+                        @changed="
+                            updateStartEndTime
+                        "></TimeEntryRowDurationInput>
+                    <TimeTrackerStartStop
+                        @changed="onStartStopClick"
+                        :active="!!(timeEntry.start && !timeEntry.end)"
+                        class="opacity-20 group-hover:opacity-100"></TimeTrackerStartStop>
+                    <TimeEntryMoreOptionsDropdown
+                        @delete="
+                            deleteTimeEntry
+                        "></TimeEntryMoreOptionsDropdown>
+                </div>
+            </div>
+        </MainContainer>
+    </div>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryRowDurationInput.vue b/resources/js/Components/Common/TimeEntry/TimeEntryRowDurationInput.vue
new file mode 100644
index 00000000..1f809ada
--- /dev/null
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryRowDurationInput.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { calculateDifference, formatHumanReadableDuration } from '@/utils/time';
+import { computed, defineProps, ref } from 'vue';
+import parse from 'parse-duration';
+import dayjs from 'dayjs';
+
+const props = defineProps<{
+    start: string;
+    end: string | null;
+}>();
+const emit = defineEmits<{
+    changed: [start: string, end: string | null];
+}>();
+
+const temporaryCustomTimerEntry = ref<string>('');
+
+function updateTimerAndStartLiveTimerUpdate() {
+    const time = parse(temporaryCustomTimerEntry.value, 's');
+    if (time && time > 0) {
+        let newEndDate = props.end;
+        let newStartDate = props.start;
+        if (props.end) {
+            // only update end for time entries that are already finished
+            newEndDate = dayjs(props.start).utc().add(time, 's').format();
+        } else {
+            newStartDate = dayjs().utc().subtract(time, 's').format();
+        }
+        emit('changed', newStartDate, newEndDate);
+    }
+    temporaryCustomTimerEntry.value = '';
+}
+
+const currentTime = computed({
+    get() {
+        if (temporaryCustomTimerEntry.value !== '') {
+            return temporaryCustomTimerEntry.value;
+        }
+        return formatHumanReadableDuration(
+            calculateDifference(props.start, props.end)
+        );
+    },
+    // setter
+    set(newValue) {
+        if (newValue) {
+            temporaryCustomTimerEntry.value = newValue;
+        } else {
+            temporaryCustomTimerEntry.value = '';
+        }
+    },
+});
+
+function selectInput(event: Event) {
+    const target = event.target as HTMLInputElement;
+    target.select();
+}
+</script>
+
+<template>
+    <input
+        data-testid="time_entry_duration_input"
+        class="text-white w-[100px] px-3 py-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold"
+        @focus="selectInput"
+        @blur="updateTimerAndStartLiveTimerUpdate"
+        @keydown.enter="updateTimerAndStartLiveTimerUpdate"
+        v-model="currentTime" />
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryRowHeading.vue b/resources/js/Components/Common/TimeEntry/TimeEntryRowHeading.vue
new file mode 100644
index 00000000..efa55c8a
--- /dev/null
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryRowHeading.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import DaySectionHeader from '@/Components/Common/DaySectionHeader.vue';
+import MainContainer from '@/Pages/MainContainer.vue';
+defineProps<{
+    date: string;
+}>();
+</script>
+
+<template>
+    <div
+        class="bg-card-background border-t border-b border-card-border py-1.5 text-sm">
+        <MainContainer>
+            <DaySectionHeader :date></DaySectionHeader>
+        </MainContainer>
+    </div>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryRowTagDropdown.vue b/resources/js/Components/Common/TimeEntry/TimeEntryRowTagDropdown.vue
new file mode 100644
index 00000000..9cbaf0d5
--- /dev/null
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryRowTagDropdown.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import TagDropdown from '@/Components/Common/Tag/TagDropdown.vue';
+import { computed } from 'vue';
+import TagBadge from '@/Components/Common/Tag/TagBadge.vue';
+import type { Tag } from '@/utils/api';
+import { useTagsStore } from '@/utils/useTags';
+import { storeToRefs } from 'pinia';
+
+const tagsStore = useTagsStore();
+const { tags } = storeToRefs(tagsStore);
+const emit = defineEmits(['changed']);
+const model = defineModel<string[]>({
+    default: [],
+});
+
+const timeEntryTags = computed<Tag[]>(() => {
+    return tags.value.filter((tag) => model.value.includes(tag.id));
+});
+</script>
+
+<template>
+    <TagDropdown @changed="emit('changed')" v-model="model">
+        <template #trigger>
+            <button data-testid="time_entry_tag_dropdown">
+                <TagBadge
+                    :border="false"
+                    size="large"
+                    class="border-0"
+                    :name="
+                        timeEntryTags.map((tag) => tag.name).join(', ')
+                    "></TagBadge>
+            </button>
+        </template>
+    </TagDropdown>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Common/TimePicker.vue b/resources/js/Components/Common/TimePicker.vue
new file mode 100644
index 00000000..7c1a7feb
--- /dev/null
+++ b/resources/js/Components/Common/TimePicker.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import dayjs from 'dayjs';
+
+const model = defineModel<string | null>({
+    default: null,
+});
+
+const hours = computed(() => {
+    return model.value ? dayjs(model.value).utc().hour() : null;
+});
+
+const minutes = computed(() => {
+    return model.value ? dayjs(model.value).utc().minute() : null;
+});
+
+function updateMinutes(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const newValue = target.value;
+    if (parseInt(newValue)) {
+        model.value = dayjs(model.value)
+            .utc()
+            .set('minutes', parseInt(newValue))
+            .format();
+    }
+}
+
+function updateHours(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const newValue = target.value;
+    if (parseInt(newValue)) {
+        model.value = dayjs(model.value)
+            .utc()
+            .set('hours', parseInt(newValue))
+            .format();
+    }
+}
+</script>
+
+<template>
+    <div class="flex items-center justify-center">
+        <input
+            :value="hours"
+            @input="updateHours"
+            data-testid="time_picker_hour"
+            type="text"
+            class="bg-card-background border-none text-sm px-1 py-0.5 w-[30px] text-center focus:ring-0 focus:bg-card-background-active" />
+        <span>:</span>
+        <input
+            :value="minutes"
+            @input="updateMinutes"
+            data-testid="time_picker_minute"
+            type="text"
+            class="bg-card-background border-none text-sm px-1 py-0.5 w-[30px] text-center focus:ring-0 focus:bg-card-background-active" />
+    </div>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Common/TimeTracker/TimeTrackerTagDropdown.vue b/resources/js/Components/Common/TimeTracker/TimeTrackerTagDropdown.vue
new file mode 100644
index 00000000..71725fcd
--- /dev/null
+++ b/resources/js/Components/Common/TimeTracker/TimeTrackerTagDropdown.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import TagDropdown from '@/Components/Common/Tag/TagDropdown.vue';
+import { twMerge } from 'tailwind-merge';
+import { TagIcon } from '@heroicons/vue/20/solid';
+import { computed } from 'vue';
+
+const emit = defineEmits(['changed']);
+const model = defineModel({
+    default: [],
+});
+const iconColorClasses = computed(() => {
+    if (model.value.length > 0) {
+        return 'text-accent-200/80 focus:text-accent-200 hover:text-accent-200';
+    } else {
+        return 'text-icon-default hover:text-icon-active focus:text-icon-active';
+    }
+});
+</script>
+
+<template>
+    <TagDropdown @changed="emit('changed')" v-model="model">
+        <template #trigger>
+            <button
+                data-testid="tag_dropdown"
+                :class="
+                    twMerge(
+                        iconColorClasses,
+                        'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-seperator hover:bg-card-background-seperator rounded-full w-11 h-11 flex items-center justify-center'
+                    )
+                ">
+                <TagIcon class="w-7 h-7"></TagIcon>
+                <span
+                    v-if="model.length > 1"
+                    class="font-extrabold absolute rounded-full text-xs w-3 h-3 block top-[15px] rotate-[45deg] right-[14px] text-card-background">
+                    {{ model.length }}
+                </span>
+            </button>
+        </template>
+    </TagDropdown>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Common/TimeTrackerStartStop.vue b/resources/js/Components/Common/TimeTrackerStartStop.vue
new file mode 100644
index 00000000..662f09d5
--- /dev/null
+++ b/resources/js/Components/Common/TimeTrackerStartStop.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { twMerge } from 'tailwind-merge';
+import { computed } from 'vue';
+
+const emit = defineEmits(['changed']);
+
+const props = withDefaults(
+    defineProps<{
+        size: 'base' | 'large';
+        active: boolean;
+    }>(),
+    {
+        size: 'base',
+        active: false,
+    }
+);
+const buttonSizeClasses = {
+    base: 'w-8 h-8 bg-accent-200/40 hover:scale-110 hover:bg-accent-300/70 ring-accent-200/10 focus:ring-accent-200/10 hover:ring-4',
+    large: 'w-11 h-11 ring-accent-200/10 focus:ring-accent-200/20 ring-8 hover:scale-110',
+};
+const iconClass = {
+    base: 'w-3.5 h-3.5',
+    large: 'w-4 h-4',
+};
+
+const buttonColorClasses = computed(() => {
+    if (props.active) {
+        return 'bg-red-400/80 hover:bg-red-500/80 focus:bg-red-500/80';
+    } else {
+        return 'bg-accent-300/50 hover:bg-accent-400/70 focus:bg-accent-400/70';
+    }
+});
+
+function toggleState() {
+    emit('changed', !props.active);
+}
+</script>
+
+<template>
+    <button
+        @click="toggleState"
+        data-testid="timer_button"
+        :class="
+            twMerge(
+                buttonSizeClasses[size],
+                buttonColorClasses,
+                'flex items-center justify-center py-1 transition  focus:outline-0 rounded-full text-white '
+            )
+        ">
+        <Transition name="fade" mode="out-in">
+            <svg
+                v-if="props.active"
+                :class="iconClass[size]"
+                viewBox="0 0 14 14"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M0.461426 2.74913C0.461426 1.48677 1.48666 0.461538 2.75076 0.461538H11.249C12.5131 0.461538 13.5383 1.48677 13.5383 2.75087V11.2491C13.5383 12.5132 12.5131 13.5385 11.249 13.5385H2.7525C2.4518 13.5387 2.154 13.4796 1.87614 13.3647C1.59828 13.2497 1.34582 13.0811 1.13319 12.8684C0.920559 12.6558 0.751936 12.4033 0.636968 12.1255C0.521999 11.8476 0.462941 11.5498 0.46317 11.2491V2.75262L0.461426 2.74913Z"
+                    fill="currentColor" />
+            </svg>
+            <svg
+                v-else
+                :class="iconClass[size]"
+                viewBox="0 0 7 8"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M6.56167 3.18089C6.70764 3.26214 6.82926 3.38092 6.91393 3.52494C6.99859 3.66896 7.04324 3.83299 7.04324 4.00005C7.04324 4.16712 6.99859 4.33115 6.91393 4.47517C6.82926 4.61919 6.70764 4.73797 6.56167 4.81922L1.8925 7.41339C1.74982 7.49259 1.58895 7.53317 1.42578 7.53113C1.26261 7.52909 1.1028 7.48449 0.962147 7.40175C0.821497 7.31901 0.704879 7.20099 0.623826 7.05937C0.542772 6.91774 0.50009 6.7574 0.5 6.59422V1.40589C0.5 0.691721 1.2675 0.239221 1.8925 0.586721L6.56167 3.18089Z"
+                    fill="currentColor" />
+            </svg>
+        </Transition>
+    </button>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+</style>
diff --git a/resources/js/Components/CurrentSidebarTimer.vue b/resources/js/Components/CurrentSidebarTimer.vue
index 6fb8ce23..b6a52c49 100644
--- a/resources/js/Components/CurrentSidebarTimer.vue
+++ b/resources/js/Components/CurrentSidebarTimer.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import TimeTrackerStartStop from '@/Components/common/TimeTrackerStartStop.vue';
 import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 import dayjs from 'dayjs';
 import { formatHumanReadableDuration } from '@/utils/time';
+import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
 const store = useCurrentTimeEntryStore();
 const { currentTimeEntry, now, isActive } = storeToRefs(store);
 const { onToggleButtonPress } = store;
diff --git a/resources/js/Components/Dashboard/DayOverviewCardEntry.vue b/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
index 297bc767..7cf856ca 100644
--- a/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
+++ b/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
@@ -1,36 +1,22 @@
 <script setup lang="ts">
-import dayjs from 'dayjs';
-
 defineProps<{
     date: string;
     duration: number;
 }>();
-import relativeTime from 'dayjs/plugin/relativeTime';
-import isToday from 'dayjs/plugin/isToday';
-import isYesterday from 'dayjs/plugin/isYesterday';
-import { formatHumanReadableDuration } from '@/utils/time';
-
-dayjs.extend(relativeTime);
-dayjs.extend(isToday);
-dayjs.extend(isYesterday);
-function dayFormat(date: string) {
-    if (dayjs(date).isToday()) {
-        return 'Today';
-    } else if (dayjs(date).isYesterday()) {
-        return 'Yesterday';
-    }
-    return dayjs(date).fromNow();
-}
+import {
+    formatHumanReadableDate,
+    formatHumanReadableDuration,
+} from '@/utils/time';
 </script>
 
 <template>
-    <div class="px-4 py-1.5 grid grid-cols-3">
+    <div class="px-3.5 py-2 flex @container">
         <div class="flex items-center">
             <p class="font-semibold text-sm text-white">
-                {{ dayFormat(date) }}
+                {{ formatHumanReadableDate(date) }}
             </p>
         </div>
-        <div class="flex items-center justify-center">
+        <div class="items-center justify-center flex-1 flex">
             <svg
                 class="w-20 opacity-70 transition hover:opacity-100"
                 viewBox="0 0 42 10"
@@ -96,7 +82,8 @@ function dayFormat(date: string) {
                     fill-opacity="0.9" />
             </svg>
         </div>
-        <div class="flex items-center justify-center text-muted font-semibold">
+        <div
+            class="flex text-sm items-center justify-center text-muted font-semibold">
             {{ formatHumanReadableDuration(duration) }}
         </div>
     </div>
diff --git a/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue b/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
index be1592ef..8a562987 100644
--- a/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
+++ b/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import ProjectBadge from '@/Components/common/ProjectBadge.vue';
-import TimeTrackerStartStop from '@/Components/common/TimeTrackerStartStop.vue';
+import ProjectBadge from '@/Components/Common/Project/ProjectBadge.vue';
+import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
 
 defineProps<{
     title: string;
@@ -9,7 +9,7 @@ defineProps<{
 </script>
 
 <template>
-    <div class="px-4 py-2 grid grid-cols-5">
+    <div class="px-3.5 py-2 grid grid-cols-5">
         <div class="col-span-4">
             <p class="font-semibold text-white text-sm pb-1">
                 {{ title }}
diff --git a/resources/js/Components/Dashboard/TeamActivityCardEntry.vue b/resources/js/Components/Dashboard/TeamActivityCardEntry.vue
index f244a9ed..e9480ea3 100644
--- a/resources/js/Components/Dashboard/TeamActivityCardEntry.vue
+++ b/resources/js/Components/Dashboard/TeamActivityCardEntry.vue
@@ -7,25 +7,31 @@ defineProps<{
 </script>
 
 <template>
-    <div class="px-4 py-3 grid grid-cols-3">
+    <div class="px-4 py-2 2xl:py-3">
         <div class="col-span-2">
-            <p class="font-semibold text-sm text-white">
-                {{ name }}
-            </p>
+            <div class="flex justify-between">
+                <p class="font-semibold text-sm text-white">
+                    {{ name }}
+                </p>
+                <div
+                    v-if="working"
+                    class="flex space-x-1.5 items-center justify-end">
+                    <span
+                        class="relative flex h-3 w-3 justify-center items-center">
+                        <span
+                            class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
+                        <span
+                            class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+                    </span>
+                    <span
+                        class="text-green-500 font-medium text-sm block pb-0.5">
+                        working
+                    </span>
+                </div>
+            </div>
             <div class="text-muted text-sm font-medium">
                 {{ description }}
             </div>
         </div>
-        <div v-if="working" class="flex space-x-1.5 items-center justify-end">
-            <span class="relative flex h-3 w-3 justify-center items-center">
-                <span
-                    class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
-                <span
-                    class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
-            </span>
-            <span class="text-green-500 font-medium text-sm block pb-0.5">
-                working
-            </span>
-        </div>
     </div>
 </template>
diff --git a/resources/js/Components/Dashboard/ThisWeekOverview.vue b/resources/js/Components/Dashboard/ThisWeekOverview.vue
index 3204ff9f..514b0f41 100644
--- a/resources/js/Components/Dashboard/ThisWeekOverview.vue
+++ b/resources/js/Components/Dashboard/ThisWeekOverview.vue
@@ -10,9 +10,9 @@ import {
 } from 'echarts/components';
 import VChart, { THEME_KEY } from 'vue-echarts';
 import { provide, ref } from 'vue';
-import StatCard from '@/Components/common/StatCard.vue';
+import StatCard from '@/Components/Common/StatCard.vue';
 import { ClockIcon } from '@heroicons/vue/20/solid';
-import CardTitle from '@/Components/common/CardTitle.vue';
+import CardTitle from '@/Components/Common/CardTitle.vue';
 import LinearGradient from 'zrender/lib/graphic/LinearGradient';
 import ProjectsChartCard from '@/Components/Dashboard/ProjectsChartCard.vue';
 import { formatHumanReadableDuration } from '@/utils/time';
@@ -130,7 +130,7 @@ const option = ref({
 </script>
 
 <template>
-    <div class="grid gap-x-6 xl:gap-x-8 grid-cols-4">
+    <div class="grid gap-x-6 xl:gap-x-6 grid-cols-4">
         <div class="col-span-3">
             <CardTitle
                 title="This Week"
diff --git a/resources/js/Components/Dropdown.vue b/resources/js/Components/Dropdown.vue
index fb5709c9..f02c284e 100644
--- a/resources/js/Components/Dropdown.vue
+++ b/resources/js/Components/Dropdown.vue
@@ -21,13 +21,17 @@ const props = withDefaults(
     }
 );
 
-const emit = defineEmits(['open']);
+const emit = defineEmits(['open', 'submit']);
 const open = defineModel({ default: false });
 
 const closeOnEscape = (e: KeyboardEvent) => {
     if (open.value && e.key === 'Escape') {
         open.value = false;
     }
+    if (open.value && e.key === 'Enter') {
+        emit('submit');
+        if (props.closeOnContentClick) open.value = false;
+    }
 };
 
 onMounted(() => document.addEventListener('keydown', closeOnEscape));
@@ -67,6 +71,11 @@ function toggleOpen() {
         emit('open');
     }
 }
+
+function onBackgroundClick() {
+    emit('submit');
+    open.value = false;
+}
 </script>
 
 <template>
@@ -76,7 +85,10 @@ function toggleOpen() {
         </div>
 
         <!-- Full Screen Dropdown Overlay -->
-        <div v-show="open" class="fixed inset-0 z-40" @click="open = false" />
+        <div
+            v-show="open"
+            class="fixed inset-0 z-40"
+            @click="onBackgroundClick" />
 
         <transition
             enter-active-class="transition ease-out duration-200"
diff --git a/resources/js/Components/NavigationSidebarItem.vue b/resources/js/Components/NavigationSidebarItem.vue
index 1f7a7fee..5c2e274c 100644
--- a/resources/js/Components/NavigationSidebarItem.vue
+++ b/resources/js/Components/NavigationSidebarItem.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Component } from 'vue';
+import { Link } from '@inertiajs/vue3';
 
 defineProps<{
     title: string;
@@ -11,13 +12,13 @@ defineProps<{
 
 <template>
     <li>
-        <a
+        <Link
             :href="href"
             :class="[
                 current
                     ? 'bg-menu-active text-white'
-                    : 'text-indigo-200 hover:text-white hover:bg-menu-active',
-                'group flex gap-x-3 rounded-md px-3 py-2 transition leading-6 font-medium',
+                    : 'text-muted hover:text-white hover:bg-menu-active ',
+                'group flex gap-x-2 rounded-md px-2 py-1.5 transition leading-6 font-semibold text-sm items-center',
             ]">
             <component
                 :is="icon"
@@ -25,10 +26,10 @@ defineProps<{
                     current
                         ? 'text-icon-active'
                         : 'text-icon-default group-hover:text-icon-active',
-                    'transition h-6 w-6 shrink-0',
+                    'transition h-5 w-5 shrink-0',
                 ]"
                 aria-hidden="true" />
             {{ title }}
-        </a>
+        </Link>
     </li>
 </template>
diff --git a/resources/js/Components/TimeTracker.vue b/resources/js/Components/TimeTracker.vue
index 41d86276..2031fb10 100644
--- a/resources/js/Components/TimeTracker.vue
+++ b/resources/js/Components/TimeTracker.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { ClockIcon } from '@heroicons/vue/20/solid';
-import CardTitle from '@/Components/common/CardTitle.vue';
-import BillableToggleButton from '@/Components/common/BillableToggleButton.vue';
-import TimeTrackerStartStop from '@/Components/common/TimeTrackerStartStop.vue';
-import TagDropdown from '@/Components/common/TagDropdown.vue';
-import ProjectDropdown from '@/Components/common/ProjectDropdown.vue';
+import CardTitle from '@/Components/Common/CardTitle.vue';
+import BillableToggleButton from '@/Components/Common/BillableToggleButton.vue';
+import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
+import ProjectDropdown from '@/Components/Common/Project/ProjectDropdown.vue';
 import { usePage } from '@inertiajs/vue3';
 import { type User } from '@/types/models';
 import { computed, onMounted, ref, watch } from 'vue';
@@ -14,8 +13,8 @@ import duration from 'dayjs/plugin/duration';
 
 import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
 import { storeToRefs } from 'pinia';
-import type { Project } from '@/utils/useProjects';
 import parse from 'parse-duration';
+import TimeTrackerTagDropdown from '@/Components/Common/TimeTracker/TimeTrackerTagDropdown.vue';
 
 const page = usePage<{
     auth: {
@@ -70,16 +69,6 @@ onMounted(async () => {
     }
 });
 
-const currentProject = ref<Project>();
-watch(currentProject, () => {
-    if (currentProject.value) {
-        currentTimeEntry.value.project_id = currentProject.value.id;
-        if (isActive.value) {
-            useCurrentTimeEntryStore().updateTimer();
-        }
-    }
-});
-
 function updateTimeEntry() {
     if (currentTimeEntry.value.id) {
         useCurrentTimeEntryStore().updateTimer();
@@ -122,12 +111,14 @@ function updateTimerAndStartLiveTimerUpdate() {
                     type="text" />
             </div>
             <div class="flex items-center">
-                <ProjectDropdown v-model="currentProject"></ProjectDropdown>
+                <ProjectDropdown
+                    @changed="updateTimeEntry"
+                    v-model="currentTimeEntry.project_id"></ProjectDropdown>
             </div>
             <div class="flex items-center space-x-2 px-4">
-                <TagDropdown
+                <TimeTrackerTagDropdown
                     @changed="updateTimeEntry"
-                    v-model="currentTimeEntry.tags"></TagDropdown>
+                    v-model="currentTimeEntry.tags"></TimeTrackerTagDropdown>
                 <BillableToggleButton></BillableToggleButton>
             </div>
             <div class="border-l border-card-border">
diff --git a/resources/js/Components/common/TagDropdown.vue b/resources/js/Components/common/TagDropdown.vue
deleted file mode 100644
index 85a55f43..00000000
--- a/resources/js/Components/common/TagDropdown.vue
+++ /dev/null
@@ -1,220 +0,0 @@
-<script setup lang="ts">
-import { PlusCircleIcon, TagIcon } from '@heroicons/vue/20/solid';
-import Dropdown from '@/Components/Dropdown.vue';
-import {
-    type Component,
-    computed,
-    nextTick,
-    onMounted,
-    ref,
-    watch,
-    watchEffect,
-} from 'vue';
-import TagDropdownItem from '@/Components/common/TagDropdownItem.vue';
-import { twMerge } from 'tailwind-merge';
-import {
-    ComboboxAnchor,
-    ComboboxContent,
-    ComboboxEmpty,
-    ComboboxInput,
-    ComboboxItem,
-    ComboboxRoot,
-    ComboboxViewport,
-} from 'radix-vue';
-import { useTagsStore } from '@/utils/useTags';
-import { storeToRefs } from 'pinia';
-
-const tagsStore = useTagsStore();
-const { tags } = storeToRefs(tagsStore);
-
-const emit = defineEmits(['changed']);
-
-const model = defineModel<string[]>({
-    default: [],
-});
-
-onMounted(async () => {
-    await tagsStore.fetchTags();
-});
-
-const searchInput = ref<Component | null>(null);
-const open = ref(false);
-const dropdownViewport = ref<Component | null>(null);
-
-const searchValue = ref('');
-
-function isTagSelected(id: string) {
-    return model.value.includes(id);
-}
-
-function addOrRemoveTagFromSelection(id: string) {
-    if (model.value.includes(id)) {
-        model.value = model.value.filter((tagId) => tagId !== id);
-    } else {
-        model.value.push(id);
-    }
-    emit('changed');
-}
-
-const iconColorClasses = computed(() => {
-    if (model.value.length > 0) {
-        return 'text-accent-200/80 focus:text-accent-200 hover:text-accent-200';
-    } else {
-        return 'text-icon-default hover:text-icon-active focus:text-icon-active';
-    }
-});
-
-watch(open, (isOpen) => {
-    if (isOpen) {
-        nextTick(() => {
-            // @ts-expect-error We need to access the actual HTML Element to focus as radix-vue does not support any other way right now
-            searchInput.value?.$el?.focus();
-        });
-
-        tags.value.sort((a) => {
-            return model.value.includes(a.id) ? -1 : 1;
-        });
-    }
-});
-
-const filteredTags = computed(() => {
-    return tags.value.filter((tag) => {
-        return tag.name
-            .toLowerCase()
-            .includes(searchValue.value?.toLowerCase()?.trim() || '');
-    });
-});
-
-const showAllTags = ref(false);
-
-const shownTags = computed(() => {
-    if (showAllTags.value) {
-        return filteredTags.value;
-    } else {
-        return filteredTags.value.slice(0, 5);
-    }
-});
-
-const moreTagsAvailable = computed(() => {
-    return filteredTags.value.length - shownTags.value.length;
-});
-
-async function addTagIfNoneExists() {
-    if (searchValue.value.length > 0 && filteredTags.value.length === 0) {
-        const newTag = await tagsStore.createTag(searchValue.value);
-        addOrRemoveTagFromSelection(newTag.id);
-        searchValue.value = '';
-    }
-}
-
-function removeTagLimit() {
-    showAllTags.value = true;
-}
-
-watchEffect(() => {
-    if (searchValue.value === ' ') {
-        nextTick(() => {
-            searchValue.value = '';
-            const currentSelectedItem =
-                // @ts-expect-error We need to access the actual HTML Element to focus as radix-vue does not support any other way right now
-                dropdownViewport.value?.$el?.querySelector(
-                    '[data-highlighted]'
-                );
-            const highlightedTagId = currentSelectedItem?.getAttribute(
-                'data-tag-id'
-            ) as string;
-            if (highlightedTagId) {
-                const highlightedTag = tags.value.find(
-                    (tag) => tag.id === highlightedTagId
-                );
-                if (highlightedTag) {
-                    addOrRemoveTagFromSelection(highlightedTag.id);
-                }
-            }
-        });
-    }
-});
-
-function updateValue(e: string[]) {
-    model.value = e;
-    emit('changed');
-}
-</script>
-
-<template>
-    <Dropdown width="120" v-model="open" :closeOnContentClick="false">
-        <template #trigger>
-            <button
-                data-testid="tag_dropdown"
-                :class="
-                    twMerge(
-                        iconColorClasses,
-                        'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-seperator hover:bg-card-background-seperator rounded-full w-11 h-11 flex items-center justify-center'
-                    )
-                ">
-                <TagIcon class="w-7 h-7"></TagIcon>
-                <div
-                    v-if="model.length > 1"
-                    class="font-extrabold absolute rounded-full text-xs w-3 h-3 block top-[15px] rotate-[45deg] right-[14px] text-card-background">
-                    {{ model.length }}
-                </div>
-            </button>
-        </template>
-        <template #content>
-            <ComboboxRoot
-                multiple
-                :open="open"
-                @update:modelValue="updateValue as any"
-                v-model:searchTerm="searchValue"
-                class="relative">
-                <ComboboxAnchor>
-                    <ComboboxInput
-                        @keydown.enter="addTagIfNoneExists"
-                        data-testid="tag_dropdown_search"
-                        ref="searchInput"
-                        class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-seperator focus:border-card-background-seperator w-full"
-                        placeholder="Search for a tag..." />
-                </ComboboxAnchor>
-                <ComboboxContent>
-                    <ComboboxViewport ref="dropdownViewport" class="w-60">
-                        <ComboboxEmpty>
-                            <div
-                                v-if="searchValue.length > 0"
-                                class="bg-card-background-active">
-                                <div
-                                    class="flex space-x-3 items-center px-4 py-3 text-xs font-medium border-t rounded-b-lg border-card-background-seperator">
-                                    <PlusCircleIcon
-                                        class="w-5 flex-shrink-0"></PlusCircleIcon>
-                                    <span
-                                        >Add "{{ searchValue }}" as a new
-                                        Tag</span
-                                    >
-                                </div>
-                            </div>
-                            <div v-else></div>
-                        </ComboboxEmpty>
-                        <ComboboxItem
-                            v-for="tag in shownTags"
-                            :key="tag.id"
-                            :value="tag.id"
-                            class="data-[highlighted]:bg-card-background-active"
-                            data-testid="tag_dropdown_entries"
-                            :data-tag-id="tag.id">
-                            <TagDropdownItem
-                                :selected="isTagSelected(tag.id)"
-                                :name="tag.name"></TagDropdownItem>
-                        </ComboboxItem>
-                    </ComboboxViewport>
-                    <button
-                        @click="removeTagLimit"
-                        v-if="moreTagsAvailable > 0"
-                        class="border-t hover:text-white hover:bg-card-background-active px-2 text-center font-semibold py-2 border-t-card-background-seperator">
-                        Show all
-                    </button>
-                </ComboboxContent>
-            </ComboboxRoot>
-        </template>
-    </Dropdown>
-</template>
-
-<style scoped></style>
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index 9c30e358..85f64d3b 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -16,16 +16,25 @@ import {
 } from '@heroicons/vue/20/solid';
 import NavigationSidebarItem from '@/Components/NavigationSidebarItem.vue';
 import UserSettingsIcon from '@/Components/UserSettingsIcon.vue';
+import MainContainer from '@/Pages/MainContainer.vue';
+import { onMounted } from 'vue';
+import { useProjectsStore } from '@/utils/useProjects';
+import { useTagsStore } from '@/utils/useTags';
 
 defineProps({
     title: String,
 });
+
+onMounted(async () => {
+    await useProjectsStore().fetchProjects();
+    await useTagsStore().fetchTags();
+});
 </script>
 
 <template>
     <div class="flex flex-wrap bg-default-background text-muted">
         <div
-            class="flex-shrink-0 h-screen fixed w-[250px] xl:w-[300px] px-2.5 xl:px-4 py-4 flex flex-col justify-between">
+            class="flex-shrink-0 h-screen fixed w-[230px] 2xl:w-[270px] px-2.5 2xl:px-4 py-4 flex flex-col justify-between">
             <div>
                 <div class="border-b border-default-background-seperator pb-2">
                     <OrganizationSwitcher></OrganizationSwitcher>
@@ -45,7 +54,8 @@ defineProps({
                         <NavigationSidebarItem
                             title="Time"
                             :icon="ClockIcon"
-                            :href="route('dashboard')"></NavigationSidebarItem>
+                            :current="route().current('time')"
+                            :href="route('time')"></NavigationSidebarItem>
                         <NavigationSidebarItem
                             title="Reporting"
                             :icon="ChartBarIcon"
@@ -53,9 +63,7 @@ defineProps({
                     </ul>
                 </nav>
 
-                <div class="text-muted font-semibold text-sm pt-6 pb-4">
-                    Manage
-                </div>
+                <div class="text-muted text-sm font-bold pt-6 pb-4">Manage</div>
 
                 <nav>
                     <ul class="space-y-1">
@@ -93,7 +101,7 @@ defineProps({
                 <UserSettingsIcon></UserSettingsIcon>
             </ul>
         </div>
-        <div class="flex-1 ml-[250px] xl:ml-[300px]">
+        <div class="flex-1 ml-[230px] 2xl:ml-[270px]">
             <Head :title="title" />
 
             <Banner />
@@ -104,8 +112,10 @@ defineProps({
                 <header
                     v-if="$slots.header"
                     class="bg-default-background border-b border-default-background-seperator shadow">
-                    <div class="py-6 px-4 sm:px-6 lg:px-8">
-                        <slot name="header" />
+                    <div class="pt-8 pb-3">
+                        <MainContainer>
+                            <slot name="header" />
+                        </MainContainer>
                     </div>
                 </header>
 
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index a26a6d2f..5bd8b91a 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -5,28 +5,9 @@ import RecentlyTrackedTasksCard from '@/Components/Dashboard/RecentlyTrackedTask
 import LastSevenDaysCard from '@/Components/Dashboard/LastSevenDaysCard.vue';
 import TeamActivityCard from '@/Components/Dashboard/TeamActivityCard.vue';
 import ThisWeekOverview from '@/Components/Dashboard/ThisWeekOverview.vue';
-import { usePage } from '@inertiajs/vue3';
-import type { Organization, User } from '@/types/models';
-import { onMounted } from 'vue';
-import { useProjectsStore } from '@/utils/useProjects';
 import ActivityGraphCard from '@/Components/Dashboard/ActivityGraphCard.vue';
 import MainContainer from '@/Pages/MainContainer.vue';
 
-const page = usePage<{
-    auth: {
-        user: User & {
-            all_teams: Organization[];
-        };
-    };
-}>();
-
-onMounted(async () => {
-    if (page.props.auth.user.current_team_id) {
-        await useProjectsStore().fetchProjects(
-            page.props.auth.user.current_team_id
-        );
-    }
-});
 const props = defineProps<{
     latestTasks: {
         id: string;
@@ -73,7 +54,7 @@ const props = defineProps<{
             <TimeTracker></TimeTracker>
         </MainContainer>
         <MainContainer
-            class="grid gap-x-6 xl:gap-x-8 grid-cols-4 pt-5 pb-6 border-b border-default-background-seperator items-stretch">
+            class="grid gap-x-6 grid-cols-2 xl:grid-cols-4 pt-5 pb-6 border-b border-default-background-seperator items-stretch">
             <RecentlyTrackedTasksCard
                 :latestTasks="props.latestTasks"></RecentlyTrackedTasksCard>
             <LastSevenDaysCard
diff --git a/resources/js/Pages/MainContainer.vue b/resources/js/Pages/MainContainer.vue
index f823b37d..9af5754f 100644
--- a/resources/js/Pages/MainContainer.vue
+++ b/resources/js/Pages/MainContainer.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-    <div class="sm:px-6 lg:px-8 xl:px-10 2xl:px-12 mx-auto">
+    <div class="sm:px-6 lg:px-8 3xl:px-12 mx-auto">
         <slot></slot>
     </div>
 </template>
diff --git a/resources/js/Pages/Time.vue b/resources/js/Pages/Time.vue
new file mode 100644
index 00000000..7631d37a
--- /dev/null
+++ b/resources/js/Pages/Time.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import AppLayout from '@/Layouts/AppLayout.vue';
+import TimeTracker from '@/Components/TimeTracker.vue';
+import { computed, onMounted } from 'vue';
+import MainContainer from '@/Pages/MainContainer.vue';
+import { useTimeEntriesStore } from '@/utils/useTimeEntries';
+import { storeToRefs } from 'pinia';
+import dayjs from 'dayjs';
+import type { TimeEntry } from '@/utils/api';
+import TimeEntryRowHeading from '@/Components/Common/TimeEntry/TimeEntryRowHeading.vue';
+import TimeEntryRow from '@/Components/Common/TimeEntry/TimeEntryRow.vue';
+
+const timeEntriesStore = useTimeEntriesStore();
+const { timeEntries } = storeToRefs(timeEntriesStore);
+
+onMounted(async () => {
+    await timeEntriesStore.fetchTimeEntries();
+});
+
+const groupedTimeEntries = computed(() => {
+    const groupedEntries: Record<string, TimeEntry[]> = {};
+    for (const entry of timeEntries.value) {
+        const oldEntries =
+            groupedEntries[dayjs(entry.start).utc().format('YYYY-MM-DD')];
+        const newEntries = [...(oldEntries ?? []), entry];
+        groupedEntries[dayjs(entry.start).utc().format('YYYY-MM-DD')] =
+            newEntries;
+    }
+    return groupedEntries;
+});
+</script>
+
+<template>
+    <AppLayout title="Dashboard" data-testid="dashboard_view">
+        <MainContainer
+            class="py-8 border-b border-default-background-seperator">
+            <TimeTracker></TimeTracker>
+        </MainContainer>
+        <div v-for="(value, key) in groupedTimeEntries" :key="key">
+            <TimeEntryRowHeading :date="key"></TimeEntryRowHeading>
+            <TimeEntryRow
+                :key="entry.id"
+                v-for="entry in value"
+                :time-entry="entry"></TimeEntryRow>
+        </div>
+    </AppLayout>
+</template>
diff --git a/resources/js/types/models.ts b/resources/js/types/models.ts
index 38a8b397..3b057484 100644
--- a/resources/js/types/models.ts
+++ b/resources/js/types/models.ts
@@ -74,27 +74,6 @@ export interface Task {
     organization: Organization;
 }
 
-export interface TimeEntry {
-    // columns
-    id: string;
-    description: string;
-    start: string;
-    end: string | null;
-    billable: boolean;
-    user_id: string;
-    organization_id: string;
-    project_id: string | null;
-    task_id: string | null;
-    tags: string[] | null;
-    created_at: string | null;
-    updated_at: string | null;
-    // relations
-    user: User;
-    organization: Organization;
-    project: Project;
-    task: Task;
-}
-
 export interface User {
     // columns
     id: string;
diff --git a/resources/js/utils/api.ts b/resources/js/utils/api.ts
index ecc9ee43..19303a22 100644
--- a/resources/js/utils/api.ts
+++ b/resources/js/utils/api.ts
@@ -1,4 +1,19 @@
-import type { ApiOf } from '@zodios/core';
+import type { ApiOf, ZodiosResponseByAlias } from '@zodios/core';
 import { api } from '../../../openapi.json.client';
 
 export type SolidTimeApi = ApiOf<typeof api>;
+
+export type TimeEntryResponse = ZodiosResponseByAlias<
+    SolidTimeApi,
+    'getTimeEntries'
+>;
+export type TimeEntry = TimeEntryResponse['data'][0];
+
+export type ProjectResponse = ZodiosResponseByAlias<
+    SolidTimeApi,
+    'getProjects'
+>;
+export type Project = ProjectResponse['data'][0];
+
+export type TagIndexResponse = ZodiosResponseByAlias<SolidTimeApi, 'getTags'>;
+export type Tag = TagIndexResponse['data'][0];
diff --git a/resources/js/utils/time.ts b/resources/js/utils/time.ts
index f4dd4983..ced7ca60 100644
--- a/resources/js/utils/time.ts
+++ b/resources/js/utils/time.ts
@@ -1,8 +1,39 @@
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import isToday from 'dayjs/plugin/isToday';
+import isYesterday from 'dayjs/plugin/isYesterday';
+import utc from 'dayjs/plugin/utc';
 
+dayjs.extend(relativeTime);
+dayjs.extend(isToday);
+dayjs.extend(isYesterday);
 dayjs.extend(duration);
+dayjs.extend(utc);
 
 export function formatHumanReadableDuration(duration: number): string {
     return dayjs.duration(duration, 's').format('HH[h] mm[min]');
 }
+
+export function calculateDifference(start: string, end: string | null) {
+    if (end === null) {
+        end = dayjs().utc().format();
+    }
+    return dayjs(end).diff(dayjs(start), 'second');
+}
+export function formatTime(date: string) {
+    return dayjs(date).utc().format('HH:mm');
+}
+
+export function formatDate(date: string): string {
+    return dayjs(date).utc().format('DD.MM.YYYY');
+}
+
+export function formatHumanReadableDate(date: string) {
+    if (dayjs(date).isToday()) {
+        return 'Today';
+    } else if (dayjs(date).isYesterday()) {
+        return 'Yesterday';
+    }
+    return dayjs(date).fromNow();
+}
diff --git a/resources/js/utils/useCurrentTimeEntry.ts b/resources/js/utils/useCurrentTimeEntry.ts
index 953087b0..3c35366d 100644
--- a/resources/js/utils/useCurrentTimeEntry.ts
+++ b/resources/js/utils/useCurrentTimeEntry.ts
@@ -1,16 +1,15 @@
 import { defineStore } from 'pinia';
 import { computed, reactive, ref } from 'vue';
 import { api } from '../../../openapi.json.client';
-import type { ZodiosResponseByAlias } from '@zodios/core';
-import type { SolidTimeApi } from '@/utils/api';
+import type { TimeEntry } from '@/utils/api';
 import dayjs, { Dayjs } from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { getCurrentOrganizationId, getCurrentUserId } from '@/utils/useUser';
+import { useLocalStorage } from '@vueuse/core';
+import { useTimeEntriesStore } from '@/utils/useTimeEntries';
 
 dayjs.extend(utc);
 
-type TimeEntryResponse = ZodiosResponseByAlias<SolidTimeApi, 'getTimeEntries'>;
-export type TimeEntry = TimeEntryResponse['data'][0];
 const emptyTimeEntry = {
     id: '',
     description: null,
@@ -21,11 +20,16 @@ const emptyTimeEntry = {
     task_id: null,
     project_id: null,
     tags: [],
+    billable: false,
 } as TimeEntry;
 
 export const useCurrentTimeEntryStore = defineStore('currentTimeEntry', () => {
     const currentTimeEntry = ref<TimeEntry>(reactive(emptyTimeEntry));
 
+    useLocalStorage('solidtime/current-time-entry', currentTimeEntry, {
+        deep: true,
+    });
+
     function $reset() {
         currentTimeEntry.value = { ...emptyTimeEntry };
     }
@@ -84,6 +88,9 @@ export const useCurrentTimeEntryStore = defineStore('currentTimeEntry', () => {
                     user_id: user,
                     start: startTime,
                     description: currentTimeEntry.value?.description,
+                    project_id: currentTimeEntry.value?.project_id,
+                    billable: currentTimeEntry.value.billable,
+                    tags: currentTimeEntry.value?.tags,
                 },
                 { params: { organization: organization } }
             );
@@ -131,6 +138,7 @@ export const useCurrentTimeEntryStore = defineStore('currentTimeEntry', () => {
                     user_id: user,
                     project_id: currentTimeEntry.value.project_id,
                     start: currentTimeEntry.value.start,
+                    billable: currentTimeEntry.value.billable,
                     end: null,
                     tags: currentTimeEntry.value.tags,
                 },
@@ -168,6 +176,7 @@ export const useCurrentTimeEntryStore = defineStore('currentTimeEntry', () => {
             stopLiveTimer();
             await stopTimer();
         }
+        useTimeEntriesStore().fetchTimeEntries();
     }
 
     startLiveTimer();
diff --git a/resources/js/utils/useProjects.ts b/resources/js/utils/useProjects.ts
index 5b169713..aae2c467 100644
--- a/resources/js/utils/useProjects.ts
+++ b/resources/js/utils/useProjects.ts
@@ -1,24 +1,26 @@
 import { defineStore } from 'pinia';
 import { api } from '../../../openapi.json.client';
 import { computed, ref } from 'vue';
-import type { ZodiosResponseByAlias } from '@zodios/core';
-import type { SolidTimeApi } from '@/utils/api';
-
-type ProjectResponse = ZodiosResponseByAlias<SolidTimeApi, 'getProjects'>;
-export type Project = ProjectResponse['data'][0];
+import type { Project, ProjectResponse } from '@/utils/api';
+import { getCurrentOrganizationId } from '@/utils/useUser';
 
 export const useProjectsStore = defineStore('projects', () => {
     const projectResponse = ref<ProjectResponse | null>(null);
 
-    async function fetchProjects(organizationId: string) {
-        projectResponse.value = await api.getProjects({
-            params: {
-                organization: organizationId,
-            },
-        });
+    async function fetchProjects() {
+        const organization = getCurrentOrganizationId();
+        if (organization) {
+            projectResponse.value = await api.getProjects({
+                params: {
+                    organization: organization,
+                },
+            });
+        }
     }
 
-    const projects = computed(() => projectResponse.value?.data || []);
+    const projects = computed<Project[]>(
+        () => projectResponse.value?.data || []
+    );
 
     return { projects, fetchProjects };
 });
diff --git a/resources/js/utils/useTags.ts b/resources/js/utils/useTags.ts
index 4c14fc7c..d7400965 100644
--- a/resources/js/utils/useTags.ts
+++ b/resources/js/utils/useTags.ts
@@ -1,13 +1,9 @@
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
-import type { ZodiosResponseByAlias } from '@zodios/core';
-import type { SolidTimeApi } from '@/utils/api';
+import type { Tag } from '@/utils/api';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { api } from '../../../openapi.json.client';
 
-type TagIndexResponse = ZodiosResponseByAlias<SolidTimeApi, 'getTags'>;
-export type Tag = TagIndexResponse['data'][0];
-
 export const useTagsStore = defineStore('tags', () => {
     const tags = ref<Tag[]>([]);
 
diff --git a/resources/js/utils/useTimeEntries.ts b/resources/js/utils/useTimeEntries.ts
new file mode 100644
index 00000000..28b1eb91
--- /dev/null
+++ b/resources/js/utils/useTimeEntries.ts
@@ -0,0 +1,69 @@
+import { defineStore } from 'pinia';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+import { api } from '../../../openapi.json.client';
+import { reactive, ref } from 'vue';
+import type { TimeEntry } from '@/utils/api';
+
+export const useTimeEntriesStore = defineStore('timeEntries', () => {
+    const timeEntries = ref<TimeEntry[]>(reactive([]));
+
+    async function fetchTimeEntries() {
+        const organizationId = getCurrentOrganizationId();
+        if (organizationId) {
+            const timeEntriesResponse = await api.getTimeEntries({
+                params: {
+                    organization: organizationId,
+                },
+            });
+            timeEntries.value = timeEntriesResponse.data;
+        }
+    }
+
+    async function updateTimeEntry(timeEntry: TimeEntry) {
+        const organizationId = getCurrentOrganizationId();
+        if (organizationId) {
+            await api.updateTimeEntry(timeEntry, {
+                params: {
+                    organization: organizationId,
+                    timeEntry: timeEntry.id,
+                },
+            });
+        }
+    }
+
+    async function createTimeEntry(timeEntry: TimeEntry) {
+        const organizationId = getCurrentOrganizationId();
+        if (organizationId) {
+            await api.createTimeEntry(timeEntry, {
+                params: {
+                    organization: organizationId,
+                },
+            });
+            await fetchTimeEntries();
+        }
+    }
+
+    async function deleteTimeEntry(timeEntryId: string) {
+        const organizationId = getCurrentOrganizationId();
+        if (organizationId) {
+            await api.deleteTimeEntry(
+                {},
+                {
+                    params: {
+                        organization: organizationId,
+                        timeEntry: timeEntryId,
+                    },
+                }
+            );
+            await fetchTimeEntries();
+        }
+    }
+
+    return {
+        timeEntries,
+        fetchTimeEntries,
+        updateTimeEntry,
+        createTimeEntry,
+        deleteTimeEntry,
+    };
+});
diff --git a/routes/web.php b/routes/web.php
index c752a0c3..7e895e6f 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -33,4 +33,9 @@
     'verified',
 ])->group(function () {
     Route::get('/dashboard', [DashboardController::class, 'dashboard'])->name('dashboard');
+
+
+    Route::get('/time', function () {
+        return Inertia::render('Time');
+    })->name('time');
 });
diff --git a/tailwind.config.js b/tailwind.config.js
index 50a708a3..cca7fcf4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -54,5 +54,5 @@ export default {
         },
     },
 
-    plugins: [forms, typography],
+    plugins: [forms, typography, require('@tailwindcss/container-queries')],
 };