diff --git a/app/Http/Controllers/Api/V1/TimeEntryController.php b/app/Http/Controllers/Api/V1/TimeEntryController.php
index 3d4d0f5e..22cc7c8c 100644
--- a/app/Http/Controllers/Api/V1/TimeEntryController.php
+++ b/app/Http/Controllers/Api/V1/TimeEntryController.php
@@ -224,7 +224,7 @@ class TimeEntryController extends Controller
                         /** @var string $group2Type */
                         $group2Response[] = [
                             'type' => $group2Type,
-                            'key' => $group2 === '' ? null : $group2,
+                            'key' => $group2 === '' ? null : (string) $group2,
                             'seconds' => (int) $aggregate->get(0)->aggregate,
                             'cost' => (int) $aggregate->get(0)->cost,
                         ];
@@ -241,7 +241,7 @@ class TimeEntryController extends Controller
                 /** @var string $group1Type */
                 $group1Response[] = [
                     'type' => $group1Type,
-                    'key' => $group1 === '' ? null : $group1,
+                    'key' => $group1 === '' ? null : (string) $group1,
                     'seconds' => $group2ResponseSum,
                     'cost' => $group2ResponseCost,
                     'grouped_data' => $group2Response,
diff --git a/app/Http/Middleware/ShareInertiaData.php b/app/Http/Middleware/ShareInertiaData.php
index cbe154f3..e5c3cfba 100644
--- a/app/Http/Middleware/ShareInertiaData.php
+++ b/app/Http/Middleware/ShareInertiaData.php
@@ -85,6 +85,7 @@ class ShareInertiaData
                                 'currency' => $organization->currency,
                                 'membership' => [
                                     'role' => $organization->membership->role,
+                                    'id' => $organization->membership->id,
                                 ],
                             ];
                         })->all(),
diff --git a/config/auth.php b/config/auth.php
index 6ac82835..8143c2ee 100644
--- a/config/auth.php
+++ b/config/auth.php
@@ -117,9 +117,9 @@ return [
 
     'super_admins' => ! is_string(env('SUPER_ADMINS', null)) ? [] : explode(',', env('SUPER_ADMINS')),
 
-    'terms_url' => env('TERMS_URL'),
+    'terms_url' => env('TERMS_URL', ''),
 
-    'privacy_policy_url' => env('PRIVACY_POLICY_URL'),
+    'privacy_policy_url' => env('PRIVACY_POLICY_URL', ''),
 
     'newsletter_consent' => env('NEWSLETTER_CONSENT', false),
 
diff --git a/e2e/projects.spec.ts b/e2e/projects.spec.ts
index 937ce670..797963a1 100644
--- a/e2e/projects.spec.ts
+++ b/e2e/projects.spec.ts
@@ -14,7 +14,7 @@ test('test that creating and deleting a new project via the modal works', async
         'New Project ' + Math.floor(1 + Math.random() * 10000);
     await goToProjectsOverview(page);
     await page.getByRole('button', { name: 'Create Project' }).click();
-    await page.getByPlaceholder('Project Name').fill(newProjectName);
+    await page.getByLabel('Project Name').fill(newProjectName);
     await Promise.all([
         page.getByRole('button', { name: 'Create Project' }).nth(1).click(),
         page.waitForResponse(
diff --git a/e2e/tasks.spec.ts b/e2e/tasks.spec.ts
index 4a8196b4..54b7be78 100644
--- a/e2e/tasks.spec.ts
+++ b/e2e/tasks.spec.ts
@@ -14,7 +14,7 @@ test('test that creating and deleting a new tag in a new project works', async (
         'New Project ' + Math.floor(1 + Math.random() * 10000);
     await goToProjectsOverview(page);
     await page.getByRole('button', { name: 'Create Project' }).click();
-    await page.getByPlaceholder('Project Name').fill(newProjectName);
+    await page.getByLabel('Project Name').fill(newProjectName);
     await Promise.all([
         page.getByRole('button', { name: 'Create Project' }).nth(1).click(),
         page.waitForResponse(
diff --git a/e2e/time.spec.ts b/e2e/time.spec.ts
index ee63ea75..1de2fb11 100644
--- a/e2e/time.spec.ts
+++ b/e2e/time.spec.ts
@@ -57,7 +57,7 @@ test('test that starting and stopping an empty time entry shows a new time entry
 
 async function assertThatTimeEntryRowIsStopped(newTimeEntry: Locator) {
     await expect(newTimeEntry.getByTestId('timer_button')).toHaveClass(
-        /bg-accent-300\/50/
+        /bg-accent-300\/70/
     );
 }
 
@@ -297,7 +297,7 @@ test('test that stopping a time entry from the overview works', async ({
     ]);
 
     await expect(newTimeEntry.getByTestId('timer_button')).toHaveClass(
-        /bg-accent-300\/50/
+        /bg-accent-300\/70/
     );
 });
 
@@ -311,7 +311,7 @@ test('test that starting a time entry from the overview works', async ({
 
     const newTimeEntry = timeEntryRows.first();
     const startButton = newTimeEntry.getByTestId('timer_button');
-    await expect(startButton).toHaveClass(/bg-accent-300\/50/);
+    await expect(startButton).toHaveClass(/bg-accent-300\/70/);
 
     await Promise.all([
         page.waitForResponse(async (response) => {
@@ -341,7 +341,7 @@ test('test that starting a time entry from the overview works', async ({
             );
         }),
         startOrStopTimerWithButton(page),
-        expect(startButton).toHaveClass(/bg-accent-300\/50/),
+        expect(startButton).toHaveClass(/bg-accent-300\/70/),
     ]);
 });
 
@@ -401,7 +401,7 @@ test('test that updating a the duration in the overview for a running timer work
             );
         }),
         startOrStopTimerWithButton(page),
-        expect(startButton).toHaveClass(/bg-accent-300\/50/),
+        expect(startButton).toHaveClass(/bg-accent-300\/70/),
     ]);
 });
 
diff --git a/e2e/utils/currentTimeEntry.ts b/e2e/utils/currentTimeEntry.ts
index a616552f..f73faa68 100644
--- a/e2e/utils/currentTimeEntry.ts
+++ b/e2e/utils/currentTimeEntry.ts
@@ -40,7 +40,7 @@ export async function assertThatTimerIsStopped(page: Page) {
         page.locator(
             '[data-testid="dashboard_timer"] [data-testid="timer_button"]'
         )
-    ).toHaveClass(/bg-accent-300\/50/);
+    ).toHaveClass(/bg-accent-300\/70/);
 }
 
 export async function stoppedTimeEntryResponse(
diff --git a/openapi.json.client.ts b/openapi.json.client.ts
index f876523b..e6fafb4b 100644
--- a/openapi.json.client.ts
+++ b/openapi.json.client.ts
@@ -83,13 +83,13 @@ const ProjectMemberResource = z
     .object({
         id: z.string(),
         billable_rate: z.union([z.number(), z.null()]),
-        user_id: z.string(),
+        member_id: z.string(),
         project_id: z.string(),
     })
     .passthrough();
 const createProjectMember_Body = z
     .object({
-        user_id: z.string().uuid(),
+        member_id: z.string().uuid(),
         billable_rate: z.union([z.number(), z.null()]).optional(),
     })
     .passthrough();
@@ -137,7 +137,7 @@ const TimeEntryResource = z
 const TimeEntryCollection = z.array(TimeEntryResource);
 const createTimeEntry_Body = z
     .object({
-        user_id: z.string().uuid(),
+        member_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(),
@@ -147,8 +147,41 @@ const createTimeEntry_Body = z
         tags: z.union([z.array(z.string()), z.null()]).optional(),
     })
     .passthrough();
+const v1_time_entries_update_multiple_Body = z
+    .object({
+        ids: z.array(z.string()),
+        changes: z
+            .object({
+                member_id: z.string().uuid(),
+                project_id: z.union([z.string(), z.null()]),
+                task_id: z.union([z.string(), z.null()]),
+                billable: z.boolean(),
+                description: z.union([z.string(), z.null()]),
+                tags: z.union([z.array(z.string()), z.null()]),
+            })
+            .partial()
+            .passthrough(),
+    })
+    .passthrough();
+const group = z
+    .union([
+        z.enum([
+            'day',
+            'week',
+            'month',
+            'year',
+            'user',
+            'project',
+            'task',
+            'client',
+            'billable',
+        ]),
+        z.null(),
+    ])
+    .optional();
 const updateTimeEntry_Body = z
     .object({
+        member_id: z.string().uuid().optional(),
         project_id: z.union([z.string(), z.null()]).optional(),
         task_id: z.union([z.string(), z.null()]).optional(),
         start: z.string(),
@@ -184,6 +217,8 @@ export const schemas = {
     TimeEntryResource,
     TimeEntryCollection,
     createTimeEntry_Body,
+    v1_time_entries_update_multiple_Body,
+    group,
     updateTimeEntry_Body,
 };
 
@@ -197,7 +232,7 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.object({ data: OrganizationResource }).passthrough(),
@@ -228,7 +263,7 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.object({ data: OrganizationResource }).passthrough(),
@@ -264,7 +299,7 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.object({ data: ClientCollection }).passthrough(),
@@ -295,7 +330,7 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.object({ data: ClientResource }).passthrough(),
@@ -336,12 +371,12 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
             {
                 name: 'client',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.object({ data: ClientResource }).passthrough(),
@@ -382,12 +417,12 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
             {
                 name: 'client',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.null(),
@@ -429,7 +464,7 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z
@@ -497,7 +532,7 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z
@@ -535,7 +570,7 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z
@@ -608,7 +643,7 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.null(),
@@ -649,12 +684,12 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
             {
                 name: 'invitation',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.null(),
@@ -685,12 +720,12 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
             {
                 name: 'invitation',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.null(),
@@ -716,7 +751,7 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z
@@ -777,7 +812,7 @@ const endpoints = makeApi([
     },
     {
         method: 'put',
-        path: '/v1/organizations/:organization/members/:membership',
+        path: '/v1/organizations/:organization/members/:member',
         alias: 'updateMember',
         requestFormat: 'json',
         parameters: [
@@ -789,12 +824,12 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
             {
-                name: 'membership',
+                name: 'member',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.object({ data: MemberResource }).passthrough(),
@@ -823,7 +858,7 @@ const endpoints = makeApi([
     },
     {
         method: 'delete',
-        path: '/v1/organizations/:organization/members/:membership',
+        path: '/v1/organizations/:organization/members/:member',
         alias: 'removeMember',
         requestFormat: 'json',
         parameters: [
@@ -835,12 +870,12 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
             {
-                name: 'membership',
+                name: 'member',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.null(),
@@ -870,7 +905,7 @@ const endpoints = makeApi([
     },
     {
         method: 'post',
-        path: '/v1/organizations/:organization/members/:membership/invite-placeholder',
+        path: '/v1/organizations/:organization/members/:member/invite-placeholder',
         alias: 'invitePlaceholder',
         requestFormat: 'json',
         parameters: [
@@ -882,12 +917,12 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
             {
-                name: 'membership',
+                name: 'member',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.null(),
@@ -929,12 +964,12 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
             {
                 name: 'projectMember',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.object({ data: ProjectMemberResource }).passthrough(),
@@ -975,12 +1010,12 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
             {
                 name: 'projectMember',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.null(),
@@ -1006,7 +1041,12 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
+            },
+            {
+                name: 'page',
+                type: 'Query',
+                schema: z.number().int().gte(1).optional(),
             },
         ],
         response: z
@@ -1053,6 +1093,16 @@ const endpoints = makeApi([
                 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(),
+            },
         ],
     },
     {
@@ -1069,7 +1119,7 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.object({ data: ProjectResource }).passthrough(),
@@ -1105,12 +1155,12 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
             {
                 name: 'project',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.object({ data: ProjectResource }).passthrough(),
@@ -1141,12 +1191,12 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
             {
                 name: 'project',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.object({ data: ProjectResource }).passthrough(),
@@ -1187,12 +1237,12 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
             {
                 name: 'project',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.null(),
@@ -1229,12 +1279,12 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
             {
                 name: 'project',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z
@@ -1297,12 +1347,12 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
             {
                 name: 'project',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.object({ data: ProjectMemberResource }).passthrough(),
@@ -1349,7 +1399,7 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.object({ data: TagCollection }).passthrough(),
@@ -1380,7 +1430,7 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.object({ data: TagResource }).passthrough(),
@@ -1421,12 +1471,12 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
             {
                 name: 'tag',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.object({ data: TagResource }).passthrough(),
@@ -1467,12 +1517,12 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
             {
                 name: 'tag',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.null(),
@@ -1509,7 +1559,7 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
             {
                 name: 'project_id',
@@ -1587,7 +1637,7 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.object({ data: TaskResource }).passthrough(),
@@ -1628,12 +1678,12 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
             {
                 name: 'task',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.object({ data: TaskResource }).passthrough(),
@@ -1674,12 +1724,12 @@ const endpoints = makeApi([
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
             {
                 name: 'task',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.null(),
@@ -1718,10 +1768,10 @@ Users with the permission `time-entries:view:own` can only use this en
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
             {
-                name: 'user_id',
+                name: 'member_id',
                 type: 'Query',
                 schema: z.string().uuid().optional(),
             },
@@ -1740,6 +1790,11 @@ Users with the permission `time-entries:view:own` can only use this en
                 type: 'Query',
                 schema: z.enum(['true', 'false']).optional(),
             },
+            {
+                name: 'billable',
+                type: 'Query',
+                schema: z.enum(['true', 'false']).optional(),
+            },
             {
                 name: 'limit',
                 type: 'Query',
@@ -1750,6 +1805,26 @@ Users with the permission `time-entries:view:own` can only use this en
                 type: 'Query',
                 schema: z.enum(['true', 'false']).optional(),
             },
+            {
+                name: 'member_ids',
+                type: 'Query',
+                schema: z.array(z.string()).min(1).optional(),
+            },
+            {
+                name: 'project_ids',
+                type: 'Query',
+                schema: z.array(z.string()).min(1).optional(),
+            },
+            {
+                name: 'tag_ids',
+                type: 'Query',
+                schema: z.array(z.string()).min(1).optional(),
+            },
+            {
+                name: 'task_ids',
+                type: 'Query',
+                schema: z.array(z.string()).min(1).optional(),
+            },
         ],
         response: z.object({ data: TimeEntryCollection }).passthrough(),
         errors: [
@@ -1789,7 +1864,7 @@ Users with the permission `time-entries:view:own` can only use this en
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.object({ data: TimeEntryResource }).passthrough(),
@@ -1827,6 +1902,49 @@ Users with the permission `time-entries:view:own` can only use this en
             },
         ],
     },
+    {
+        method: 'patch',
+        path: '/v1/organizations/:organization/time-entries',
+        alias: 'v1.time-entries.update-multiple',
+        requestFormat: 'json',
+        parameters: [
+            {
+                name: 'body',
+                type: 'Body',
+                schema: v1_time_entries_update_multiple_Body,
+            },
+            {
+                name: 'organization',
+                type: 'Path',
+                schema: z.string(),
+            },
+        ],
+        response: z
+            .object({ success: z.string(), error: z.string() })
+            .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: 'put',
         path: '/v1/organizations/:organization/time-entries/:timeEntry',
@@ -1841,12 +1959,12 @@ Users with the permission `time-entries:view:own` can only use this en
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
             {
                 name: 'timeEntry',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.object({ data: TimeEntryResource }).passthrough(),
@@ -1898,12 +2016,12 @@ Users with the permission `time-entries:view:own` can only use this en
             {
                 name: 'organization',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
             {
                 name: 'timeEntry',
                 type: 'Path',
-                schema: z.string().uuid(),
+                schema: z.string(),
             },
         ],
         response: z.null(),
@@ -1920,6 +2038,145 @@ Users with the permission `time-entries:view:own` can only use this en
             },
         ],
     },
+    {
+        method: 'get',
+        path: '/v1/organizations/:organization/time-entries/aggregate',
+        alias: 'getAggregatedTimeEntries',
+        description: `This endpoint allows you to filter time entries and aggregate them by different criteria.
+The parameters `group` and `sub_group` allow you to group the time entries by different criteria.
+If the group parameters are all set to `null` or are all missing, the endpoint will aggregate all filtered time entries.`,
+        requestFormat: 'json',
+        parameters: [
+            {
+                name: 'organization',
+                type: 'Path',
+                schema: z.string(),
+            },
+            {
+                name: 'group',
+                type: 'Query',
+                schema: group,
+            },
+            {
+                name: 'sub_group',
+                type: 'Query',
+                schema: group,
+            },
+            {
+                name: 'member_id',
+                type: 'Query',
+                schema: z.string().uuid().optional(),
+            },
+            {
+                name: 'user_id',
+                type: 'Query',
+                schema: z.string().uuid().optional(),
+            },
+            {
+                name: 'before',
+                type: 'Query',
+                schema: before,
+            },
+            {
+                name: 'after',
+                type: 'Query',
+                schema: before,
+            },
+            {
+                name: 'active',
+                type: 'Query',
+                schema: z.enum(['true', 'false']).optional(),
+            },
+            {
+                name: 'billable',
+                type: 'Query',
+                schema: z.enum(['true', 'false']).optional(),
+            },
+            {
+                name: 'member_ids',
+                type: 'Query',
+                schema: z.array(z.string()).min(1).optional(),
+            },
+            {
+                name: 'project_ids',
+                type: 'Query',
+                schema: z.array(z.string()).min(1).optional(),
+            },
+            {
+                name: 'tag_ids',
+                type: 'Query',
+                schema: z.array(z.string()).min(1).optional(),
+            },
+            {
+                name: 'task_ids',
+                type: 'Query',
+                schema: z.array(z.string()).min(1).optional(),
+            },
+        ],
+        response: z
+            .object({
+                data: z
+                    .object({
+                        grouped_data: z.union([
+                            z.array(
+                                z
+                                    .object({
+                                        type: z.string(),
+                                        key: z.union([z.string(), z.null()]),
+                                        seconds: z.number().int(),
+                                        cost: z.number().int(),
+                                        grouped_data: z.union([
+                                            z.array(
+                                                z
+                                                    .object({
+                                                        type: z.string(),
+                                                        key: z.union([
+                                                            z.string(),
+                                                            z.null(),
+                                                        ]),
+                                                        seconds: z
+                                                            .number()
+                                                            .int(),
+                                                        cost: z.number().int(),
+                                                    })
+                                                    .passthrough()
+                                            ),
+                                            z.null(),
+                                        ]),
+                                    })
+                                    .passthrough()
+                            ),
+                            z.null(),
+                        ]),
+                        seconds: z.number().int(),
+                        cost: z.number().int(),
+                    })
+                    .passthrough(),
+            })
+            .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: 'get',
         path: '/v1/users/me/time-entries/active',
diff --git a/package-lock.json b/package-lock.json
index 508cfc1a..3175d14d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-    "name": "html",
+    "name": "solidtime",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
@@ -19,7 +19,7 @@
                 "pinia": "^2.1.7",
                 "radix-vue": "^1.5.2",
                 "tailwind-merge": "^2.2.1",
-                "vue-echarts": "^6.6.9"
+                "vue-echarts": "^6.7.2"
             },
             "devDependencies": {
                 "@inertiajs/vue3": "^1.0.0",
@@ -5735,9 +5735,9 @@
             }
         },
         "node_modules/vue-echarts": {
-            "version": "6.6.9",
-            "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.6.9.tgz",
-            "integrity": "sha512-mojIq3ZvsjabeVmDthhAUDV8Kgf2Rr/X4lV4da7gEFd1fP05gcSJ0j7wa7HQkW5LlFmF2gdCJ8p4Chas6NNIQQ==",
+            "version": "6.7.2",
+            "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.7.2.tgz",
+            "integrity": "sha512-SG8Vmszhx24KjtySsk361DogZLRkPCyLhgoyh7iN1eH3WGJ0kyl3k0g4QiSJqK0+F1Ej0HDopq4A5OGcBlAwzw==",
             "hasInstallScript": true,
             "dependencies": {
                 "resize-detector": "^0.3.0",
diff --git a/package.json b/package.json
index 835beac3..ab99128c 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,6 @@
         "pinia": "^2.1.7",
         "radix-vue": "^1.5.2",
         "tailwind-merge": "^2.2.1",
-        "vue-echarts": "^6.6.9"
+        "vue-echarts": "^6.7.2"
     }
 }
diff --git a/resources/css/app.css b/resources/css/app.css
index 8236cc91..c055ca05 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -2,16 +2,40 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+    --color-bg-primary: #0f1011;
+    --color-bg-secondary: #1b1c20;
+    --color-bg-tertiary: #2A2C32;
+    --color-bg-quaternary: #141518;
+    --color-text-primary: #ffffff;
+    --color-text-secondary: #e3e4e6;
+    --color-text-tertiary: #969799;
+    --color-text-quaternary: #595a5c;
+    --color-border-primary: #191b1f;
+    --color-border-secondary: #23252a;
+    --color-border-tertiary: #2c2e33;
+    --color-border-quaternary: #393B42;
+    --color-input-border-active: rgba(255,255,255,0.3);
 
-:root{
-    --theme-color-default-background: #0b0d1c;
-    --theme-color-icon-default: #42466C;
-    --theme-color-card-background: #13152B;
-    --theme-color-card-background-active: #1C1E34;
-    --theme-color-card-background-separator: #1c2033;
-    --theme-color-card-border: #1c2033;
-    --theme-color-card-border-active: #2A3461;
-    --theme-color-default-background-separator: #141a2f;
+    --color-accent-primary: 14, 165, 233;  /* sky-500 */
+    --color-accent-secondary: 56, 189, 248;
+    --color-accent-tertiary: 125, 211, 252;
+    --color-accent-quaternary: 186, 230, 253;
+
+    --theme-color-default-background: var(--color-bg-primary);
+    --theme-color-icon-default: var(--color-text-tertiary);
+    --theme-color-icon-active: rgb(var(--color-text-tertiary));
+    --theme-color-card-background: var(--color-bg-secondary);
+    --theme-color-card-background-active: var(--color-bg-tertiary);
+    --theme-color-card-background-separator: var(--color-border-quaternary);
+    --theme-color-card-border: var(--color-border-secondary);
+    --theme-color-card-border-active: var(--color-border-tertiary);
+    --theme-color-default-background-separator: var(--color-border-primary);
+    --theme-color-primary-text: var(--color-text-primary);
+    --theme-color-muted-text: var(--color-text-secondary);
+    --theme-color-menu-active: var(--color-bg-secondary);
+    --theme-color-input-border: var(--color-border-quaternary);
+    --theme-color-input-background: var(--color-bg-secondary);
     --theme-color-tab-background: var(--theme-color-card-background);
     --theme-color-tab-background-active: var(--theme-color-card-background-active);
     --theme-color-tab-border: var(--theme-color-card-border);
@@ -21,17 +45,15 @@
     --theme-color-row-heading-border: var(--theme-color-card-border);
 }
 
-*{
+* {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 
-
 [x-cloak] {
     display: none;
 }
-
-body{
+body {
     background-color: var(--theme-color-default-background);
 }
 
diff --git a/resources/js/Components/Common/Badge.vue b/resources/js/Components/Common/Badge.vue
index 52c32983..1bb6d429 100644
--- a/resources/js/Components/Common/Badge.vue
+++ b/resources/js/Components/Common/Badge.vue
@@ -37,10 +37,10 @@ const borderClasses = computed(() => {
         :is="tag"
         :class="
             twMerge(
-                props.class,
                 badgeClasses[size],
                 borderClasses,
-                'rounded inline-flex items-center font-semibold text-white'
+                'rounded inline-flex items-center font-semibold text-white',
+                props.class
             )
         ">
         <slot></slot>
diff --git a/resources/js/Components/Common/BillableRateInput.vue b/resources/js/Components/Common/BillableRateInput.vue
index 7bba4cce..f43277da 100644
--- a/resources/js/Components/Common/BillableRateInput.vue
+++ b/resources/js/Components/Common/BillableRateInput.vue
@@ -6,6 +6,10 @@ import {
     getOrganizationCurrencySymbol,
 } from '../../utils/money';
 
+defineProps<{
+    name: string;
+}>();
+
 const model = defineModel({
     default: null,
     type: Number,
@@ -51,13 +55,14 @@ function formatCents(modelValue: number) {
 <template>
     <div class="relative">
         <TextInput
-            id="projectMemberRate"
+            :id="name"
             ref="projectMemberRateInput"
             :modelValue="formatCents(model)"
             @blur="updateRate($event.target.value)"
             type="text"
+            :name="name"
             placeholder="Billable Rate"
-            class="mt-1 block w-full"
+            class="mt-2 block w-full"
             autocomplete="teamMemberRate" />
         <span>
             <div
diff --git a/resources/js/Components/Common/BillableToggleButton.vue b/resources/js/Components/Common/BillableToggleButton.vue
index b284b49c..936c0d59 100644
--- a/resources/js/Components/Common/BillableToggleButton.vue
+++ b/resources/js/Components/Common/BillableToggleButton.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { twMerge } from 'tailwind-merge';
+import BillableIcon from '@/Components/Common/Icons/BillableIcon.vue';
 const active = defineModel({ default: false });
 const emit = defineEmits(['changed']);
 function toggleBillable() {
@@ -19,7 +20,7 @@ const props = withDefaults(
 
 const iconColorClasses = computed(() => {
     if (active.value) {
-        return 'text-accent-200/80 focus:text-accent-200 hover:text-accent-200';
+        return 'text-accent-300 focus:text-accent-200 hover:text-accent-200';
     } else {
         return 'text-icon-default focus:text-icon-active hover:text-icon-active';
     }
@@ -49,18 +50,7 @@ const iconSizeWrapperClasses =
                 'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full flex items-center justify-center'
             )
         ">
-        <svg
-            :class="iconSizeClasses"
-            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>
+        <BillableIcon :class="iconSizeClasses"></BillableIcon>
     </button>
 </template>
 
diff --git a/resources/js/Components/Common/GroupedItemsCountButton.vue b/resources/js/Components/Common/GroupedItemsCountButton.vue
new file mode 100644
index 00000000..1a8d66e9
--- /dev/null
+++ b/resources/js/Components/Common/GroupedItemsCountButton.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { twMerge } from 'tailwind-merge';
+import { computed } from 'vue';
+
+const props = withDefaults(
+    defineProps<{
+        expanded?: boolean;
+        size: string;
+    }>(),
+    {
+        expanded: false,
+        size: 'w-7 h-7',
+    }
+);
+
+const expandedStatusClasses = computed(() => {
+    if (props.expanded) {
+        return 'border-card-border border bg-card-background-active text-white';
+    }
+    return 'border-card-border border bg-card-background text-muted';
+});
+</script>
+
+<template>
+    <button
+        :class="
+            twMerge(
+                'font-medium rounded flex items-center transition justify-center',
+                expandedStatusClasses,
+                props.size
+            )
+        ">
+        <slot></slot>
+    </button>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Common/Icons/BillableIcon.vue b/resources/js/Components/Common/Icons/BillableIcon.vue
new file mode 100644
index 00000000..e2a32170
--- /dev/null
+++ b/resources/js/Components/Common/Icons/BillableIcon.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts"></script>
+
+<template>
+    <svg 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>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Common/Member/MemberCombobox.vue b/resources/js/Components/Common/Member/MemberCombobox.vue
index 83714877..8a40ed54 100644
--- a/resources/js/Components/Common/Member/MemberCombobox.vue
+++ b/resources/js/Components/Common/Member/MemberCombobox.vue
@@ -37,7 +37,7 @@ const filteredMembers = computed(() => {
                 .toLowerCase()
                 .includes(searchValue.value?.toLowerCase()?.trim() || '') &&
             !props.hiddenMembers.some(
-                (hiddenMember) => hiddenMember.user_id === member.user_id
+                (hiddenMember) => hiddenMember.id === member.id
             ) &&
             member.is_placeholder === false
         );
@@ -54,7 +54,7 @@ onMounted(() => {
 
 function resetHighlightedItem() {
     if (filteredMembers.value.length > 0) {
-        highlightedItemId.value = filteredMembers.value[0].user_id;
+        highlightedItemId.value = filteredMembers.value[0].id;
     }
 }
 
@@ -65,10 +65,10 @@ function updateSearchValue(event: Event) {
         const highlightedClientId = highlightedItemId.value;
         if (highlightedClientId) {
             const highlightedClient = members.value.find(
-                (member) => member.user_id === highlightedClientId
+                (member) => member.id === highlightedClientId
             );
             if (highlightedClient) {
-                model.value = highlightedClient.user_id;
+                model.value = highlightedClient.id;
             }
         }
     } else {
@@ -94,10 +94,10 @@ function moveHighlightUp() {
         );
         if (currentHightlightedIndex === 0) {
             highlightedItemId.value =
-                filteredMembers.value[filteredMembers.value.length - 1].user_id;
+                filteredMembers.value[filteredMembers.value.length - 1].id;
         } else {
             highlightedItemId.value =
-                filteredMembers.value[currentHightlightedIndex - 1].user_id;
+                filteredMembers.value[currentHightlightedIndex - 1].id;
         }
     }
 }
@@ -108,10 +108,10 @@ function moveHighlightDown() {
             highlightedItem.value
         );
         if (currentHightlightedIndex === filteredMembers.value.length - 1) {
-            highlightedItemId.value = filteredMembers.value[0].user_id;
+            highlightedItemId.value = filteredMembers.value[0].id;
         } else {
             highlightedItemId.value =
-                filteredMembers.value[currentHightlightedIndex + 1].user_id;
+                filteredMembers.value[currentHightlightedIndex + 1].id;
         }
     }
 }
@@ -119,14 +119,13 @@ function moveHighlightDown() {
 const highlightedItemId = ref<string | null>(null);
 const highlightedItem = computed(() => {
     return members.value.find(
-        (member) => member.user_id === highlightedItemId.value
+        (member) => member.id === highlightedItemId.value
     );
 });
 
 const currentValue = computed(() => {
     if (model.value) {
-        return members.value.find((member) => member.user_id === model.value)
-            ?.name;
+        return members.value.find((member) => member.id === model.value)?.name;
     }
     return searchValue.value;
 });
@@ -186,18 +185,18 @@ function onUnfocus() {
             </div>
             <div
                 v-for="member in filteredMembers"
-                :key="member.user_id"
+                :key="member.id"
                 role="option"
-                :value="member.user_id"
+                :value="member.id"
                 :class="{
                     'bg-card-background-active':
-                        member.user_id === highlightedItemId,
+                        member.id === highlightedItemId,
                 }"
-                @click="updateMember(member.user_id)"
+                @click="updateMember(member.id)"
                 data-testid="client_dropdown_entries"
-                :data-client-id="member.user_id">
+                :data-client-id="member.id">
                 <ClientDropdownItem
-                    :selected="isMemberSelected(member.user_id)"
+                    :selected="isMemberSelected(member.id)"
                     :name="member.name"></ClientDropdownItem>
             </div>
         </template>
diff --git a/resources/js/Components/Common/Member/MemberMultiselectDropdown.vue b/resources/js/Components/Common/Member/MemberMultiselectDropdown.vue
new file mode 100644
index 00000000..5d332749
--- /dev/null
+++ b/resources/js/Components/Common/Member/MemberMultiselectDropdown.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import MultiselectDropdown from '@/Components/Common/MultiselectDropdown.vue';
+import { useMembersStore } from '@/utils/useMembers';
+import { storeToRefs } from 'pinia';
+import type { Member } from '@/utils/api';
+
+const membersStore = useMembersStore();
+const { members } = storeToRefs(membersStore);
+
+function getKeyFromItem(item: Member) {
+    return item.id;
+}
+
+function getNameForItem(item: Member) {
+    return item.name;
+}
+</script>
+
+<template>
+    <MultiselectDropdown
+        searchPlaceholder="Search for a Member..."
+        :items="members"
+        :get-key-from-item="getKeyFromItem"
+        :get-name-for-item="getNameForItem">
+        <template #trigger>
+            <slot name="trigger"></slot>
+        </template>
+    </MultiselectDropdown>
+</template>
diff --git a/resources/js/Components/Common/Member/MemberTableRow.vue b/resources/js/Components/Common/Member/MemberTableRow.vue
index 56c4d3ab..dc4d64a4 100644
--- a/resources/js/Components/Common/Member/MemberTableRow.vue
+++ b/resources/js/Components/Common/Member/MemberTableRow.vue
@@ -29,7 +29,7 @@ async function invitePlaceholder(id: string) {
                 {
                     params: {
                         organization: organizationId,
-                        membership: id,
+                        member: id,
                     },
                 }
             ),
diff --git a/resources/js/Components/Common/Project/ProjectColorSelector.vue b/resources/js/Components/Common/Project/ProjectColorSelector.vue
index afa1f2c4..4b8fc1de 100644
--- a/resources/js/Components/Common/Project/ProjectColorSelector.vue
+++ b/resources/js/Components/Common/Project/ProjectColorSelector.vue
@@ -6,15 +6,17 @@ const model = defineModel<string>({ default: '' });
 </script>
 
 <template>
-    <div class="px-3">
+    <div>
         <Dropdown align="bottom">
             <template #trigger>
-                <div
-                    :style="{
-                        backgroundColor: model,
-                        boxShadow: `var(--tw-ring-inset) 0 0 0 calc(5px + var(--tw-ring-offset-width)) ${model}30`,
-                    }"
-                    class="w-4 h-4 rounded-full cursor-pointer"></div>
+                <button
+                    class="p-2 bg-input-background hover:bg-tertiary transition rounded-full border border-input-border">
+                    <div
+                        :style="{
+                            backgroundColor: model,
+                        }"
+                        class="w-5 h-5 rounded-full cursor-pointer"></div>
+                </button>
             </template>
             <template #content>
                 <div class="text-white grid grid-cols-6 gap-3 px-3 py-3">
diff --git a/resources/js/Components/Common/Project/ProjectCreateModal.vue b/resources/js/Components/Common/Project/ProjectCreateModal.vue
index 682cc381..70c99c5f 100644
--- a/resources/js/Components/Common/Project/ProjectCreateModal.vue
+++ b/resources/js/Components/Common/Project/ProjectCreateModal.vue
@@ -9,12 +9,13 @@ import PrimaryButton from '@/Components/PrimaryButton.vue';
 import { useProjectsStore } from '@/utils/useProjects';
 import { useFocus } from '@vueuse/core';
 import ClientDropdown from '@/Components/Common/Client/ClientDropdown.vue';
-import { twMerge } from 'tailwind-merge';
 import Badge from '@/Components/Common/Badge.vue';
 import { useClientsStore } from '@/utils/useClients';
 import { storeToRefs } from 'pinia';
 import ProjectColorSelector from '@/Components/Common/Project/ProjectColorSelector.vue';
 import BillableRateInput from '@/Components/Common/BillableRateInput.vue';
+import { UserCircleIcon } from '@heroicons/vue/20/solid';
+import InputLabel from '@/Components/InputLabel.vue';
 
 const { createProject } = useProjectsStore();
 const { clients } = storeToRefs(useClientsStore());
@@ -63,33 +64,47 @@ const currentClientName = computed(() => {
             <div
                 class="sm:flex items-center space-y-2 sm:space-y-0 sm:space-x-4">
                 <div class="flex-1 flex items-center">
-                    <ProjectColorSelector
-                        v-model="project.color"></ProjectColorSelector>
-                    <TextInput
-                        id="projectName"
-                        ref="projectNameInput"
-                        v-model="project.name"
-                        type="text"
-                        placeholder="Project Name"
-                        @keydown.enter="submit()"
-                        class="mt-1 block w-full"
-                        required
-                        autocomplete="projectName" />
+                    <div class="text-center pr-5">
+                        <InputLabel for="color" value="Color" />
+                        <ProjectColorSelector
+                            class="mt-2.5"
+                            v-model="project.color"></ProjectColorSelector>
+                    </div>
+                    <div class="w-full">
+                        <InputLabel for="projectName" value="Project name" />
+                        <TextInput
+                            id="projectName"
+                            name="projectName"
+                            ref="projectNameInput"
+                            v-model="project.name"
+                            type="text"
+                            placeholder="The next big thing"
+                            @keydown.enter="submit()"
+                            class="mt-2 block w-full"
+                            required
+                            autocomplete="projectName" />
+                    </div>
                 </div>
                 <div class="sm:max-w-[120px]">
-                    <BillableRateInput v-model="project.billable_rate" />
+                    <InputLabel for="billableRate" value="Billable Rate" />
+                    <BillableRateInput
+                        v-model="project.billable_rate"
+                        name="billableRate" />
                 </div>
                 <div>
-                    <ClientDropdown v-model="project.client_id">
+                    <InputLabel for="client" value="Client" />
+                    <ClientDropdown class="mt-2" v-model="project.client_id">
                         <template #trigger>
-                            <Badge size="large">
-                                <div
-                                    :class="
-                                        twMerge('inline-block rounded-full')
-                                    "></div>
-                                <span>
-                                    {{ currentClientName }}
-                                </span>
+                            <Badge
+                                class="bg-input-background cursor-pointer hover:bg-tertiary"
+                                size="xlarge">
+                                <div class="flex items-center space-x-2">
+                                    <UserCircleIcon
+                                        class="w-5 text-icon-default"></UserCircleIcon>
+                                    <span>
+                                        {{ currentClientName }}
+                                    </span>
+                                </div>
                             </Badge>
                         </template>
                     </ClientDropdown>
@@ -97,7 +112,7 @@ const currentClientName = computed(() => {
             </div>
         </template>
         <template #footer>
-            <SecondaryButton @click="show = false"> Cancel </SecondaryButton>
+            <SecondaryButton @click="show = false"> Cancel</SecondaryButton>
 
             <PrimaryButton
                 class="ms-3"
diff --git a/resources/js/Components/Common/Project/ProjectEditModal.vue b/resources/js/Components/Common/Project/ProjectEditModal.vue
index fe45bb8e..f9da4201 100644
--- a/resources/js/Components/Common/Project/ProjectEditModal.vue
+++ b/resources/js/Components/Common/Project/ProjectEditModal.vue
@@ -78,7 +78,9 @@ const currentClientName = computed(() => {
                         autocomplete="projectName" />
                 </div>
                 <div class="sm:max-w-[120px]">
-                    <BillableRateInput v-model="project.billable_rate" />
+                    <BillableRateInput
+                        v-model="project.billable_rate"
+                        name="billable_rate" />
                 </div>
                 <div class="">
                     <ClientDropdown v-model="project.client_id">
diff --git a/resources/js/Components/Common/Project/ProjectMultiselectDropdown.vue b/resources/js/Components/Common/Project/ProjectMultiselectDropdown.vue
new file mode 100644
index 00000000..35af5632
--- /dev/null
+++ b/resources/js/Components/Common/Project/ProjectMultiselectDropdown.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import MultiselectDropdown from '@/Components/Common/MultiselectDropdown.vue';
+import { storeToRefs } from 'pinia';
+import { useProjectsStore } from '@/utils/useProjects';
+import type { Project } from '@/utils/api';
+
+const projectsStore = useProjectsStore();
+const { projects } = storeToRefs(projectsStore);
+
+function getKeyFromItem(item: Project) {
+    return item.id;
+}
+
+function getNameForItem(item: Project) {
+    return item.name;
+}
+</script>
+
+<template>
+    <MultiselectDropdown
+        searchPlaceholder="Search for a Project..."
+        :items="projects"
+        :get-key-from-item="getKeyFromItem"
+        :get-name-for-item="getNameForItem">
+        <template #trigger>
+            <slot name="trigger"></slot>
+        </template>
+    </MultiselectDropdown>
+</template>
diff --git a/resources/js/Components/Common/ProjectMember/ProjectMemberCreateModal.vue b/resources/js/Components/Common/ProjectMember/ProjectMemberCreateModal.vue
index fcc81220..c184d896 100644
--- a/resources/js/Components/Common/ProjectMember/ProjectMemberCreateModal.vue
+++ b/resources/js/Components/Common/ProjectMember/ProjectMemberCreateModal.vue
@@ -18,7 +18,7 @@ const props = defineProps<{
 }>();
 
 const projectMember = ref<CreateProjectMemberBody>({
-    user_id: '',
+    member_id: '',
     billable_rate: null,
 });
 
@@ -26,7 +26,7 @@ async function submit() {
     await createProjectMember(props.projectId, projectMember.value);
     show.value = false;
     projectMember.value = {
-        user_id: '',
+        member_id: '',
         billable_rate: null,
     };
 }
@@ -49,10 +49,11 @@ useFocus(projectNameInput, { initialValue: true });
                 <div class="col-span-3 sm:col-span-2">
                     <MemberCombobox
                         :hidden-members="props.existingMembers"
-                        v-model="projectMember.user_id"></MemberCombobox>
+                        v-model="projectMember.member_id"></MemberCombobox>
                 </div>
                 <div class="col-span-3 sm:col-span-1 flex-1">
                     <BillableRateInput
+                        name="billable_rate"
                         v-model="
                             projectMember.billable_rate
                         "></BillableRateInput>
diff --git a/resources/js/Components/Common/ProjectMember/ProjectMemberTableRow.vue b/resources/js/Components/Common/ProjectMember/ProjectMemberTableRow.vue
index 2df5e015..66c79ff5 100644
--- a/resources/js/Components/Common/ProjectMember/ProjectMemberTableRow.vue
+++ b/resources/js/Components/Common/ProjectMember/ProjectMemberTableRow.vue
@@ -22,7 +22,7 @@ function deleteProjectMember() {
 const { members } = storeToRefs(useMembersStore());
 const member = computed(() => {
     return members.value.find(
-        (member) => member.user_id === props.projectMember.user_id
+        (member) => member.id === props.projectMember.member_id
     );
 });
 </script>
diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryAggregateRow.vue b/resources/js/Components/Common/TimeEntry/TimeEntryAggregateRow.vue
index a5ec4efa..45c7e99a 100644
--- a/resources/js/Components/Common/TimeEntry/TimeEntryAggregateRow.vue
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryAggregateRow.vue
@@ -14,13 +14,13 @@ import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
 import TimeEntryMoreOptionsDropdown from '@/Components/Common/TimeEntry/TimeEntryMoreOptionsDropdown.vue';
 import TimeTrackerProjectTaskDropdown from '@/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
 import BillableToggleButton from '@/Components/Common/BillableToggleButton.vue';
-import { computed, ref } from 'vue';
-import { twMerge } from 'tailwind-merge';
+import { ref } from 'vue';
 import {
     formatHumanReadableDuration,
     formatStartEnd,
 } from '../../../utils/time';
 import TimeEntryRow from '@/Components/Common/TimeEntry/TimeEntryRow.vue';
+import GroupedItemsCountButton from '@/Components/Common/GroupedItemsCountButton.vue';
 
 const currentTimeEntryStore = useCurrentTimeEntryStore();
 const { stopTimer } = currentTimeEntryStore;
@@ -99,13 +99,6 @@ function updateProjectAndTask(projectId: string, taskId: string) {
 }
 
 const expanded = ref(false);
-
-const expandedStatusClasses = computed(() => {
-    if (expanded.value) {
-        return 'border-card-border border bg-card-background-active text-white';
-    }
-    return 'border-card-border border bg-card-background text-muted';
-});
 </script>
 
 <template>
@@ -118,18 +111,11 @@ const expandedStatusClasses = computed(() => {
                     <input
                         type="checkbox"
                         class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
-                    <button
-                        @click="expanded = !expanded"
-                        :class="
-                            twMerge(
-                                expandedStatusClasses,
-                                'font-medium w-7 h-7 rounded flex items-center transition justify-center'
-                            )
-                        ">
-                        <span>
-                            {{ timeEntry?.timeEntries?.length }}
-                        </span>
-                    </button>
+                    <GroupedItemsCountButton
+                        :expanded="expanded"
+                        @click="expanded = !expanded">
+                        {{ timeEntry?.timeEntries?.length }}
+                    </GroupedItemsCountButton>
                     <TimeEntryDescriptionInput
                         @changed="updateTimeEntryDescription"
                         class="flex-1"
diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue b/resources/js/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue
index e69ac473..2fa65429 100644
--- a/resources/js/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryDescriptionInput.vue
@@ -19,7 +19,7 @@ function onChange(event: Event) {
                 @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" />
+                class="text-white font-medium bg-transparent focus-visible:ring-0 hover:bg-card-background rounded-lg border border-transparent hover:border-card-border" />
         </label>
     </div>
 </template>
diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryRowTagDropdown.vue b/resources/js/Components/Common/TimeEntry/TimeEntryRowTagDropdown.vue
index 7658c765..62d7d7b9 100644
--- a/resources/js/Components/Common/TimeEntry/TimeEntryRowTagDropdown.vue
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryRowTagDropdown.vue
@@ -21,7 +21,9 @@ const timeEntryTags = computed<Tag[]>(() => {
 <template>
     <TagDropdown @changed="emit('changed', model)" v-model="model">
         <template #trigger>
-            <button data-testid="time_entry_tag_dropdown">
+            <button
+                data-testid="time_entry_tag_dropdown"
+                class="opacity-50 group-hover:opacity-100 transition">
                 <TagBadge
                     :border="false"
                     size="large"
diff --git a/resources/js/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue b/resources/js/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue
index cbe67f6e..f8bca4c4 100644
--- a/resources/js/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue
+++ b/resources/js/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue
@@ -8,6 +8,9 @@ import { useTasksStore } from '@/utils/useTasks';
 import ProjectDropdownItem from '@/Components/Common/Project/ProjectDropdownItem.vue';
 import type { Project, Task } from '@/utils/api';
 import ProjectBadge from '@/Components/Common/Project/ProjectBadge.vue';
+import Badge from '@/Components/Common/Badge.vue';
+import { PlusIcon } from '@heroicons/vue/16/solid';
+import ProjectCreateModal from '@/Components/Common/Project/ProjectCreateModal.vue';
 
 const projectStore = useProjectsStore();
 const { projects } = storeToRefs(projectStore);
@@ -94,9 +97,7 @@ const filteredProjects = computed(() => {
 });
 
 async function addClientIfNoneExists() {
-    if (highlightedItemId.value) {
-        setProjectAndClientBasedOnHighlightedItem();
-    }
+    setProjectAndClientBasedOnHighlightedItem();
 }
 
 function isProjectSelected(project: Project) {
@@ -142,131 +143,122 @@ function updateSearchValue(event: Event) {
 const emit = defineEmits(['update:modelValue', 'changed']);
 
 function moveHighlightUp() {
-    if (highlightedItemId.value) {
-        const currentHighlightedIndex = filteredProjects.value.findIndex(
+    const currentHighlightedIndex = filteredProjects.value.findIndex(
+        (projectWithTasks) =>
+            projectWithTasks.project.id === highlightedItemId.value
+    );
+    // check if it is a project id
+    if (currentHighlightedIndex === -1) {
+        // the ID is a task ID
+        const currentProjectWithTasks = filteredProjects.value.find(
             (projectWithTasks) =>
-                projectWithTasks.project.id === highlightedItemId.value
-        );
-        // check if it is a project id
-        if (currentHighlightedIndex === -1) {
-            // the ID is a task ID
-            const currentProjectWithTasks = filteredProjects.value.find(
-                (projectWithTasks) =>
-                    projectWithTasks.tasks.some(
-                        (task) => task.id === highlightedItemId.value
-                    )
-            );
-            if (currentProjectWithTasks) {
-                const taskIndex = currentProjectWithTasks.tasks.findIndex(
+                projectWithTasks.tasks.some(
                     (task) => task.id === highlightedItemId.value
-                );
-                if (taskIndex === -1) {
-                    return;
-                }
-                if (taskIndex === 0) {
-                    // highlight the project if it was the first task before
-                    highlightedItemId.value =
-                        currentProjectWithTasks.project.id;
-                    return;
-                }
-                highlightedItemId.value =
-                    currentProjectWithTasks.tasks[taskIndex - 1].id;
+                )
+        );
+        if (currentProjectWithTasks) {
+            const taskIndex = currentProjectWithTasks.tasks.findIndex(
+                (task) => task.id === highlightedItemId.value
+            );
+            if (taskIndex === -1) {
+                return;
             }
+            if (taskIndex === 0) {
+                // highlight the project if it was the first task before
+                highlightedItemId.value = currentProjectWithTasks.project.id;
+                return;
+            }
+            highlightedItemId.value =
+                currentProjectWithTasks.tasks[taskIndex - 1].id;
         }
-        if (currentHighlightedIndex === 0) {
-            // highlight the last project or the last project of the last project
-            const lastProject =
-                filteredProjects.value[filteredProjects.value.length - 1];
-            if (lastProject.tasks.length > 0) {
-                // highlight last task of last project
-                highlightedItemId.value =
-                    lastProject.tasks[lastProject.tasks.length - 1].id;
-            } else {
-                highlightedItemId.value =
-                    filteredProjects.value[
-                        filteredProjects.value.length - 1
-                    ].project.id;
-            }
+    }
+    if (currentHighlightedIndex === 0) {
+        // highlight the last project or the last project of the last project
+        const lastProject =
+            filteredProjects.value[filteredProjects.value.length - 1];
+        if (lastProject.tasks.length > 0) {
+            // highlight last task of last project
+            highlightedItemId.value =
+                lastProject.tasks[lastProject.tasks.length - 1].id;
         } else {
-            const previousProject =
-                filteredProjects.value[currentHighlightedIndex - 1];
-            if (previousProject.tasks.length > 0) {
-                // highlight last task of previous project
-                highlightedItemId.value =
-                    previousProject.tasks[previousProject.tasks.length - 1].id;
-            } else {
-                highlightedItemId.value =
-                    filteredProjects.value[
-                        currentHighlightedIndex - 1
-                    ].project.id;
-            }
+            highlightedItemId.value =
+                filteredProjects.value[
+                    filteredProjects.value.length - 1
+                ].project.id;
+        }
+    } else {
+        const previousProject =
+            filteredProjects.value[currentHighlightedIndex - 1];
+        if (previousProject.tasks.length > 0) {
+            // highlight last task of previous project
+            highlightedItemId.value =
+                previousProject.tasks[previousProject.tasks.length - 1].id;
+        } else {
+            highlightedItemId.value =
+                filteredProjects.value[currentHighlightedIndex - 1].project.id;
         }
     }
 }
 
 function moveHighlightDown() {
-    if (highlightedItemId.value) {
-        const currentHighlightedIndex = filteredProjects.value.findIndex(
+    const currentHighlightedIndex = filteredProjects.value.findIndex(
+        (projectWithTasks) =>
+            projectWithTasks.project.id === highlightedItemId.value
+    );
+    // check if it is a project id
+    if (currentHighlightedIndex === -1) {
+        // the ID is a task ID
+        const currentProjectWithTasks = filteredProjects.value.find(
             (projectWithTasks) =>
-                projectWithTasks.project.id === highlightedItemId.value
-        );
-        // check if it is a project id
-        if (currentHighlightedIndex === -1) {
-            // the ID is a task ID
-            const currentProjectWithTasks = filteredProjects.value.find(
-                (projectWithTasks) =>
-                    projectWithTasks.tasks.some(
-                        (task) => task.id === highlightedItemId.value
-                    )
-            );
-            if (currentProjectWithTasks) {
-                const taskIndex = currentProjectWithTasks.tasks.findIndex(
+                projectWithTasks.tasks.some(
                     (task) => task.id === highlightedItemId.value
+                )
+        );
+        if (currentProjectWithTasks) {
+            const taskIndex = currentProjectWithTasks.tasks.findIndex(
+                (task) => task.id === highlightedItemId.value
+            );
+            if (taskIndex === -1) {
+                return;
+            }
+            if (taskIndex === currentProjectWithTasks.tasks.length - 1) {
+                // highlight the next project if it was the last task in current project
+                const projectIndex = filteredProjects.value.indexOf(
+                    currentProjectWithTasks
                 );
-                if (taskIndex === -1) {
-                    return;
+                if (projectIndex === filteredProjects.value.length - 1) {
+                    // highlight the first project if it was the last project
+                    highlightedItemId.value =
+                        filteredProjects.value[0].project.id;
+                } else {
+                    highlightedItemId.value =
+                        filteredProjects.value[projectIndex + 1].project.id;
                 }
-                if (taskIndex === currentProjectWithTasks.tasks.length - 1) {
-                    // highlight the next project if it was the last task in current project
-                    const projectIndex = filteredProjects.value.indexOf(
-                        currentProjectWithTasks
-                    );
-                    if (projectIndex === filteredProjects.value.length - 1) {
-                        // highlight the first project if it was the last project
-                        highlightedItemId.value =
-                            filteredProjects.value[0].project.id;
-                    } else {
-                        highlightedItemId.value =
-                            filteredProjects.value[projectIndex + 1].project.id;
-                    }
-                    return;
-                }
-                highlightedItemId.value =
-                    currentProjectWithTasks.tasks[taskIndex + 1].id;
+                return;
             }
+            highlightedItemId.value =
+                currentProjectWithTasks.tasks[taskIndex + 1].id;
         }
-        if (currentHighlightedIndex === filteredProjects.value.length - 1) {
-            // highlight the first project or the last project of the last project
-            const lastProject =
-                filteredProjects.value[filteredProjects.value.length - 1];
-            if (lastProject.tasks.length > 0) {
-                // highlight last task of last project
-                highlightedItemId.value = lastProject.tasks[0].id;
-            } else {
-                highlightedItemId.value = filteredProjects.value[0].project.id;
-            }
+    }
+    if (currentHighlightedIndex === filteredProjects.value.length - 1) {
+        // highlight the first project or the last project of the last project
+        const lastProject =
+            filteredProjects.value[filteredProjects.value.length - 1];
+        if (lastProject.tasks.length > 0) {
+            // highlight last task of last project
+            highlightedItemId.value = lastProject.tasks[0].id;
         } else {
-            const currentProjectWithTasks =
-                filteredProjects.value[currentHighlightedIndex];
-            if (currentProjectWithTasks.tasks.length > 0) {
-                // highlight last task of previous project
-                highlightedItemId.value = currentProjectWithTasks.tasks[0].id;
-            } else {
-                highlightedItemId.value =
-                    filteredProjects.value[
-                        currentHighlightedIndex + 1
-                    ].project.id;
-            }
+            highlightedItemId.value = filteredProjects.value[0].project.id;
+        }
+    } else {
+        const currentProjectWithTasks =
+            filteredProjects.value[currentHighlightedIndex];
+        if (currentProjectWithTasks.tasks.length > 0) {
+            // highlight last task of previous project
+            highlightedItemId.value = currentProjectWithTasks.tasks[0].id;
+        } else {
+            highlightedItemId.value =
+                filteredProjects.value[currentHighlightedIndex + 1].project.id;
         }
     }
 }
@@ -307,10 +299,23 @@ function selectProject(projectId: string) {
     open.value = false;
     emit('changed', project.value, task.value);
 }
+
+const showCreateProject = ref(false);
 </script>
 
 <template>
-    <Dropdown width="120" v-model="open" :closeOnContentClick="true">
+    <div v-if="projects.length === 0">
+        <Badge
+            @click="showCreateProject = true"
+            size="large"
+            class="cursor-pointer hover:bg-tertiary">
+            <PlusIcon class="-ml-1 w-5"></PlusIcon>
+            <span>Add new project</span>
+        </Badge>
+        <ProjectCreateModal
+            v-model:show="showCreateProject"></ProjectCreateModal>
+    </div>
+    <Dropdown v-else width="120" v-model="open" :closeOnContentClick="true">
         <template #trigger>
             <ProjectBadge
                 ref="projectDropdownTrigger"
@@ -319,7 +324,7 @@ function selectProject(projectId: string) {
                 :border="showBadgeBorder"
                 tag="button"
                 :name="selectedProjectName"
-                class="focus:border-input-border-active focus:outline-0 focus:bg-card-background-separator hover:bg-card-background-separator">
+                class="focus:border-border-tertiary focus:outline-0 focus:bg-card-background-separator hover:bg-card-background-separator">
                 <div class="flex items-center space-x-1">
                     <span>
                         {{ selectedProjectName }}
diff --git a/resources/js/Components/Common/TimeTracker/TimeTrackerTagDropdown.vue b/resources/js/Components/Common/TimeTracker/TimeTrackerTagDropdown.vue
index 1f7411d7..8de01964 100644
--- a/resources/js/Components/Common/TimeTracker/TimeTrackerTagDropdown.vue
+++ b/resources/js/Components/Common/TimeTracker/TimeTrackerTagDropdown.vue
@@ -25,7 +25,7 @@ const iconColorClasses = computed(() => {
                 :class="
                     twMerge(
                         iconColorClasses,
-                        'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full w-7 sm:w-10 h-7 sm:h-10 flex items-center justify-center'
+                        'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus-visible:bg-card-background-separator hover:bg-card-background-separator rounded-full w-7 sm:w-10 h-7 sm:h-10 flex items-center justify-center'
                     )
                 ">
                 <TagIcon class="w-5 sm:w-6 h-5 sm:h-6"></TagIcon>
diff --git a/resources/js/Components/Common/TimeTrackerStartStop.vue b/resources/js/Components/Common/TimeTrackerStartStop.vue
index b0e1d8bc..573dd9be 100644
--- a/resources/js/Components/Common/TimeTrackerStartStop.vue
+++ b/resources/js/Components/Common/TimeTrackerStartStop.vue
@@ -27,7 +27,7 @@ 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';
+        return 'bg-accent-300/70 hover:bg-accent-400/70 focus:bg-accent-400/70';
     }
 });
 
diff --git a/resources/js/Components/Dashboard/ActivityGraphCard.vue b/resources/js/Components/Dashboard/ActivityGraphCard.vue
index 0958c309..0b0fba91 100644
--- a/resources/js/Components/Dashboard/ActivityGraphCard.vue
+++ b/resources/js/Components/Dashboard/ActivityGraphCard.vue
@@ -19,6 +19,7 @@ import {
     formatHumanReadableDuration,
     getDayJsInstance,
 } from '@/utils/time';
+import { useCssVar } from '@vueuse/core';
 
 const props = defineProps<{
     dailyHoursTracked: { duration: number; date: string }[];
@@ -40,6 +41,8 @@ const max = Math.max(
     1
 );
 
+const backgroundColor = useCssVar('--color-bg-secondary');
+const itemBackgroundColor = useCssVar('--color-bg-tertiary');
 const option = ref({
     tooltip: {},
     visualMap: {
@@ -50,7 +53,7 @@ const option = ref({
         left: 'center',
         top: 'center',
         inRange: {
-            color: ['#242940', '#2DBE45'],
+            color: [itemBackgroundColor.value, '#2DBE45'],
         },
         show: false,
     },
@@ -74,8 +77,9 @@ const option = ref({
                 .format('YYYY-MM-DD'),
         ],
         itemStyle: {
+            color: 'transparent',
             borderWidth: 8,
-            borderColor: '#13152B',
+            borderColor: backgroundColor.value,
         },
         yearLabel: { show: false },
     },
@@ -85,6 +89,8 @@ const option = ref({
         data: props.dailyHoursTracked.map((el) => [el.date, el.duration]),
         itemStyle: {
             borderRadius: 5,
+            borderColor: 'rgba(255,255,255,0.05)',
+            borderWidth: 1,
         },
         tooltip: {
             valueFormatter: (value: number, dataIndex: number) => {
@@ -104,10 +110,9 @@ const option = ref({
     <DashboardCard title="Activity Graph" :icon="BoltIcon">
         <div class="px-2">
             <v-chart
-                :autoresize="true"
                 class="chart"
                 :option="option"
-                style="height: 260px" />
+                style="height: 260px; background-color: transparent" />
         </div>
     </DashboardCard>
 </template>
diff --git a/resources/js/Components/Dashboard/DashboardCard.vue b/resources/js/Components/Dashboard/DashboardCard.vue
index e492657f..d1d9d20c 100644
--- a/resources/js/Components/Dashboard/DashboardCard.vue
+++ b/resources/js/Components/Dashboard/DashboardCard.vue
@@ -2,7 +2,7 @@
     <section class="flex flex-col">
         <CardTitle :title="title" :icon="icon"></CardTitle>
         <div
-            class="rounded-lg bg-card-background border border-card-border flex-1 flex items-stretch">
+            class="rounded-lg bg-card-background border border-card-border flex-1 flex items-stretch shadow-card">
             <div class="w-full flex flex-col">
                 <slot></slot>
             </div>
diff --git a/resources/js/Components/Dashboard/DayOverviewCardChart.vue b/resources/js/Components/Dashboard/DayOverviewCardChart.vue
index 858bd053..5f38f7d3 100644
--- a/resources/js/Components/Dashboard/DayOverviewCardChart.vue
+++ b/resources/js/Components/Dashboard/DayOverviewCardChart.vue
@@ -1,20 +1,23 @@
 <script setup lang="ts">
 import VChart from 'vue-echarts';
 import { ref } from 'vue';
+import { useCssVar } from '@vueuse/core';
 
 const props = defineProps<{
     history: number[];
 }>();
 
+const accentColor = useCssVar('--color-accent-quaternary');
+
 const seriesData = props.history.map((el) => {
     return {
         value: el,
         ...{
             itemStyle: {
                 borderWidth: 1,
-                borderColor: 'rgba(125,156,188,1)',
+                borderColor: 'rgba(' + accentColor.value + ',0.8)',
                 borderRadius: [2, 2, 0, 0],
-                color: 'rgba(125,156,188,1)',
+                color: 'rgba(' + accentColor.value + ',0.8)',
             },
         },
     };
diff --git a/resources/js/Components/Dashboard/ProjectsChartCard.vue b/resources/js/Components/Dashboard/ProjectsChartCard.vue
index 57585a69..7e41cf67 100644
--- a/resources/js/Components/Dashboard/ProjectsChartCard.vue
+++ b/resources/js/Components/Dashboard/ProjectsChartCard.vue
@@ -11,6 +11,8 @@ import {
     TitleComponent,
     TooltipComponent,
 } from 'echarts/components';
+import { useCssVar } from '@vueuse/core';
+import { formatHumanReadableDuration } from '@/utils/time';
 
 use([
     CanvasRenderer,
@@ -23,6 +25,8 @@ use([
 
 provide(THEME_KEY, 'dark');
 
+const backgroundColor = useCssVar('--theme-color-default-background');
+
 function hexToRGBA(hex: string, opacity = 1) {
     // Remove the hash at the start if it's there
     hex = hex.replace(/^#/, '');
@@ -60,7 +64,7 @@ const seriesData = props.weeklyProjectOverview.map((el) => {
             itemStyle: {
                 borderRadius: 15,
                 // TODO: Fix dynamic color
-                borderColor: '#0b0d1c',
+                borderColor: backgroundColor.value,
                 borderWidth: 18,
                 color: new LinearGradient(0, 0, 0, 1, [
                     {
@@ -77,13 +81,23 @@ const seriesData = props.weeklyProjectOverview.map((el) => {
     };
 });
 const option = ref({
+    tooltip: {
+        trigger: 'item',
+    },
+    legend: {
+        orient: 'vertical',
+        bottom: 'bottom',
+    },
     backgroundColor: 'transparent',
     series: [
         {
             label: {
-                // TODO: Muted color make dynamic
-                color: '#D9DCFB',
-                fontWeight: 'bold',
+                show: false,
+            },
+            tooltip: {
+                valueFormatter: (value: number) => {
+                    return formatHumanReadableDuration(value);
+                },
             },
             data: seriesData,
             radius: ['30%', '65%'],
diff --git a/resources/js/Components/Dashboard/ThisWeekOverview.vue b/resources/js/Components/Dashboard/ThisWeekOverview.vue
index 1060cb01..dc99ffe3 100644
--- a/resources/js/Components/Dashboard/ThisWeekOverview.vue
+++ b/resources/js/Components/Dashboard/ThisWeekOverview.vue
@@ -18,6 +18,7 @@ import ProjectsChartCard from '@/Components/Dashboard/ProjectsChartCard.vue';
 import { formatHumanReadableDuration } from '@/utils/time';
 import { formatCents } from '@/utils/money';
 import { getWeekStart } from '@/utils/useUser';
+import { useCssVar } from '@vueuse/core';
 
 use([
     CanvasRenderer,
@@ -47,6 +48,7 @@ const props = defineProps<{
         duration: number;
     }[];
 }>();
+const accentColor = useCssVar('--color-accent-quaternary');
 
 const seriesData = props.weeklyHistory.map((el) => {
     return {
@@ -56,23 +58,34 @@ const seriesData = props.weeklyHistory.map((el) => {
                 borderColor: new LinearGradient(0, 0, 0, 1, [
                     {
                         offset: 0,
-                        color: 'rgba(125,156,188,1)',
+                        color: 'rgba(' + accentColor.value + ',0.7)',
                     },
                     {
                         offset: 1,
-                        color: 'rgba(125,156,188,0.7)',
+                        color: 'rgba(' + accentColor.value + ',0.5)',
                     },
                 ]),
-                borderWidth: 3,
+                emphasis: {
+                    color: new LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: 'rgba(' + accentColor.value + ',0.9)',
+                        },
+                        {
+                            offset: 1,
+                            color: 'rgba(' + accentColor.value + ',0.7)',
+                        },
+                    ]),
+                },
                 borderRadius: [12, 12, 0, 0],
                 color: new LinearGradient(0, 0, 0, 1, [
                     {
                         offset: 0,
-                        color: 'rgba(125,156,188,0.9)',
+                        color: 'rgba(' + accentColor.value + ',0.7)',
                     },
                     {
                         offset: 1,
-                        color: 'rgba(125,156,188,0.4)',
+                        color: 'rgba(' + accentColor.value + ',0.5)',
                     },
                 ]),
             },
@@ -106,6 +119,8 @@ const weekdays = computed(() => {
     }
 });
 
+const markLineColor = useCssVar('--color-border-secondary');
+
 const option = ref({
     tooltip: {
         trigger: 'item',
@@ -120,12 +135,6 @@ const option = ref({
     xAxis: {
         type: 'category',
         data: weekdays.value,
-        markLine: {
-            lineStyle: {
-                color: 'rgba(125,156,188,0.1)',
-                type: 'dashed',
-            },
-        },
         axisLine: {
             lineStyle: {
                 color: 'transparent', // Set desired color here
@@ -147,7 +156,7 @@ const option = ref({
         type: 'value',
         splitLine: {
             lineStyle: {
-                color: 'rgba(125,156,188,0.2)', // Set desired color here
+                color: markLineColor.value,
             },
         },
     },
diff --git a/resources/js/Components/DialogModal.vue b/resources/js/Components/DialogModal.vue
index 197cd25b..9c60cc4e 100644
--- a/resources/js/Components/DialogModal.vue
+++ b/resources/js/Components/DialogModal.vue
@@ -40,7 +40,7 @@ const close = () => {
         </div>
 
         <div
-            class="flex flex-row justify-end px-6 py-4 border-t border-card-background-separator bg-card-background text-end">
+            class="flex flex-row justify-end px-6 py-4 border-t border-card-background-separator bg-default-background rounded-b-2xl text-end">
             <slot name="footer" />
         </div>
     </Modal>
diff --git a/resources/js/Components/Dropdown.vue b/resources/js/Components/Dropdown.vue
index 946cc828..e38e1cdd 100644
--- a/resources/js/Components/Dropdown.vue
+++ b/resources/js/Components/Dropdown.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { flip, type Placement, useFloating } from '@floating-ui/vue';
 import { offset } from '@floating-ui/vue';
 import { autoUpdate } from '@floating-ui/vue';
@@ -7,12 +7,10 @@ import { autoUpdate } from '@floating-ui/vue';
 const props = withDefaults(
     defineProps<{
         align: Placement;
-        width: string;
         closeOnContentClick: boolean;
     }>(),
     {
         align: 'bottom-start',
-        width: '48',
         closeOnContentClick: true,
     }
 );
@@ -39,12 +37,6 @@ function onContentClick() {
     }
 }
 
-const widthClass = computed(() => {
-    return {
-        48: 'w-48',
-    }[props.width.toString()];
-});
-
 function toggleOpen() {
     open.value = !open.value;
     if (open.value === true) {
@@ -82,7 +74,6 @@ const { floatingStyles } = useFloating(reference, floating, {
                 v-show="open"
                 ref="floating"
                 class="z-50"
-                :class="[widthClass]"
                 :style="floatingStyles"
                 @click="onContentClick">
                 <transition
@@ -94,7 +85,7 @@ const { floatingStyles } = useFloating(reference, floating, {
                     leave-to-class="transform opacity-0 scale-95">
                     <div
                         v-if="open"
-                        class="rounded-lg ring-1 relative ring-black ring-opacity-5 border border-card-border overflow-none bg-card-background shadow-lg">
+                        class="rounded-lg ring-1 relative ring-black ring-opacity-5 border border-card-border overflow-none shadow-dropdown bg-card-background">
                         <slot name="content" />
                     </div>
                 </transition>
diff --git a/resources/js/Components/Modal.vue b/resources/js/Components/Modal.vue
index b1b8dd5e..f3141cce 100644
--- a/resources/js/Components/Modal.vue
+++ b/resources/js/Components/Modal.vue
@@ -91,7 +91,7 @@ const maxWidthClass = computed(() => {
                     leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
                     <div
                         v-show="show"
-                        class="mb-6 bg-card-background border border-card-border rounded-lg shadow-xl transform transition-all sm:w-full sm:mx-auto"
+                        class="mb-6 bg-default-background border border-card-border rounded-lg shadow-xl transform transition-all sm:w-full sm:mx-auto"
                         :class="maxWidthClass">
                         <slot v-if="show" />
                     </div>
diff --git a/resources/js/Components/SecondaryButton.vue b/resources/js/Components/SecondaryButton.vue
index a16cc4c3..ede24a4a 100644
--- a/resources/js/Components/SecondaryButton.vue
+++ b/resources/js/Components/SecondaryButton.vue
@@ -26,7 +26,7 @@ const sizeClasses = {
         :type="type"
         :class="
             twMerge(
-                'bg-button-secondary-background border border-button-secondary-border hover:bg-button-secondary-background-hover shadow-sm transition text-white rounded-lg font-semibold inline-flex items-center space-x-1.5 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-25 ease-in-out',
+                'bg-button-secondary-background border border-button-secondary-border hover:bg-button-secondary-background-hover shadow-sm transition text-white rounded-lg font-semibold inline-flex items-center space-x-1.5 focus-visible:border-input-border-active focus:outline-none focus:ring-0 disabled:opacity-25 ease-in-out',
                 sizeClasses[props.size]
             )
         ">
diff --git a/resources/js/Components/TextInput.vue b/resources/js/Components/TextInput.vue
index 64563a48..c9e176ca 100644
--- a/resources/js/Components/TextInput.vue
+++ b/resources/js/Components/TextInput.vue
@@ -28,7 +28,7 @@ function updateValue(event: Event) {
 <template>
     <input
         ref="input"
-        class="border-input-border bg-input-background text-white focus:border-input-border-active rounded-md shadow-sm"
+        class="border-input-border border bg-input-background text-white focus:ring-input-border-active focus:ring-0 focus-visible:border-input-border-active rounded-md shadow-sm"
         :value="modelValue"
         :name="name"
         @input="updateValue" />
diff --git a/resources/js/Components/TimeTracker.vue b/resources/js/Components/TimeTracker.vue
index 9e374672..43e5807e 100644
--- a/resources/js/Components/TimeTracker.vue
+++ b/resources/js/Components/TimeTracker.vue
@@ -186,7 +186,7 @@ function switchToTimeEntryOrganization() {
         </div>
         <div class="flex items-center relative" data-testid="dashboard_timer">
             <div
-                class="flex flex-col sm:flex-row w-full rounded-lg bg-card-background border-card-border border transition">
+                class="flex flex-col sm:flex-row w-full rounded-lg bg-card-background border-card-border border transition shadow-card">
                 <div class="flex-1 flex items-center pr-6">
                     <input
                         placeholder="What are you working on?"
@@ -194,7 +194,7 @@ function switchToTimeEntryOrganization() {
                         v-model="currentTimeEntry.description"
                         @keydown.enter="startTimerIfNotActive"
                         @blur="updateTimeEntry"
-                        class="w-full rounded-l-lg py-4 sm:py-2.5 px-3 border-b border-b-card-background-separator sm:px-4 text-base sm:text-lg text-white focus:bg-card-background-active font-medium bg-transparent border-none placeholder-muted focus:ring-0 transition"
+                        class="w-full rounded-l-lg py-4 sm:py-2.5 px-3 border-b border-b-card-background-separator sm:px-4 text-base sm:text-lg text-white font-medium bg-transparent border-none placeholder-muted focus:ring-0 transition"
                         type="text" />
                 </div>
                 <div class="flex items-center justify-between pl-2">
@@ -226,7 +226,7 @@ function switchToTimeEntryOrganization() {
                             @blur="updateTimerAndStartLiveTimerUpdate"
                             @keydown.enter="onTimeEntryEnterPress"
                             v-model="currentTime"
-                            class="w-[110px] sm:w-[130px] h-full text-white py-2.5 rounded-r-lg text-center px-4 text-sm sm:text-lg font-bold bg-card-background border-none placeholder-muted focus:ring-0 transition focus:bg-card-background-active"
+                            class="w-[110px] sm:w-[130px] h-full text-white py-2.5 rounded-r-lg text-center px-4 text-sm sm:text-lg font-bold bg-card-background border-none placeholder-muted focus:ring-0 transition"
                             type="text" />
                     </div>
                 </div>
diff --git a/resources/js/Pages/Tags.vue b/resources/js/Pages/Tags.vue
index 044524a9..abd39a6c 100644
--- a/resources/js/Pages/Tags.vue
+++ b/resources/js/Pages/Tags.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import MainContainer from '@/Pages/MainContainer.vue';
 import AppLayout from '@/Layouts/AppLayout.vue';
-import { FolderIcon, PlusIcon } from '@heroicons/vue/16/solid';
+import { TagIcon, PlusIcon } from '@heroicons/vue/16/solid';
 import SecondaryButton from '@/Components/SecondaryButton.vue';
 import { ref } from 'vue';
 import TagTable from '@/Components/Common/Tag/TagTable.vue';
 import TagCreateModal from '@/Components/Common/Tag/TagCreateModal.vue';
 import PageTitle from '@/Components/Common/PageTitle.vue';
 import { canCreateTags } from '@/utils/permissions';
-
 const createTag = ref(false);
 </script>
 
@@ -17,7 +16,7 @@ const createTag = ref(false);
         <MainContainer
             class="py-5 border-b border-default-background-separator flex justify-between items-center">
             <div class="flex items-center space-x-6">
-                <PageTitle :icon="FolderIcon" title="Tags"> </PageTitle>
+                <PageTitle :icon="TagIcon" title="Tags"> </PageTitle>
             </div>
             <SecondaryButton
                 v-if="canCreateTags()"
diff --git a/resources/js/Pages/Time.vue b/resources/js/Pages/Time.vue
index 80802099..2218a0f0 100644
--- a/resources/js/Pages/Time.vue
+++ b/resources/js/Pages/Time.vue
@@ -68,12 +68,10 @@ const groupedTimeEntries = computed(() => {
                     e.billable === entry.billable &&
                     e.description === entry.description
             );
-            console.log(oldEntriesIndex);
             if (oldEntriesIndex !== -1 && newDailyEntries[oldEntriesIndex]) {
                 newDailyEntries[oldEntriesIndex].timeEntries.push(entry);
 
                 // Add up durations for time entries of the same type
-                console.log(newDailyEntries[oldEntriesIndex], entry?.duration);
                 newDailyEntries[oldEntriesIndex].duration =
                     (newDailyEntries[oldEntriesIndex].duration ?? 0) +
                     (entry?.duration ?? 0);
diff --git a/resources/js/types/models.ts b/resources/js/types/models.ts
index 24877cdc..be753b61 100644
--- a/resources/js/types/models.ts
+++ b/resources/js/types/models.ts
@@ -75,6 +75,8 @@ export interface Task {
     organization: Organization;
 }
 
+type OrganizationWithMembership = Organization & { membership: Membership };
+
 export interface User {
     // columns
     id: string;
@@ -98,6 +100,7 @@ export interface User {
     organizations: Organization[];
     clients: Client[];
     current_team: Organization;
+    all_teams: OrganizationWithMembership[];
     owned_teams: Organization[];
     teams: Organization[];
 }
diff --git a/resources/js/utils/notification.ts b/resources/js/utils/notification.ts
index 3c058a6b..38bf49d4 100644
--- a/resources/js/utils/notification.ts
+++ b/resources/js/utils/notification.ts
@@ -73,8 +73,8 @@ export const useNotificationsStore = defineStore('notifications', () => {
                     );
                 }
             }
+            throw new Error('Failed to handle API request', { cause: error });
         }
-        throw new Error('Failed to handle API request');
     }
 
     return { addNotification, notifications, handleApiRequestNotifications };
diff --git a/resources/js/utils/useCurrentTimeEntry.ts b/resources/js/utils/useCurrentTimeEntry.ts
index 0ac02263..da769c4e 100644
--- a/resources/js/utils/useCurrentTimeEntry.ts
+++ b/resources/js/utils/useCurrentTimeEntry.ts
@@ -4,7 +4,11 @@ import { api } from '../../../openapi.json.client';
 import type { TimeEntry } from '@/utils/api';
 import dayjs, { Dayjs } from 'dayjs';
 import utc from 'dayjs/plugin/utc';
-import { getCurrentOrganizationId, getCurrentUserId } from '@/utils/useUser';
+import {
+    getCurrentMembershipId,
+    getCurrentOrganizationId,
+    getCurrentUserId,
+} from '@/utils/useUser';
 import { useLocalStorage } from '@vueuse/core';
 import { useTimeEntriesStore } from '@/utils/useTimeEntries';
 import { useNotificationsStore } from '@/utils/notification';
@@ -77,9 +81,9 @@ export const useCurrentTimeEntryStore = defineStore('currentTimeEntry', () => {
     }
 
     async function startTimer() {
-        const user = getCurrentUserId();
         const organization = getCurrentOrganizationId();
-        if (organization) {
+        const membership = getCurrentMembershipId();
+        if (organization && membership) {
             const startTime =
                 currentTimeEntry.value.start !== ''
                     ? currentTimeEntry.value.start
@@ -87,7 +91,7 @@ export const useCurrentTimeEntryStore = defineStore('currentTimeEntry', () => {
             const response = await handleApiRequestNotifications(
                 api.createTimeEntry(
                     {
-                        user_id: user,
+                        member_id: membership,
                         start: startTime,
                         description: currentTimeEntry.value?.description,
                         project_id: currentTimeEntry.value?.project_id,
diff --git a/resources/js/utils/useMembers.ts b/resources/js/utils/useMembers.ts
index faf10084..1ae787ea 100644
--- a/resources/js/utils/useMembers.ts
+++ b/resources/js/utils/useMembers.ts
@@ -33,7 +33,7 @@ export const useMembersStore = defineStore('members', () => {
                     {
                         params: {
                             organization: organization,
-                            membership: membershipId,
+                            member: membershipId,
                         },
                     }
                 ),
diff --git a/resources/js/utils/useTimeEntries.ts b/resources/js/utils/useTimeEntries.ts
index 8d98f03e..eb4bad3d 100644
--- a/resources/js/utils/useTimeEntries.ts
+++ b/resources/js/utils/useTimeEntries.ts
@@ -1,10 +1,14 @@
 import { defineStore } from 'pinia';
-import { getCurrentOrganizationId, getCurrentUserId } from '@/utils/useUser';
+import {
+    getCurrentMembershipId,
+    getCurrentOrganizationId,
+} from '@/utils/useUser';
 import { api } from '../../../openapi.json.client';
 import { reactive, ref } from 'vue';
 import type { CreateTimeEntryBody, TimeEntry } from '@/utils/api';
 import dayjs from 'dayjs';
 import { useNotificationsStore } from '@/utils/notification';
+
 export type TimeEntriesGroupedByType = TimeEntry & { timeEntries: TimeEntry[] };
 
 export const useTimeEntriesStore = defineStore('timeEntries', () => {
@@ -12,6 +16,7 @@ export const useTimeEntriesStore = defineStore('timeEntries', () => {
 
     const allTimeEntriesLoaded = ref(false);
     const { handleApiRequestNotifications } = useNotificationsStore();
+
     async function fetchTimeEntries() {
         const organizationId = getCurrentOrganizationId();
         if (organizationId) {
@@ -22,7 +27,7 @@ export const useTimeEntriesStore = defineStore('timeEntries', () => {
                     },
                     queries: {
                         only_full_dates: 'true',
-                        user_id: getCurrentUserId(),
+                        member_id: getCurrentMembershipId(),
                     },
                 }),
                 undefined,
@@ -48,7 +53,7 @@ export const useTimeEntriesStore = defineStore('timeEntries', () => {
                     },
                     queries: {
                         only_full_dates: 'true',
-                        user_id: getCurrentUserId(),
+                        member_id: getCurrentMembershipId(),
                         before: dayjs(latestTimeEntry.start).utc().format(),
                     },
                 }),
@@ -84,11 +89,18 @@ export const useTimeEntriesStore = defineStore('timeEntries', () => {
         }
     }
 
-    async function createTimeEntry(timeEntry: CreateTimeEntryBody) {
+    async function createTimeEntry(
+        timeEntry: Omit<CreateTimeEntryBody, 'member_id'>
+    ) {
         const organizationId = getCurrentOrganizationId();
-        if (organizationId) {
+        const memberId = getCurrentMembershipId();
+        if (organizationId && memberId !== undefined) {
+            const newTimeEntry = {
+                ...timeEntry,
+                member_id: memberId,
+            } as CreateTimeEntryBody;
             await handleApiRequestNotifications(
-                api.createTimeEntry(timeEntry, {
+                api.createTimeEntry(newTimeEntry, {
                     params: {
                         organization: organizationId,
                     },
diff --git a/resources/js/utils/useUser.ts b/resources/js/utils/useUser.ts
index 166afdea..50423072 100644
--- a/resources/js/utils/useUser.ts
+++ b/resources/js/utils/useUser.ts
@@ -18,6 +18,12 @@ function getCurrentOrganizationId() {
     return page.props.auth.user.current_team_id;
 }
 
+function getCurrentMembershipId() {
+    return page.props.auth.user.all_teams.find(
+        (team) => team.id === getCurrentOrganizationId()
+    )?.membership.id;
+}
+
 function getUserTimezone() {
     return page.props.auth.user.timezone;
 }
@@ -27,4 +33,5 @@ export {
     getCurrentUserId,
     getUserTimezone,
     getWeekStart,
+    getCurrentMembershipId,
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index ad657185..e9057ef2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,7 @@ import defaultTheme from 'tailwindcss/defaultTheme';
 import forms from '@tailwindcss/forms';
 import typography from '@tailwindcss/typography';
 
-/** @type {import('tailwindcss').Config} */
+/** @type {import("tailwindcss").Config} */
 export default {
     content: [
         './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
@@ -11,9 +11,12 @@ export default {
         './resources/views/**/*.blade.php',
         './resources/js/**/*.vue',
     ],
-
     theme: {
         extend: {
+            boxShadow: {
+                'card': '0 4px 7px 0px rgb(0 0 0 / 30%)',
+                'dropdown': '0 4px 7px 0px rgb(0 0 0 / 40%)',
+            },
             containers: {
                 '2xs': '16rem',
             },
@@ -21,27 +24,38 @@ export default {
                 sans: ['Outfit', ...defaultTheme.fontFamily.sans],
             },
             colors: {
-                'white': '#D9DCFB',
+                'primary': 'var(--color-bg-primary)',
+                'secondary': 'var(--color-bg-secondary)',
+                'tertiary': 'var(--color-bg-tertiary)',
+                'quaternary': 'var(--color-bg-quaternary)',
+                'text-primary': 'var(--color-text-primary)',
+                'text-secondary': 'var(--color-text-secondary)',
+                'text-tertiary': 'var(--color-text-tertiary)',
+                'text-quaternary': 'var(--color-text-quaternary)',
+                'border-primary': 'var(--color-border-primary)',
+                'border-secondary': 'var(--color-border-secondary)',
+                'border-tertiary': 'var(--color-border-tertiary)',
                 'default-background': 'var(--theme-color-default-background)',
-                'default-background-separator': '#13152B',
+                'default-background-separator':
+                    'var(--theme-color-default-background-separator)',
                 'card-background': 'var(--theme-color-card-background)',
                 'card-background-active':
                     'var(--theme-color-card-background-active)',
-                'card-background-separator': '#262A51',
+                'card-background-separator':
+                    'var(--theme-color-card-background-separator)',
                 'card-border': 'var(--theme-color-card-border)',
                 'card-border-active': 'var(--theme-color-card-border-active)',
-                'muted': '#8F93B7',
+                'muted': 'var(--theme-color-muted-text)',
                 'icon-default': 'var(--theme-color-icon-default)',
                 'tab-background': 'var(--theme-color-tab-background)',
                 'tab-background-active':
                     'var(--theme-color-tab-background-active)',
                 'tab-border': 'var(--theme-color-tab-border)',
-                'icon-active': '#787DA8',
-                'menu-active': '#13152B',
-                'input-placeholder': '#42466C',
-                'input-border': '#242740',
-                'input-border-active': '#797EA8',
-                'input-background': '#030513',
+                'icon-active': 'var(--theme-color-icon-active)',
+                'menu-active': 'var(--theme-color-menu-active)',
+                'input-border': 'var(--theme-color-input-border)',
+                'input-border-active': 'var(--color-input-border-active)',
+                'input-background': 'var(--theme-color-input-background)',
                 'button-secondary-background':
                     'var(--theme-color-card-background)',
                 'button-secondary-background-hover':
@@ -52,17 +66,10 @@ export default {
                     'var(--theme-color-row-heading-background)',
                 'row-heading-border': 'var(--theme-color-row-heading-border)',
                 'accent': {
-                    '50': '#eff7ff',
-                    '100': '#daecff',
-                    '200': '#b0d7ff',
-                    '300': '#91caff',
-                    '400': '#5eadfc',
-                    '500': '#388bf9',
-                    '600': '#226cee',
-                    '700': '#1a57db',
-                    '800': '#1c46b1',
-                    '900': '#1c3f8c',
-                    '950': '#162755',
+                    '200': 'rgba(var(--color-accent-quaternary), <alpha-value>)',
+                    '300': 'rgba(var(--color-accent-tertiary), <alpha-value>)',
+                    '400': 'rgba(var(--color-accent-secondary), <alpha-value>)',
+                    '500': 'rgba(var(--color-accent-primary), <alpha-value>)',
                 },
             },
         },