From 80f9b8b062c49c67589916d8759b55e676437dfa Mon Sep 17 00:00:00 2001
From: Steven Weathers <steven@weathers.me>
Date: Mon, 8 Apr 2024 10:39:13 -0400
Subject: [PATCH] Redesign crud tables (#566)

* Redesign crud tables

* Add testid back to create button for table nav

* Update organization and team pages to use new tablenav

* Finish admin pages table updates

* Add TableFooter with pagination

* Update admin tests to reflect new table layouts

* Move some svelte components from global folder

* Abstract table crud actions and replace text buttons with icons
---
 e2e/tests/admin/alerts.spec.ts                |   2 +-
 e2e/tests/admin/apikeys.spec.ts               |   2 +-
 e2e/tests/admin/organizations.spec.ts         |   2 +-
 e2e/tests/admin/poker-games.spec.ts           |   2 +-
 e2e/tests/admin/team.spec.ts                  |   4 +-
 e2e/tests/admin/teams.spec.ts                 |   2 +-
 e2e/tests/admin/users.spec.ts                 |   4 +-
 e2e/tests/teams.spec.ts                       |  24 +-
 .../{global => }/AdminPageLayout.svelte       |   4 +-
 .../components/{global => }/PageLayout.svelte |   0
 ui/src/components/global/table/HeadCol.svelte |  16 -
 ui/src/components/global/table/Table.svelte   |  19 -
 .../components/global/table/TableRow.svelte   |  10 -
 ui/src/components/icons/EyeIcon.svelte        |  18 +
 ui/src/components/table/CrudActions.svelte    |  44 ++
 ui/src/components/table/HeadCol.svelte        |  13 +
 .../{global => }/table/RowCol.svelte          |   4 +-
 ui/src/components/table/Table.svelte          |  10 +
 ui/src/components/table/TableContainer.svelte |   5 +
 ui/src/components/table/TableFooter.svelte    | 123 ++++
 ui/src/components/table/TableNav.svelte       |  90 +++
 ui/src/components/table/TableRow.svelte       |   9 +
 ui/src/components/team/UsersList.svelte       | 227 ++++----
 .../timezone-picker/Picker.svelte             |   2 +-
 .../{global => }/timezone-picker/timezones.js |   0
 .../{global => }/timezone-picker/utils.js     |   0
 ui/src/pages/admin/Admin.svelte               |   2 +-
 ui/src/pages/admin/Alerts.svelte              |  67 +--
 ui/src/pages/admin/ApiKeys.svelte             |  86 ++-
 ui/src/pages/admin/Department.svelte          |  51 +-
 ui/src/pages/admin/Organization.svelte        |  77 +--
 ui/src/pages/admin/Organizations.svelte       |  44 +-
 ui/src/pages/admin/PokerGame.svelte           | 209 ++++---
 ui/src/pages/admin/PokerGames.svelte          |  73 ++-
 ui/src/pages/admin/Retro.svelte               | 207 ++++---
 ui/src/pages/admin/Retros.svelte              |  70 +--
 ui/src/pages/admin/Storyboard.svelte          | 199 +++----
 ui/src/pages/admin/Storyboards.svelte         |  70 +--
 ui/src/pages/admin/Subscription.svelte        | 145 +++--
 ui/src/pages/admin/Subscriptions.svelte       |  79 +--
 ui/src/pages/admin/Team.svelte                | 540 +++++++++---------
 ui/src/pages/admin/Teams.svelte               |  44 +-
 ui/src/pages/admin/User.svelte                | 143 ++---
 ui/src/pages/admin/Users.svelte               | 149 ++---
 ui/src/pages/poker/PokerGame.svelte           |   2 +-
 ui/src/pages/poker/PokerGames.svelte          |   2 +-
 ui/src/pages/retro/Retro.svelte               |   2 +-
 ui/src/pages/retro/Retros.svelte              |   2 +-
 ui/src/pages/storyboard/Storyboard.svelte     |   2 +-
 ui/src/pages/storyboard/Storyboards.svelte    |   2 +-
 ui/src/pages/support/PrivacyPolicy.svelte     |   2 +-
 ui/src/pages/support/Support.svelte           |   2 +-
 ui/src/pages/support/TermsConditions.svelte   |   2 +-
 ui/src/pages/team/Department.svelte           |  55 +-
 ui/src/pages/team/Organization.svelte         |  96 ++--
 ui/src/pages/team/Team.svelte                 | 282 +++++----
 ui/src/pages/team/TeamCheckin.svelte          |   4 +-
 ui/src/pages/team/Teams.svelte                | 199 +++----
 ui/src/pages/user/Register.svelte             |   2 +-
 ui/src/pages/user/ResetPassword.svelte        |   2 +-
 ui/src/pages/user/UserProfile.svelte          |   2 +-
 ui/src/pages/user/VerifyAccount.svelte        |   2 +-
 62 files changed, 1739 insertions(+), 1814 deletions(-)
 rename ui/src/components/{global => }/AdminPageLayout.svelte (96%)
 rename ui/src/components/{global => }/PageLayout.svelte (100%)
 delete mode 100644 ui/src/components/global/table/HeadCol.svelte
 delete mode 100644 ui/src/components/global/table/Table.svelte
 delete mode 100644 ui/src/components/global/table/TableRow.svelte
 create mode 100644 ui/src/components/icons/EyeIcon.svelte
 create mode 100644 ui/src/components/table/CrudActions.svelte
 create mode 100644 ui/src/components/table/HeadCol.svelte
 rename ui/src/components/{global => }/table/RowCol.svelte (57%)
 create mode 100644 ui/src/components/table/Table.svelte
 create mode 100644 ui/src/components/table/TableContainer.svelte
 create mode 100644 ui/src/components/table/TableFooter.svelte
 create mode 100644 ui/src/components/table/TableNav.svelte
 create mode 100644 ui/src/components/table/TableRow.svelte
 rename ui/src/components/{global => }/timezone-picker/Picker.svelte (99%)
 rename ui/src/components/{global => }/timezone-picker/timezones.js (100%)
 rename ui/src/components/{global => }/timezone-picker/utils.js (100%)

diff --git a/e2e/tests/admin/alerts.spec.ts b/e2e/tests/admin/alerts.spec.ts
index a28c092f..cb2b2b01 100644
--- a/e2e/tests/admin/alerts.spec.ts
+++ b/e2e/tests/admin/alerts.spec.ts
@@ -45,7 +45,7 @@ test.describe("The Admin Alerts Page", () => {
 
       await ap.goto();
 
-      const title = ap.page.locator("h1");
+      const title = ap.page.locator('[data-testid="tablenav-title"]');
       await expect(title).toHaveText("Alerts");
     });
   });
diff --git a/e2e/tests/admin/apikeys.spec.ts b/e2e/tests/admin/apikeys.spec.ts
index 980631c3..ca3a190a 100644
--- a/e2e/tests/admin/apikeys.spec.ts
+++ b/e2e/tests/admin/apikeys.spec.ts
@@ -45,7 +45,7 @@ test.describe("The Admin API Keys Page", () => {
 
       await ap.goto();
 
-      const title = ap.page.locator("h1");
+      const title = ap.page.locator('[data-testid="tablenav-title"]');
       await expect(title).toHaveText("API Keys");
     });
   });
diff --git a/e2e/tests/admin/organizations.spec.ts b/e2e/tests/admin/organizations.spec.ts
index 54aa2fb5..095c4e82 100644
--- a/e2e/tests/admin/organizations.spec.ts
+++ b/e2e/tests/admin/organizations.spec.ts
@@ -45,7 +45,7 @@ test.describe("The Admin Organizations Page", () => {
 
       await ap.goto();
 
-      const title = ap.page.locator("h1");
+      const title = ap.page.locator('[data-testid="tablenav-title"]');
       await expect(title).toHaveText("Organizations");
     });
   });
diff --git a/e2e/tests/admin/poker-games.spec.ts b/e2e/tests/admin/poker-games.spec.ts
index 2fe7d513..44184503 100644
--- a/e2e/tests/admin/poker-games.spec.ts
+++ b/e2e/tests/admin/poker-games.spec.ts
@@ -45,7 +45,7 @@ test.describe("The Admin Poker Games Page", () => {
 
       await ap.goto();
 
-      const title = ap.page.locator("h1");
+      const title = ap.page.locator('[data-testid="tablenav-title"]');
       await expect(title).toHaveText("Battles");
     });
   });
diff --git a/e2e/tests/admin/team.spec.ts b/e2e/tests/admin/team.spec.ts
index 29cbf563..61d923c0 100644
--- a/e2e/tests/admin/team.spec.ts
+++ b/e2e/tests/admin/team.spec.ts
@@ -46,7 +46,9 @@ test.describe("The Admin Team Page", () => {
       const team = await registeredPage.createTeam(testTeamName);
 
       await ap.goto(team.id);
-      await expect(ap.page.locator("h1")).toContainText(testTeamName);
+      await expect(
+        ap.page.locator('[data-testid="tablenav-title"]').nth(0),
+      ).toContainText(testTeamName);
     });
   });
 });
diff --git a/e2e/tests/admin/teams.spec.ts b/e2e/tests/admin/teams.spec.ts
index 2ed9d3a0..1975ab70 100644
--- a/e2e/tests/admin/teams.spec.ts
+++ b/e2e/tests/admin/teams.spec.ts
@@ -45,7 +45,7 @@ test.describe("The Admin Teams Page", () => {
 
       await ap.goto();
 
-      const title = ap.page.locator("h1");
+      const title = ap.page.locator('[data-testid="tablenav-title"]');
       await expect(title).toHaveText("Teams");
     });
   });
diff --git a/e2e/tests/admin/users.spec.ts b/e2e/tests/admin/users.spec.ts
index f6438d63..daf75802 100644
--- a/e2e/tests/admin/users.spec.ts
+++ b/e2e/tests/admin/users.spec.ts
@@ -45,8 +45,8 @@ test.describe("The Admin Users Page", () => {
 
       await ap.goto();
 
-      const title = ap.page.locator("h1");
-      await expect(title).toHaveText("Users");
+      const title = ap.page.locator('[data-testid="tablenav-title"]');
+      await expect(title).toHaveText("Registered Users");
     });
   });
 });
diff --git a/e2e/tests/teams.spec.ts b/e2e/tests/teams.spec.ts
index 3d739c96..80d0347d 100644
--- a/e2e/tests/teams.spec.ts
+++ b/e2e/tests/teams.spec.ts
@@ -19,10 +19,14 @@ test.describe("Teams page", () => {
       await teamsPage.goto();
 
       await expect(
-        teamsPage.page.locator("h2", { hasText: "Organizations" }),
+        teamsPage.page.locator('[data-testid="tablenav-title"]', {
+          hasText: "Organizations",
+        }),
       ).toBeVisible();
       await expect(
-        teamsPage.page.locator("h2", { hasText: "Teams" }),
+        teamsPage.page.locator('[data-testid="tablenav-title"]', {
+          hasText: "Teams",
+        }),
       ).toBeVisible();
     });
 
@@ -38,13 +42,19 @@ test.describe("Teams page", () => {
         });
 
         await expect(
-          teamsPage.page.locator("h2", { hasText: "Departments" }),
+          teamsPage.page.locator('[data-testid="tablenav-title"]', {
+            hasText: "Departments",
+          }),
         ).toBeVisible();
         await expect(
-          teamsPage.page.locator("h2", { hasText: "Teams" }),
+          teamsPage.page.locator('[data-testid="tablenav-title"]', {
+            hasText: "Teams",
+          }),
         ).toBeVisible();
         await expect(
-          teamsPage.page.locator("h2", { hasText: "Users" }),
+          teamsPage.page.locator('[data-testid="tablenav-title"]', {
+            hasText: "Users",
+          }),
         ).toBeVisible();
       });
     });
@@ -68,7 +78,9 @@ test.describe("Teams page", () => {
           teamsPage.page.locator("h2", { hasText: "Storyboards" }),
         ).toBeVisible();
         await expect(
-          teamsPage.page.locator("h2", { hasText: "Users" }),
+          teamsPage.page.locator('[data-testid="tablenav-title"]', {
+            hasText: "Users",
+          }),
         ).toBeVisible();
       });
     });
diff --git a/ui/src/components/global/AdminPageLayout.svelte b/ui/src/components/AdminPageLayout.svelte
similarity index 96%
rename from ui/src/components/global/AdminPageLayout.svelte
rename to ui/src/components/AdminPageLayout.svelte
index 36db1691..fde1cf41 100644
--- a/ui/src/components/global/AdminPageLayout.svelte
+++ b/ui/src/components/AdminPageLayout.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { AppConfig, appRoutes } from '../../config';
-  import LL from '../../i18n/i18n-svelte';
+  import { AppConfig, appRoutes } from '../config';
+  import LL from '../i18n/i18n-svelte';
 
   export let activePage = 'admin';
 
diff --git a/ui/src/components/global/PageLayout.svelte b/ui/src/components/PageLayout.svelte
similarity index 100%
rename from ui/src/components/global/PageLayout.svelte
rename to ui/src/components/PageLayout.svelte
diff --git a/ui/src/components/global/table/HeadCol.svelte b/ui/src/components/global/table/HeadCol.svelte
deleted file mode 100644
index a114634d..00000000
--- a/ui/src/components/global/table/HeadCol.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-  export let type = 'default';
-</script>
-
-{#if type === 'default'}
-  <th
-    scope="col"
-    class="px-6 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
-  >
-    <slot />
-  </th>
-{:else if type === 'action'}
-  <th scope="col" class="relative px-6 py-3">
-    <slot />
-  </th>
-{/if}
diff --git a/ui/src/components/global/table/Table.svelte b/ui/src/components/global/table/Table.svelte
deleted file mode 100644
index 77a0409b..00000000
--- a/ui/src/components/global/table/Table.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<div class="flex flex-col">
-  <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-    <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
-      <div
-        class="shadow overflow-hidden border-b border-gray-200 dark:border-gray-700 sm:rounded-lg"
-      >
-        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-          <thead class="bg-gray-50 dark:bg-gray-800">
-            <slot name="header" />
-          </thead>
-          <slot
-            class="bg-white dark:bg-gray-700 divide-y divide-gray-200 dark:divide-gray-800 dark:text-white"
-            name="body"
-          />
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/ui/src/components/global/table/TableRow.svelte b/ui/src/components/global/table/TableRow.svelte
deleted file mode 100644
index 79db1d20..00000000
--- a/ui/src/components/global/table/TableRow.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-  export let itemIndex = 0;
-</script>
-
-<tr
-  class:bg-slate-100="{itemIndex % 2 !== 0}"
-  class:dark:bg-gray-800="{itemIndex % 2 !== 0}"
->
-  <slot />
-</tr>
diff --git a/ui/src/components/icons/EyeIcon.svelte b/ui/src/components/icons/EyeIcon.svelte
new file mode 100644
index 00000000..e0f17de7
--- /dev/null
+++ b/ui/src/components/icons/EyeIcon.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  let klass = 'w-6 h-6';
+  export { klass as class };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="currentColor"
+  class="{klass}"
+>
+  <path d="M12 15a3 3 0 100-6 3 3 0 000 6z"></path>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z"
+  ></path>
+</svg>
diff --git a/ui/src/components/table/CrudActions.svelte b/ui/src/components/table/CrudActions.svelte
new file mode 100644
index 00000000..c2e8c04c
--- /dev/null
+++ b/ui/src/components/table/CrudActions.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import LL from '../../i18n/i18n-svelte';
+  import EditIcon from '../icons/EditIcon.svelte';
+  import TrashIcon from '../icons/TrashIcon.svelte';
+  import EyeIcon from '../icons/EyeIcon.svelte';
+
+  export let detailsLink = '';
+  export let editBtnEnabled = true;
+  export let editBtnClickHandler = () => {};
+  export let editBtnTestId = 'edit';
+  export let deleteBtnEnabled = true;
+  export let deleteBtnClickHandler = () => {};
+  export let deleteBtnTestId = 'delete';
+</script>
+
+<div class="flex gap-2 justify-end items-center">
+  <slot />
+  {#if detailsLink !== ''}
+    <a href="{detailsLink}" class="hover:text-blue-500">
+      <EyeIcon />
+      <span class="sr-only">View Details</span>
+    </a>
+  {/if}
+  {#if editBtnEnabled}
+    <button
+      on:click="{editBtnClickHandler}"
+      class="hover:text-green-500"
+      data-testid="{editBtnTestId}"
+    >
+      <span class="sr-only">{$LL.edit()}</span>
+      <EditIcon />
+    </button>
+  {/if}
+  {#if deleteBtnEnabled}
+    <button
+      on:click="{deleteBtnClickHandler}"
+      class="hover:text-red-500"
+      data-testid="{deleteBtnTestId}"
+    >
+      <span class="sr-only">{$LL.delete()}</span>
+      <TrashIcon />
+    </button>
+  {/if}
+</div>
diff --git a/ui/src/components/table/HeadCol.svelte b/ui/src/components/table/HeadCol.svelte
new file mode 100644
index 00000000..51262a0d
--- /dev/null
+++ b/ui/src/components/table/HeadCol.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let type = 'default';
+</script>
+
+{#if type === 'default'}
+  <th scope="col" class="p-4">
+    <slot />
+  </th>
+{:else if type === 'action'}
+  <th scope="col" class="relative px-2 py-2">
+    <slot />
+  </th>
+{/if}
diff --git a/ui/src/components/global/table/RowCol.svelte b/ui/src/components/table/RowCol.svelte
similarity index 57%
rename from ui/src/components/global/table/RowCol.svelte
rename to ui/src/components/table/RowCol.svelte
index 3c44a8b9..aa08a919 100644
--- a/ui/src/components/global/table/RowCol.svelte
+++ b/ui/src/components/table/RowCol.svelte
@@ -3,11 +3,11 @@
 </script>
 
 {#if type === 'default'}
-  <td class="px-6 py-4 whitespace-nowrap">
+  <td class="px-4 py-3 whitespace-nowrap font-medium">
     <slot />
   </td>
 {:else if type === 'action'}
-  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+  <td class="px-4 py-3 whitespace-nowrap text-right font-medium">
     <slot />
   </td>
 {/if}
diff --git a/ui/src/components/table/Table.svelte b/ui/src/components/table/Table.svelte
new file mode 100644
index 00000000..74323e73
--- /dev/null
+++ b/ui/src/components/table/Table.svelte
@@ -0,0 +1,10 @@
+<div class="overflow-x-auto">
+  <table class="w-full text-sm text-left text-gray-700 dark:text-gray-200">
+    <thead
+      class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
+    >
+      <slot name="header" />
+    </thead>
+    <slot name="body" />
+  </table>
+</div>
diff --git a/ui/src/components/table/TableContainer.svelte b/ui/src/components/table/TableContainer.svelte
new file mode 100644
index 00000000..3039b1f6
--- /dev/null
+++ b/ui/src/components/table/TableContainer.svelte
@@ -0,0 +1,5 @@
+<div
+  class="bg-white dark:bg-gray-800 relative shadow-md sm:rounded-lg overflow-hidden"
+>
+  <slot />
+</div>
diff --git a/ui/src/components/table/TableFooter.svelte b/ui/src/components/table/TableFooter.svelte
new file mode 100644
index 00000000..de504295
--- /dev/null
+++ b/ui/src/components/table/TableFooter.svelte
@@ -0,0 +1,123 @@
+<script lang="ts">
+  import ChevronLeft from '../icons/ChevronLeft.svelte';
+  import ChevronRight from '../icons/ChevronRight.svelte';
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  export let current = 1;
+  export let num_items = 120;
+  export let per_page = 5;
+
+  $: num_pages = Math.ceil(num_items / per_page);
+
+  let arr_pages = [];
+
+  function buildArr(c, n) {
+    if (n <= 7) {
+      return [...Array(n)].map((_, i) => i + 1);
+    } else {
+      if (c < 3 || c > n - 2) {
+        return [1, 2, 3, '...', n - 2, n - 1, n];
+      } else {
+        return [1, '...', c - 1, c, c + 1, '...', n];
+      }
+    }
+  }
+
+  function setArrPages() {
+    arr_pages = buildArr(current, num_pages);
+  }
+
+  $: if (current) {
+    setArrPages();
+  }
+
+  $: if (per_page) {
+    setArrPages();
+    current = 1;
+  }
+
+  $: if (num_items) {
+    num_pages = Math.ceil(num_items / per_page);
+    setArrPages();
+    current = current || 1;
+  }
+
+  function setCurrent(i) {
+    if (isNaN(i)) return;
+    current = i;
+    dispatch('navigate', current);
+  }
+
+  $: showingBegin = num_items === 0 ? 0 : (current - 1) * per_page + 1;
+  $: showingEnd =
+    current === num_pages
+      ? num_items
+      : num_items === 0
+      ? 0
+      : current * per_page;
+</script>
+
+<nav
+  class="flex flex-col md:flex-row justify-between items-start md:items-center space-y-3 md:space-y-0 p-4"
+  aria-label="Table navigation"
+>
+  <span class="text-sm font-normal text-gray-500 dark:text-gray-400">
+    Showing
+    <span class="font-semibold text-gray-900 dark:text-white"
+      >{showingBegin}
+      - {showingEnd}</span
+    >
+    of
+    <span class="font-semibold text-gray-900 dark:text-white">{num_items}</span>
+  </span>
+  <ul class="inline-flex items-stretch -space-x-px">
+    <li>
+      <button
+        class="flex items-center justify-center h-full py-1.5 px-3 ml-0 text-gray-500 bg-white rounded-l-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+        on:click="{() => current > 1 && setCurrent(current - 1)}"
+        on:keypress="{() => current > 1 && setCurrent(current - 1)}"
+      >
+        <span class="sr-only">Previous</span>
+        <ChevronLeft class="w-5 h-5" />
+      </button>
+    </li>
+    {#each arr_pages as i}
+      <li>
+        {#if i === current}
+          <div
+            class="flex items-center justify-center text-sm z-10 py-2 px-3 leading-tight text-primary-600 bg-primary-50 border border-primary-300 hover:bg-primary-100 hover:text-primary-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white"
+            aria-current="page"
+          >
+            {i}
+          </div>
+        {:else if i === '...'}
+          <div
+            class="flex items-center justify-center text-sm py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"
+          >
+            {i}
+          </div>
+        {:else}
+          <button
+            class="flex items-center justify-center text-sm py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+            on:click="{() => setCurrent(i)}"
+            on:keypress="{() => setCurrent(i)}"
+          >
+            {i}
+          </button>
+        {/if}
+      </li>
+    {/each}
+    <li>
+      <button
+        class="flex items-center justify-center h-full py-1.5 px-3 leading-tight text-gray-500 bg-white rounded-r-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+        on:click="{() => current < num_pages && setCurrent(current + 1)}"
+        on:keypress="{() => current < num_pages && setCurrent(current + 1)}"
+      >
+        <span class="sr-only">Next</span>
+        <ChevronRight class="w-5 h-5" />
+      </button>
+    </li>
+  </ul>
+</nav>
diff --git a/ui/src/components/table/TableNav.svelte b/ui/src/components/table/TableNav.svelte
new file mode 100644
index 00000000..5ef5aa39
--- /dev/null
+++ b/ui/src/components/table/TableNav.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+  export let title = '';
+  export let createBtnEnabled = true;
+  export let createBtnText = '';
+  export let createButtonHandler = () => {};
+  export let createBtnTestId = '';
+  export let searchEnabled = false;
+  export let searchPlaceholder = '';
+  export let searchHandler = term => {};
+
+  let searchTerm = '';
+
+  function onSearchSubmit(e) {
+    e.preventDefault();
+
+    searchHandler(searchTerm);
+  }
+</script>
+
+<div
+  class="flex flex-col md:flex-row items-stretch md:items-center md:space-x-3 space-y-3 md:space-y-0 justify-between mx-4 py-4"
+>
+  <div class="w-full md:w-1/2">
+    <div class="flex gap-4 lg:gap-8 items-center">
+      <h5>
+        <span
+          class="dark:text-white font-rajdhani font-semibold text-xl lg:text-2xl"
+          data-testid="tablenav-title">{title}</span
+        >
+      </h5>
+      {#if searchEnabled}
+        <form class="flex items-center" on:submit="{onSearchSubmit}">
+          <div class="relative w-full">
+            <div
+              class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
+            >
+              <svg
+                aria-hidden="true"
+                class="w-5 h-5 text-gray-500 dark:text-gray-400"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                ></path>
+              </svg>
+            </div>
+            <input
+              type="text"
+              placeholder="{searchPlaceholder}"
+              bind:value="{searchTerm}"
+              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            />
+          </div>
+        </form>
+      {/if}
+    </div>
+  </div>
+  <div
+    class="w-full md:w-auto flex flex-col md:flex-row space-y-2 md:space-y-0 items-stretch md:items-center justify-end md:space-x-3 flex-shrink-0"
+  >
+    <slot />
+    {#if createBtnEnabled}
+      <button
+        type="button"
+        on:click="{createButtonHandler}"
+        data-testid="{createBtnTestId}"
+        class="flex items-center justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
+      >
+        <svg
+          class="h-3.5 w-3.5 mr-1.5 -ml-1"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+        >
+          <path
+            clip-rule="evenodd"
+            fill-rule="evenodd"
+            d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
+          ></path>
+        </svg>
+        {createBtnText}
+      </button>
+    {/if}
+  </div>
+</div>
diff --git a/ui/src/components/table/TableRow.svelte b/ui/src/components/table/TableRow.svelte
new file mode 100644
index 00000000..55bdae3f
--- /dev/null
+++ b/ui/src/components/table/TableRow.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let itemIndex = 0;
+</script>
+
+<tr
+  class="border-b dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700"
+>
+  <slot />
+</tr>
diff --git a/ui/src/components/team/UsersList.svelte b/ui/src/components/team/UsersList.svelte
index e68f5184..4dbe3faa 100644
--- a/ui/src/components/team/UsersList.svelte
+++ b/ui/src/components/team/UsersList.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
-  import Table from '../../components/global/table/Table.svelte';
-  import HeadCol from '../../components/global/table/HeadCol.svelte';
-  import TableRow from '../../components/global/table/TableRow.svelte';
-  import RowCol from '../../components/global/table/RowCol.svelte';
+  import Table from '../table/Table.svelte';
+  import HeadCol from '../table/HeadCol.svelte';
+  import TableRow from '../table/TableRow.svelte';
+  import RowCol from '../table/RowCol.svelte';
 
   import LL from '../../i18n/i18n-svelte';
-  import SolidButton from '../../components/global/SolidButton.svelte';
   import UserAvatar from '../../components/user/UserAvatar.svelte';
   import CountryFlag from '../../components/user/CountryFlag.svelte';
-  import HollowButton from '../../components/global/HollowButton.svelte';
   import AddUser from '../../components/team/AddUser.svelte';
   import UpdateUser from '../../components/team/UpdateUser.svelte';
   import DeleteConfirmation from '../../components/global/DeleteConfirmation.svelte';
+  import TableContainer from '../table/TableContainer.svelte';
+  import TableNav from '../table/TableNav.svelte';
+  import CrudActions from '../table/CrudActions.svelte';
 
   export let xfetch;
   export let notifications;
@@ -100,119 +101,107 @@
 </script>
 
 <div class="w-full">
-  <div class="flex w-full">
-    <div class="w-4/5">
-      <h2
-        class="text-2xl font-semibold font-rajdhani uppercase mb-4 dark:text-white"
-      >
-        {$LL.users()}
-      </h2>
-    </div>
-    <div class="w-1/5">
-      <div class="text-right">
-        {#if isAdmin}
-          <SolidButton onClick="{toggleAddUser}" testid="user-add">
-            {$LL.userAdd()}
-          </SolidButton>
-        {/if}
-      </div>
-    </div>
-  </div>
-
-  <Table>
-    <tr slot="header">
-      <HeadCol>
-        {$LL.name()}
-      </HeadCol>
-      <HeadCol>
-        {$LL.email()}
-      </HeadCol>
-      <HeadCol>
-        {$LL.role()}
-      </HeadCol>
-      <HeadCol type="action">
-        <span class="sr-only">{$LL.actions()}</span>
-      </HeadCol>
-    </tr>
-    <tbody slot="body" let:class="{className}" class="{className}">
-      {#each users as user, i}
-        <TableRow itemIndex="{i}">
-          <RowCol>
-            <div class="flex items-center">
-              <div class="flex-shrink-0 h-10 w-10">
-                <UserAvatar
-                  warriorId="{user.id}"
-                  avatar="{user.avatar}"
-                  gravatarHash="{user.gravatarHash}"
-                  userName="{user.name}"
-                  width="48"
-                  class="h-10 w-10 rounded-full"
-                />
-              </div>
-              <div class="ms-4">
-                <div class="font-medium text-gray-900 dark:text-gray-200">
-                  <span data-testid="user-name">{user.name}</span>
-                  {#if user.country}
-                    &nbsp;
-                    <CountryFlag
-                      country="{user.country}"
-                      additionalClass="inline-block"
-                      width="32"
-                      height="24"
-                    />
-                  {/if}
+  <TableContainer>
+    <TableNav
+      title="{$LL.users()}"
+      createBtnEnabled="{isAdmin}"
+      createBtnText="{$LL.userAdd()}"
+      createButtonHandler="{toggleAddUser}"
+      createBtnTestId="user-add"
+    />
+    <Table>
+      <tr slot="header">
+        <HeadCol>
+          {$LL.name()}
+        </HeadCol>
+        <HeadCol>
+          {$LL.email()}
+        </HeadCol>
+        <HeadCol>
+          {$LL.role()}
+        </HeadCol>
+        <HeadCol type="action">
+          <span class="sr-only">{$LL.actions()}</span>
+        </HeadCol>
+      </tr>
+      <tbody slot="body" let:class="{className}" class="{className}">
+        {#each users as user, i}
+          <TableRow itemIndex="{i}">
+            <RowCol>
+              <div class="flex items-center">
+                <div class="flex-shrink-0 h-10 w-10">
+                  <UserAvatar
+                    warriorId="{user.id}"
+                    avatar="{user.avatar}"
+                    gravatarHash="{user.gravatarHash}"
+                    userName="{user.name}"
+                    width="48"
+                    class="h-10 w-10 rounded-full"
+                  />
                 </div>
+                <div class="ms-4">
+                  <div class="font-medium text-gray-900 dark:text-gray-200">
+                    <span data-testid="user-name">{user.name}</span>
+                    {#if user.country}
+                      &nbsp;
+                      <CountryFlag
+                        country="{user.country}"
+                        additionalClass="inline-block"
+                        width="32"
+                        height="24"
+                      />
+                    {/if}
+                  </div>
+                </div>
+              </div>
+            </RowCol>
+            <RowCol>
+              <span data-testid="user-email">{user.email}</span>
+            </RowCol>
+            <RowCol>
+              <div class="text-sm text-gray-500 dark:text-gray-300">
+                {user.role}
               </div>
-            </div>
-          </RowCol>
-          <RowCol>
-            <span data-testid="user-email">{user.email}</span>
-          </RowCol>
-          <RowCol>
-            <div class="text-sm text-gray-500 dark:text-gray-300">
-              {user.role}
-            </div>
-          </RowCol>
-          <RowCol type="action">
-            {#if isAdmin}
-              <HollowButton onClick="{toggleUpdateUser(user)}" color="blue">
-                {$LL.edit()}
-              </HollowButton>
-              <HollowButton onClick="{toggleRemoveUser(user.id)}" color="red">
-                {$LL.remove()}
-              </HollowButton>
-            {/if}
-          </RowCol>
-        </TableRow>
-      {/each}
-    </tbody>
-  </Table>
+            </RowCol>
+            <RowCol type="action">
+              {#if isAdmin}
+                <CrudActions
+                  editBtnClickHandler="{toggleUpdateUser(user)}"
+                  deleteBtnClickHandler="{toggleRemoveUser(user.id)}"
+                />
+              {/if}
+            </RowCol>
+          </TableRow>
+        {/each}
+      </tbody>
+    </Table>
+  </TableContainer>
+
+  {#if showAddUser}
+    <AddUser
+      toggleAdd="{toggleAddUser}"
+      handleAdd="{handleUserAdd}"
+      pageType="{pageType}"
+    />
+  {/if}
+
+  {#if showUpdateUser}
+    <UpdateUser
+      toggleUpdate="{toggleUpdateUser({})}"
+      handleUpdate="{handleUserUpdate}"
+      userId="{updateUser.id}"
+      userEmail="{updateUser.email}"
+      role="{updateUser.role}"
+    />
+  {/if}
+
+  {#if showRemoveUser}
+    <DeleteConfirmation
+      toggleDelete="{toggleRemoveUser(null)}"
+      handleDelete="{handleUserRemove}"
+      permanent="{false}"
+      confirmText="{$LL.removeUserConfirmText()}"
+      confirmBtnText="{$LL.removeUser()}"
+    />
+  {/if}
 </div>
-
-{#if showAddUser}
-  <AddUser
-    toggleAdd="{toggleAddUser}"
-    handleAdd="{handleUserAdd}"
-    pageType="{pageType}"
-  />
-{/if}
-
-{#if showUpdateUser}
-  <UpdateUser
-    toggleUpdate="{toggleUpdateUser({})}"
-    handleUpdate="{handleUserUpdate}"
-    userId="{updateUser.id}"
-    userEmail="{updateUser.email}"
-    role="{updateUser.role}"
-  />
-{/if}
-
-{#if showRemoveUser}
-  <DeleteConfirmation
-    toggleDelete="{toggleRemoveUser(null)}"
-    handleDelete="{handleUserRemove}"
-    permanent="{false}"
-    confirmText="{$LL.removeUserConfirmText()}"
-    confirmBtnText="{$LL.removeUser()}"
-  />
-{/if}
diff --git a/ui/src/components/global/timezone-picker/Picker.svelte b/ui/src/components/timezone-picker/Picker.svelte
similarity index 99%
rename from ui/src/components/global/timezone-picker/Picker.svelte
rename to ui/src/components/timezone-picker/Picker.svelte
index cfd138ab..5904af80 100644
--- a/ui/src/components/global/timezone-picker/Picker.svelte
+++ b/ui/src/components/timezone-picker/Picker.svelte
@@ -13,7 +13,7 @@
     uid,
     ungroup,
   } from './utils';
-  import TextInput from '../TextInput.svelte';
+  import TextInput from '../global/TextInput.svelte';
 
   // ***** Public API *****
 
diff --git a/ui/src/components/global/timezone-picker/timezones.js b/ui/src/components/timezone-picker/timezones.js
similarity index 100%
rename from ui/src/components/global/timezone-picker/timezones.js
rename to ui/src/components/timezone-picker/timezones.js
diff --git a/ui/src/components/global/timezone-picker/utils.js b/ui/src/components/timezone-picker/utils.js
similarity index 100%
rename from ui/src/components/global/timezone-picker/utils.js
rename to ui/src/components/timezone-picker/utils.js
diff --git a/ui/src/pages/admin/Admin.svelte b/ui/src/pages/admin/Admin.svelte
index b01a5c3d..63613edd 100644
--- a/ui/src/pages/admin/Admin.svelte
+++ b/ui/src/pages/admin/Admin.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
 
-  import AdminPageLayout from '../../components/global/AdminPageLayout.svelte';
+  import AdminPageLayout from '../../components/AdminPageLayout.svelte';
   import HollowButton from '../../components/global/HollowButton.svelte';
   import UserIcon from '../../components/icons/UserIcon.svelte';
   import UserRankRegisteredIcon from '../../components/icons/UserRankRegisteredIcon.svelte';
diff --git a/ui/src/pages/admin/Alerts.svelte b/ui/src/pages/admin/Alerts.svelte
index a7544402..713d5311 100644
--- a/ui/src/pages/admin/Alerts.svelte
+++ b/ui/src/pages/admin/Alerts.svelte
@@ -1,19 +1,21 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import HollowButton from '../../components/global/HollowButton.svelte';
   import { activeAlerts, user } from '../../stores';
   import LL from '../../i18n/i18n-svelte';
   import { appRoutes } from '../../config';
   import { validateUserIsAdmin } from '../../validationUtils';
-  import HeadCol from '../../components/global/table/HeadCol.svelte';
+  import HeadCol from '../../components/table/HeadCol.svelte';
   import DeleteConfirmation from '../../components/global/DeleteConfirmation.svelte';
   import CreateAlert from '../../components/alert/CreateAlert.svelte';
-  import Pagination from '../../components/global/Pagination.svelte';
-  import RowCol from '../../components/global/table/RowCol.svelte';
-  import TableRow from '../../components/global/table/TableRow.svelte';
+  import RowCol from '../../components/table/RowCol.svelte';
+  import TableRow from '../../components/table/TableRow.svelte';
   import CheckIcon from '../../components/icons/CheckIcon.svelte';
-  import Table from '../../components/global/table/Table.svelte';
-  import AdminPageLayout from '../../components/global/AdminPageLayout.svelte';
+  import Table from '../../components/table/Table.svelte';
+  import AdminPageLayout from '../../components/AdminPageLayout.svelte';
+  import TableContainer from '../../components/table/TableContainer.svelte';
+  import TableNav from '../../components/table/TableNav.svelte';
+  import TableFooter from '../../components/table/TableFooter.svelte';
+  import CrudActions from '../../components/table/CrudActions.svelte';
 
   export let xfetch;
   export let router;
@@ -142,21 +144,13 @@
 </svelte:head>
 
 <AdminPageLayout activePage="alerts">
-  <div class="text-center px-2 mb-4">
-    <h1
-      class="text-3xl md:text-4xl font-semibold font-rajdhani uppercase dark:text-white"
-    >
-      {$LL.alerts()}
-    </h1>
-  </div>
-
-  <div class="w-full">
-    <div class="text-right mb-4">
-      <HollowButton onClick="{toggleCreateAlert}">
-        {$LL.alertCreate()}
-      </HollowButton>
-    </div>
-
+  <TableContainer>
+    <TableNav
+      title="{$LL.alerts()}"
+      createBtnText="{$LL.alertCreate()}"
+      createButtonHandler="{toggleCreateAlert}"
+      createBtnTestId="alert-create"
+    />
     <Table>
       <tr slot="header">
         <HeadCol>
@@ -215,29 +209,22 @@
               {new Date(alert.updatedDate).toLocaleString()}
             </RowCol>
             <RowCol type="action">
-              <HollowButton onClick="{toggleUpdateAlert(alert)}" color="blue">
-                {$LL.edit()}
-              </HollowButton>
-              <HollowButton onClick="{toggleDeleteAlert(alert.id)}" color="red">
-                {$LL.delete()}
-              </HollowButton>
+              <CrudActions
+                editBtnClickHandler="{toggleUpdateAlert(alert)}"
+                deleteBtnClickHandler="{toggleDeleteAlert(alert.id)}"
+              />
             </RowCol>
           </TableRow>
         {/each}
       </tbody>
     </Table>
-
-    {#if alertCount > alertsPageLimit}
-      <div class="pt-6 flex justify-center">
-        <Pagination
-          bind:current="{alertsPage}"
-          num_items="{alertCount}"
-          per_page="{alertsPageLimit}"
-          on:navigate="{changePage}"
-        />
-      </div>
-    {/if}
-  </div>
+    <TableFooter
+      bind:current="{alertsPage}"
+      num_items="{alertCount}"
+      per_page="{alertsPageLimit}"
+      on:navigate="{changePage}"
+    />
+  </TableContainer>
 
   {#if showAlertCreate}
     <CreateAlert
diff --git a/ui/src/pages/admin/ApiKeys.svelte b/ui/src/pages/admin/ApiKeys.svelte
index 5a6f648a..3abea5a7 100644
--- a/ui/src/pages/admin/ApiKeys.svelte
+++ b/ui/src/pages/admin/ApiKeys.svelte
@@ -4,14 +4,17 @@
   import LL from '../../i18n/i18n-svelte';
   import { appRoutes } from '../../config';
   import { validateUserIsAdmin } from '../../validationUtils';
-  import Table from '../../components/global/table/Table.svelte';
-  import HeadCol from '../../components/global/table/HeadCol.svelte';
-  import AdminPageLayout from '../../components/global/AdminPageLayout.svelte';
-  import TableRow from '../../components/global/table/TableRow.svelte';
-  import RowCol from '../../components/global/table/RowCol.svelte';
+  import Table from '../../components/table/Table.svelte';
+  import HeadCol from '../../components/table/HeadCol.svelte';
+  import AdminPageLayout from '../../components/AdminPageLayout.svelte';
+  import TableRow from '../../components/table/TableRow.svelte';
+  import RowCol from '../../components/table/RowCol.svelte';
   import HollowButton from '../../components/global/HollowButton.svelte';
-  import Pagination from '../../components/global/Pagination.svelte';
   import CheckIcon from '../../components/icons/CheckIcon.svelte';
+  import TableNav from '../../components/table/TableNav.svelte';
+  import TableContainer from '../../components/table/TableContainer.svelte';
+  import TableFooter from '../../components/table/TableFooter.svelte';
+  import CrudActions from '../../components/table/CrudActions.svelte';
 
   export let xfetch;
   export let router;
@@ -121,15 +124,8 @@
 </svelte:head>
 
 <AdminPageLayout activePage="apikeys">
-  <div class="text-center px-2 mb-4">
-    <h1
-      class="text-3xl md:text-4xl font-semibold font-rajdhani uppercase dark:text-white"
-    >
-      {$LL.apiKeys()}
-    </h1>
-  </div>
-
-  <div class="w-full">
+  <TableContainer>
+    <TableNav title="{$LL.apiKeys()}" createBtnEnabled="{false}" />
     <Table>
       <tr slot="header">
         <HeadCol>
@@ -182,43 +178,37 @@
             <RowCol>
               {new Date(apikey.updatedDate).toLocaleString()}
             </RowCol>
-            <RowCol>
-              <HollowButton
-                onClick="{toggleApiKeyActiveStatus(
-                  apikey.userId,
-                  apikey.id,
-                  apikey.active,
-                )}"
-                testid="apikey-activetoggle"
+            <RowCol type="action">
+              <CrudActions
+                editBtnEnabled="{false}"
+                deleteBtnClickHandler="{deleteApiKey(apikey.userId, apikey.id)}"
+                deleteBtnTestId="apikey-delete"
               >
-                {#if !apikey.active}
-                  {$LL.activate()}
-                {:else}
-                  {$LL.deactivate()}
-                {/if}
-              </HollowButton>
-              <HollowButton
-                color="red"
-                onClick="{deleteApiKey(apikey.userId, apikey.id)}"
-                testid="apikey-delete"
-              >
-                {$LL.delete()}
-              </HollowButton>
+                <HollowButton
+                  onClick="{toggleApiKeyActiveStatus(
+                    apikey.userId,
+                    apikey.id,
+                    apikey.active,
+                  )}"
+                  testid="apikey-activetoggle"
+                >
+                  {#if !apikey.active}
+                    {$LL.activate()}
+                  {:else}
+                    {$LL.deactivate()}
+                  {/if}
+                </HollowButton>
+              </CrudActions>
             </RowCol>
           </TableRow>
         {/each}
       </tbody>
     </Table>
-
-    {#if appStats.apikeyCount > apikeysPageLimit}
-      <div class="pt-6 flex justify-center">
-        <Pagination
-          bind:current="{apikeysPage}"
-          num_items="{appStats.apikeyCount}"
-          per_page="{apikeysPageLimit}"
-          on:navigate="{changePage}"
-        />
-      </div>
-    {/if}
-  </div>
+    <TableFooter
+      bind:current="{apikeysPage}"
+      num_items="{appStats.apikeyCount}"
+      per_page="{apikeysPageLimit}"
+      on:navigate="{changePage}"
+    />
+  </TableContainer>
 </AdminPageLayout>
diff --git a/ui/src/pages/admin/Department.svelte b/ui/src/pages/admin/Department.svelte
index c6bf0cf5..c2540eb3 100644
--- a/ui/src/pages/admin/Department.svelte
+++ b/ui/src/pages/admin/Department.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
 
-  import AdminPageLayout from '../../components/global/AdminPageLayout.svelte';
+  import AdminPageLayout from '../../components/AdminPageLayout.svelte';
   import DeleteConfirmation from '../../components/global/DeleteConfirmation.svelte';
   import ChevronRight from '../../components/icons/ChevronRight.svelte';
   import CountryFlag from '../../components/user/CountryFlag.svelte';
@@ -9,12 +9,14 @@
   import { user } from '../../stores';
   import LL from '../../i18n/i18n-svelte';
   import { appRoutes } from '../../config';
-  import RowCol from '../../components/global/table/RowCol.svelte';
-  import TableRow from '../../components/global/table/TableRow.svelte';
-  import HeadCol from '../../components/global/table/HeadCol.svelte';
+  import RowCol from '../../components/table/RowCol.svelte';
+  import TableRow from '../../components/table/TableRow.svelte';
+  import HeadCol from '../../components/table/HeadCol.svelte';
   import { validateUserIsAdmin } from '../../validationUtils';
-  import Table from '../../components/global/table/Table.svelte';
-  import HollowButton from '../../components/global/HollowButton.svelte';
+  import Table from '../../components/table/Table.svelte';
+  import TableNav from '../../components/table/TableNav.svelte';
+  import TableContainer from '../../components/table/TableContainer.svelte';
+  import CrudActions from '../../components/table/CrudActions.svelte';
 
   export let xfetch;
   export let router;
@@ -146,17 +148,8 @@
   </div>
 
   <div class="w-full mb-6 lg:mb-8">
-    <div class="flex w-full">
-      <div class="w-4/5">
-        <h2
-          class="text-2xl font-semibold font-rajdhani uppercase mb-4 dark:text-white"
-        >
-          {$LL.teams()}
-        </h2>
-      </div>
-    </div>
-
-    <div class="w-full">
+    <TableContainer>
+      <TableNav title="{$LL.teams()}" createBtnEnabled="{false}" />
       <Table>
         <tr slot="header">
           <HeadCol>
@@ -190,28 +183,20 @@
                 {new Date(team.updatedDate).toLocaleString()}
               </RowCol>
               <RowCol type="action">
-                <HollowButton onClick="{toggleDeleteTeam(team.id)}" color="red">
-                  {$LL.delete()}
-                </HollowButton>
+                <CrudActions
+                  editBtnEnabled="{false}"
+                  deleteBtnClickHandler="{toggleDeleteTeam(team.id)}"
+                />
               </RowCol>
             </TableRow>
           {/each}
         </tbody>
       </Table>
-    </div>
+    </TableContainer>
   </div>
 
-  <div class="w-full">
-    <div class="flex w-full">
-      <div class="w-4/5">
-        <h2
-          class="text-2xl font-semibold font-rajdhani uppercase mb-4 dark:text-white"
-        >
-          {$LL.users()}
-        </h2>
-      </div>
-    </div>
-
+  <TableContainer>
+    <TableNav title="{$LL.users()}" createBtnEnabled="{false}" />
     <Table>
       <tr slot="header">
         <HeadCol>
@@ -272,7 +257,7 @@
         {/each}
       </tbody>
     </Table>
-  </div>
+  </TableContainer>
 
   {#if showDeleteTeam}
     <DeleteConfirmation
diff --git a/ui/src/pages/admin/Organization.svelte b/ui/src/pages/admin/Organization.svelte
index 2d6d64fc..303ab743 100644
--- a/ui/src/pages/admin/Organization.svelte
+++ b/ui/src/pages/admin/Organization.svelte
@@ -1,20 +1,23 @@
 <script lang="ts">
   import { onMount } from 'svelte';
 
-  import AdminPageLayout from '../../components/global/AdminPageLayout.svelte';
+  import AdminPageLayout from '../../components/AdminPageLayout.svelte';
   import HollowButton from '../../components/global/HollowButton.svelte';
   import DeleteConfirmation from '../../components/global/DeleteConfirmation.svelte';
   import { user } from '../../stores';
   import LL from '../../i18n/i18n-svelte';
   import { appRoutes } from '../../config';
-  import RowCol from '../../components/global/table/RowCol.svelte';
-  import TableRow from '../../components/global/table/TableRow.svelte';
-  import HeadCol from '../../components/global/table/HeadCol.svelte';
-  import Table from '../../components/global/table/Table.svelte';
+  import RowCol from '../../components/table/RowCol.svelte';
+  import TableRow from '../../components/table/TableRow.svelte';
+  import HeadCol from '../../components/table/HeadCol.svelte';
+  import Table from '../../components/table/Table.svelte';
   import { validateUserIsAdmin } from '../../validationUtils';
   import UserAvatar from '../../components/user/UserAvatar.svelte';
   import CountryFlag from '../../components/user/CountryFlag.svelte';
   import ChevronRight from '../../components/icons/ChevronRight.svelte';
+  import TableContainer from '../../components/table/TableContainer.svelte';
+  import TableNav from '../../components/table/TableNav.svelte';
+  import CrudActions from '../../components/table/CrudActions.svelte';
 
   export let xfetch;
   export let router;
@@ -196,17 +199,8 @@
   </h1>
 
   <div class="w-full mb-6 lg:mb-8">
-    <div class="flex w-full">
-      <div class="w-4/5">
-        <h2
-          class="text-2xl font-semibold font-rajdhani uppercase mb-4 dark:text-white"
-        >
-          {$LL.departments()}
-        </h2>
-      </div>
-    </div>
-
-    <div class="w-full">
+    <TableContainer>
+      <TableNav title="{$LL.departments()}" createBtnEnabled="{false}" />
       <Table>
         <tr slot="header">
           <HeadCol>
@@ -240,32 +234,23 @@
                 {new Date(department.updatedDate).toLocaleString()}
               </RowCol>
               <RowCol type="action">
-                <HollowButton
-                  onClick="{toggleDeleteDepartment(department.id)}"
-                  color="red"
-                >
-                  {$LL.delete()}
-                </HollowButton>
+                <CrudActions
+                  editBtnEnabled="{false}"
+                  deleteBtnClickHandler="{toggleDeleteDepartment(
+                    department.id,
+                  )}"
+                />
               </RowCol>
             </TableRow>
           {/each}
         </tbody>
       </Table>
-    </div>
+    </TableContainer>
   </div>
 
   <div class="w-full mb-6 lg:mb-8">
-    <div class="flex w-full">
-      <div class="w-4/5">
-        <h2
-          class="text-2xl font-semibold font-rajdhani uppercase mb-4 dark:text-white"
-        >
-          {$LL.teams()}
-        </h2>
-      </div>
-    </div>
-
-    <div class="w-full">
+    <TableContainer>
+      <TableNav title="{$LL.teams()}" createBtnEnabled="{false}" />
       <Table>
         <tr slot="header">
           <HeadCol>
@@ -299,28 +284,20 @@
                 {new Date(team.updatedDate).toLocaleString()}
               </RowCol>
               <RowCol type="action">
-                <HollowButton onClick="{toggleDeleteTeam(team.id)}" color="red">
-                  {$LL.delete()}
-                </HollowButton>
+                <CrudActions
+                  editBtnEnabled="{false}"
+                  deleteBtnClickHandler="{toggleDeleteTeam(team.id)}"
+                />
               </RowCol>
             </TableRow>
           {/each}
         </tbody>
       </Table>
-    </div>
+    </TableContainer>
   </div>
 
-  <div class="w-full">
-    <div class="flex w-full">
-      <div class="w-4/5">
-        <h2
-          class="text-2xl font-semibold font-rajdhani uppercase mb-4 dark:text-white"
-        >
-          {$LL.users()}
-        </h2>
-      </div>
-    </div>
-
+  <TableContainer>
+    <TableNav title="{$LL.users()}" createBtnEnabled="{false}" />
     <Table>
       <tr slot="header">
         <HeadCol>
@@ -381,7 +358,7 @@
         {/each}
       </tbody>
     </Table>
-  </div>
+  </TableContainer>
 
   <div class="w-full text-center mt-8">
     <HollowButton onClick="{toggleDeleteOrganization}" color="red">
diff --git a/ui/src/pages/admin/Organizations.svelte b/ui/src/pages/admin/Organizations.svelte
index 801b9b3a..9a1dfae2 100644
--- a/ui/src/pages/admin/Organizations.svelte
+++ b/ui/src/pages/admin/Organizations.svelte
@@ -4,12 +4,14 @@
   import LL from '../../i18n/i18n-svelte';
   import { appRoutes } from '../../config';
   import { validateUserIsAdmin } from '../../validationUtils';
-  import AdminPageLayout from '../../components/global/AdminPageLayout.svelte';
-  import Table from '../../components/global/table/Table.svelte';
-  import HeadCol from '../../components/global/table/HeadCol.svelte';
-  import TableRow from '../../components/global/table/TableRow.svelte';
-  import RowCol from '../../components/global/table/RowCol.svelte';
-  import Pagination from '../../components/global/Pagination.svelte';
+  import AdminPageLayout from '../../components/AdminPageLayout.svelte';
+  import Table from '../../components/table/Table.svelte';
+  import HeadCol from '../../components/table/HeadCol.svelte';
+  import TableRow from '../../components/table/TableRow.svelte';
+  import RowCol from '../../components/table/RowCol.svelte';
+  import TableNav from '../../components/table/TableNav.svelte';
+  import TableContainer from '../../components/table/TableContainer.svelte';
+  import TableFooter from '../../components/table/TableFooter.svelte';
 
   export let xfetch;
   export let router;
@@ -84,15 +86,8 @@
 </svelte:head>
 
 <AdminPageLayout activePage="organizations">
-  <div class="text-center px-2 mb-4">
-    <h1
-      class="text-3xl md:text-4xl font-semibold font-rajdhani uppercase dark:text-white"
-    >
-      {$LL.organizations()}
-    </h1>
-  </div>
-
-  <div class="w-full">
+  <TableContainer>
+    <TableNav title="{$LL.organizations()}" createBtnEnabled="{false}" />
     <Table>
       <tr slot="header">
         <HeadCol>
@@ -125,16 +120,11 @@
         {/each}
       </tbody>
     </Table>
-
-    {#if appStats.organizationCount > organizationsPageLimit}
-      <div class="pt-6 flex justify-center">
-        <Pagination
-          bind:current="{organizationsPage}"
-          num_items="{appStats.organizationCount}"
-          per_page="{organizationsPageLimit}"
-          on:navigate="{changePage}"
-        />
-      </div>
-    {/if}
-  </div>
+    <TableFooter
+      bind:current="{organizationsPage}"
+      num_items="{appStats.organizationCount}"
+      per_page="{organizationsPageLimit}"
+      on:navigate="{changePage}"
+    />
+  </TableContainer>
 </AdminPageLayout>
diff --git a/ui/src/pages/admin/PokerGame.svelte b/ui/src/pages/admin/PokerGame.svelte
index 58504380..37b3f7f1 100644
--- a/ui/src/pages/admin/PokerGame.svelte
+++ b/ui/src/pages/admin/PokerGame.svelte
@@ -7,13 +7,15 @@
   import LL from '../../i18n/i18n-svelte';
   import { AppConfig, appRoutes } from '../../config';
   import { validateUserIsAdmin } from '../../validationUtils';
-  import Table from '../../components/global/table/Table.svelte';
-  import HeadCol from '../../components/global/table/HeadCol.svelte';
-  import RowCol from '../../components/global/table/RowCol.svelte';
-  import TableRow from '../../components/global/table/TableRow.svelte';
-  import AdminPageLayout from '../../components/global/AdminPageLayout.svelte';
+  import Table from '../../components/table/Table.svelte';
+  import HeadCol from '../../components/table/HeadCol.svelte';
+  import RowCol from '../../components/table/RowCol.svelte';
+  import TableRow from '../../components/table/TableRow.svelte';
+  import AdminPageLayout from '../../components/AdminPageLayout.svelte';
   import HollowButton from '../../components/global/HollowButton.svelte';
   import DeleteConfirmation from '../../components/global/DeleteConfirmation.svelte';
+  import TableNav from '../../components/table/TableNav.svelte';
+  import TableContainer from '../../components/table/TableContainer.svelte';
 
   export let xfetch;
   export let router;
@@ -90,16 +92,9 @@
 </svelte:head>
 
 <AdminPageLayout activePage="battles">
-  <div class="text-center px-2 mb-4">
-    <h1
-      class="text-3xl md:text-4xl font-semibold font-rajdhani dark:text-white"
-    >
-      {battle.name}
-    </h1>
-  </div>
-
-  <div class="w-full">
-    <div class="p-4 md:p-6">
+  <div class="mb-6 lg:mb-8">
+    <TableContainer>
+      <TableNav title="{battle.name}" createBtnEnabled="{false}" />
       <Table>
         <tr slot="header">
           <HeadCol>
@@ -148,14 +143,12 @@
           </TableRow>
         </tbody>
       </Table>
-    </div>
-    <div class="p-4 md:p-6">
-      <h3
-        class="text-2xl md:text-3xl font-semibold font-rajdhani uppercase mb-4 text-center dark:text-white"
-      >
-        {$LL.users()}
-      </h3>
+    </TableContainer>
+  </div>
 
+  <div class="mb-6 lg:mb-8">
+    <TableContainer>
+      <TableNav title="{$LL.users()}" createBtnEnabled="{false}" />
       <Table>
         <tr slot="header">
           <HeadCol>
@@ -239,94 +232,92 @@
           {/each}
         </tbody>
       </Table>
-    </div>
-
-    <div class="p-4 md:p-6">
-      <h3
-        class="text-2xl md:text-3xl font-semibold font-rajdhani uppercase mb-4 text-center dark:text-white"
-      >
-        {$LL.plans({ friendly: AppConfig.FriendlyUIVerbs })}
-      </h3>
-
-      <Table>
-        <tr slot="header">
-          <HeadCol>
-            {$LL.name()}
-          </HeadCol>
-          <HeadCol>
-            {$LL.type()}
-          </HeadCol>
-          <HeadCol>
-            {$LL.planReferenceId()}
-          </HeadCol>
-          <HeadCol>
-            {$LL.voteCount()}
-          </HeadCol>
-          <HeadCol>
-            {$LL.points()}
-          </HeadCol>
-          <HeadCol>
-            {$LL.active()}
-          </HeadCol>
-          <HeadCol>
-            {$LL.skipped()}
-          </HeadCol>
-        </tr>
-        <tbody slot="body" let:class="{className}" class="{className}">
-          {#each battle.plans as plan, i}
-            <TableRow itemIndex="{i}">
-              <RowCol>
-                {plan.name}
-              </RowCol>
-              <RowCol>
-                {plan.type}
-              </RowCol>
-              <RowCol>
-                {plan.referenceId}
-              </RowCol>
-              <RowCol>
-                {plan.votes.length}
-              </RowCol>
-              <RowCol>
-                {plan.points}
-              </RowCol>
-              <RowCol>
-                {#if plan.active}
-                  <span class="text-green-600"><CheckIcon /></span>
-                {/if}
-              </RowCol>
-              <RowCol>
-                {#if plan.skipped}
-                  <span class="text-green-600"><CheckIcon /></span>
-                {/if}
-              </RowCol>
-            </TableRow>
-          {/each}
-        </tbody>
-      </Table>
+    </TableContainer>
+  </div>
 
-      <div class="text-center mt-4">
-        <HollowButton
-          color="red"
-          onClick="{toggleDeleteBattle}"
-          testid="battle-delete"
-        >
-          {$LL.battleDelete({ friendly: AppConfig.FriendlyUIVerbs })}
-        </HollowButton>
-      </div>
+  <TableContainer>
+    <TableNav
+      title="{$LL.plans({ friendly: AppConfig.FriendlyUIVerbs })}"
+      createBtnEnabled="{false}"
+    />
+    <Table>
+      <tr slot="header">
+        <HeadCol>
+          {$LL.name()}
+        </HeadCol>
+        <HeadCol>
+          {$LL.type()}
+        </HeadCol>
+        <HeadCol>
+          {$LL.planReferenceId()}
+        </HeadCol>
+        <HeadCol>
+          {$LL.voteCount()}
+        </HeadCol>
+        <HeadCol>
+          {$LL.points()}
+        </HeadCol>
+        <HeadCol>
+          {$LL.active()}
+        </HeadCol>
+        <HeadCol>
+          {$LL.skipped()}
+        </HeadCol>
+      </tr>
+      <tbody slot="body" let:class="{className}" class="{className}">
+        {#each battle.plans as plan, i}
+          <TableRow itemIndex="{i}">
+            <RowCol>
+              {plan.name}
+            </RowCol>
+            <RowCol>
+              {plan.type}
+            </RowCol>
+            <RowCol>
+              {plan.referenceId}
+            </RowCol>
+            <RowCol>
+              {plan.votes.length}
+            </RowCol>
+            <RowCol>
+              {plan.points}
+            </RowCol>
+            <RowCol>
+              {#if plan.active}
+                <span class="text-green-600"><CheckIcon /></span>
+              {/if}
+            </RowCol>
+            <RowCol>
+              {#if plan.skipped}
+                <span class="text-green-600"><CheckIcon /></span>
+              {/if}
+            </RowCol>
+          </TableRow>
+        {/each}
+      </tbody>
+    </Table>
+  </TableContainer>
 
-      {#if showDeleteBattle}
-        <DeleteConfirmation
-          toggleDelete="{toggleDeleteBattle}"
-          handleDelete="{deleteBattle}"
-          confirmText="{$LL.deleteBattleConfirmText({
-            friendly: AppConfig.FriendlyUIVerbs,
-          })}"
-          confirmBtnText="{$LL.deleteBattle({
-            friendly: AppConfig.FriendlyUIVerbs,
-          })}"
-        />
-      {/if}
-    </div>
+  <div class="text-center mt-4">
+    <HollowButton
+      color="red"
+      onClick="{toggleDeleteBattle}"
+      testid="battle-delete"
+    >
+      {$LL.battleDelete({ friendly: AppConfig.FriendlyUIVerbs })}
+    </HollowButton>
   </div>
+
+  {#if showDeleteBattle}
+    <DeleteConfirmation
+      toggleDelete="{toggleDeleteBattle}"
+      handleDelete="{deleteBattle}"
+      confirmText="{$LL.deleteBattleConfirmText({
+        friendly: AppConfig.FriendlyUIVerbs,
+      })}"
+      confirmBtnText="{$LL.deleteBattle({
+        friendly: AppConfig.FriendlyUIVerbs,
+      })}"
+    />
+  {/if}
 </AdminPageLayout>
diff --git a/ui/src/pages/admin/PokerGames.svelte b/ui/src/pages/admin/PokerGames.svelte
index b17577d9..b06b79cd 100644
--- a/ui/src/pages/admin/PokerGames.svelte
+++ b/ui/src/pages/admin/PokerGames.svelte
@@ -1,16 +1,18 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import Pagination from '../../components/global/Pagination.svelte';
   import { user } from '../../stores';
   import LL from '../../i18n/i18n-svelte';
   import { AppConfig, appRoutes } from '../../config';
   import { validateUserIsAdmin } from '../../validationUtils';
-  import HeadCol from '../../components/global/table/HeadCol.svelte';
-  import AdminPageLayout from '../../components/global/AdminPageLayout.svelte';
-  import TableRow from '../../components/global/table/TableRow.svelte';
-  import RowCol from '../../components/global/table/RowCol.svelte';
+  import HeadCol from '../../components/table/HeadCol.svelte';
+  import AdminPageLayout from '../../components/AdminPageLayout.svelte';
+  import TableRow from '../../components/table/TableRow.svelte';
+  import RowCol from '../../components/table/RowCol.svelte';
   import HollowButton from '../../components/global/HollowButton.svelte';
-  import Table from '../../components/global/table/Table.svelte';
+  import Table from '../../components/table/Table.svelte';
+  import TableContainer from '../../components/table/TableContainer.svelte';
+  import TableNav from '../../components/table/TableNav.svelte';
+  import TableFooter from '../../components/table/TableFooter.svelte';
 
   export let xfetch;
   export let router;
@@ -77,37 +79,33 @@
   <div class="text-center px-2 mb-4">
     <h1
       class="text-3xl md:text-4xl font-semibold font-rajdhani uppercase dark:text-white"
-    >
-      {$LL.battles({ friendly: AppConfig.FriendlyUIVerbs })}
-    </h1>
+    ></h1>
   </div>
 
-  <div class="w-full">
-    <div class="text-right mb-4">
-      <div
-        class="relative inline-block w-10 me-2 align-middle select-none transition duration-200 ease-in"
-      >
+  <TableContainer>
+    <TableNav
+      title="{$LL.battles({ friendly: AppConfig.FriendlyUIVerbs })}"
+      createBtnEnabled="{false}"
+    >
+      <label class="inline-flex items-center cursor-pointer">
         <input
           type="checkbox"
+          class="sr-only peer"
           name="activeBattles"
           id="activeBattles"
           bind:checked="{activeBattles}"
           on:change="{changeActiveBattlesToggle}"
-          class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"
         />
-        <label
-          for="activeBattles"
-          class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"
-        >
-        </label>
-      </div>
-      <label for="activeBattles" class="dark:text-gray-300"
-        >{$LL.showActiveBattles({
-          friendly: AppConfig.FriendlyUIVerbs,
-        })}</label
-      >
-    </div>
-
+        <div
+          class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+        ></div>
+        <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
+          {$LL.showActiveBattles({
+            friendly: AppConfig.FriendlyUIVerbs,
+          })}
+        </span>
+      </label>
+    </TableNav>
     <Table>
       <tr slot="header">
         <HeadCol>
@@ -150,16 +148,11 @@
         {/each}
       </tbody>
     </Table>
-
-    {#if battleCount > battlesPageLimit}
-      <div class="pt-6 flex justify-center">
-        <Pagination
-          bind:current="{battlesPage}"
-          num_items="{battleCount}"
-          per_page="{battlesPageLimit}"
-          on:navigate="{changePage}"
-        />
-      </div>
-    {/if}
-  </div>
+    <TableFooter
+      bind:current="{battlesPage}"
+      num_items="{battleCount}"
+      per_page="{battlesPageLimit}"
+      on:navigate="{changePage}"
+    />
+  </TableContainer>
 </AdminPageLayout>
diff --git a/ui/src/pages/admin/Retro.svelte b/ui/src/pages/admin/Retro.svelte
index 101cf219..cf46ea59 100644
--- a/ui/src/pages/admin/Retro.svelte
+++ b/ui/src/pages/admin/Retro.svelte
@@ -7,13 +7,15 @@
   import LL from '../../i18n/i18n-svelte';
   import { appRoutes } from '../../config';
   import { validateUserIsAdmin } from '../../validationUtils';
-  import Table from '../../components/global/table/Table.svelte';
-  import HeadCol from '../../components/global/table/HeadCol.svelte';
-  import RowCol from '../../components/global/table/RowCol.svelte';
-  import TableRow from '../../components/global/table/TableRow.svelte';
+  import Table from '../../components/table/Table.svelte';
+  import HeadCol from '../../components/table/HeadCol.svelte';
+  import RowCol from '../../components/table/RowCol.svelte';
+  import TableRow from '../../components/table/TableRow.svelte';
   import HollowButton from '../../components/global/HollowButton.svelte';
-  import AdminPageLayout from '../../components/global/AdminPageLayout.svelte';
+  import AdminPageLayout from '../../components/AdminPageLayout.svelte';
   import DeleteConfirmation from '../../components/global/DeleteConfirmation.svelte';
+  import TableContainer from '../../components/table/TableContainer.svelte';
+  import TableNav from '../../components/table/TableNav.svelte';
 
   export let xfetch;
   export let router;
@@ -75,16 +77,9 @@
 </svelte:head>
 
 <AdminPageLayout activePage="retros">
-  <div class="text-center px-2 mb-4">
-    <h1
-      class="text-3xl md:text-4xl font-semibold font-rajdhani dark:text-white"
-    >
-      {retro.name}
-    </h1>
-  </div>
-
-  <div class="w-full">
-    <div class="p-4 md:p-6">
+  <div class="mb-6 lg:mb-8">
+    <TableContainer>
+      <TableNav title="{retro.name}" createBtnEnabled="{false}" />
       <Table>
         <tr slot="header">
           <HeadCol>
@@ -105,102 +100,98 @@
           </TableRow>
         </tbody>
       </Table>
-    </div>
-    <div class="p-4 md:p-6">
-      <h3
-        class="text-2xl md:text-3xl font-semibold font-rajdhani uppercase mb-4 text-center dark:text-white"
-      >
-        {$LL.users()}
-      </h3>
+    </TableContainer>
+  </div>
 
-      <Table>
-        <tr slot="header">
-          <HeadCol>
-            {$LL.name()}
-          </HeadCol>
-          <HeadCol>
-            {$LL.active()}
-          </HeadCol>
-          <HeadCol>
-            {$LL.abandoned()}
-          </HeadCol>
-          <HeadCol>
-            {$LL.leader()}
-          </HeadCol>
-        </tr>
-        <tbody slot="body" let:class="{className}" class="{className}">
-          {#each retro.users as user, i}
-            <TableRow itemIndex="{i}">
-              <RowCol>
-                <div class="flex items-center">
-                  <div class="flex-shrink-0 h-10 w-10">
-                    <UserAvatar
-                      warriorId="{user.id}"
-                      avatar="{user.avatar}"
-                      gravatarHash="{user.gravatarHash}"
-                      userName="{user.name}"
-                      width="48"
-                      class="h-10 w-10 rounded-full"
-                    />
-                  </div>
-                  <div class="ms-4">
-                    <div class="text-sm font-medium text-gray-900">
-                      <a
-                        href="{appRoutes.adminUsers}/{user.id}"
-                        class="text-blue-500 hover:text-blue-800 dark:text-sky-400 dark:hover:text-sky-600"
-                        >{user.name}</a
-                      >
-                      {#if user.country}
-                        &nbsp;
-                        <CountryFlag
-                          country="{user.country}"
-                          additionalClass="inline-block"
-                          width="32"
-                          height="24"
-                        />
-                      {/if}
-                    </div>
+  <TableContainer>
+    <TableNav title="{$LL.users()}" createBtnEnabled="{false}" />
+    <Table>
+      <tr slot="header">
+        <HeadCol>
+          {$LL.name()}
+        </HeadCol>
+        <HeadCol>
+          {$LL.active()}
+        </HeadCol>
+        <HeadCol>
+          {$LL.abandoned()}
+        </HeadCol>
+        <HeadCol>
+          {$LL.leader()}
+        </HeadCol>
+      </tr>
+      <tbody slot="body" let:class="{className}" class="{className}">
+        {#each retro.users as user, i}
+          <TableRow itemIndex="{i}">
+            <RowCol>
+              <div class="flex items-center">
+                <div class="flex-shrink-0 h-10 w-10">
+                  <UserAvatar
+                    warriorId="{user.id}"
+                    avatar="{user.avatar}"
+                    gravatarHash="{user.gravatarHash}"
+                    userName="{user.name}"
+                    width="48"
+                    class="h-10 w-10 rounded-full"
+                  />
+                </div>
+                <div class="ms-4">
+                  <div class="text-sm font-medium text-gray-900">
+                    <a
+                      href="{appRoutes.adminUsers}/{user.id}"
+                      class="text-blue-500 hover:text-blue-800 dark:text-sky-400 dark:hover:text-sky-600"
+                      >{user.name}</a
+                    >
+                    {#if user.country}
+                      &nbsp;
+                      <CountryFlag
+                        country="{user.country}"
+                        additionalClass="inline-block"
+                        width="32"
+                        height="24"
+                      />
+                    {/if}
                   </div>
                 </div>
-              </RowCol>
-              <RowCol>
-                {#if user.active}
-                  <span class="text-green-600"><CheckIcon /></span>
-                {/if}
-              </RowCol>
-              <RowCol>
-                {#if user.abandoned}
-                  <span class="text-green-600"><CheckIcon /></span>
-                {/if}
-              </RowCol>
-              <RowCol>
-                {#if retro.owner_id === user.id}
-                  <span class="text-green-600"><CheckIcon /></span>
-                {/if}
-              </RowCol>
-            </TableRow>
-          {/each}
-        </tbody>
-      </Table>
-
-      <div class="text-center mt-4">
-        <HollowButton
-          color="red"
-          onClick="{toggleDeleteRetro}"
-          testid="retro-delete"
-        >
-          {$LL.deleteRetro()}
-        </HollowButton>
-      </div>
+              </div>
+            </RowCol>
+            <RowCol>
+              {#if user.active}
+                <span class="text-green-600"><CheckIcon /></span>
+              {/if}
+            </RowCol>
+            <RowCol>
+              {#if user.abandoned}
+                <span class="text-green-600"><CheckIcon /></span>
+              {/if}
+            </RowCol>
+            <RowCol>
+              {#if retro.owner_id === user.id}
+                <span class="text-green-600"><CheckIcon /></span>
+              {/if}
+            </RowCol>
+          </TableRow>
+        {/each}
+      </tbody>
+    </Table>
+  </TableContainer>
 
-      {#if showDeleteRetro}
-        <DeleteConfirmation
-          toggleDelete="{toggleDeleteRetro}"
-          handleDelete="{deleteRetro}"
-          confirmText="{$LL.confirmDeleteRetro()}"
-          confirmBtnText="{$LL.deleteRetro()}"
-        />
-      {/if}
-    </div>
+  <div class="text-center mt-4">
+    <HollowButton
+      color="red"
+      onClick="{toggleDeleteRetro}"
+      testid="retro-delete"
+    >
+      {$LL.deleteRetro()}
+    </HollowButton>
   </div>
+
+  {#if showDeleteRetro}
+    <DeleteConfirmation
+      toggleDelete="{toggleDeleteRetro}"
+      handleDelete="{deleteRetro}"
+      confirmText="{$LL.confirmDeleteRetro()}"
+      confirmBtnText="{$LL.deleteRetro()}"
+    />
+  {/if}
 </AdminPageLayout>
diff --git a/ui/src/pages/admin/Retros.svelte b/ui/src/pages/admin/Retros.svelte
index c01dd28f..7ab9fee2 100644
--- a/ui/src/pages/admin/Retros.svelte
+++ b/ui/src/pages/admin/Retros.svelte
@@ -1,16 +1,18 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import Pagination from '../../components/global/Pagination.svelte';
   import { user } from '../../stores';
   import LL from '../../i18n/i18n-svelte';
   import { appRoutes } from '../../config';
   import { validateUserIsAdmin } from '../../validationUtils';
-  import HeadCol from '../../components/global/table/HeadCol.svelte';
-  import AdminPageLayout from '../../components/global/AdminPageLayout.svelte';
-  import Table from '../../components/global/table/Table.svelte';
-  import TableRow from '../../components/global/table/TableRow.svelte';
-  import RowCol from '../../components/global/table/RowCol.svelte';
+  import HeadCol from '../../components/table/HeadCol.svelte';
+  import AdminPageLayout from '../../components/AdminPageLayout.svelte';
+  import Table from '../../components/table/Table.svelte';
+  import TableRow from '../../components/table/TableRow.svelte';
+  import RowCol from '../../components/table/RowCol.svelte';
   import HollowButton from '../../components/global/HollowButton.svelte';
+  import TableContainer from '../../components/table/TableContainer.svelte';
+  import TableNav from '../../components/table/TableNav.svelte';
+  import TableFooter from '../../components/table/TableFooter.svelte';
 
   export let xfetch;
   export let router;
@@ -67,38 +69,25 @@
 </svelte:head>
 
 <AdminPageLayout activePage="retros">
-  <div class="text-center px-2 mb-4">
-    <h1
-      class="text-3xl md:text-4xl font-semibold font-rajdhani uppercase dark:text-white"
-    >
-      {$LL.retros()}
-    </h1>
-  </div>
-
-  <div class="w-full">
-    <div class="text-right mb-4">
-      <div
-        class="relative inline-block w-10 me-2 align-middle select-none transition duration-200 ease-in"
-      >
+  <TableContainer>
+    <TableNav title="{$LL.retros()}" createBtnEnabled="{false}">
+      <label class="inline-flex items-center cursor-pointer">
         <input
           type="checkbox"
+          class="sr-only peer"
           name="activeRetros"
           id="activeRetros"
           bind:checked="{activeRetros}"
           on:change="{changeActiveRetrosToggle}"
-          class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"
         />
-        <label
-          for="activeRetros"
-          class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"
-        >
-        </label>
-      </div>
-      <label for="activeRetros" class="dark:text-gray-300"
-        >{$LL.showActiveRetros()}</label
-      >
-    </div>
-
+        <div
+          class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+        ></div>
+        <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
+          {$LL.showActiveRetros()}
+        </span>
+      </label>
+    </TableNav>
     <Table>
       <tr slot="header">
         <HeadCol>
@@ -139,16 +128,11 @@
         {/each}
       </tbody>
     </Table>
-
-    {#if retroCount > retrosPageLimit}
-      <div class="pt-6 flex justify-center">
-        <Pagination
-          bind:current="{retrosPage}"
-          num_items="{retroCount}"
-          per_page="{retrosPageLimit}"
-          on:navigate="{changePage}"
-        />
-      </div>
-    {/if}
-  </div>
+    <TableFooter
+      bind:current="{retrosPage}"
+      num_items="{retroCount}"
+      per_page="{retrosPageLimit}"
+      on:navigate="{changePage}"
+    />
+  </TableContainer>
 </AdminPageLayout>
diff --git a/ui/src/pages/admin/Storyboard.svelte b/ui/src/pages/admin/Storyboard.svelte
index 55eae63a..f0613f3d 100644
--- a/ui/src/pages/admin/Storyboard.svelte
+++ b/ui/src/pages/admin/Storyboard.svelte
@@ -7,13 +7,15 @@
   import LL from '../../i18n/i18n-svelte';
   import { appRoutes } from '../../config';
   import { validateUserIsAdmin } from '../../validationUtils';
-  import Table from '../../components/global/table/Table.svelte';
-  import HeadCol from '../../components/global/table/HeadCol.svelte';
-  import RowCol from '../../components/global/table/RowCol.svelte';
-  import TableRow from '../../components/global/table/TableRow.svelte';
+  import Table from '../../components/table/Table.svelte';
+  import HeadCol from '../../components/table/HeadCol.svelte';
+  import RowCol from '../../components/table/RowCol.svelte';
+  import TableRow from '../../components/table/TableRow.svelte';
   import HollowButton from '../../components/global/HollowButton.svelte';
-  import AdminPageLayout from '../../components/global/AdminPageLayout.svelte';
+  import AdminPageLayout from '../../components/AdminPageLayout.svelte';
   import DeleteStoryboard from '../../components/storyboard/DeleteStoryboard.svelte';
+  import TableNav from '../../components/table/TableNav.svelte';
+  import TableContainer from '../../components/table/TableContainer.svelte';
 
   export let xfetch;
   export let router;
@@ -75,16 +77,9 @@
 </svelte:head>
 
 <AdminPageLayout activePage="storyboards">
-  <div class="text-center px-2 mb-4">
-    <h1
-      class="text-3xl md:text-4xl font-semibold font-rajdhani dark:text-white"
-    >
-      {storyboard.name}
-    </h1>
-  </div>
-
-  <div class="w-full">
-    <div class="p-4 md:p-6">
+  <div class="mb-6 lg:mb-8">
+    <TableContainer>
+      <TableNav title="{storyboard.name}" createBtnEnabled="{false}" />
       <Table>
         <tr slot="header">
           <HeadCol>
@@ -105,102 +100,98 @@
           </TableRow>
         </tbody>
       </Table>
-    </div>
-    <div class="p-4 md:p-6">
-      <h3
-        class="text-2xl md:text-3xl font-semibold font-rajdhani uppercase mb-4 text-center dark:text-white"
-      >
-        {$LL.users()}
-      </h3>
+    </TableContainer>
+  </div>
 
-      <Table>
-        <tr slot="header">
-          <HeadCol>
-            {$LL.name()}
-          </HeadCol>
-          <HeadCol>
-            {$LL.active()}
-          </HeadCol>
-          <HeadCol>
-            {$LL.abandoned()}
-          </HeadCol>
-          <HeadCol>
-            {$LL.leader()}
-          </HeadCol>
-        </tr>
-        <tbody slot="body" let:class="{className}" class="{className}">
-          {#each storyboard.users as user, i}
-            <TableRow itemIndex="{i}">
-              <RowCol>
-                <div class="flex items-center">
-                  <div class="flex-shrink-0 h-10 w-10">
-                    <UserAvatar
-                      warriorId="{user.id}"
-                      avatar="{user.avatar}"
-                      gravatarHash="{user.gravatarHash}"
-                      userName="{user.name}"
-                      width="48"
-                      class="h-10 w-10 rounded-full"
-                    />
-                  </div>
-                  <div class="ms-4">
-                    <div class="text-sm font-medium text-gray-900">
-                      <a
-                        href="{appRoutes.adminUsers}/{user.id}"
-                        class="text-blue-500 hover:text-blue-800 dark:text-sky-400 dark:hover:text-sky-600"
-                        >{user.name}</a
-                      >
-                      {#if user.country}
-                        &nbsp;
-                        <CountryFlag
-                          country="{user.country}"
-                          additionalClass="inline-block"
-                          width="32"
-                          height="24"
-                        />
-                      {/if}
-                    </div>
+  <TableContainer>
+    <TableNav title="{$LL.users()}" createBtnEnabled="{false}" />
+    <Table>
+      <tr slot="header">
+        <HeadCol>
+          {$LL.name()}
+        </HeadCol>
+        <HeadCol>
+          {$LL.active()}
+        </HeadCol>
+        <HeadCol>
+          {$LL.abandoned()}
+        </HeadCol>
+        <HeadCol>
+          {$LL.leader()}
+        </HeadCol>
+      </tr>
+      <tbody slot="body" let:class="{className}" class="{className}">
+        {#each storyboard.users as user, i}
+          <TableRow itemIndex="{i}">
+            <RowCol>
+              <div class="flex items-center">
+                <div class="flex-shrink-0 h-10 w-10">
+                  <UserAvatar
+                    warriorId="{user.id}"
+                    avatar="{user.avatar}"
+                    gravatarHash="{user.gravatarHash}"
+                    userName="{user.name}"
+                    width="48"
+                    class="h-10 w-10 rounded-full"
+                  />
+                </div>
+                <div class="ms-4">
+                  <div class="text-sm font-medium text-gray-900">
+                    <a
+                      href="{appRoutes.adminUsers}/{user.id}"
+                      class="text-blue-500 hover:text-blue-800 dark:text-sky-400 dark:hover:text-sky-600"
+                      >{user.name}</a
+                    >
+                    {#if user.country}
+                      &nbsp;
+                      <CountryFlag
+                        country="{user.country}"
+                        additionalClass="inline-block"
+                        width="32"
+                        height="24"
+                      />
+                    {/if}
                   </div>
                 </div>
-              </RowCol>
-              <RowCol>
-                {#if user.active}
-                  <span class="text-green-600"><CheckIcon /></span>
-                {/if}
-              </RowCol>
+              </div>
+            </RowCol>
+            <RowCol>
+              {#if user.active}
+                <span class="text-green-600"><CheckIcon /></span>
+              {/if}
+            </RowCol>
+            <RowCol>
+              {#if user.abandoned}
+                <span class="text-green-600"><CheckIcon /></span>
+              {/if}
+            </RowCol>
+            <RowCol>
               <RowCol>
-                {#if user.abandoned}
+                {#if storyboard.owner_id === user.id}
                   <span class="text-green-600"><CheckIcon /></span>
                 {/if}
               </RowCol>
-              <RowCol>
-                <RowCol>
-                  {#if storyboard.owner_id === user.id}
-                    <span class="text-green-600"><CheckIcon /></span>
-                  {/if}
-                </RowCol>
-              </RowCol>
-            </TableRow>
-          {/each}
-        </tbody>
-      </Table>
-
-      <div class="text-center mt-4">
-        <HollowButton
-          color="red"
-          onClick="{toggleDeleteStoryboard}"
-          testid="storyboard-delete"
-        >
-          {$LL.deleteStoryboard()}
-        </HollowButton>
-      </div>
+            </RowCol>
+          </TableRow>
+        {/each}
+      </tbody>
+    </Table>
+  </TableContainer>
 
-      {#if showDeleteStoryboard}
-        <DeleteStoryboard
-          toggleDelete="{toggleDeleteStoryboard}"
-          handleDelete="{deleteStoryboard}"
-        />
-      {/if}
-    </div>
+  <div class="text-center mt-4">
+    <HollowButton
+      color="red"
+      onClick="{toggleDeleteStoryboard}"
+      testid="storyboard-delete"
+    >
+      {$LL.deleteStoryboard()}
+    </HollowButton>
   </div>
+
+  {#if showDeleteStoryboard}
+    <DeleteStoryboard
+      toggleDelete="{toggleDeleteStoryboard}"
+      handleDelete="{deleteStoryboard}"
+    />
+  {/if}
 </AdminPageLayout>
diff --git a/ui/src/pages/admin/Storyboards.svelte b/ui/src/pages/admin/Storyboards.svelte
index 4c8e65d0..54e7db8a 100644
--- a/ui/src/pages/admin/Storyboards.svelte
+++ b/ui/src/pages/admin/Storyboards.svelte
@@ -1,16 +1,18 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import Pagination from '../../components/global/Pagination.svelte';
   import { user } from '../../stores';
   import LL from '../../i18n/i18n-svelte';
   import { appRoutes } from '../../config';
   import { validateUserIsAdmin } from '../../validationUtils';
-  import HeadCol from '../../components/global/table/HeadCol.svelte';
-  import AdminPageLayout from '../../components/global/AdminPageLayout.svelte';
-  import Table from '../../components/global/table/Table.svelte';
-  import TableRow from '../../components/global/table/TableRow.svelte';
-  import RowCol from '../../components/global/table/RowCol.svelte';
+  import HeadCol from '../../components/table/HeadCol.svelte';
+  import AdminPageLayout from '../../components/AdminPageLayout.svelte';
+  import Table from '../../components/table/Table.svelte';
+  import TableRow from '../../components/table/TableRow.svelte';
+  import RowCol from '../../components/table/RowCol.svelte';
   import HollowButton from '../../components/global/HollowButton.svelte';
+  import TableNav from '../../components/table/TableNav.svelte';
+  import TableContainer from '../../components/table/TableContainer.svelte';
+  import TableFooter from '../../components/table/TableFooter.svelte';
 
   export let xfetch;
   export let router;
@@ -67,38 +69,25 @@
 </svelte:head>
 
 <AdminPageLayout activePage="storyboards">
-  <div class="text-center px-2 mb-4">
-    <h1
-      class="text-3xl md:text-4xl font-semibold font-rajdhani uppercase dark:text-white"
-    >
-      {$LL.storyboards()}
-    </h1>
-  </div>
-
-  <div class="w-full">
-    <div class="text-right mb-4">
-      <div
-        class="relative inline-block w-10 me-2 align-middle select-none transition duration-200 ease-in"
-      >
+  <TableContainer>
+    <TableNav title="{$LL.storyboards()}" createBtnEnabled="{false}">
+      <label class="inline-flex items-center cursor-pointer">
         <input
           type="checkbox"
+          class="sr-only peer"
           name="activeStoryboards"
           id="activeStoryboards"
           bind:checked="{activeStoryboards}"
           on:change="{changeActiveStoryboardsToggle}"
-          class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"
         />
-        <label
-          for="activeStoryboards"
-          class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"
-        >
-        </label>
-      </div>
-      <label for="activeStoryboards" class="dark:text-gray-300"
-        >{$LL.showActiveStoryboards()}</label
-      >
-    </div>
-
+        <div
+          class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+        ></div>
+        <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
+          {$LL.showActiveStoryboards()}
+        </span>
+      </label>
+    </TableNav>
     <Table>
       <tr slot="header">
         <HeadCol>
@@ -139,16 +128,11 @@
         {/each}
       </tbody>
     </Table>
-
-    {#if storyboardCount > storyboardsPageLimit}
-      <div class="pt-6 flex justify-center">
-        <Pagination
-          bind:current="{storyboardsPage}"
-          num_items="{storyboardCount}"
-          per_page="{storyboardsPageLimit}"
-          on:navigate="{changePage}"
-        />
-      </div>
-    {/if}
-  </div>
+    <TableFooter
+      bind:current="{storyboardsPage}"
+      num_items="{storyboardCount}"
+      per_page="{storyboardsPageLimit}"
+      on:navigate="{changePage}"
+    />
+  </TableContainer>
 </AdminPageLayout>
diff --git a/ui/src/pages/admin/Subscription.svelte b/ui/src/pages/admin/Subscription.svelte
index 8e03968d..1ec2846e 100644
--- a/ui/src/pages/admin/Subscription.svelte
+++ b/ui/src/pages/admin/Subscription.svelte
@@ -4,12 +4,14 @@
   import LL from '../../i18n/i18n-svelte';
   import { AppConfig, appRoutes } from '../../config';
   import { validateUserIsAdmin } from '../../validationUtils';
-  import HeadCol from '../../components/global/table/HeadCol.svelte';
-  import RowCol from '../../components/global/table/RowCol.svelte';
-  import TableRow from '../../components/global/table/TableRow.svelte';
-  import AdminPageLayout from '../../components/global/AdminPageLayout.svelte';
-  import Table from '../../components/global/table/Table.svelte';
+  import HeadCol from '../../components/table/HeadCol.svelte';
+  import RowCol from '../../components/table/RowCol.svelte';
+  import TableRow from '../../components/table/TableRow.svelte';
+  import AdminPageLayout from '../../components/AdminPageLayout.svelte';
+  import Table from '../../components/table/Table.svelte';
   import CheckIcon from '../../components/icons/CheckIcon.svelte';
+  import TableNav from '../../components/table/TableNav.svelte';
+  import TableContainer from '../../components/table/TableContainer.svelte';
 
   const { FeaturePoker, FeatureRetro, FeatureStoryboard } = AppConfig;
 
@@ -66,75 +68,66 @@
 </svelte:head>
 
 <AdminPageLayout activePage="subscriptions">
-  <div class="px-2 mb-4">
-    <h1
-      class="text-3xl md:text-4xl font-semibold font-rajdhani dark:text-white"
-    >
-      Subscription
-    </h1>
-  </div>
-
-  <div class="w-full">
-    <div class="mb-4">
-      <Table>
-        <tr slot="header">
-          <HeadCol>
-            {$LL.email()}
-          </HeadCol>
-          <HeadCol>Customer ID</HeadCol>
-          <HeadCol>Subscription ID</HeadCol>
-          <HeadCol>
-            {$LL.type()}
-          </HeadCol>
-          <HeadCol>
-            {$LL.active()}
-          </HeadCol>
-          <HeadCol>
-            {$LL.dateCreated()}
-          </HeadCol>
-          <HeadCol>
-            {$LL.dateUpdated()}
-          </HeadCol>
-          <HeadCol type="action">
-            <span class="sr-only">Actions</span>
-          </HeadCol>
-        </tr>
-        <tbody slot="body" let:class="{className}" class="{className}">
-          <TableRow>
-            <RowCol>
-              <a
-                href="{appRoutes.adminUsers}/{subscription.user_id}"
-                class="text-blue-500 hover:text-blue-800 dark:text-sky-400 dark:hover:text-sky-600"
-              >
-                {subscription.user.name}
-              </a>
-            </RowCol>
-            <RowCol>
-              {subscription.customer_id}
-            </RowCol>
-            <RowCol>
-              {subscription.subscription_id}
-            </RowCol>
-            <RowCol>
-              {subscription.type}
-            </RowCol>
-            <RowCol>
-              {#if subscription.active}
-                <span class="text-green-600">
-                  <CheckIcon />
-                </span>
-              {/if}
-            </RowCol>
-            <RowCol>
-              {new Date(subscription.created_date).toLocaleString()}
-            </RowCol>
-            <RowCol>
-              {new Date(subscription.updated_date).toLocaleString()}
-            </RowCol>
-            <RowCol type="action" />
-          </TableRow>
-        </tbody>
-      </Table>
-    </div>
-  </div>
+  <TableContainer>
+    <TableNav title="Subscription" createBtnEnabled="{false}" />
+    <Table>
+      <tr slot="header">
+        <HeadCol>
+          {$LL.email()}
+        </HeadCol>
+        <HeadCol>Customer ID</HeadCol>
+        <HeadCol>Subscription ID</HeadCol>
+        <HeadCol>
+          {$LL.type()}
+        </HeadCol>
+        <HeadCol>
+          {$LL.active()}
+        </HeadCol>
+        <HeadCol>
+          {$LL.dateCreated()}
+        </HeadCol>
+        <HeadCol>
+          {$LL.dateUpdated()}
+        </HeadCol>
+        <HeadCol type="action">
+          <span class="sr-only">Actions</span>
+        </HeadCol>
+      </tr>
+      <tbody slot="body" let:class="{className}" class="{className}">
+        <TableRow>
+          <RowCol>
+            <a
+              href="{appRoutes.adminUsers}/{subscription.user_id}"
+              class="text-blue-500 hover:text-blue-800 dark:text-sky-400 dark:hover:text-sky-600"
+            >
+              {subscription.user.name}
+            </a>
+          </RowCol>
+          <RowCol>
+            {subscription.customer_id}
+          </RowCol>
+          <RowCol>
+            {subscription.subscription_id}
+          </RowCol>
+          <RowCol>
+            {subscription.type}
+          </RowCol>
+          <RowCol>
+            {#if subscription.active}
+              <span class="text-green-600">
+                <CheckIcon />
+              </span>
+            {/if}
+          </RowCol>
+          <RowCol>
+            {new Date(subscription.created_date).toLocaleString()}
+          </RowCol>
+          <RowCol>
+            {new Date(subscription.updated_date).toLocaleString()}
+          </RowCol>
+          <RowCol type="action" />
+        </TableRow>
+      </tbody>
+    </Table>
+  </TableContainer>
 </AdminPageLayout>
diff --git a/ui/src/pages/admin/Subscriptions.svelte b/ui/src/pages/admin/Subscriptions.svelte
index db3ce0ac..59523daa 100644
--- a/ui/src/pages/admin/Subscriptions.svelte
+++ b/ui/src/pages/admin/Subscriptions.svelte
@@ -4,16 +4,18 @@
   import LL from '../../i18n/i18n-svelte';
   import { appRoutes } from '../../config';
   import { validateUserIsAdmin } from '../../validationUtils';
-  import HeadCol from '../../components/global/table/HeadCol.svelte';
-  import Pagination from '../../components/global/Pagination.svelte';
-  import RowCol from '../../components/global/table/RowCol.svelte';
-  import TableRow from '../../components/global/table/TableRow.svelte';
+  import HeadCol from '../../components/table/HeadCol.svelte';
+  import RowCol from '../../components/table/RowCol.svelte';
+  import TableRow from '../../components/table/TableRow.svelte';
   import CheckIcon from '../../components/icons/CheckIcon.svelte';
-  import Table from '../../components/global/table/Table.svelte';
-  import AdminPageLayout from '../../components/global/AdminPageLayout.svelte';
+  import Table from '../../components/table/Table.svelte';
+  import AdminPageLayout from '../../components/AdminPageLayout.svelte';
   import SubscriptionForm from '../../components/subscription/SubscriptionForm.svelte';
   import DeleteConfirmation from '../../components/global/DeleteConfirmation.svelte';
-  import HollowButton from '../../components/global/HollowButton.svelte';
+  import TableNav from '../../components/table/TableNav.svelte';
+  import TableContainer from '../../components/table/TableContainer.svelte';
+  import TableFooter from '../../components/table/TableFooter.svelte';
+  import CrudActions from '../../components/table/CrudActions.svelte';
 
   export let xfetch;
   export let router;
@@ -114,21 +116,13 @@
 </svelte:head>
 
 <AdminPageLayout activePage="subscriptions">
-  <div class="text-center px-2 mb-4">
-    <h1
-      class="text-3xl md:text-4xl font-semibold font-rajdhani uppercase dark:text-white"
-    >
-      Subscriptions
-    </h1>
-  </div>
-
-  <div class="w-full">
-    <div class="text-right mb-4">
-      <HollowButton onClick="{toggleSubCreate}">
-        Create Subscription
-      </HollowButton>
-    </div>
-
+  <TableContainer>
+    <TableNav
+      title="Subscriptions"
+      createBtnText="Create Subscription"
+      createButtonHandler="{toggleSubCreate}"
+      createBtnTestId="subscription-create"
+    />
     <Table>
       <tr slot="header">
         <HeadCol>
@@ -178,39 +172,22 @@
               {new Date(subscription.expires).toLocaleString()}
             </RowCol>
             <RowCol type="action">
-              <a
-                href="{appRoutes.adminSubscriptions}/{subscription.id}"
-                class="text-blue-500 hover:text-blue-800 dark:text-sky-400 dark:hover:text-sky-600"
-                >Details</a
-              >
-              <HollowButton
-                onClick="{toggleSubUpdate(subscription)}"
-                color="blue"
-              >
-                {$LL.edit()}
-              </HollowButton>
-              <HollowButton
-                onClick="{toggleSubDelete(subscription.id)}"
-                color="red"
-              >
-                {$LL.delete()}
-              </HollowButton>
+              <CrudActions
+                detailsLink="{appRoutes.adminSubscriptions}/{subscription.id}"
+                editBtnClickHandler="{toggleSubUpdate(subscription)}"
+                deleteBtnClickHandler="{toggleSubDelete(subscription.id)}"
+              />
             </RowCol>
           </TableRow>
         {/each}
       </tbody>
     </Table>
-
-    {#if subscriptionCount > subscriptionsPageLimit}
-      <div class="pt-6 flex justify-center">
-        <Pagination
-          bind:current="{subscriptionsPage}"
-          num_items="{subscriptionCount}"
-          per_page="{subscriptionsPageLimit}"
-          on:navigate="{changePage}"
-        />
-      </div>
-    {/if}
+    <TableFooter
+      bind:current="{subscriptionsPage}"
+      num_items="{subscriptionCount}"
+      per_page="{subscriptionsPageLimit}"
+      on:navigate="{changePage}"
+    />
 
     {#if showSubCreate}
       <SubscriptionForm
@@ -247,5 +224,5 @@
         confirmBtnText="{$LL.deleteSubscription()}"
       />
     {/if}
-  </div>
+  </TableContainer>
 </AdminPageLayout>
diff --git a/ui/src/pages/admin/Team.svelte b/ui/src/pages/admin/Team.svelte
index dd75fddc..59b9197e 100644
--- a/ui/src/pages/admin/Team.svelte
+++ b/ui/src/pages/admin/Team.svelte
@@ -6,17 +6,19 @@
   import LL from '../../i18n/i18n-svelte';
   import { AppConfig, appRoutes } from '../../config';
   import { validateUserIsAdmin } from '../../validationUtils';
-  import HeadCol from '../../components/global/table/HeadCol.svelte';
-  import RowCol from '../../components/global/table/RowCol.svelte';
-  import TableRow from '../../components/global/table/TableRow.svelte';
+  import HeadCol from '../../components/table/HeadCol.svelte';
+  import RowCol from '../../components/table/RowCol.svelte';
+  import TableRow from '../../components/table/TableRow.svelte';
   import HollowButton from '../../components/global/HollowButton.svelte';
   import CheckboxIcon from '../../components/icons/CheckboxIcon.svelte';
   import CommentIcon from '../../components/icons/CommentIcon.svelte';
-  import Pagination from '../../components/global/Pagination.svelte';
   import ChevronRight from '../../components/icons/ChevronRight.svelte';
-  import AdminPageLayout from '../../components/global/AdminPageLayout.svelte';
-  import Table from '../../components/global/table/Table.svelte';
+  import AdminPageLayout from '../../components/AdminPageLayout.svelte';
+  import Table from '../../components/table/Table.svelte';
   import DeleteConfirmation from '../../components/global/DeleteConfirmation.svelte';
+  import TableNav from '../../components/table/TableNav.svelte';
+  import TableContainer from '../../components/table/TableContainer.svelte';
+  import TableFooter from '../../components/table/TableFooter.svelte';
 
   const { FeaturePoker, FeatureRetro, FeatureStoryboard } = AppConfig;
 
@@ -265,8 +267,9 @@
     {/if}
   </div>
 
-  <div class="w-full">
-    <div class="mb-4">
+  <div class="mb-6 lg:mb-8">
+    <TableContainer>
+      <TableNav title="{team.name}" createBtnEnabled="{false}" />
       <Table>
         <tr slot="header">
           <HeadCol>
@@ -287,308 +290,295 @@
           </TableRow>
         </tbody>
       </Table>
-    </div>
-    <div>
-      {#if FeaturePoker}
-        <div class="w-full mb-6 lg:mb-8">
-          <div class="flex w-full">
-            <div class="flex-1">
-              <h2
-                class="text-2xl font-semibold font-rajdhani uppercase mb-4 dark:text-white"
-              >
-                {$LL.battles({
-                  friendly: AppConfig.FriendlyUIVerbs,
-                })}
-              </h2>
-            </div>
+    </TableContainer>
+  </div>
+
+  <div>
+    {#if FeaturePoker}
+      <div class="w-full mb-6 lg:mb-8">
+        <div class="flex w-full">
+          <div class="flex-1">
+            <h2
+              class="text-2xl font-semibold font-rajdhani uppercase mb-4 dark:text-white"
+            >
+              {$LL.battles({
+                friendly: AppConfig.FriendlyUIVerbs,
+              })}
+            </h2>
           </div>
+        </div>
 
-          <div class="flex flex-wrap">
-            {#each battles as battle}
-              <div
-                class="w-full bg-white dark:bg-gray-800 dark:text-white shadow-lg rounded-lg mb-2 border-gray-300 dark:border-gray-700
+        <div class="flex flex-wrap">
+          {#each battles as battle}
+            <div
+              class="w-full bg-white dark:bg-gray-800 dark:text-white shadow-lg rounded-lg mb-2 border-gray-300 dark:border-gray-700
                         border-b"
-              >
-                <div class="flex flex-wrap items-center p-4">
-                  <div
-                    class="w-full md:w-1/2 mb-4 md:mb-0 font-semibold
+            >
+              <div class="flex flex-wrap items-center p-4">
+                <div
+                  class="w-full md:w-1/2 mb-4 md:mb-0 font-semibold
                             md:text-xl leading-tight"
-                  >
-                    <span data-testid="battle-name">{battle.name}</span>
-                  </div>
-                  <div class="w-full md:w-1/2 md:mb-0 md:text-right">
-                    <HollowButton href="{appRoutes.game}/{battle.id}">
-                      {$LL.battleJoin({
-                        friendly: AppConfig.FriendlyUIVerbs,
-                      })}
-                    </HollowButton>
-                  </div>
+                >
+                  <span data-testid="battle-name">{battle.name}</span>
+                </div>
+                <div class="w-full md:w-1/2 md:mb-0 md:text-right">
+                  <HollowButton href="{appRoutes.game}/{battle.id}">
+                    {$LL.battleJoin({
+                      friendly: AppConfig.FriendlyUIVerbs,
+                    })}
+                  </HollowButton>
                 </div>
               </div>
-            {/each}
-          </div>
-        </div>
-      {/if}
-
-      {#if FeatureRetro}
-        <div class="w-full mb-6 lg:mb-8">
-          <div class="flex w-full">
-            <div class="flex-1">
-              <h2
-                class="text-2xl font-semibold font-rajdhani uppercase mb-4 dark:text-white"
-              >
-                {$LL.retros()}
-              </h2>
             </div>
+          {/each}
+        </div>
+      </div>
+    {/if}
+
+    {#if FeatureRetro}
+      <div class="w-full mb-6 lg:mb-8">
+        <div class="flex w-full">
+          <div class="flex-1">
+            <h2
+              class="text-2xl font-semibold font-rajdhani uppercase mb-4 dark:text-white"
+            >
+              {$LL.retros()}
+            </h2>
           </div>
+        </div>
 
-          <div class="flex flex-wrap">
-            {#each retros as retro}
-              <div
-                class="w-full bg-white dark:bg-gray-800 dark:text-white shadow-lg rounded-lg mb-2 border-gray-300 dark:border-gray-700
+        <div class="flex flex-wrap">
+          {#each retros as retro}
+            <div
+              class="w-full bg-white dark:bg-gray-800 dark:text-white shadow-lg rounded-lg mb-2 border-gray-300 dark:border-gray-700
                         border-b"
-              >
-                <div class="flex flex-wrap items-center p-4">
-                  <div
-                    class="w-full md:w-1/2 mb-4 md:mb-0 font-semibold
+            >
+              <div class="flex flex-wrap items-center p-4">
+                <div
+                  class="w-full md:w-1/2 mb-4 md:mb-0 font-semibold
                             md:text-xl leading-tight"
-                  >
-                    <span data-testid="retro-name">{retro.name}</span>
-                  </div>
-                  <div class="w-full md:w-1/2 md:mb-0 md:text-right">
-                    <HollowButton href="{appRoutes.retro}/{retro.id}">
-                      {$LL.joinRetro()}
-                    </HollowButton>
-                  </div>
+                >
+                  <span data-testid="retro-name">{retro.name}</span>
+                </div>
+                <div class="w-full md:w-1/2 md:mb-0 md:text-right">
+                  <HollowButton href="{appRoutes.retro}/{retro.id}">
+                    {$LL.joinRetro()}
+                  </HollowButton>
                 </div>
               </div>
-            {/each}
-          </div>
+            </div>
+          {/each}
+        </div>
 
-          {#if retros.length}
-            <div class="w-full pt-4 px-4">
-              <div class="w-full">
-                <h3
-                  class="text-xl font-semibold font-rajdhani uppercase mb-4 dark:text-white"
-                >
-                  {$LL.retroActionItems()}
-                </h3>
+        {#if retros.length}
+          <div class="w-full pt-4 px-4">
+            <div class="w-full">
+              <h3
+                class="text-xl font-semibold font-rajdhani uppercase mb-4 dark:text-white"
+              >
+                {$LL.retroActionItems()}
+              </h3>
 
-                <div class="text-right mb-4">
-                  <div
-                    class="relative inline-block w-10 me-2 align-middle select-none transition duration-200 ease-in"
-                  >
-                    <input
-                      type="checkbox"
-                      name="completedActionItems"
-                      id="completedActionItems"
-                      bind:checked="{completedActionItems}"
-                      on:change="{changeRetroActionCompletedToggle}"
-                      class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"
-                    />
-                    <label
-                      for="completedActionItems"
-                      class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"
-                    >
-                    </label>
-                  </div>
-                  <label for="completedActionItems" class="dark:text-gray-300"
-                    >{$LL.showCompletedActionItems()}</label
+              <div class="text-right mb-4">
+                <div
+                  class="relative inline-block w-10 me-2 align-middle select-none transition duration-200 ease-in"
+                >
+                  <input
+                    type="checkbox"
+                    name="completedActionItems"
+                    id="completedActionItems"
+                    bind:checked="{completedActionItems}"
+                    on:change="{changeRetroActionCompletedToggle}"
+                    class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"
+                  />
+                  <label
+                    for="completedActionItems"
+                    class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"
                   >
+                  </label>
                 </div>
+                <label for="completedActionItems" class="dark:text-gray-300"
+                  >{$LL.showCompletedActionItems()}</label
+                >
               </div>
+            </div>
 
-              <Table>
-                <tr slot="header">
-                  <HeadCol>{$LL.actionItem()}</HeadCol>
-                  <HeadCol>{$LL.completed()}</HeadCol>
-                  <HeadCol>{$LL.comments()}</HeadCol>
-                </tr>
-                <tbody slot="body" let:class="{className}" class="{className}">
-                  {#each retroActions as item, i}
-                    <TableRow itemIndex="{i}">
-                      <RowCol>
-                        <div class="whitespace-pre-wrap">
-                          {item.content}
-                        </div>
-                      </RowCol>
-                      <RowCol>
-                        <input
-                          type="checkbox"
-                          id="{i}Completed"
-                          checked="{item.completed}"
-                          class="opacity-0 absolute h-6 w-6"
-                          disabled
-                        />
-                        <div
-                          class="bg-white dark:bg-gray-800 border-2 rounded-md
+            <Table>
+              <tr slot="header">
+                <HeadCol>{$LL.actionItem()}</HeadCol>
+                <HeadCol>{$LL.completed()}</HeadCol>
+                <HeadCol>{$LL.comments()}</HeadCol>
+              </tr>
+              <tbody slot="body" let:class="{className}" class="{className}">
+                {#each retroActions as item, i}
+                  <TableRow itemIndex="{i}">
+                    <RowCol>
+                      <div class="whitespace-pre-wrap">
+                        {item.content}
+                      </div>
+                    </RowCol>
+                    <RowCol>
+                      <input
+                        type="checkbox"
+                        id="{i}Completed"
+                        checked="{item.completed}"
+                        class="opacity-0 absolute h-6 w-6"
+                        disabled
+                      />
+                      <div
+                        class="bg-white dark:bg-gray-800 border-2 rounded-md
                                             border-gray-400 dark:border-gray-300 w-6 h-6 flex flex-shrink-0
                                             justify-center items-center me-2
                                             focus-within:border-blue-500 dark:focus-within:border-sky-500"
-                        >
-                          <CheckboxIcon />
-                        </div>
-                        <label for="{i}Completed" class="select-none"></label>
-                      </RowCol>
-                      <RowCol>
-                        <CommentIcon width="22" height="22" />
-                        <button
-                          class="text-lg text-blue-400 dark:text-sky-400"
-                          on:click="{toggleRetroActionComments(item.id)}"
-                        >
-                          &nbsp;{item.comments.length}
-                        </button>
-                      </RowCol>
-                    </TableRow>
-                  {/each}
-                </tbody>
-              </Table>
-
-              {#if totalRetroActions > retroActionsPageLimit}
-                <div class="pt-6 flex justify-center">
-                  <Pagination
-                    bind:current="{retroActionsPage}"
-                    num_items="{totalRetroActions}"
-                    per_page="{retroActionsPageLimit}"
-                    on:navigate="{changeRetroActionPage}"
-                  />
-                </div>
-              {/if}
-            </div>
-          {/if}
-        </div>
-      {/if}
-
-      {#if FeatureStoryboard}
-        <div class="w-full mb-6 lg:mb-8">
-          <div class="flex w-full">
-            <div class="flex-1">
-              <h2
-                class="text-2xl font-semibold font-rajdhani uppercase mb-4 dark:text-white"
-              >
-                {$LL.storyboards()}
-              </h2>
-            </div>
-          </div>
-
-          <div class="flex flex-wrap">
-            {#each storyboards as storyboard}
-              <div
-                class="w-full bg-white dark:bg-gray-800 dark:text-white shadow-lg rounded-lg mb-2 border-gray-300 dark:border-gray-700
-                        border-b"
-              >
-                <div class="flex flex-wrap items-center p-4">
-                  <div
-                    class="w-full md:w-1/2 mb-4 md:mb-0 font-semibold
-                            md:text-xl leading-tight"
-                  >
-                    <span data-testid="storyboard-name">{storyboard.name}</span>
-                  </div>
-                  <div class="w-full md:w-1/2 md:mb-0 md:text-right">
-                    <HollowButton href="{appRoutes.storyboard}/{storyboard.id}">
-                      {$LL.joinStoryboard()}
-                    </HollowButton>
-                  </div>
-                </div>
-              </div>
-            {/each}
+                      >
+                        <CheckboxIcon />
+                      </div>
+                      <label for="{i}Completed" class="select-none"></label>
+                    </RowCol>
+                    <RowCol>
+                      <CommentIcon width="22" height="22" />
+                      <button
+                        class="text-lg text-blue-400 dark:text-sky-400"
+                        on:click="{toggleRetroActionComments(item.id)}"
+                      >
+                        &nbsp;{item.comments.length}
+                      </button>
+                    </RowCol>
+                  </TableRow>
+                {/each}
+              </tbody>
+            </Table>
+            <TableFooter
+              bind:current="{retroActionsPage}"
+              num_items="{totalRetroActions}"
+              per_page="{retroActionsPageLimit}"
+              on:navigate="{changeRetroActionPage}"
+            />
           </div>
-        </div>
-      {/if}
+        {/if}
+      </div>
+    {/if}
 
-      <div class="w-full">
+    {#if FeatureStoryboard}
+      <div class="w-full mb-6 lg:mb-8">
         <div class="flex w-full">
-          <div class="w-4/5">
+          <div class="flex-1">
             <h2
               class="text-2xl font-semibold font-rajdhani uppercase mb-4 dark:text-white"
             >
-              {$LL.users()}
+              {$LL.storyboards()}
             </h2>
           </div>
         </div>
 
-        <Table>
-          <tr slot="header">
-            <HeadCol>
-              {$LL.name()}
-            </HeadCol>
-            <HeadCol>
-              {$LL.email()}
-            </HeadCol>
-            <HeadCol>
-              {$LL.role()}
-            </HeadCol>
-          </tr>
-          <tbody slot="body" let:class="{className}" class="{className}">
-            {#each users as user, i}
-              <TableRow itemIndex="{i}">
-                <RowCol>
-                  <div class="flex items-center">
-                    <div class="flex-shrink-0 h-10 w-10">
-                      <UserAvatar
-                        warriorId="{user.id}"
-                        avatar="{user.avatar}"
-                        gravatarHash="{user.gravatarHash}"
-                        userName="{user.name}"
-                        width="48"
-                        class="h-10 w-10 rounded-full"
-                      />
-                    </div>
-                    <div class="ms-4">
-                      <div class="font-medium text-gray-900 dark:text-gray-200">
-                        <a
-                          data-testid="user-name"
-                          href="{appRoutes.adminUsers}/{user.id}"
-                          class="text-blue-500 hover:text-blue-800 dark:text-sky-400 dark:hover:text-sky-600"
-                          >{user.name}</a
-                        >
-                        {#if user.country}
-                          &nbsp;
-                          <CountryFlag
-                            country="{user.country}"
-                            additionalClass="inline-block"
-                            width="32"
-                            height="24"
-                          />
-                        {/if}
-                      </div>
-                    </div>
+        <div class="flex flex-wrap">
+          {#each storyboards as storyboard}
+            <div
+              class="w-full bg-white dark:bg-gray-800 dark:text-white shadow-lg rounded-lg mb-2 border-gray-300 dark:border-gray-700
+                        border-b"
+            >
+              <div class="flex flex-wrap items-center p-4">
+                <div
+                  class="w-full md:w-1/2 mb-4 md:mb-0 font-semibold
+                            md:text-xl leading-tight"
+                >
+                  <span data-testid="storyboard-name">{storyboard.name}</span>
+                </div>
+                <div class="w-full md:w-1/2 md:mb-0 md:text-right">
+                  <HollowButton href="{appRoutes.storyboard}/{storyboard.id}">
+                    {$LL.joinStoryboard()}
+                  </HollowButton>
+                </div>
+              </div>
+            </div>
+          {/each}
+        </div>
+      </div>
+    {/if}
+
+    <TableContainer>
+      <TableNav title="{$LL.users()}" createBtnEnabled="{false}" />
+      <Table>
+        <tr slot="header">
+          <HeadCol>
+            {$LL.name()}
+          </HeadCol>
+          <HeadCol>
+            {$LL.email()}
+          </HeadCol>
+          <HeadCol>
+            {$LL.role()}
+          </HeadCol>
+        </tr>
+        <tbody slot="body" let:class="{className}" class="{className}">
+          {#each users as user, i}
+            <TableRow itemIndex="{i}">
+              <RowCol>
+                <div class="flex items-center">
+                  <div class="flex-shrink-0 h-10 w-10">
+                    <UserAvatar
+                      warriorId="{user.id}"
+                      avatar="{user.avatar}"
+                      gravatarHash="{user.gravatarHash}"
+                      userName="{user.name}"
+                      width="48"
+                      class="h-10 w-10 rounded-full"
+                    />
                   </div>
-                </RowCol>
-                <RowCol>
-                  <span data-testid="user-email">{user.email}</span>
-                </RowCol>
-                <RowCol>
-                  <div class="text-sm text-gray-500 dark:text-gray-300">
-                    {user.role}
+                  <div class="ms-4">
+                    <div class="font-medium text-gray-900 dark:text-gray-200">
+                      <a
+                        data-testid="user-name"
+                        href="{appRoutes.adminUsers}/{user.id}"
+                        class="text-blue-500 hover:text-blue-800 dark:text-sky-400 dark:hover:text-sky-600"
+                        >{user.name}</a
+                      >
+                      {#if user.country}
+                        &nbsp;
+                        <CountryFlag
+                          country="{user.country}"
+                          additionalClass="inline-block"
+                          width="32"
+                          height="24"
+                        />
+                      {/if}
+                    </div>
                   </div>
-                </RowCol>
-              </TableRow>
-            {/each}
-          </tbody>
-        </Table>
+                </div>
+              </RowCol>
+              <RowCol>
+                <span data-testid="user-email">{user.email}</span>
+              </RowCol>
+              <RowCol>
+                <div class="text-sm text-gray-500 dark:text-gray-300">
+                  {user.role}
+                </div>
+              </RowCol>
+            </TableRow>
+          {/each}
+        </tbody>
+      </Table>
+    </TableContainer>
+
+    {#if !organizationId}
+      <div class="text-center mt-4">
+        <HollowButton
+          color="red"
+          onClick="{toggleDeleteTeam}"
+          testid="team-delete"
+        >
+          {$LL.deleteTeam()}
+        </HollowButton>
       </div>
+    {/if}
 
-      {#if !organizationId}
-        <div class="text-center mt-4">
-          <HollowButton
-            color="red"
-            onClick="{toggleDeleteTeam}"
-            testid="team-delete"
-          >
-            {$LL.deleteTeam()}
-          </HollowButton>
-        </div>
-      {/if}
-
-      {#if showDeleteTeam}
-        <DeleteConfirmation
-          toggleDelete="{toggleDeleteTeam}"
-          handleDelete="{deleteTeam}"
-          confirmText="{$LL.deleteTeamConfirmText()}"
-          confirmBtnText="{$LL.deleteTeam()}"
-        />
-      {/if}
-    </div>
+    {#if showDeleteTeam}
+      <DeleteConfirmation
+        toggleDelete="{toggleDeleteTeam}"
+        handleDelete="{deleteTeam}"
+        confirmText="{$LL.deleteTeamConfirmText()}"
+        confirmBtnText="{$LL.deleteTeam()}"
+      />
+    {/if}
   </div>
 </AdminPageLayout>
diff --git a/ui/src/pages/admin/Teams.svelte b/ui/src/pages/admin/Teams.svelte
index 9fc77213..fc980b3c 100644
--- a/ui/src/pages/admin/Teams.svelte
+++ b/ui/src/pages/admin/Teams.svelte
@@ -4,12 +4,14 @@
   import LL from '../../i18n/i18n-svelte';
   import { appRoutes } from '../../config';
   import { validateUserIsAdmin } from '../../validationUtils';
-  import HeadCol from '../../components/global/table/HeadCol.svelte';
-  import Table from '../../components/global/table/Table.svelte';
-  import AdminPageLayout from '../../components/global/AdminPageLayout.svelte';
-  import TableRow from '../../components/global/table/TableRow.svelte';
-  import RowCol from '../../components/global/table/RowCol.svelte';
-  import Pagination from '../../components/global/Pagination.svelte';
+  import HeadCol from '../../components/table/HeadCol.svelte';
+  import Table from '../../components/table/Table.svelte';
+  import AdminPageLayout from '../../components/AdminPageLayout.svelte';
+  import TableRow from '../../components/table/TableRow.svelte';
+  import RowCol from '../../components/table/RowCol.svelte';
+  import TableNav from '../../components/table/TableNav.svelte';
+  import TableContainer from '../../components/table/TableContainer.svelte';
+  import TableFooter from '../../components/table/TableFooter.svelte';
 
   export let xfetch;
   export let router;
@@ -58,15 +60,8 @@
 </svelte:head>
 
 <AdminPageLayout activePage="teams">
-  <div class="text-center px-2 mb-4">
-    <h1
-      class="text-3xl md:text-4xl font-semibold font-rajdhani uppercase dark:text-white"
-    >
-      {$LL.teams()}
-    </h1>
-  </div>
-
-  <div class="w-full">
+  <TableContainer>
+    <TableNav title="{$LL.teams()}" createBtnEnabled="{false}" />
     <Table>
       <tr slot="header">
         <HeadCol>
@@ -99,16 +94,11 @@
         {/each}
       </tbody>
     </Table>
-
-    {#if teamCount > teamsPageLimit}
-      <div class="pt-6 flex justify-center">
-        <Pagination
-          bind:current="{teamsPage}"
-          num_items="{teamCount}"
-          per_page="{teamsPageLimit}"
-          on:navigate="{changePage}"
-        />
-      </div>
-    {/if}
-  </div>
+    <TableFooter
+      bind:current="{teamsPage}"
+      num_items="{teamCount}"
+      per_page="{teamsPageLimit}"
+      on:navigate="{changePage}"
+    />
+  </TableContainer>
 </AdminPageLayout>
diff --git a/ui/src/pages/admin/User.svelte b/ui/src/pages/admin/User.svelte
index 407290aa..94fa013b 100644
--- a/ui/src/pages/admin/User.svelte
+++ b/ui/src/pages/admin/User.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import VerifiedIcon from '../../components/icons/VerifiedIcon.svelte';
-  import Pagination from '../../components/global/Pagination.svelte';
   import UpdatePasswordForm from '../../components/user/UpdatePasswordForm.svelte';
   import UserAvatar from '../../components/user/UserAvatar.svelte';
   import CountryFlag from '../../components/user/CountryFlag.svelte';
@@ -10,13 +9,16 @@
   import LL from '../../i18n/i18n-svelte';
   import { AppConfig, appRoutes } from '../../config';
   import { validateUserIsAdmin } from '../../validationUtils';
-  import Table from '../../components/global/table/Table.svelte';
-  import HeadCol from '../../components/global/table/HeadCol.svelte';
-  import TableRow from '../../components/global/table/TableRow.svelte';
-  import RowCol from '../../components/global/table/RowCol.svelte';
-  import AdminPageLayout from '../../components/global/AdminPageLayout.svelte';
+  import Table from '../../components/table/Table.svelte';
+  import HeadCol from '../../components/table/HeadCol.svelte';
+  import TableRow from '../../components/table/TableRow.svelte';
+  import RowCol from '../../components/table/RowCol.svelte';
+  import AdminPageLayout from '../../components/AdminPageLayout.svelte';
   import SolidButton from '../../components/global/SolidButton.svelte';
   import HollowButton from '../../components/global/HollowButton.svelte';
+  import TableContainer from '../../components/table/TableContainer.svelte';
+  import TableNav from '../../components/table/TableNav.svelte';
+  import TableFooter from '../../components/table/TableFooter.svelte';
 
   export let xfetch;
   export let router;
@@ -179,25 +181,13 @@
 </svelte:head>
 
 <AdminPageLayout activePage="users">
-  <div class="w-full">
-    <div class="flex px-4 md:px-6">
-      <div class="flex-1">
-        <h1
-          class="text-3xl md:text-4xl font-semibold font-rajdhani dark:text-white"
-        >
-          {userDetails.name}
-        </h1>
-      </div>
-      <div class="flex-1 text-right">
+  <div class="mb-6 lg:mb-8">
+    <TableContainer>
+      <TableNav title="{userDetails.name}" createBtnEnabled="{false}">
         <SolidButton onClick="{toggleUpdatePassword}"
           >{$LL.updatePassword()}</SolidButton
         >
-      </div>
-    </div>
-  </div>
-
-  <div class="w-full">
-    <div class="p-4 md:p-6">
+      </TableNav>
       <Table>
         <tr slot="header">
           <HeadCol />
@@ -270,16 +260,16 @@
           </TableRow>
         </tbody>
       </Table>
-    </div>
-
-    {#if FeaturePoker}
-      <div class="p-4 md:p-6">
-        <h4
-          class="text-2xl md:text-3xl font-semibold font-rajdhani uppercase mb-4 text-center dark:text-white"
-        >
-          {$LL.battles({ friendly: AppConfig.FriendlyUIVerbs })}
-        </h4>
+    </TableContainer>
+  </div>
 
+  {#if FeaturePoker}
+    <div class="mb-6 lg:mb-8">
+      <TableContainer>
+        <TableNav
+          title="{$LL.battles({ friendly: AppConfig.FriendlyUIVerbs })}"
+          createBtnEnabled="{false}"
+        />
         <Table>
           <tr slot="header">
             <HeadCol>
@@ -322,28 +312,20 @@
             {/each}
           </tbody>
         </Table>
+        <TableFooter
+          bind:current="{battlesPage}"
+          num_items="{battleCount}"
+          per_page="{battlesPageLimit}"
+          on:navigate="{changeBattlesPage}"
+        />
+      </TableContainer>
+    </div>
+  {/if}
 
-        {#if battleCount > battlesPageLimit}
-          <div class="pt-6 flex justify-center">
-            <Pagination
-              bind:current="{battlesPage}"
-              num_items="{battleCount}"
-              per_page="{battlesPageLimit}"
-              on:navigate="{changeBattlesPage}"
-            />
-          </div>
-        {/if}
-      </div>
-    {/if}
-
-    {#if FeatureRetro}
-      <div class="p-4 md:p-6">
-        <h4
-          class="text-2xl md:text-3xl font-semibold font-rajdhani uppercase mb-4 text-center dark:text-white"
-        >
-          {$LL.retros()}
-        </h4>
-
+  {#if FeatureRetro}
+    <div class="mb-6 lg:mb-8">
+      <TableContainer>
+        <TableNav title="{$LL.retros()}" createBtnEnabled="{false}" />
         <Table>
           <tr slot="header">
             <HeadCol>
@@ -384,28 +366,20 @@
             {/each}
           </tbody>
         </Table>
+        <TableFooter
+          bind:current="{retrosPage}"
+          num_items="{retroCount}"
+          per_page="{retrosPageLimit}"
+          on:navigate="{changeRetrosPage}"
+        />
+      </TableContainer>
+    </div>
+  {/if}
 
-        {#if retroCount > retrosPageLimit}
-          <div class="pt-6 flex justify-center">
-            <Pagination
-              bind:current="{retrosPage}"
-              num_items="{retroCount}"
-              per_page="{retrosPageLimit}"
-              on:navigate="{changeRetrosPage}"
-            />
-          </div>
-        {/if}
-      </div>
-    {/if}
-
-    {#if FeatureStoryboard}
-      <div class="p-4 md:p-6">
-        <h4
-          class="text-2xl md:text-3xl font-semibold font-rajdhani uppercase mb-4 text-center dark:text-white"
-        >
-          {$LL.storyboards()}
-        </h4>
-
+  {#if FeatureStoryboard}
+    <div class="mb-6 lg:mb-8">
+      <TableContainer>
+        <TableNav title="{$LL.storyboards()}" createBtnEnabled="{false}" />
         <Table>
           <tr slot="header">
             <HeadCol>
@@ -446,20 +420,15 @@
             {/each}
           </tbody>
         </Table>
-
-        {#if storyboardCount > storyboardsPageLimit}
-          <div class="pt-6 flex justify-center">
-            <Pagination
-              bind:current="{storyboardsPage}"
-              num_items="{storyboardCount}"
-              per_page="{storyboardsPageLimit}"
-              on:navigate="{changeStoryboardsPage}"
-            />
-          </div>
-        {/if}
-      </div>
-    {/if}
-  </div>
+        <TableFooter
+          bind:current="{storyboardsPage}"
+          num_items="{storyboardCount}"
+          per_page="{storyboardsPageLimit}"
+          on:navigate="{changeStoryboardsPage}"
+        />
+      </TableContainer>
+    </div>
+  {/if}
 
   {#if showUpdatePassword}
     <Modal closeModal="{toggleUpdatePassword}">
diff --git a/ui/src/pages/admin/Users.svelte b/ui/src/pages/admin/Users.svelte
index 743d7bf3..94efd82b 100644
--- a/ui/src/pages/admin/Users.svelte
+++ b/ui/src/pages/admin/Users.svelte
@@ -1,24 +1,26 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import HollowButton from '../../components/global/HollowButton.svelte';
-  import SolidButton from '../../components/global/SolidButton.svelte';
   import { user } from '../../stores';
   import LL from '../../i18n/i18n-svelte';
   import { AppConfig, appRoutes } from '../../config';
   import { validateUserIsAdmin } from '../../validationUtils';
-  import Table from '../../components/global/table/Table.svelte';
-  import HeadCol from '../../components/global/table/HeadCol.svelte';
-  import AdminPageLayout from '../../components/global/AdminPageLayout.svelte';
-  import TableRow from '../../components/global/table/TableRow.svelte';
-  import RowCol from '../../components/global/table/RowCol.svelte';
+  import Table from '../../components/table/Table.svelte';
+  import HeadCol from '../../components/table/HeadCol.svelte';
+  import AdminPageLayout from '../../components/AdminPageLayout.svelte';
+  import TableRow from '../../components/table/TableRow.svelte';
+  import RowCol from '../../components/table/RowCol.svelte';
   import UserAvatar from '../../components/user/UserAvatar.svelte';
   import CountryFlag from '../../components/user/CountryFlag.svelte';
   import VerifiedIcon from '../../components/icons/VerifiedIcon.svelte';
-  import Pagination from '../../components/global/Pagination.svelte';
   import ProfileForm from '../../components/user/ProfileForm.svelte';
   import Modal from '../../components/global/Modal.svelte';
   import DeleteConfirmation from '../../components/global/DeleteConfirmation.svelte';
   import CreateUser from '../../components/user/CreateUser.svelte';
+  import TableContainer from '../../components/table/TableContainer.svelte';
+  import TableNav from '../../components/table/TableNav.svelte';
+  import TableFooter from '../../components/table/TableFooter.svelte';
+  import CrudActions from '../../components/table/CrudActions.svelte';
 
   export let xfetch;
   export let router;
@@ -192,9 +194,8 @@
       });
   }
 
-  function onSearchSubmit(evt) {
-    evt.preventDefault();
-
+  function onSearchSubmit(term) {
+    searchEmail = term;
     usersPage = 1;
     getUsers();
   }
@@ -223,56 +224,18 @@
 </svelte:head>
 
 <AdminPageLayout activePage="users">
-  <div class="text-center px-2 mb-4">
-    <h1
-      class="text-3xl md:text-4xl font-semibold font-rajdhani uppercase dark:text-white"
-    >
-      {$LL.users()}
-    </h1>
-  </div>
-
-  <div class="w-full">
-    <div class="flex w-full">
-      <div class="w-2/5">
-        <h2 class="text-2xl md:text-3xl font-bold mb-4 dark:text-white">
-          {$LL.registeredUsers()}
-        </h2>
-      </div>
-      <div class="w-3/5">
-        <div class="text-right flex w-full">
-          <div class="w-3/4">
-            <form on:submit="{onSearchSubmit}" name="searchUsers">
-              <div class="mb-4">
-                <label class="mb-2" for="searchEmail">
-                  <input
-                    bind:value="{searchEmail}"
-                    placeholder="{$LL.email()}"
-                    class="border-2 border-slate-100 dark:border-gray-800 bg-gray-300 dark:bg-gray-800
-                        appearance-none
-                        rounded py-2 px-3 text-gray-600 dark:text-gray-400 leading-tight
-                        focus:outline-none focus:bg-white dark:focus:bg-gray-700 focus:border-indigo-500
-                        focus:caret-indigo-500 dark:focus:border-yellow-400 dark:focus:caret-yellow-400"
-                    id="searchEmail"
-                    name="searchEmail"
-                  />
-                </label>
-                <SolidButton type="submit">
-                  {$LL.search()}
-                </SolidButton>
-              </div>
-            </form>
-          </div>
-          <div class="w-1/4">
-            <HollowButton onClick="{toggleCreateUser}">
-              {$LL.warriorCreate({
-                friendly: AppConfig.FriendlyUIVerbs,
-              })}
-            </HollowButton>
-          </div>
-        </div>
-      </div>
-    </div>
-
+  <TableContainer>
+    <TableNav
+      title="{$LL.registeredUsers()}"
+      createBtnText="{$LL.warriorCreate({
+        friendly: AppConfig.FriendlyUIVerbs,
+      })}"
+      createButtonHandler="{toggleCreateUser}"
+      createBtnTestId="user-create"
+      searchEnabled="{true}"
+      searchPlaceholder="{$LL.email()}"
+      searchHandler="{onSearchSubmit}"
+    />
     <Table>
       <tr slot="header">
         <HeadCol>
@@ -346,47 +309,41 @@
               <span class="text-gray-500 dark:text-gray-300">{user.rank}</span>
             </RowCol>
             <RowCol type="action">
-              {#if user.rank !== 'ADMIN'}
-                <HollowButton onClick="{promoteUser(user.id)}" color="blue">
-                  {$LL.promote()}
-                </HollowButton>
-              {:else}
-                <HollowButton onClick="{demoteUser(user.id)}" color="blue">
-                  {$LL.demote()}
-                </HollowButton>
-              {/if}
-              {#if !user.disabled}
-                <HollowButton onClick="{disableUser(user.id)}" color="orange">
-                  Disable
-                </HollowButton>
-              {:else}
-                <HollowButton onClick="{enableUser(user.id)}" color="teal">
-                  Enable
-                </HollowButton>
-              {/if}
-              <HollowButton color="green" onClick="{toggleUserEdit(user)}">
-                {$LL.edit()}
-              </HollowButton>
-              <HollowButton color="red" onClick="{toggleDeleteUser(user.id)}">
-                {$LL.delete()}
-              </HollowButton>
+              <CrudActions
+                editBtnClickHandler="{toggleUserEdit(user)}"
+                deleteBtnClickHandler="{toggleDeleteUser(user.id)}"
+              >
+                {#if user.rank !== 'ADMIN'}
+                  <HollowButton onClick="{promoteUser(user.id)}" color="blue">
+                    {$LL.promote()}
+                  </HollowButton>
+                {:else}
+                  <HollowButton onClick="{demoteUser(user.id)}" color="blue">
+                    {$LL.demote()}
+                  </HollowButton>
+                {/if}
+                {#if !user.disabled}
+                  <HollowButton onClick="{disableUser(user.id)}" color="orange">
+                    Disable
+                  </HollowButton>
+                {:else}
+                  <HollowButton onClick="{enableUser(user.id)}" color="teal">
+                    Enable
+                  </HollowButton>
+                {/if}
+              </CrudActions>
             </RowCol>
           </TableRow>
         {/each}
       </tbody>
     </Table>
-
-    {#if totalUsers > usersPageLimit}
-      <div class="pt-6 flex justify-center">
-        <Pagination
-          bind:current="{usersPage}"
-          num_items="{totalUsers}"
-          per_page="{usersPageLimit}"
-          on:navigate="{changePage}"
-        />
-      </div>
-    {/if}
-  </div>
+    <TableFooter
+      bind:current="{usersPage}"
+      num_items="{totalUsers}"
+      per_page="{usersPageLimit}"
+      on:navigate="{changePage}"
+    />
+  </TableContainer>
 
   {#if showCreateUser}
     <CreateUser
diff --git a/ui/src/pages/poker/PokerGame.svelte b/ui/src/pages/poker/PokerGame.svelte
index 249662b9..35561ed2 100644
--- a/ui/src/pages/poker/PokerGame.svelte
+++ b/ui/src/pages/poker/PokerGame.svelte
@@ -2,7 +2,7 @@
   import { onDestroy, onMount } from 'svelte';
   import Sockette from 'sockette';
 
-  import PageLayout from '../../components/global/PageLayout.svelte';
+  import PageLayout from '../../components/PageLayout.svelte';
   import PointCard from '../../components/poker/PointCard.svelte';
   import PokerStories from '../../components/poker/PokerStories.svelte';
   import VoteResults from '../../components/poker/VoteResults.svelte';
diff --git a/ui/src/pages/poker/PokerGames.svelte b/ui/src/pages/poker/PokerGames.svelte
index 9447b19c..b80a587e 100644
--- a/ui/src/pages/poker/PokerGames.svelte
+++ b/ui/src/pages/poker/PokerGames.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
 
-  import PageLayout from '../../components/global/PageLayout.svelte';
+  import PageLayout from '../../components/PageLayout.svelte';
   import CreateBattle from '../../components/poker/CreatePokerGame.svelte';
   import { user } from '../../stores';
   import LL from '../../i18n/i18n-svelte';
diff --git a/ui/src/pages/retro/Retro.svelte b/ui/src/pages/retro/Retro.svelte
index e1bf281b..38f66d8a 100644
--- a/ui/src/pages/retro/Retro.svelte
+++ b/ui/src/pages/retro/Retro.svelte
@@ -22,7 +22,7 @@
   import CheckboxIcon from '../../components/icons/CheckboxIcon.svelte';
   import UserCard from '../../components/retro/UserCard.svelte';
   import InviteUser from '../../components/retro/InviteUser.svelte';
-  import PageLayout from '../../components/global/PageLayout.svelte';
+  import PageLayout from '../../components/PageLayout.svelte';
   import UserAvatar from '../../components/user/UserAvatar.svelte';
   import TextInput from '../../components/global/TextInput.svelte';
 
diff --git a/ui/src/pages/retro/Retros.svelte b/ui/src/pages/retro/Retros.svelte
index 990cef85..6d7c3c5a 100644
--- a/ui/src/pages/retro/Retros.svelte
+++ b/ui/src/pages/retro/Retros.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
 
-  import PageLayout from '../../components/global/PageLayout.svelte';
+  import PageLayout from '../../components/PageLayout.svelte';
   import CreateRetro from '../../components/retro/CreateRetro.svelte';
   import { user } from '../../stores';
   import { appRoutes } from '../../config';
diff --git a/ui/src/pages/storyboard/Storyboard.svelte b/ui/src/pages/storyboard/Storyboard.svelte
index 158138d8..d24fd91a 100644
--- a/ui/src/pages/storyboard/Storyboard.svelte
+++ b/ui/src/pages/storyboard/Storyboard.svelte
@@ -23,7 +23,7 @@
   import UsersIcon from '../../components/icons/UsersIcon.svelte';
   import EditIcon from '../../components/icons/EditIcon.svelte';
   import CommentIcon from '../../components/icons/CommentIcon.svelte';
-  import PageLayout from '../../components/global/PageLayout.svelte';
+  import PageLayout from '../../components/PageLayout.svelte';
   import GoalEstimate from '../../components/storyboard/GoalEstimate.svelte';
   import TextInput from '../../components/global/TextInput.svelte';
 
diff --git a/ui/src/pages/storyboard/Storyboards.svelte b/ui/src/pages/storyboard/Storyboards.svelte
index 3a3981b2..99ec54b1 100644
--- a/ui/src/pages/storyboard/Storyboards.svelte
+++ b/ui/src/pages/storyboard/Storyboards.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
 
-  import PageLayout from '../../components/global/PageLayout.svelte';
+  import PageLayout from '../../components/PageLayout.svelte';
   import { user } from '../../stores';
   import { appRoutes } from '../../config';
   import LL from '../../i18n/i18n-svelte';
diff --git a/ui/src/pages/support/PrivacyPolicy.svelte b/ui/src/pages/support/PrivacyPolicy.svelte
index 00ab2bcd..562c69e9 100644
--- a/ui/src/pages/support/PrivacyPolicy.svelte
+++ b/ui/src/pages/support/PrivacyPolicy.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import PageLayout from '../../components/global/PageLayout.svelte';
+  import PageLayout from '../../components/PageLayout.svelte';
   import LL from '../../i18n/i18n-svelte';
 </script>
 
diff --git a/ui/src/pages/support/Support.svelte b/ui/src/pages/support/Support.svelte
index b5e4d1b8..ffb6fb31 100644
--- a/ui/src/pages/support/Support.svelte
+++ b/ui/src/pages/support/Support.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import PageLayout from '../../components/global/PageLayout.svelte';
+  import PageLayout from '../../components/PageLayout.svelte';
   import GithubIcon from '../../components/icons/Github.svelte';
   import LL from '../../i18n/i18n-svelte';
   import { AppConfig } from '../../config';
diff --git a/ui/src/pages/support/TermsConditions.svelte b/ui/src/pages/support/TermsConditions.svelte
index 2366a6d4..30abf07c 100644
--- a/ui/src/pages/support/TermsConditions.svelte
+++ b/ui/src/pages/support/TermsConditions.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import PageLayout from '../../components/global/PageLayout.svelte';
+  import PageLayout from '../../components/PageLayout.svelte';
   import LL from '../../i18n/i18n-svelte';
 </script>
 
diff --git a/ui/src/pages/team/Department.svelte b/ui/src/pages/team/Department.svelte
index a47ce009..ebc0b153 100644
--- a/ui/src/pages/team/Department.svelte
+++ b/ui/src/pages/team/Department.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
 
-  import PageLayout from '../../components/global/PageLayout.svelte';
-  import HollowButton from '../../components/global/HollowButton.svelte';
-  import SolidButton from '../../components/global/SolidButton.svelte';
+  import PageLayout from '../../components/PageLayout.svelte';
   import CreateTeam from '../../components/team/CreateTeam.svelte';
   import DeleteConfirmation from '../../components/global/DeleteConfirmation.svelte';
   import ChevronRight from '../../components/icons/ChevronRight.svelte';
@@ -11,11 +9,14 @@
   import LL from '../../i18n/i18n-svelte';
   import { appRoutes } from '../../config';
   import { validateUserIsRegistered } from '../../validationUtils';
-  import RowCol from '../../components/global/table/RowCol.svelte';
-  import TableRow from '../../components/global/table/TableRow.svelte';
-  import HeadCol from '../../components/global/table/HeadCol.svelte';
-  import Table from '../../components/global/table/Table.svelte';
+  import RowCol from '../../components/table/RowCol.svelte';
+  import TableRow from '../../components/table/TableRow.svelte';
+  import HeadCol from '../../components/table/HeadCol.svelte';
+  import Table from '../../components/table/Table.svelte';
   import UsersList from '../../components/team/UsersList.svelte';
+  import TableContainer from '../../components/table/TableContainer.svelte';
+  import TableNav from '../../components/table/TableNav.svelte';
+  import CrudActions from '../../components/table/CrudActions.svelte';
 
   export let xfetch;
   export let router;
@@ -174,26 +175,14 @@
   </div>
 
   <div class="w-full mb-6 lg:mb-8">
-    <div class="flex w-full">
-      <div class="w-4/5">
-        <h2
-          class="text-2xl font-semibold font-rajdhani uppercase mb-4 dark:text-white"
-        >
-          {$LL.teams()}
-        </h2>
-      </div>
-      <div class="w-1/5">
-        <div class="text-right">
-          {#if isAdmin}
-            <SolidButton onClick="{toggleCreateTeam}">
-              {$LL.teamCreate()}
-            </SolidButton>
-          {/if}
-        </div>
-      </div>
-    </div>
-
-    <div class="w-full">
+    <TableContainer>
+      <TableNav
+        title="{$LL.teams()}"
+        createBtnEnabled="{isAdmin}"
+        createBtnText="{$LL.teamCreate()}"
+        createButtonHandler="{toggleCreateTeam}"
+        createBtnTestId="team-create"
+      />
       <Table>
         <tr slot="header">
           <HeadCol>
@@ -228,19 +217,17 @@
               </RowCol>
               <RowCol type="action">
                 {#if isAdmin}
-                  <HollowButton
-                    onClick="{toggleDeleteTeam(team.id)}"
-                    color="red"
-                  >
-                    {$LL.delete()}
-                  </HollowButton>
+                  <CrudActions
+                    editBtnEnabled="{false}"
+                    deleteBtnClickHandler="{toggleDeleteTeam(team.id)}"
+                  />
                 {/if}
               </RowCol>
             </TableRow>
           {/each}
         </tbody>
       </Table>
-    </div>
+    </TableContainer>
   </div>
 
   <UsersList
diff --git a/ui/src/pages/team/Organization.svelte b/ui/src/pages/team/Organization.svelte
index 57a6f630..e55ab2db 100644
--- a/ui/src/pages/team/Organization.svelte
+++ b/ui/src/pages/team/Organization.svelte
@@ -1,22 +1,24 @@
 <script lang="ts">
   import { onMount } from 'svelte';
 
-  import PageLayout from '../../components/global/PageLayout.svelte';
+  import PageLayout from '../../components/PageLayout.svelte';
   import HollowButton from '../../components/global/HollowButton.svelte';
-  import SolidButton from '../../components/global/SolidButton.svelte';
   import { user } from '../../stores';
   import LL from '../../i18n/i18n-svelte';
   import { appRoutes } from '../../config';
   import { validateUserIsRegistered } from '../../validationUtils';
-  import RowCol from '../../components/global/table/RowCol.svelte';
-  import TableRow from '../../components/global/table/TableRow.svelte';
-  import HeadCol from '../../components/global/table/HeadCol.svelte';
-  import Table from '../../components/global/table/Table.svelte';
+  import RowCol from '../../components/table/RowCol.svelte';
+  import TableRow from '../../components/table/TableRow.svelte';
+  import HeadCol from '../../components/table/HeadCol.svelte';
+  import Table from '../../components/table/Table.svelte';
   import ChevronRight from '../../components/icons/ChevronRight.svelte';
   import CreateDepartment from '../../components/team/CreateDepartment.svelte';
   import CreateTeam from '../../components/team/CreateTeam.svelte';
   import DeleteConfirmation from '../../components/global/DeleteConfirmation.svelte';
   import UsersList from '../../components/team/UsersList.svelte';
+  import TableContainer from '../../components/table/TableContainer.svelte';
+  import TableNav from '../../components/table/TableNav.svelte';
+  import CrudActions from '../../components/table/CrudActions.svelte';
 
   export let xfetch;
   export let router;
@@ -240,26 +242,14 @@
   </h1>
 
   <div class="w-full mb-6 lg:mb-8">
-    <div class="flex w-full">
-      <div class="w-4/5">
-        <h2
-          class="text-2xl font-semibold font-rajdhani uppercase mb-4 dark:text-white"
-        >
-          {$LL.departments()}
-        </h2>
-      </div>
-      <div class="w-1/5">
-        <div class="text-right">
-          {#if isAdmin}
-            <SolidButton onClick="{toggleCreateDepartment}">
-              {$LL.departmentCreate()}
-            </SolidButton>
-          {/if}
-        </div>
-      </div>
-    </div>
-
-    <div class="w-full">
+    <TableContainer>
+      <TableNav
+        title="{$LL.departments()}"
+        createBtnEnabled="{isAdmin}"
+        createBtnText="{$LL.departmentCreate()}"
+        createButtonHandler="{toggleCreateDepartment}"
+        createBtnTestId="department-create"
+      />
       <Table>
         <tr slot="header">
           <HeadCol>
@@ -294,42 +284,30 @@
               </RowCol>
               <RowCol type="action">
                 {#if isAdmin}
-                  <HollowButton
-                    onClick="{toggleDeleteDepartment(department.id)}"
-                    color="red"
-                  >
-                    {$LL.delete()}
-                  </HollowButton>
+                  <CrudActions
+                    editBtnEnabled="{false}"
+                    deleteBtnClickHandler="{toggleDeleteDepartment(
+                      department.id,
+                    )}"
+                  />
                 {/if}
               </RowCol>
             </TableRow>
           {/each}
         </tbody>
       </Table>
-    </div>
+    </TableContainer>
   </div>
 
   <div class="w-full mb-6 lg:mb-8">
-    <div class="flex w-full">
-      <div class="w-4/5">
-        <h2
-          class="text-2xl font-semibold font-rajdhani uppercase mb-4 dark:text-white"
-        >
-          {$LL.teams()}
-        </h2>
-      </div>
-      <div class="w-1/5">
-        <div class="text-right">
-          {#if isAdmin}
-            <SolidButton onClick="{toggleCreateTeam}">
-              {$LL.teamCreate()}
-            </SolidButton>
-          {/if}
-        </div>
-      </div>
-    </div>
-
-    <div class="w-full">
+    <TableContainer>
+      <TableNav
+        title="{$LL.teams()}"
+        createBtnEnabled="{isAdmin}"
+        createBtnText="{$LL.teamCreate()}"
+        createButtonHandler="{toggleCreateTeam}"
+        createBtnTestId="team-create"
+      />
       <Table>
         <tr slot="header">
           <HeadCol>
@@ -364,19 +342,17 @@
               </RowCol>
               <RowCol type="action">
                 {#if isAdmin}
-                  <HollowButton
-                    onClick="{toggleDeleteTeam(team.id)}"
-                    color="red"
-                  >
-                    {$LL.delete()}
-                  </HollowButton>
+                  <CrudActions
+                    editBtnEnabled="{false}"
+                    deleteBtnClickHandler="{toggleDeleteTeam(team.id)}"
+                  />
                 {/if}
               </RowCol>
             </TableRow>
           {/each}
         </tbody>
       </Table>
-    </div>
+    </TableContainer>
   </div>
 
   <UsersList
diff --git a/ui/src/pages/team/Team.svelte b/ui/src/pages/team/Team.svelte
index a6ef8d65..ad3bf113 100644
--- a/ui/src/pages/team/Team.svelte
+++ b/ui/src/pages/team/Team.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
 
-  import PageLayout from '../../components/global/PageLayout.svelte';
+  import PageLayout from '../../components/PageLayout.svelte';
   import HollowButton from '../../components/global/HollowButton.svelte';
   import DeleteConfirmation from '../../components/global/DeleteConfirmation.svelte';
   import ChevronRight from '../../components/icons/ChevronRight.svelte';
@@ -14,18 +14,21 @@
   import LL from '../../i18n/i18n-svelte';
   import { AppConfig, appRoutes } from '../../config';
   import { validateUserIsRegistered } from '../../validationUtils';
-  import Table from '../../components/global/table/Table.svelte';
-  import HeadCol from '../../components/global/table/HeadCol.svelte';
-  import TableRow from '../../components/global/table/TableRow.svelte';
-  import RowCol from '../../components/global/table/RowCol.svelte';
+  import Table from '../../components/table/Table.svelte';
+  import HeadCol from '../../components/table/HeadCol.svelte';
+  import TableRow from '../../components/table/TableRow.svelte';
+  import RowCol from '../../components/table/RowCol.svelte';
   import Modal from '../../components/global/Modal.svelte';
-  import Pagination from '../../components/global/Pagination.svelte';
   import EditActionItem from '../../components/retro/EditActionItem.svelte';
   import SolidButton from '../../components/global/SolidButton.svelte';
   import CheckboxIcon from '../../components/icons/CheckboxIcon.svelte';
   import CommentIcon from '../../components/icons/CommentIcon.svelte';
   import BoxList from '../../components/BoxList.svelte';
   import UsersList from '../../components/team/UsersList.svelte';
+  import TableContainer from '../../components/table/TableContainer.svelte';
+  import TableNav from '../../components/table/TableNav.svelte';
+  import TableFooter from '../../components/table/TableFooter.svelte';
+  import CrudActions from '../../components/table/CrudActions.svelte';
 
   export let xfetch;
   export let router;
@@ -599,112 +602,101 @@
 
       {#if retros.length}
         <div class="w-full pt-4 px-4">
-          <div class="w-full">
-            <h3
-              class="text-xl font-semibold font-rajdhani uppercase mb-4 dark:text-white"
+          <TableContainer>
+            <TableNav
+              title="{$LL.retroActionItems()}"
+              createBtnEnabled="{false}"
             >
-              {$LL.retroActionItems()}
-            </h3>
-
-            <div class="text-right mb-4">
-              <div
-                class="relative inline-block w-10 me-2 align-middle select-none transition duration-200 ease-in"
-              >
+              <label class="inline-flex items-center cursor-pointer">
                 <input
                   type="checkbox"
+                  class="sr-only peer"
                   name="completedActionItems"
                   id="completedActionItems"
                   bind:checked="{completedActionItems}"
                   on:change="{changeRetroActionCompletedToggle}"
-                  class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"
                 />
-                <label
-                  for="completedActionItems"
-                  class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"
+                <div
+                  class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+                ></div>
+                <span
+                  class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300"
                 >
-                </label>
-              </div>
-              <label for="completedActionItems" class="dark:text-gray-300"
-                >{$LL.showCompletedActionItems()}</label
-              >
-            </div>
-          </div>
-
-          <Table>
-            <tr slot="header">
-              <HeadCol>{$LL.actionItem()}</HeadCol>
-              <HeadCol>{$LL.completed()}</HeadCol>
-              <HeadCol>{$LL.comments()}</HeadCol>
-              <HeadCol />
-            </tr>
-            <tbody slot="body" let:class="{className}" class="{className}">
-              {#each retroActions as item, i}
-                <TableRow itemIndex="{i}">
-                  <RowCol>
-                    <div class="whitespace-pre-wrap">
-                      {#each item.assignees as assignee}
-                        <UserAvatar
-                          warriorId="{assignee.id}"
-                          gravatarHash="{assignee.gravatarHash}"
-                          avatar="{assignee.avatar}"
-                          userName="{assignee.name}"
-                          width="24"
-                          class="inline-block me-2"
-                        />
-                      {/each}{item.content}
-                    </div>
-                  </RowCol>
-                  <RowCol>
-                    <input
-                      type="checkbox"
-                      id="{i}Completed"
-                      checked="{item.completed}"
-                      class="opacity-0 absolute h-6 w-6"
-                      disabled
-                    />
-                    <div
-                      class="bg-white dark:bg-gray-800 border-2 rounded-md
+                  {$LL.showCompletedActionItems()}
+                </span>
+              </label>
+            </TableNav>
+            <Table>
+              <tr slot="header">
+                <HeadCol>{$LL.actionItem()}</HeadCol>
+                <HeadCol>{$LL.completed()}</HeadCol>
+                <HeadCol>{$LL.comments()}</HeadCol>
+                <HeadCol />
+              </tr>
+              <tbody slot="body" let:class="{className}" class="{className}">
+                {#each retroActions as item, i}
+                  <TableRow itemIndex="{i}">
+                    <RowCol>
+                      <div class="whitespace-pre-wrap">
+                        {#each item.assignees as assignee}
+                          <UserAvatar
+                            warriorId="{assignee.id}"
+                            gravatarHash="{assignee.gravatarHash}"
+                            avatar="{assignee.avatar}"
+                            userName="{assignee.name}"
+                            width="24"
+                            class="inline-block me-2"
+                          />
+                        {/each}{item.content}
+                      </div>
+                    </RowCol>
+                    <RowCol>
+                      <input
+                        type="checkbox"
+                        id="{i}Completed"
+                        checked="{item.completed}"
+                        class="opacity-0 absolute h-6 w-6"
+                        disabled
+                      />
+                      <div
+                        class="bg-white dark:bg-gray-800 border-2 rounded-md
                                             border-gray-400 dark:border-gray-300 w-6 h-6 flex flex-shrink-0
                                             justify-center items-center me-2
                                             focus-within:border-blue-500 dark:focus-within:border-sky-500"
-                    >
-                      <CheckboxIcon />
-                    </div>
-                    <label for="{i}Completed" class="select-none"></label>
-                  </RowCol>
-                  <RowCol>
-                    <CommentIcon width="22" height="22" />
-                    <button
-                      class="text-lg text-blue-400 dark:text-sky-400"
-                      on:click="{toggleRetroActionComments(item.id)}"
-                    >
-                      &nbsp;{item.comments.length}
-                    </button>
-                  </RowCol>
-                  <RowCol>
-                    <div class="text-right">
-                      <HollowButton
-                        color="teal"
-                        onClick="{toggleRetroActionEdit(item.retroId, item.id)}"
-                        >{$LL.edit()}
-                      </HollowButton>
-                    </div>
-                  </RowCol>
-                </TableRow>
-              {/each}
-            </tbody>
-          </Table>
-
-          {#if totalRetroActions > retroActionsPageLimit}
-            <div class="pt-6 flex justify-center">
-              <Pagination
-                bind:current="{retroActionsPage}"
-                num_items="{totalRetroActions}"
-                per_page="{retroActionsPageLimit}"
-                on:navigate="{changeRetroActionPage}"
-              />
-            </div>
-          {/if}
+                      >
+                        <CheckboxIcon />
+                      </div>
+                      <label for="{i}Completed" class="select-none"></label>
+                    </RowCol>
+                    <RowCol>
+                      <CommentIcon width="22" height="22" />
+                      <button
+                        class="text-lg text-blue-400 dark:text-sky-400"
+                        on:click="{toggleRetroActionComments(item.id)}"
+                      >
+                        &nbsp;{item.comments.length}
+                      </button>
+                    </RowCol>
+                    <RowCol type="action">
+                      <CrudActions
+                        editBtnClickHandler="{toggleRetroActionEdit(
+                          item.retroId,
+                          item.id,
+                        )}"
+                        deleteBtnEnabled="{false}"
+                      />
+                    </RowCol>
+                  </TableRow>
+                {/each}
+              </tbody>
+            </Table>
+            <TableFooter
+              bind:current="{retroActionsPage}"
+              num_items="{totalRetroActions}"
+              per_page="{retroActionsPageLimit}"
+              on:navigate="{changeRetroActionPage}"
+            />
+          </TableContainer>
         </div>
       {/if}
     </div>
@@ -769,60 +761,42 @@
 
   {#if isAdmin}
     <div class="w-full mb-6 lg:mb-8">
-      <div class="flex w-full">
-        <div class="flex-1">
-          <h2
-            class="text-2xl font-semibold font-rajdhani uppercase mb-4 dark:text-white"
-          >
-            {$LL.userInvites()}
-          </h2>
-        </div>
-        <!--            <div class="flex-1 text-right">-->
-        <!--                {#if isAdmin}-->
-        <!--                    <SolidButton onClick="{toggleInviteUser}"-->
-        <!--                    >Invite User-->
-        <!--                    </SolidButton>-->
-        <!--                {/if}-->
-        <!--            </div>-->
-      </div>
-
-      <Table>
-        <tr slot="header">
-          <HeadCol>{$LL.email()}</HeadCol>
-          <HeadCol>{$LL.role()}</HeadCol>
-          <HeadCol>{$LL.dateCreated()}</HeadCol>
-          <HeadCol>{$LL.expireDate()}</HeadCol>
-          <HeadCol />
-        </tr>
-        <tbody slot="body" let:class="{className}" class="{className}">
-          {#each invites as item, i}
-            <TableRow itemIndex="{i}">
-              <RowCol>
-                {item.email}
-              </RowCol>
-              <RowCol>
-                {item.role}
-              </RowCol>
-              <RowCol>
-                {new Date(item.created_date).toLocaleString()}
-              </RowCol>
-              <RowCol>
-                {new Date(item.expire_date).toLocaleString()}
-              </RowCol>
-              <RowCol>
-                <div class="text-right">
-                  <HollowButton
-                    onClick="{toggleDeleteInvite(item.invite_id)}"
-                    color="red"
-                  >
-                    {$LL.delete()}
-                  </HollowButton>
-                </div>
-              </RowCol>
-            </TableRow>
-          {/each}
-        </tbody>
-      </Table>
+      <TableContainer>
+        <TableNav title="{$LL.userInvites()}" createBtnEnabled="{false}" />
+        <Table>
+          <tr slot="header">
+            <HeadCol>{$LL.email()}</HeadCol>
+            <HeadCol>{$LL.role()}</HeadCol>
+            <HeadCol>{$LL.dateCreated()}</HeadCol>
+            <HeadCol>{$LL.expireDate()}</HeadCol>
+            <HeadCol />
+          </tr>
+          <tbody slot="body" let:class="{className}" class="{className}">
+            {#each invites as item, i}
+              <TableRow itemIndex="{i}">
+                <RowCol>
+                  {item.email}
+                </RowCol>
+                <RowCol>
+                  {item.role}
+                </RowCol>
+                <RowCol>
+                  {new Date(item.created_date).toLocaleString()}
+                </RowCol>
+                <RowCol>
+                  {new Date(item.expire_date).toLocaleString()}
+                </RowCol>
+                <RowCol type="action">
+                  <CrudActions
+                    editBtnEnabled="{false}"
+                    deleteBtnClickHandler="{toggleDeleteInvite(item.invite_id)}"
+                  />
+                </RowCol>
+              </TableRow>
+            {/each}
+          </tbody>
+        </Table>
+      </TableContainer>
     </div>
   {/if}
 
diff --git a/ui/src/pages/team/TeamCheckin.svelte b/ui/src/pages/team/TeamCheckin.svelte
index 90a4019b..3b5e03be 100644
--- a/ui/src/pages/team/TeamCheckin.svelte
+++ b/ui/src/pages/team/TeamCheckin.svelte
@@ -2,7 +2,7 @@
   import { onDestroy, onMount } from 'svelte';
   import Sockette from 'sockette';
 
-  import PageLayout from '../../components/global/PageLayout.svelte';
+  import PageLayout from '../../components/PageLayout.svelte';
   import SolidButton from '../../components/global/SolidButton.svelte';
   import Checkin from '../../components/checkin/Checkin.svelte';
   import ChevronRight from '../../components/icons/ChevronRight.svelte';
@@ -21,7 +21,7 @@
   import UserAvatar from '../../components/user/UserAvatar.svelte';
   import BlockedPing from '../../components/checkin/BlockedPing.svelte';
   import EditIcon from '../../components/icons/EditIcon.svelte';
-  import Picker from '../../components/global/timezone-picker/Picker.svelte';
+  import Picker from '../../components/timezone-picker/Picker.svelte';
 
   export let xfetch;
   export let router;
diff --git a/ui/src/pages/team/Teams.svelte b/ui/src/pages/team/Teams.svelte
index 67c2007e..673c2315 100644
--- a/ui/src/pages/team/Teams.svelte
+++ b/ui/src/pages/team/Teams.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
   import { onMount } from 'svelte';
 
-  import PageLayout from '../../components/global/PageLayout.svelte';
-  import SolidButton from '../../components/global/SolidButton.svelte';
+  import PageLayout from '../../components/PageLayout.svelte';
   import CreateOrganization from '../../components/team/CreateOrganization.svelte';
   import CreateTeam from '../../components/team/CreateTeam.svelte';
   import { user } from '../../stores';
   import LL from '../../i18n/i18n-svelte';
   import { AppConfig, appRoutes } from '../../config';
   import { validateUserIsRegistered } from '../../validationUtils';
-  import RowCol from '../../components/global/table/RowCol.svelte';
-  import TableRow from '../../components/global/table/TableRow.svelte';
-  import HeadCol from '../../components/global/table/HeadCol.svelte';
-  import Table from '../../components/global/table/Table.svelte';
+  import RowCol from '../../components/table/RowCol.svelte';
+  import TableRow from '../../components/table/TableRow.svelte';
+  import HeadCol from '../../components/table/HeadCol.svelte';
+  import Table from '../../components/table/Table.svelte';
+  import TableNav from '../../components/table/TableNav.svelte';
+  import TableContainer from '../../components/table/TableContainer.svelte';
 
   export let xfetch;
   export let router;
@@ -122,113 +123,91 @@
 <PageLayout>
   {#if OrganizationsEnabled}
     <div class="w-full mb-6 lg:mb-8">
-      <div class="flex w-full">
-        <div class="w-4/5">
-          <h2
-            class="text-2xl font-semibold font-rajdhani uppercase mb-4 dark:text-white"
-          >
-            {$LL.organizations()}
-          </h2>
-        </div>
-        <div class="w-1/5">
-          <div class="text-right">
-            <SolidButton onClick="{toggleCreateOrganization}">
-              {$LL.organizationCreate()}
-            </SolidButton>
-          </div>
-        </div>
-      </div>
-
-      <Table>
-        <tr slot="header">
-          <HeadCol>
-            {$LL.name()}
-          </HeadCol>
-          <HeadCol>
-            {$LL.dateCreated()}
-          </HeadCol>
-          <HeadCol>
-            {$LL.dateUpdated()}
-          </HeadCol>
-        </tr>
-        <tbody slot="body" let:class="{className}" class="{className}">
-          {#each organizations as organization, i}
-            <TableRow itemIndex="{i}">
-              <RowCol>
-                <a
-                  href="{appRoutes.organization}/{organization.id}"
-                  class="text-blue-500 hover:text-blue-800 dark:text-sky-400 dark:hover:text-sky-600"
-                >
-                  {organization.name}
-                </a>
-              </RowCol>
-              <RowCol>
-                {new Date(organization.createdDate).toLocaleString()}
-              </RowCol>
-              <RowCol>
-                {new Date(organization.updatedDate).toLocaleString()}
-              </RowCol>
-            </TableRow>
-          {/each}
-        </tbody>
-      </Table>
+      <TableContainer>
+        <TableNav
+          title="{$LL.organizations()}"
+          createBtnText="{$LL.organizationCreate()}"
+          createButtonHandler="{toggleCreateOrganization}"
+          createBtnTestId="organization-create"
+        />
+        <Table>
+          <tr slot="header">
+            <HeadCol>
+              {$LL.name()}
+            </HeadCol>
+            <HeadCol>
+              {$LL.dateCreated()}
+            </HeadCol>
+            <HeadCol>
+              {$LL.dateUpdated()}
+            </HeadCol>
+          </tr>
+          <tbody slot="body" let:class="{className}" class="{className}">
+            {#each organizations as organization, i}
+              <TableRow itemIndex="{i}">
+                <RowCol>
+                  <a
+                    href="{appRoutes.organization}/{organization.id}"
+                    class="text-blue-500 hover:text-blue-800 dark:text-sky-400 dark:hover:text-sky-600"
+                  >
+                    {organization.name}
+                  </a>
+                </RowCol>
+                <RowCol>
+                  {new Date(organization.createdDate).toLocaleString()}
+                </RowCol>
+                <RowCol>
+                  {new Date(organization.updatedDate).toLocaleString()}
+                </RowCol>
+              </TableRow>
+            {/each}
+          </tbody>
+        </Table>
+      </TableContainer>
     </div>
   {/if}
 
-  <div class="w-full">
-    <div class="flex w-full">
-      <div class="w-4/5">
-        <h2
-          class="text-2xl font-semibold font-rajdhani uppercase mb-4 dark:text-white"
-        >
-          {$LL.teams()}
-        </h2>
-      </div>
-      <div class="w-1/5">
-        <div class="text-right">
-          <SolidButton onClick="{toggleCreateTeam}">
-            {$LL.teamCreate()}
-          </SolidButton>
-        </div>
-      </div>
-    </div>
-
-    <div class="w-full">
-      <Table>
-        <tr slot="header">
-          <HeadCol>
-            {$LL.name()}
-          </HeadCol>
-          <HeadCol>
-            {$LL.dateCreated()}
-          </HeadCol>
-          <HeadCol>
-            {$LL.dateUpdated()}
-          </HeadCol>
-        </tr>
-        <tbody slot="body" let:class="{className}" class="{className}">
-          {#each teams as team, i}
-            <TableRow itemIndex="{i}">
-              <RowCol>
-                <a
-                  href="{appRoutes.team}/{team.id}"
-                  class="text-blue-500 hover:text-blue-800 dark:text-sky-400 dark:hover:text-sky-600"
-                >
-                  {team.name}
-                </a>
-              </RowCol>
-              <RowCol>
-                {new Date(team.createdDate).toLocaleString()}
-              </RowCol>
-              <RowCol>
-                {new Date(team.updatedDate).toLocaleString()}
-              </RowCol>
-            </TableRow>
-          {/each}
-        </tbody>
-      </Table>
-    </div>
-  </div>
+  <TableContainer>
+    <TableNav
+      title="{$LL.teams()}"
+      createBtnText="{$LL.teamCreate()}"
+      createButtonHandler="{toggleCreateTeam}"
+      createBtnTestId="team-create"
+    />
+    <Table>
+      <tr slot="header">
+        <HeadCol>
+          {$LL.name()}
+        </HeadCol>
+        <HeadCol>
+          {$LL.dateCreated()}
+        </HeadCol>
+        <HeadCol>
+          {$LL.dateUpdated()}
+        </HeadCol>
+      </tr>
+      <tbody slot="body" let:class="{className}" class="{className}">
+        {#each teams as team, i}
+          <TableRow itemIndex="{i}">
+            <RowCol>
+              <a
+                href="{appRoutes.team}/{team.id}"
+                class="text-blue-500 hover:text-blue-800 dark:text-sky-400 dark:hover:text-sky-600"
+              >
+                {team.name}
+              </a>
+            </RowCol>
+            <RowCol>
+              {new Date(team.createdDate).toLocaleString()}
+            </RowCol>
+            <RowCol>
+              {new Date(team.updatedDate).toLocaleString()}
+            </RowCol>
+          </TableRow>
+        {/each}
+      </tbody>
+    </Table>
+  </TableContainer>
 
   {#if showCreateOrganization}
     <CreateOrganization
diff --git a/ui/src/pages/user/Register.svelte b/ui/src/pages/user/Register.svelte
index 290341a9..24cd7b28 100644
--- a/ui/src/pages/user/Register.svelte
+++ b/ui/src/pages/user/Register.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import PageLayout from '../../components/global/PageLayout.svelte';
+  import PageLayout from '../../components/PageLayout.svelte';
   import { user } from '../../stores';
   import { validateName } from '../../validationUtils';
   import LL from '../../i18n/i18n-svelte';
diff --git a/ui/src/pages/user/ResetPassword.svelte b/ui/src/pages/user/ResetPassword.svelte
index aaa6c412..0558c8de 100644
--- a/ui/src/pages/user/ResetPassword.svelte
+++ b/ui/src/pages/user/ResetPassword.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import PageLayout from '../../components/global/PageLayout.svelte';
+  import PageLayout from '../../components/PageLayout.svelte';
   import SolidButton from '../../components/global/SolidButton.svelte';
   import { validatePasswords } from '../../validationUtils';
   import LL from '../../i18n/i18n-svelte';
diff --git a/ui/src/pages/user/UserProfile.svelte b/ui/src/pages/user/UserProfile.svelte
index 5dfd8c21..5c524ac5 100644
--- a/ui/src/pages/user/UserProfile.svelte
+++ b/ui/src/pages/user/UserProfile.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
 
-  import PageLayout from '../../components/global/PageLayout.svelte';
+  import PageLayout from '../../components/PageLayout.svelte';
   import UpdatePasswordForm from '../../components/user/UpdatePasswordForm.svelte';
   import HollowButton from '../../components/global/HollowButton.svelte';
   import CheckIcon from '../../components/icons/CheckIcon.svelte';
diff --git a/ui/src/pages/user/VerifyAccount.svelte b/ui/src/pages/user/VerifyAccount.svelte
index 1eb0b2d3..9a544616 100644
--- a/ui/src/pages/user/VerifyAccount.svelte
+++ b/ui/src/pages/user/VerifyAccount.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import PageLayout from '../../components/global/PageLayout.svelte';
+  import PageLayout from '../../components/PageLayout.svelte';
   import LL from '../../i18n/i18n-svelte';
 
   export let xfetch;