From 1a750e8279ce265895bdb45945ded75b6764d018 Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Sat, 12 Apr 2025 15:04:32 -0400
Subject: [PATCH] test new layout

---
 package-lock.json                             | 219 ++++++++--------
 package.json                                  |   4 +-
 .../access/AccessPageHeaderAndNav.tsx         |  29 +--
 .../invitations/InvitationsDataTable.tsx      |  86 +------
 .../settings/access/roles/RolesDataTable.tsx  | 146 +----------
 .../settings/access/roles/RolesTable.tsx      |   2 +-
 .../[orgId]/settings/access/roles/page.tsx    |  13 +-
 .../settings/access/users/UsersDataTable.tsx  | 144 +----------
 .../settings/access/users/[userId]/layout.tsx |  13 +-
 .../[orgId]/settings/access/users/page.tsx    |  17 +-
 src/app/[orgId]/settings/general/layout.tsx   |   8 +-
 src/app/[orgId]/settings/layout.tsx           |  46 ++--
 .../settings/resources/ResourcesDataTable.tsx | 150 ++---------
 .../settings/resources/ResourcesTable.tsx     |   2 +-
 .../resources/[resourceId]/layout.tsx         |  20 +-
 src/app/[orgId]/settings/resources/page.tsx   |   2 +-
 .../share-links/ShareLinksDataTable.tsx       | 150 ++---------
 .../settings/share-links/ShareLinksTable.tsx  |   2 +-
 src/app/[orgId]/settings/share-links/page.tsx |   2 +-
 .../[orgId]/settings/sites/SitesDataTable.tsx | 146 +----------
 src/app/[orgId]/settings/sites/SitesTable.tsx |  47 +---
 .../settings/sites/[niceId]/layout.tsx        |  37 +--
 src/app/[orgId]/settings/sites/page.tsx       |   2 +-
 src/app/admin/layout.tsx                      |  26 +-
 src/app/admin/users/AdminUsersDataTable.tsx   | 131 +---------
 src/app/layout.tsx                            |  71 +----
 src/components/Breadcrumbs.tsx                |  72 ++++++
 src/components/Header.tsx                     | 156 +----------
 src/components/HorizontalTabs.tsx             |  74 ++++++
 src/components/Layout.tsx                     | 107 ++++++++
 src/components/OrgSelector.tsx                | 124 +++++++++
 src/components/ProfileIcon.tsx                |  11 +-
 src/components/SidebarNav.tsx                 | 243 +++++-------------
 src/components/SupporterStatus.tsx            |   2 +-
 src/components/TopBar.tsx                     |  37 +++
 src/components/ui/data-table.tsx              | 148 +++++++++++
 src/components/ui/table.tsx                   | 122 ++++-----
 tsconfig.json                                 |   3 +-
 38 files changed, 992 insertions(+), 1622 deletions(-)
 create mode 100644 src/components/Breadcrumbs.tsx
 create mode 100644 src/components/HorizontalTabs.tsx
 create mode 100644 src/components/Layout.tsx
 create mode 100644 src/components/OrgSelector.tsx
 create mode 100644 src/components/TopBar.tsx
 create mode 100644 src/components/ui/data-table.tsx

diff --git a/package-lock.json b/package-lock.json
index d0bd1a47..20bc0462 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -90,8 +90,8 @@
                 "@types/js-yaml": "4.0.9",
                 "@types/node": "^22",
                 "@types/nodemailer": "6.4.17",
-                "@types/react": "19.0.2",
-                "@types/react-dom": "19.0.2",
+                "@types/react": "19.1.1",
+                "@types/react-dom": "19.1.2",
                 "@types/semver": "7.5.8",
                 "@types/swagger-ui-express": "^4.1.8",
                 "@types/ws": "8.5.13",
@@ -372,9 +372,9 @@
             }
         },
         "node_modules/@emnapi/core": {
-            "version": "1.4.0",
-            "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.0.tgz",
-            "integrity": "sha512-H+N/FqT07NmLmt6OFFtDfwe8PNygprzBikrEMyQfgqSmT0vzE515Pz7R8izwB9q/zsH/MA64AKoul3sA6/CzVg==",
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.1.tgz",
+            "integrity": "sha512-4JFstCTaToCFrPqrGzgkF8N2NHjtsaY4uRh6brZQ5L9e4wbMieX8oDT8N7qfVFTQecHFEtkj4ve49VIZ3mKVqw==",
             "license": "MIT",
             "optional": true,
             "dependencies": {
@@ -383,9 +383,9 @@
             }
         },
         "node_modules/@emnapi/runtime": {
-            "version": "1.4.0",
-            "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.0.tgz",
-            "integrity": "sha512-64WYIf4UYcdLnbKn/umDlNjQDSS8AgZrI/R9+x5ilkUVFxXcA1Ebl+gQLc/6mERA4407Xof0R7wEyEuj091CVw==",
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.1.tgz",
+            "integrity": "sha512-LMshMVP0ZhACNjQNYXiU1iZJ6QCcv0lUdPDPugqGvCGXt5xtRVBPdtA0qU12pEXZzpWAhWlZYptfdAFq10DOVQ==",
             "license": "MIT",
             "optional": true,
             "dependencies": {
@@ -1280,9 +1280,9 @@
             }
         },
         "node_modules/@eslint-community/eslint-utils": {
-            "version": "4.5.1",
-            "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.5.1.tgz",
-            "integrity": "sha512-soEIOALTfTK6EjmKMMoLugwaP0rzkad90iIWd1hMO9ARkSAyjfMfkRRhLvD5qH7vvM0Cg72pieUfR6yh6XxC4w==",
+            "version": "4.6.0",
+            "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.6.0.tgz",
+            "integrity": "sha512-WhCn7Z7TauhBtmzhvKpoQs0Wwb/kBcy4CwpuI0/eEIr2Lx2auxmulAzLr91wVZJaz47iUZdkXOK7WlAfxGKCnA==",
             "license": "MIT",
             "dependencies": {
                 "eslint-visitor-keys": "^3.4.3"
@@ -4061,16 +4061,6 @@
                 "tailwindcss": "4.1.3"
             }
         },
-        "node_modules/@tailwindcss/node/node_modules/jiti": {
-            "version": "2.4.2",
-            "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
-            "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
-            "dev": true,
-            "license": "MIT",
-            "bin": {
-                "jiti": "lib/jiti-cli.mjs"
-            }
-        },
         "node_modules/@tailwindcss/oxide": {
             "version": "4.1.3",
             "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.3.tgz",
@@ -4455,9 +4445,9 @@
             "license": "MIT"
         },
         "node_modules/@types/node": {
-            "version": "22.14.0",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-22.14.0.tgz",
-            "integrity": "sha512-Kmpl+z84ILoG+3T/zQFyAJsU6EPTmOCj8/2+83fSN6djd6I4o7uOuGIH6vq3PrjY5BGitSbFuMN18j3iknubbA==",
+            "version": "22.14.1",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-22.14.1.tgz",
+            "integrity": "sha512-u0HuPQwe/dHrItgHHpmw3N2fYCR6x4ivMNbPHRkBVP4CvN+kiRrKHWk3i8tXiO/joPwXLMYvF9TTF0eqgHIuOw==",
             "devOptional": true,
             "license": "MIT",
             "dependencies": {
@@ -4489,9 +4479,9 @@
             "license": "MIT"
         },
         "node_modules/@types/react": {
-            "version": "19.0.2",
-            "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.2.tgz",
-            "integrity": "sha512-USU8ZI/xyKJwFTpjSVIrSeHBVAGagkHQKPNbxeWwql/vDmnTIBgx+TJnhFnj1NXgz8XfprU0egV2dROLGpsBEg==",
+            "version": "19.1.1",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.1.tgz",
+            "integrity": "sha512-ePapxDL7qrgqSF67s0h9m412d9DbXyC1n59O2st+9rjuuamWsZuD2w55rqY12CbzsZ7uVXb5Nw0gEp9Z8MMutQ==",
             "devOptional": true,
             "license": "MIT",
             "dependencies": {
@@ -4499,9 +4489,9 @@
             }
         },
         "node_modules/@types/react-dom": {
-            "version": "19.0.2",
-            "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.2.tgz",
-            "integrity": "sha512-c1s+7TKFaDRRxr1TxccIX2u7sfCnc3RxkVyBIUA2lCpyqCF+QoAwQ/CBg7bsMdVwP120HEH143VQezKtef5nCg==",
+            "version": "19.1.2",
+            "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.2.tgz",
+            "integrity": "sha512-XGJkWF41Qq305SKWEILa1O8vzhb3aOo3ogBlSmiqNko/WmRb6QIaweuZCXjKygVDXpzXb5wyxKTSOsmkuqj+Qw==",
             "devOptional": true,
             "license": "MIT",
             "peerDependencies": {
@@ -4807,9 +4797,9 @@
             }
         },
         "node_modules/@unrs/resolver-binding-darwin-arm64": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.4.1.tgz",
-            "integrity": "sha512-8Tv+Bsd0BjGwfEedIyor4inw8atppRxM5BdUnIt+3mAm/QXUm7Dw74CHnXpfZKXkp07EXJGiA8hStqCINAWhdw==",
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.5.0.tgz",
+            "integrity": "sha512-YmocNlEcX/AgJv8gI41bhjMOTcKcea4D2nRIbZj+MhRtSH5+vEU8r/pFuTuoF+JjVplLsBueU+CILfBPVISyGQ==",
             "cpu": [
                 "arm64"
             ],
@@ -4820,9 +4810,9 @@
             ]
         },
         "node_modules/@unrs/resolver-binding-darwin-x64": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.4.1.tgz",
-            "integrity": "sha512-X8c3PhWziEMKAzZz+YAYWfwawi5AEgzy/hmfizAB4C70gMHLKmInJcp1270yYAOs7z07YVFI220pp50z24Jk3A==",
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.5.0.tgz",
+            "integrity": "sha512-qpUrXgH4e/0xu1LOhPEdfgSY3vIXOxDQv370NEL8npN8h40HcQDA+Pl2r4HBW6tTXezWIjxUFcP7tj529RZtDw==",
             "cpu": [
                 "x64"
             ],
@@ -4833,9 +4823,9 @@
             ]
         },
         "node_modules/@unrs/resolver-binding-freebsd-x64": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.4.1.tgz",
-            "integrity": "sha512-UUr/nREy1UdtxXQnmLaaTXFGOcGxPwNIzeJdb3KXai3TKtC1UgNOB9s8KOA4TaxOUBR/qVgL5BvBwmUjD5yuVA==",
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.5.0.tgz",
+            "integrity": "sha512-3tX8r8vgjvZzaJZB4jvxUaaFCDCb3aWDCpZN3EjhGnnwhztslI05KSG5NY/jNjlcZ5QWZ7dEZZ/rNBFsmTaSPw==",
             "cpu": [
                 "x64"
             ],
@@ -4846,9 +4836,9 @@
             ]
         },
         "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.4.1.tgz",
-            "integrity": "sha512-e3pII53dEeS8inkX6A1ad2UXE0nuoWCqik4kOxaDnls0uJUq0ntdj5d9IYd+bv5TDwf9DSge/xPOvCmRYH+Tsw==",
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.5.0.tgz",
+            "integrity": "sha512-FH+ixzBKaUU9fWOj3TYO+Yn/eO6kYvMLV9eNJlJlkU7OgrxkCmiMS6wUbyT0KA3FOZGxnEQ2z3/BHgYm2jqeLA==",
             "cpu": [
                 "arm"
             ],
@@ -4859,9 +4849,9 @@
             ]
         },
         "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.4.1.tgz",
-            "integrity": "sha512-e/AKKd9gR+HNmVyDEPI/PIz2t0DrA3cyonHNhHVjrkxe8pMCiYiqhtn1+h+yIpHUtUlM6Y1FNIdivFa+r7wrEQ==",
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.5.0.tgz",
+            "integrity": "sha512-pxCgXMgwB/4PfqFQg73lMhmWwcC0j5L+dNXhZoz/0ek0iS/oAWl65fxZeT/OnU7fVs52MgdP2q02EipqJJXHSg==",
             "cpu": [
                 "arm"
             ],
@@ -4872,9 +4862,9 @@
             ]
         },
         "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.4.1.tgz",
-            "integrity": "sha512-vtIu34luF1jRktlHtiwm2mjuE8oJCsFiFr8hT5+tFQdqFKjPhbJXn83LswKsOhy0GxAEevpXDI4xxEwkjuXIPA==",
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.5.0.tgz",
+            "integrity": "sha512-FX2FV7vpLE/+Z0NZX9/1pwWud5Wocm/2PgpUXbT5aSV3QEB10kBPJAzssOQylvdj8mOHoKl5pVkXpbCwww/T2g==",
             "cpu": [
                 "arm64"
             ],
@@ -4885,9 +4875,9 @@
             ]
         },
         "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.4.1.tgz",
-            "integrity": "sha512-H3PaOuGyhFXiyJd+09uPhGl4gocmhyi1BRzvsP8Lv5AQO3p3/ZY7WjV4t2NkBksm9tMjf3YbOVHyPWi2eWsNYw==",
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.5.0.tgz",
+            "integrity": "sha512-+gF97xst1BZb28T3nwwzEtq2ewCoMDGKsenYsZuvpmNrW0019G1iUAunZN+FG55L21y+uP7zsGX06OXDQ/viKw==",
             "cpu": [
                 "arm64"
             ],
@@ -4898,9 +4888,9 @@
             ]
         },
         "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.4.1.tgz",
-            "integrity": "sha512-4+GmJcaaFntCi1S01YByqp8wLMjV/FyQyHVGm0vedIhL1Vfx7uHkz/sZmKsidRwokBGuxi92GFmSzqT2O8KcNA==",
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.5.0.tgz",
+            "integrity": "sha512-5bEmVcQw9js8JYM2LkUBw5SeELSIxX+qKf9bFrfFINKAp4noZ//hUxLpbF7u/3gTBN1GsER6xOzIZlw/VTdXtA==",
             "cpu": [
                 "ppc64"
             ],
@@ -4910,10 +4900,23 @@
                 "linux"
             ]
         },
+        "node_modules/@unrs/resolver-binding-linux-riscv64-gnu": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.5.0.tgz",
+            "integrity": "sha512-GGk/8TPUsf1Q99F+lzMdjE6sGL26uJCwQ9TlvBs8zR3cLQNw/MIumPN7zrs3GFGySjnwXc8gA6J3HKbejywmqA==",
+            "cpu": [
+                "riscv64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
         "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.4.1.tgz",
-            "integrity": "sha512-6RDQVCmtFYTlhy89D5ixTqo9bTQqFhvNN0Ey1wJs5r+01Dq15gPHRXv2jF2bQATtMrOfYwv+R2ZR9ew1N1N3YQ==",
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.5.0.tgz",
+            "integrity": "sha512-5uRkFYYVNAeVaA4W/CwugjFN3iDOHCPqsBLCCOoJiMfFMMz4evBRsg+498OFa9w6VcTn2bD5aI+RRayaIgk2Sw==",
             "cpu": [
                 "s390x"
             ],
@@ -4924,9 +4927,9 @@
             ]
         },
         "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.4.1.tgz",
-            "integrity": "sha512-XpU9uzIkD86+19NjCXxlVPISMUrVXsXo5htxtuG+uJ59p5JauSRZsIxQxzzfKzkxEjdvANPM/lS1HFoX6A6QeA==",
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.5.0.tgz",
+            "integrity": "sha512-j905CZH3nehYy6NimNqC2B14pxn4Ltd7guKMyPTzKehbFXTUgihQS/ZfHQTdojkMzbSwBOSgq1dOrY+IpgxDsA==",
             "cpu": [
                 "x64"
             ],
@@ -4937,9 +4940,9 @@
             ]
         },
         "node_modules/@unrs/resolver-binding-linux-x64-musl": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.4.1.tgz",
-            "integrity": "sha512-3CDjG/spbTKCSHl66QP2ekHSD+H34i7utuDIM5gzoNBcZ1gTO0Op09Wx5cikXnhORRf9+HyDWzm37vU1PLSM1A==",
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.5.0.tgz",
+            "integrity": "sha512-dmLevQTuzQRwu5A+mvj54R5aye5I4PVKiWqGxg8tTaYP2k2oTs/3Mo8mgnhPk28VoYCi0fdFYpgzCd4AJndQvQ==",
             "cpu": [
                 "x64"
             ],
@@ -4950,9 +4953,9 @@
             ]
         },
         "node_modules/@unrs/resolver-binding-wasm32-wasi": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.4.1.tgz",
-            "integrity": "sha512-50tYhvbCTnuzMn7vmP8IV2UKF7ITo1oihygEYq9wW2DUb/Y+QMqBHJUSCABRngATjZ4shOK6f2+s0gQX6ElENQ==",
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.5.0.tgz",
+            "integrity": "sha512-LtJMhwu7avhoi+kKfAZOKN773RtzLBVVF90YJbB0wyMpUj9yQPeA+mteVUI9P70OG/opH47FeV5AWeaNWWgqJg==",
             "cpu": [
                 "wasm32"
             ],
@@ -4966,9 +4969,9 @@
             }
         },
         "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.4.1.tgz",
-            "integrity": "sha512-KyJiIne/AqV4IW0wyQO34wSMuJwy3VxVQOfIXIPyQ/Up6y/zi2P/WwXb78gHsLiGRUqCA9LOoCX+6dQZde0g1g==",
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.5.0.tgz",
+            "integrity": "sha512-FTZBxLL4SO1mgIM86KykzJmPeTPisBDHQV6xtfDXbTMrentuZ6SdQKJUV5BWaoUK3p8kIULlrCcucqdCnk8Npg==",
             "cpu": [
                 "arm64"
             ],
@@ -4979,9 +4982,9 @@
             ]
         },
         "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.4.1.tgz",
-            "integrity": "sha512-y2NUD7pygrBolN2NoXUrwVqBpKPhF8DiSNE5oB5/iFO49r2DpoYqdj5HPb3F42fPBH5qNqj6Zg63+xCEzAD2hw==",
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.5.0.tgz",
+            "integrity": "sha512-i5bB7vJ1waUsFciU/FKLd4Zw0VnAkvhiJ4//jYQXyDUuiLKodmtQZVTcOPU7pp97RrNgCFtXfC1gnvj/DHPJTw==",
             "cpu": [
                 "ia32"
             ],
@@ -4992,9 +4995,9 @@
             ]
         },
         "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.4.1.tgz",
-            "integrity": "sha512-hVXaObGI2lGFmrtT77KSbPQ3I+zk9IU500wobjk0+oX59vg/0VqAzABNtt3YSQYgXTC2a/LYxekLfND/wlt0yQ==",
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.5.0.tgz",
+            "integrity": "sha512-wAvXp4k7jhioi4SebXW/yfzzYwsUCr9kIX4gCsUFKpCTUf8Mi7vScJXI3S+kupSUf0LbVHudR8qBbe2wFMSNUw==",
             "cpu": [
                 "x64"
             ],
@@ -5633,9 +5636,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001712",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001712.tgz",
-            "integrity": "sha512-MBqPpGYYdQ7/hfKiet9SCI+nmN5/hp4ZzveOJubl5DTAMa5oggjAuoi0Z4onBpKPFI2ePGnQuQIzF3VxDjDJig==",
+            "version": "1.0.30001713",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001713.tgz",
+            "integrity": "sha512-wCIWIg+A4Xr7NfhTuHdX+/FKh3+Op3LBbSp2N5Pfx6T/LhdQy3GTyoTg48BReaW/MyMNZAkTadsBtai3ldWK0Q==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -6381,9 +6384,9 @@
             }
         },
         "node_modules/dotenv": {
-            "version": "16.4.7",
-            "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
-            "integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==",
+            "version": "16.5.0",
+            "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.5.0.tgz",
+            "integrity": "sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==",
             "dev": true,
             "license": "BSD-2-Clause",
             "engines": {
@@ -9349,14 +9352,13 @@
             }
         },
         "node_modules/jiti": {
-            "version": "1.21.7",
-            "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
-            "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+            "version": "2.4.2",
+            "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
+            "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
+            "devOptional": true,
             "license": "MIT",
-            "optional": true,
-            "peer": true,
             "bin": {
-                "jiti": "bin/jiti.js"
+                "jiti": "lib/jiti-cli.mjs"
             }
         },
         "node_modules/js-tokens": {
@@ -15579,9 +15581,9 @@
             }
         },
         "node_modules/swagger-ui-dist": {
-            "version": "5.20.7",
-            "resolved": "https://registry.npmjs.org/swagger-ui-dist/-/swagger-ui-dist-5.20.7.tgz",
-            "integrity": "sha512-gLpb1wrWinUwMFKfSvDYsIlCyGQSryftzi6uWc9Qo98zO3mFT6oHOqmDUu5OoahvepuS6HGTe/3MsGUCVtpLig==",
+            "version": "5.20.8",
+            "resolved": "https://registry.npmjs.org/swagger-ui-dist/-/swagger-ui-dist-5.20.8.tgz",
+            "integrity": "sha512-VXVhdRh5vuKVpkegw0n0wCXuFFG+pxNmXa0vDcf76r1yP2cYKqcpOE5g8l5crbtLGx+j2EiDnG4/EU5T0jyN1w==",
             "license": "Apache-2.0",
             "dependencies": {
                 "@scarf/scarf": "=1.4.0"
@@ -16018,29 +16020,30 @@
             }
         },
         "node_modules/unrs-resolver": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.4.1.tgz",
-            "integrity": "sha512-MhPB3wBI5BR8TGieTb08XuYlE8oFVEXdSAgat3psdlRyejl8ojQ8iqPcjh094qCZ1r+TnkxzP6BeCd/umfHckQ==",
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.5.0.tgz",
+            "integrity": "sha512-6aia3Oy7SEe0MuUGQm2nsyob0L2+g57w178K5SE/3pvSGAIp28BB2O921fKx424Ahc/gQ6v0DXFbhcpyhGZdOA==",
             "license": "MIT",
             "funding": {
                 "url": "https://github.com/sponsors/JounQin"
             },
             "optionalDependencies": {
-                "@unrs/resolver-binding-darwin-arm64": "1.4.1",
-                "@unrs/resolver-binding-darwin-x64": "1.4.1",
-                "@unrs/resolver-binding-freebsd-x64": "1.4.1",
-                "@unrs/resolver-binding-linux-arm-gnueabihf": "1.4.1",
-                "@unrs/resolver-binding-linux-arm-musleabihf": "1.4.1",
-                "@unrs/resolver-binding-linux-arm64-gnu": "1.4.1",
-                "@unrs/resolver-binding-linux-arm64-musl": "1.4.1",
-                "@unrs/resolver-binding-linux-ppc64-gnu": "1.4.1",
-                "@unrs/resolver-binding-linux-s390x-gnu": "1.4.1",
-                "@unrs/resolver-binding-linux-x64-gnu": "1.4.1",
-                "@unrs/resolver-binding-linux-x64-musl": "1.4.1",
-                "@unrs/resolver-binding-wasm32-wasi": "1.4.1",
-                "@unrs/resolver-binding-win32-arm64-msvc": "1.4.1",
-                "@unrs/resolver-binding-win32-ia32-msvc": "1.4.1",
-                "@unrs/resolver-binding-win32-x64-msvc": "1.4.1"
+                "@unrs/resolver-binding-darwin-arm64": "1.5.0",
+                "@unrs/resolver-binding-darwin-x64": "1.5.0",
+                "@unrs/resolver-binding-freebsd-x64": "1.5.0",
+                "@unrs/resolver-binding-linux-arm-gnueabihf": "1.5.0",
+                "@unrs/resolver-binding-linux-arm-musleabihf": "1.5.0",
+                "@unrs/resolver-binding-linux-arm64-gnu": "1.5.0",
+                "@unrs/resolver-binding-linux-arm64-musl": "1.5.0",
+                "@unrs/resolver-binding-linux-ppc64-gnu": "1.5.0",
+                "@unrs/resolver-binding-linux-riscv64-gnu": "1.5.0",
+                "@unrs/resolver-binding-linux-s390x-gnu": "1.5.0",
+                "@unrs/resolver-binding-linux-x64-gnu": "1.5.0",
+                "@unrs/resolver-binding-linux-x64-musl": "1.5.0",
+                "@unrs/resolver-binding-wasm32-wasi": "1.5.0",
+                "@unrs/resolver-binding-win32-arm64-msvc": "1.5.0",
+                "@unrs/resolver-binding-win32-ia32-msvc": "1.5.0",
+                "@unrs/resolver-binding-win32-x64-msvc": "1.5.0"
             }
         },
         "node_modules/uri-js": {
diff --git a/package.json b/package.json
index 918cbe74..c1f9fd64 100644
--- a/package.json
+++ b/package.json
@@ -101,8 +101,8 @@
         "@types/js-yaml": "4.0.9",
         "@types/node": "^22",
         "@types/nodemailer": "6.4.17",
-        "@types/react": "19.0.2",
-        "@types/react-dom": "19.0.2",
+        "@types/react": "19.1.1",
+        "@types/react-dom": "19.1.2",
         "@types/semver": "7.5.8",
         "@types/swagger-ui-express": "^4.1.8",
         "@types/ws": "8.5.13",
diff --git a/src/app/[orgId]/settings/access/AccessPageHeaderAndNav.tsx b/src/app/[orgId]/settings/access/AccessPageHeaderAndNav.tsx
index a9d3b4a1..a3053e7e 100644
--- a/src/app/[orgId]/settings/access/AccessPageHeaderAndNav.tsx
+++ b/src/app/[orgId]/settings/access/AccessPageHeaderAndNav.tsx
@@ -1,29 +1,21 @@
 "use client";
 
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import { SidebarSettings } from "@app/components/SidebarSettings";
 
-type AccessPageHeaderAndNavProps = {
+interface AccessPageHeaderAndNavProps {
     children: React.ReactNode;
     hasInvitations: boolean;
-};
+}
 
 export default function AccessPageHeaderAndNav({
     children,
     hasInvitations
 }: AccessPageHeaderAndNavProps) {
-    const sidebarNavItems = [
+    const navItems = [
         {
             title: "Users",
-            href: `/{orgId}/settings/access/users`,
-            children: hasInvitations
-                ? [
-                      {
-                          title: "Invitations",
-                          href: `/{orgId}/settings/access/invitations`
-                      }
-                  ]
-                : []
+            href: `/{orgId}/settings/access/users`
         },
         {
             title: "Roles",
@@ -31,6 +23,13 @@ export default function AccessPageHeaderAndNav({
         }
     ];
 
+    if (hasInvitations) {
+        navItems.push({
+            title: "Invitations",
+            href: `/{orgId}/settings/access/invitations`
+        });
+    }
+
     return (
         <>
             <SettingsSectionTitle
@@ -38,9 +37,9 @@ export default function AccessPageHeaderAndNav({
                 description="Invite users and add them to roles to manage access to your organization"
             />
 
-            <SidebarSettings sidebarNavItems={sidebarNavItems}>
+            <HorizontalTabs items={navItems}>
                 {children}
-            </SidebarSettings>
+            </HorizontalTabs>
         </>
     );
 }
diff --git a/src/app/[orgId]/settings/access/invitations/InvitationsDataTable.tsx b/src/app/[orgId]/settings/access/invitations/InvitationsDataTable.tsx
index 0884a279..e2154b2d 100644
--- a/src/app/[orgId]/settings/access/invitations/InvitationsDataTable.tsx
+++ b/src/app/[orgId]/settings/access/invitations/InvitationsDataTable.tsx
@@ -2,21 +2,8 @@
 
 import {
     ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
-    getPaginationRowModel
 } from "@tanstack/react-table";
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableContainer,
-    TableHead,
-    TableHeader,
-    TableRow
-} from "@/components/ui/table";
-import { DataTablePagination } from "@app/components/DataTablePagination";
+import { DataTable } from "@app/components/ui/data-table";
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
@@ -27,70 +14,13 @@ export function InvitationsDataTable<TData, TValue>({
     columns,
     data
 }: DataTableProps<TData, TValue>) {
-    const table = useReactTable({
-        data,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        initialState: {
-            pagination: {
-                pageSize: 20,
-                pageIndex: 0
-            }
-        }
-    });
-
     return (
-        <div>
-            <TableContainer>
-                <Table>
-                    <TableHeader>
-                        {table.getHeaderGroups().map((headerGroup) => (
-                            <TableRow key={headerGroup.id}>
-                                {headerGroup.headers.map((header) => (
-                                    <TableHead key={header.id}>
-                                        {header.isPlaceholder
-                                            ? null
-                                            : flexRender(
-                                                  header.column.columnDef
-                                                      .header,
-                                                  header.getContext()
-                                              )}
-                                    </TableHead>
-                                ))}
-                            </TableRow>
-                        ))}
-                    </TableHeader>
-                    <TableBody>
-                        {table.getRowModel().rows?.length ? (
-                            table.getRowModel().rows.map((row) => (
-                                <TableRow key={row.id}>
-                                    {row.getVisibleCells().map((cell) => (
-                                        <TableCell key={cell.id}>
-                                            {flexRender(
-                                                cell.column.columnDef.cell,
-                                                cell.getContext()
-                                            )}
-                                        </TableCell>
-                                    ))}
-                                </TableRow>
-                            ))
-                        ) : (
-                            <TableRow>
-                                <TableCell
-                                    colSpan={columns.length}
-                                    className="h-24 text-center"
-                                >
-                                    No invitations found.
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </TableContainer>
-            <div className="mt-4">
-                <DataTablePagination table={table} />
-            </div>
-        </div>
+        <DataTable
+            columns={columns}
+            data={data}
+            title="Invitations"
+            searchPlaceholder="Search invitations..."
+            searchColumn="email"
+        />
     );
 }
diff --git a/src/app/[orgId]/settings/access/roles/RolesDataTable.tsx b/src/app/[orgId]/settings/access/roles/RolesDataTable.tsx
index e4e0fb9c..93ddd1cc 100644
--- a/src/app/[orgId]/settings/access/roles/RolesDataTable.tsx
+++ b/src/app/[orgId]/settings/access/roles/RolesDataTable.tsx
@@ -2,149 +2,29 @@
 
 import {
     ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
-    getPaginationRowModel,
-    SortingState,
-    getSortedRowModel,
-    ColumnFiltersState,
-    getFilteredRowModel
 } from "@tanstack/react-table";
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableContainer,
-    TableHead,
-    TableHeader,
-    TableRow
-} from "@/components/ui/table";
-import { Button } from "@app/components/ui/button";
-import { useState } from "react";
-import { Input } from "@app/components/ui/input";
-import { Plus, Search } from "lucide-react";
-import { DataTablePagination } from "@app/components/DataTablePagination";
+import { DataTable } from "@app/components/ui/data-table";
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
-    addRole?: () => void;
+    createRole?: () => void;
 }
 
 export function RolesDataTable<TData, TValue>({
-    addRole,
     columns,
-    data
+    data,
+    createRole
 }: DataTableProps<TData, TValue>) {
-    const [sorting, setSorting] = useState<SortingState>([]);
-    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-    const [globalFilter, setGlobalFilter] = useState<any>([]);
-
-    const table = useReactTable({
-        data,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        onSortingChange: setSorting,
-        getSortedRowModel: getSortedRowModel(),
-        onColumnFiltersChange: setColumnFilters,
-        getFilteredRowModel: getFilteredRowModel(),
-        onGlobalFilterChange: setGlobalFilter,
-        initialState: {
-            pagination: {
-                pageSize: 20,
-                pageIndex: 0
-            }
-        },
-        state: {
-            sorting,
-            columnFilters,
-            globalFilter
-        }
-    });
-
     return (
-        <div>
-            <div className="flex items-center justify-between pb-4">
-                <div className="flex items-center max-w-sm mr-2 w-full relative">
-                    <Input
-                        placeholder="Search roles"
-                        value={globalFilter ?? ""}
-                        onChange={(e) =>
-                            table.setGlobalFilter(String(e.target.value))
-                        }
-                        className="w-full pl-8"
-                    />
-                    <Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2" />
-                </div>
-                <Button
-                    onClick={() => {
-                        if (addRole) {
-                            addRole();
-                        }
-                    }}
-                >
-                    <Plus className="mr-2 h-4 w-4" /> Add Role
-                </Button>
-            </div>
-            <TableContainer>
-                <Table>
-                    <TableHeader>
-                        {table.getHeaderGroups().map((headerGroup) => (
-                            <TableRow key={headerGroup.id}>
-                                {headerGroup.headers.map((header) => {
-                                    return (
-                                        <TableHead key={header.id}>
-                                            {header.isPlaceholder
-                                                ? null
-                                                : flexRender(
-                                                      header.column.columnDef
-                                                          .header,
-                                                      header.getContext()
-                                                  )}
-                                        </TableHead>
-                                    );
-                                })}
-                            </TableRow>
-                        ))}
-                    </TableHeader>
-                    <TableBody>
-                        {table.getRowModel().rows?.length ? (
-                            table.getRowModel().rows.map((row) => (
-                                <TableRow
-                                    key={row.id}
-                                    data-state={
-                                        row.getIsSelected() && "selected"
-                                    }
-                                >
-                                    {row.getVisibleCells().map((cell) => (
-                                        <TableCell key={cell.id}>
-                                            {flexRender(
-                                                cell.column.columnDef.cell,
-                                                cell.getContext()
-                                            )}
-                                        </TableCell>
-                                    ))}
-                                </TableRow>
-                            ))
-                        ) : (
-                            <TableRow>
-                                <TableCell
-                                    colSpan={columns.length}
-                                    className="h-24 text-center"
-                                >
-                                    No roles. Create a role, then add users to
-                                    the it.
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </TableContainer>
-            <div className="mt-4">
-                <DataTablePagination table={table} />
-            </div>
-        </div>
+        <DataTable
+            columns={columns}
+            data={data}
+            title="Roles"
+            searchPlaceholder="Search roles..."
+            searchColumn="name"
+            onAdd={createRole}
+            addButtonText="Add Role"
+        />
     );
 }
diff --git a/src/app/[orgId]/settings/access/roles/RolesTable.tsx b/src/app/[orgId]/settings/access/roles/RolesTable.tsx
index e8e98265..7ebcfbce 100644
--- a/src/app/[orgId]/settings/access/roles/RolesTable.tsx
+++ b/src/app/[orgId]/settings/access/roles/RolesTable.tsx
@@ -131,7 +131,7 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
             <RolesDataTable
                 columns={columns}
                 data={roles}
-                addRole={() => {
+                createRole={() => {
                     setIsCreateModalOpen(true);
                 }}
             />
diff --git a/src/app/[orgId]/settings/access/roles/page.tsx b/src/app/[orgId]/settings/access/roles/page.tsx
index 2548257c..16fefd7d 100644
--- a/src/app/[orgId]/settings/access/roles/page.tsx
+++ b/src/app/[orgId]/settings/access/roles/page.tsx
@@ -8,6 +8,7 @@ import { ListRolesResponse } from "@server/routers/role";
 import RolesTable, { RoleRow } from "./RolesTable";
 import { SidebarSettings } from "@app/components/SidebarSettings";
 import AccessPageHeaderAndNav from "../AccessPageHeaderAndNav";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 
 type RolesPageProps = {
     params: Promise<{ orgId: string }>;
@@ -64,11 +65,13 @@ export default async function RolesPage(props: RolesPageProps) {
 
     return (
         <>
-            <AccessPageHeaderAndNav hasInvitations={hasInvitations}>
-                <OrgProvider org={org}>
-                    <RolesTable roles={roleRows} />
-                </OrgProvider>
-            </AccessPageHeaderAndNav>
+            <SettingsSectionTitle
+                title="Manage Roles"
+                description="Configure roles to manage access to your organization"
+            />
+            <OrgProvider org={org}>
+                <RolesTable roles={roleRows} />
+            </OrgProvider>
         </>
     );
 }
diff --git a/src/app/[orgId]/settings/access/users/UsersDataTable.tsx b/src/app/[orgId]/settings/access/users/UsersDataTable.tsx
index b47424ba..1ce169e0 100644
--- a/src/app/[orgId]/settings/access/users/UsersDataTable.tsx
+++ b/src/app/[orgId]/settings/access/users/UsersDataTable.tsx
@@ -2,29 +2,8 @@
 
 import {
     ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
-    getPaginationRowModel,
-    SortingState,
-    getSortedRowModel,
-    ColumnFiltersState,
-    getFilteredRowModel
 } from "@tanstack/react-table";
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableContainer,
-    TableHead,
-    TableHeader,
-    TableRow
-} from "@/components/ui/table";
-import { Button } from "@app/components/ui/button";
-import { useState } from "react";
-import { Input } from "@app/components/ui/input";
-import { DataTablePagination } from "@app/components/DataTablePagination";
-import { Plus, Search } from "lucide-react";
+import { DataTable } from "@app/components/ui/data-table";
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
@@ -33,118 +12,19 @@ interface DataTableProps<TData, TValue> {
 }
 
 export function UsersDataTable<TData, TValue>({
-    inviteUser,
     columns,
-    data
+    data,
+    inviteUser
 }: DataTableProps<TData, TValue>) {
-    const [sorting, setSorting] = useState<SortingState>([]);
-    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-    const [globalFilter, setGlobalFilter] = useState<any>([]);
-
-    const table = useReactTable({
-        data,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        onSortingChange: setSorting,
-        getSortedRowModel: getSortedRowModel(),
-        onColumnFiltersChange: setColumnFilters,
-        getFilteredRowModel: getFilteredRowModel(),
-        onGlobalFilterChange: setGlobalFilter,
-        initialState: {
-            pagination: {
-                pageSize: 20,
-                pageIndex: 0
-            }
-        },
-        state: {
-            sorting,
-            columnFilters,
-            globalFilter
-        }
-    });
-
     return (
-        <div>
-            <div className="flex items-center justify-between pb-4">
-                <div className="flex items-center max-w-sm mr-2 w-full relative">
-                    <Input
-                        placeholder="Search users"
-                        value={globalFilter ?? ""}
-                        onChange={(e) =>
-                            table.setGlobalFilter(String(e.target.value))
-                        }
-                        className="w-full pl-8"
-                    />
-                    <Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2" />
-                </div>
-                <Button
-                    onClick={() => {
-                        if (inviteUser) {
-                            inviteUser();
-                        }
-                    }}
-                >
-                    <Plus className="mr-2 h-4 w-4" /> Invite User
-                </Button>
-            </div>
-            <TableContainer>
-                <Table>
-                    <TableHeader>
-                        {table.getHeaderGroups().map((headerGroup) => (
-                            <TableRow key={headerGroup.id}>
-                                {headerGroup.headers.map((header) => {
-                                    return (
-                                        <TableHead key={header.id}>
-                                            {header.isPlaceholder
-                                                ? null
-                                                : flexRender(
-                                                      header.column.columnDef
-                                                          .header,
-                                                      header.getContext()
-                                                  )}
-                                        </TableHead>
-                                    );
-                                })}
-                            </TableRow>
-                        ))}
-                    </TableHeader>
-                    <TableBody>
-                        {table.getRowModel().rows?.length ? (
-                            table.getRowModel().rows.map((row) => (
-                                <TableRow
-                                    key={row.id}
-                                    data-state={
-                                        row.getIsSelected() && "selected"
-                                    }
-                                >
-                                    {row.getVisibleCells().map((cell) => (
-                                        <TableCell key={cell.id}>
-                                            {flexRender(
-                                                cell.column.columnDef.cell,
-                                                cell.getContext()
-                                            )}
-                                        </TableCell>
-                                    ))}
-                                </TableRow>
-                            ))
-                        ) : (
-                            <TableRow>
-                                <TableCell
-                                    colSpan={columns.length}
-                                    className="h-24 text-center"
-                                >
-                                    No Users. Invite one to share access to
-                                    resources.
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </TableContainer>
-            <div className="mt-4">
-                <DataTablePagination table={table} />
-            </div>
-        </div>
+        <DataTable
+            columns={columns}
+            data={data}
+            title="Users"
+            searchPlaceholder="Search users..."
+            searchColumn="email"
+            onAdd={inviteUser}
+            addButtonText="Invite User"
+        />
     );
 }
diff --git a/src/app/[orgId]/settings/access/users/[userId]/layout.tsx b/src/app/[orgId]/settings/access/users/[userId]/layout.tsx
index 135c47a3..1419de92 100644
--- a/src/app/[orgId]/settings/access/users/[userId]/layout.tsx
+++ b/src/app/[orgId]/settings/access/users/[userId]/layout.tsx
@@ -2,17 +2,16 @@ import { internal } from "@app/lib/api";
 import { AxiosResponse } from "axios";
 import { redirect } from "next/navigation";
 import { authCookieHeader } from "@app/lib/api/cookies";
-import { SidebarSettings } from "@app/components/SidebarSettings";
 import { GetOrgUserResponse } from "@server/routers/user";
 import OrgUserProvider from "@app/providers/OrgUserProvider";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import {
     Breadcrumb,
     BreadcrumbItem,
-    BreadcrumbLink,
     BreadcrumbList,
     BreadcrumbPage,
     BreadcrumbSeparator
-} from "@/components/ui/breadcrumb";
+} from "@app/components/ui/breadcrumb";
 import Link from "next/link";
 import { cache } from "react";
 
@@ -40,7 +39,7 @@ export default async function UserLayoutProps(props: UserLayoutProps) {
         redirect(`/${params.orgId}/settings/sites`);
     }
 
-    const sidebarNavItems = [
+    const navItems = [
         {
             title: "Access Controls",
             href: "/{orgId}/settings/access/users/{userId}/access-controls"
@@ -71,11 +70,9 @@ export default async function UserLayoutProps(props: UserLayoutProps) {
                     <p className="text-muted-foreground">Manage user</p>
                 </div>
 
-                <SidebarSettings
-                    sidebarNavItems={sidebarNavItems}
-                >
+                <HorizontalTabs items={navItems}>
                     {children}
-                </SidebarSettings>
+                </HorizontalTabs>
             </OrgUserProvider>
         </>
     );
diff --git a/src/app/[orgId]/settings/access/users/page.tsx b/src/app/[orgId]/settings/access/users/page.tsx
index a39a4e3a..8049ff96 100644
--- a/src/app/[orgId]/settings/access/users/page.tsx
+++ b/src/app/[orgId]/settings/access/users/page.tsx
@@ -9,6 +9,7 @@ import OrgProvider from "@app/providers/OrgProvider";
 import UserProvider from "@app/providers/UserProvider";
 import { verifySession } from "@app/lib/auth/verifySession";
 import AccessPageHeaderAndNav from "../AccessPageHeaderAndNav";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 
 type UsersPageProps = {
     params: Promise<{ orgId: string }>;
@@ -78,13 +79,15 @@ export default async function UsersPage(props: UsersPageProps) {
 
     return (
         <>
-            <AccessPageHeaderAndNav hasInvitations={hasInvitations}>
-                <UserProvider user={user!}>
-                    <OrgProvider org={org}>
-                        <UsersTable users={userRows} />
-                    </OrgProvider>
-                </UserProvider>
-            </AccessPageHeaderAndNav>
+            <SettingsSectionTitle
+                title="Manage Users"
+                description="Invite users and add them to roles to manage access to your organization"
+            />
+            <UserProvider user={user!}>
+                <OrgProvider org={org}>
+                    <UsersTable users={userRows} />
+                </OrgProvider>
+            </UserProvider>
         </>
     );
 }
diff --git a/src/app/[orgId]/settings/general/layout.tsx b/src/app/[orgId]/settings/general/layout.tsx
index 4b41b8c3..a2d9cc0a 100644
--- a/src/app/[orgId]/settings/general/layout.tsx
+++ b/src/app/[orgId]/settings/general/layout.tsx
@@ -1,7 +1,7 @@
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import { SidebarSettings } from "@app/components/SidebarSettings";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import { verifySession } from "@app/lib/auth/verifySession";
 import OrgProvider from "@app/providers/OrgProvider";
 import OrgUserProvider from "@app/providers/OrgUserProvider";
@@ -57,7 +57,7 @@ export default async function GeneralSettingsPage({
         redirect(`/${orgId}`);
     }
 
-    const sidebarNavItems = [
+    const navItems = [
         {
             title: "General",
             href: `/{orgId}/settings/general`,
@@ -73,9 +73,9 @@ export default async function GeneralSettingsPage({
                         description="Configure your organization's general settings"
                     />
 
-                    <SidebarSettings sidebarNavItems={sidebarNavItems}>
+                    <HorizontalTabs items={navItems}>
                         {children}
-                    </SidebarSettings>
+                    </HorizontalTabs>
                 </OrgUserProvider>
             </OrgProvider>
         </>
diff --git a/src/app/[orgId]/settings/layout.tsx b/src/app/[orgId]/settings/layout.tsx
index 2618c1fb..bd5e8bf1 100644
--- a/src/app/[orgId]/settings/layout.tsx
+++ b/src/app/[orgId]/settings/layout.tsx
@@ -1,5 +1,4 @@
 import { Metadata } from "next";
-import { TopbarNav } from "@app/components/TopbarNav";
 import {
     Cog,
     Combine,
@@ -8,7 +7,6 @@ import {
     Users,
     Waypoints
 } from "lucide-react";
-import { Header } from "@app/components/Header";
 import { verifySession } from "@app/lib/auth/verifySession";
 import { redirect } from "next/navigation";
 import { internal } from "@app/lib/api";
@@ -18,14 +16,7 @@ import { authCookieHeader } from "@app/lib/api/cookies";
 import { cache } from "react";
 import { GetOrgUserResponse } from "@server/routers/user";
 import UserProvider from "@app/providers/UserProvider";
-import {
-    Breadcrumb,
-    BreadcrumbItem,
-    BreadcrumbList,
-    BreadcrumbPage,
-    BreadcrumbSeparator
-} from "@app/components/ui/breadcrumb";
-import Link from "next/link";
+import { Layout } from "@app/components/Layout";
 
 export const dynamic = "force-dynamic";
 
@@ -34,7 +25,7 @@ export const metadata: Metadata = {
     description: ""
 };
 
-const topNavItems = [
+const navItems = [
     {
         title: "Sites",
         href: "/{orgId}/settings/sites",
@@ -46,9 +37,19 @@ const topNavItems = [
         icon: <Waypoints className="h-4 w-4" />
     },
     {
-        title: "Users & Roles",
+        title: "Access Control",
         href: "/{orgId}/settings/access",
-        icon: <Users className="h-4 w-4" />
+        icon: <Users className="h-4 w-4" />,
+        children: [
+            {
+                title: "Users",
+                href: "/{orgId}/settings/access/users"
+            },
+            {
+                title: "Roles",
+                href: "/{orgId}/settings/access/roles"
+            }
+        ]
     },
     {
         title: "Shareable Links",
@@ -109,21 +110,10 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
     } catch (e) {}
 
     return (
-        <>
-            <div className="w-full bg-card sm:px-0 fixed top-0 z-10 border-b">
-                <div className="container mx-auto flex flex-col content-between">
-                    <div className="my-4 px-3 md:px-0">
-                        <UserProvider user={user}>
-                            <Header orgId={params.orgId} orgs={orgs} />
-                        </UserProvider>
-                    </div>
-                    <TopbarNav items={topNavItems} orgId={params.orgId} />
-                </div>
-            </div>
-
-            <div className="container mx-auto sm:px-0 px-3 pt-[155px]">
+        <UserProvider user={user}>
+            <Layout orgId={params.orgId} orgs={orgs} navItems={navItems}>
                 {children}
-            </div>
-        </>
+            </Layout>
+        </UserProvider>
     );
 }
diff --git a/src/app/[orgId]/settings/resources/ResourcesDataTable.tsx b/src/app/[orgId]/settings/resources/ResourcesDataTable.tsx
index 9cc0f79f..a9db3e79 100644
--- a/src/app/[orgId]/settings/resources/ResourcesDataTable.tsx
+++ b/src/app/[orgId]/settings/resources/ResourcesDataTable.tsx
@@ -2,149 +2,29 @@
 
 import {
     ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
-    getPaginationRowModel,
-    SortingState,
-    getSortedRowModel,
-    ColumnFiltersState,
-    getFilteredRowModel
 } from "@tanstack/react-table";
+import { DataTable } from "@app/components/ui/data-table";
 
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableContainer,
-    TableHead,
-    TableHeader,
-    TableRow
-} from "@/components/ui/table";
-import { Button } from "@app/components/ui/button";
-import { useState } from "react";
-import { Input } from "@app/components/ui/input";
-import { DataTablePagination } from "@app/components/DataTablePagination";
-import { Plus, Search } from "lucide-react";
-
-interface ResourcesDataTableProps<TData, TValue> {
+interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
-    addResource?: () => void;
+    createResource?: () => void;
 }
 
 export function ResourcesDataTable<TData, TValue>({
-    addResource,
     columns,
-    data
-}: ResourcesDataTableProps<TData, TValue>) {
-    const [sorting, setSorting] = useState<SortingState>([]);
-    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-    const [globalFilter, setGlobalFilter] = useState<any>([]);
-
-    const table = useReactTable({
-        data,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        onSortingChange: setSorting,
-        getSortedRowModel: getSortedRowModel(),
-        onColumnFiltersChange: setColumnFilters,
-        getFilteredRowModel: getFilteredRowModel(),
-        onGlobalFilterChange: setGlobalFilter,
-        initialState: {
-            pagination: {
-                pageSize: 20,
-                pageIndex: 0
-            }
-        },
-        state: {
-            sorting,
-            columnFilters,
-            globalFilter
-        }
-    });
-
+    data,
+    createResource
+}: DataTableProps<TData, TValue>) {
     return (
-        <div>
-            <div className="flex items-center justify-between pb-4">
-                <div className="flex items-center max-w-sm mr-2 w-full relative">
-                    <Input
-                        placeholder="Search resources"
-                        value={globalFilter ?? ""}
-                        onChange={(e) =>
-                            table.setGlobalFilter(String(e.target.value))
-                        }
-                        className="w-full pl-8"
-                    />
-                    <Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2" />
-                </div>
-                <Button
-                    onClick={() => {
-                        if (addResource) {
-                            addResource();
-                        }
-                    }}
-                >
-                    <Plus className="mr-2 h-4 w-4" /> Add Resource
-                </Button>
-            </div>
-            <TableContainer>
-                <Table>
-                    <TableHeader>
-                        {table.getHeaderGroups().map((headerGroup) => (
-                            <TableRow key={headerGroup.id}>
-                                {headerGroup.headers.map((header) => {
-                                    return (
-                                        <TableHead key={header.id}>
-                                            {header.isPlaceholder
-                                                ? null
-                                                : flexRender(
-                                                      header.column.columnDef
-                                                          .header,
-                                                      header.getContext()
-                                                  )}
-                                        </TableHead>
-                                    );
-                                })}
-                            </TableRow>
-                        ))}
-                    </TableHeader>
-                    <TableBody>
-                        {table.getRowModel().rows?.length ? (
-                            table.getRowModel().rows.map((row) => (
-                                <TableRow
-                                    key={row.id}
-                                    data-state={
-                                        row.getIsSelected() && "selected"
-                                    }
-                                >
-                                    {row.getVisibleCells().map((cell) => (
-                                        <TableCell key={cell.id}>
-                                            {flexRender(
-                                                cell.column.columnDef.cell,
-                                                cell.getContext()
-                                            )}
-                                        </TableCell>
-                                    ))}
-                                </TableRow>
-                            ))
-                        ) : (
-                            <TableRow>
-                                <TableCell
-                                    colSpan={columns.length}
-                                    className="h-24 text-center"
-                                >
-                                    No resources. Create one to get started.
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </TableContainer>
-            <div className="mt-4">
-                <DataTablePagination table={table} />
-            </div>
-        </div>
+        <DataTable
+            columns={columns}
+            data={data}
+            title="Resources"
+            searchPlaceholder="Search resources..."
+            searchColumn="name"
+            onAdd={createResource}
+            addButtonText="Add Resource"
+        />
     );
 }
diff --git a/src/app/[orgId]/settings/resources/ResourcesTable.tsx b/src/app/[orgId]/settings/resources/ResourcesTable.tsx
index 63a2b416..fa83a761 100644
--- a/src/app/[orgId]/settings/resources/ResourcesTable.tsx
+++ b/src/app/[orgId]/settings/resources/ResourcesTable.tsx
@@ -327,7 +327,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
             <ResourcesDataTable
                 columns={columns}
                 data={resources}
-                addResource={() => {
+                createResource={() => {
                     setIsCreateModalOpen(true);
                 }}
             />
diff --git a/src/app/[orgId]/settings/resources/[resourceId]/layout.tsx b/src/app/[orgId]/settings/resources/[resourceId]/layout.tsx
index af335c42..2c5983a5 100644
--- a/src/app/[orgId]/settings/resources/[resourceId]/layout.tsx
+++ b/src/app/[orgId]/settings/resources/[resourceId]/layout.tsx
@@ -7,7 +7,7 @@ import {
 import { AxiosResponse } from "axios";
 import { redirect } from "next/navigation";
 import { authCookieHeader } from "@app/lib/api/cookies";
-import { SidebarSettings } from "@app/components/SidebarSettings";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { GetOrgResponse } from "@server/routers/org";
 import OrgProvider from "@app/providers/OrgProvider";
@@ -80,29 +80,25 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
         redirect(`/${params.orgId}/settings/resources`);
     }
 
-    const sidebarNavItems = [
+    const navItems = [
         {
             title: "General",
             href: `/{orgId}/settings/resources/{resourceId}/general`
-            // icon: <Settings className="w-4 h-4" />,
         },
         {
             title: "Connectivity",
             href: `/{orgId}/settings/resources/{resourceId}/connectivity`
-            // icon: <Cloud className="w-4 h-4" />,
         }
     ];
 
     if (resource.http) {
-        sidebarNavItems.push({
+        navItems.push({
             title: "Authentication",
             href: `/{orgId}/settings/resources/{resourceId}/authentication`
-            // icon: <Shield className="w-4 h-4" />,
         });
-        sidebarNavItems.push({
+        navItems.push({
             title: "Rules",
             href: `/{orgId}/settings/resources/{resourceId}/rules`
-            // icon: <Shield className="w-4 h-4" />,
         });
     }
 
@@ -129,10 +125,12 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
 
             <OrgProvider org={org}>
                 <ResourceProvider resource={resource} authInfo={authInfo}>
-                    <SidebarSettings sidebarNavItems={sidebarNavItems}>
+                    <div className="space-y-6">
                         <ResourceInfoBox />
-                        {children}
-                    </SidebarSettings>
+                        <HorizontalTabs items={navItems}>
+                            {children}
+                        </HorizontalTabs>
+                    </div>
                 </ResourceProvider>
             </OrgProvider>
         </>
diff --git a/src/app/[orgId]/settings/resources/page.tsx b/src/app/[orgId]/settings/resources/page.tsx
index 496ce2a3..40f6296e 100644
--- a/src/app/[orgId]/settings/resources/page.tsx
+++ b/src/app/[orgId]/settings/resources/page.tsx
@@ -70,7 +70,7 @@ export default async function ResourcesPage(props: ResourcesPageProps) {
 
     return (
         <>
-            <ResourcesSplashCard />
+            {/* <ResourcesSplashCard /> */}
 
             <SettingsSectionTitle
                 title="Manage Resources"
diff --git a/src/app/[orgId]/settings/share-links/ShareLinksDataTable.tsx b/src/app/[orgId]/settings/share-links/ShareLinksDataTable.tsx
index ea0cfd91..35ab6d3d 100644
--- a/src/app/[orgId]/settings/share-links/ShareLinksDataTable.tsx
+++ b/src/app/[orgId]/settings/share-links/ShareLinksDataTable.tsx
@@ -2,149 +2,29 @@
 
 import {
     ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
-    getPaginationRowModel,
-    SortingState,
-    getSortedRowModel,
-    ColumnFiltersState,
-    getFilteredRowModel
 } from "@tanstack/react-table";
+import { DataTable } from "@app/components/ui/data-table";
 
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableContainer,
-    TableHead,
-    TableHeader,
-    TableRow
-} from "@/components/ui/table";
-import { Button } from "@app/components/ui/button";
-import { useState } from "react";
-import { Input } from "@app/components/ui/input";
-import { DataTablePagination } from "@app/components/DataTablePagination";
-import { Plus, Search } from "lucide-react";
-
-interface ShareLinksDataTableProps<TData, TValue> {
+interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
-    addShareLink?: () => void;
+    createShareLink?: () => void;
 }
 
 export function ShareLinksDataTable<TData, TValue>({
-    addShareLink,
     columns,
-    data
-}: ShareLinksDataTableProps<TData, TValue>) {
-    const [sorting, setSorting] = useState<SortingState>([]);
-    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-    const [globalFilter, setGlobalFilter] = useState<any>([]);
-
-    const table = useReactTable({
-        data,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        onSortingChange: setSorting,
-        getSortedRowModel: getSortedRowModel(),
-        onColumnFiltersChange: setColumnFilters,
-        getFilteredRowModel: getFilteredRowModel(),
-        onGlobalFilterChange: setGlobalFilter,
-        initialState: {
-            pagination: {
-                pageSize: 20,
-                pageIndex: 0
-            }
-        },
-        state: {
-            sorting,
-            columnFilters,
-            globalFilter
-        }
-    });
-
+    data,
+    createShareLink
+}: DataTableProps<TData, TValue>) {
     return (
-        <div>
-            <div className="flex items-center justify-between pb-4">
-                <div className="flex items-center max-w-sm mr-2 w-full relative">
-                    <Input
-                        placeholder="Search links"
-                        value={globalFilter ?? ""}
-                        onChange={(e) =>
-                            table.setGlobalFilter(String(e.target.value))
-                        }
-                        className="w-full pl-8"
-                    />
-                    <Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2" />
-                </div>
-                <Button
-                    onClick={() => {
-                        if (addShareLink) {
-                            addShareLink();
-                        }
-                    }}
-                >
-                    <Plus className="mr-2 h-4 w-4" /> Create Share Link
-                </Button>
-            </div>
-            <TableContainer>
-                <Table>
-                    <TableHeader>
-                        {table.getHeaderGroups().map((headerGroup) => (
-                            <TableRow key={headerGroup.id}>
-                                {headerGroup.headers.map((header) => {
-                                    return (
-                                        <TableHead key={header.id}>
-                                            {header.isPlaceholder
-                                                ? null
-                                                : flexRender(
-                                                      header.column.columnDef
-                                                          .header,
-                                                      header.getContext()
-                                                  )}
-                                        </TableHead>
-                                    );
-                                })}
-                            </TableRow>
-                        ))}
-                    </TableHeader>
-                    <TableBody>
-                        {table.getRowModel().rows?.length ? (
-                            table.getRowModel().rows.map((row) => (
-                                <TableRow
-                                    key={row.id}
-                                    data-state={
-                                        row.getIsSelected() && "selected"
-                                    }
-                                >
-                                    {row.getVisibleCells().map((cell) => (
-                                        <TableCell key={cell.id}>
-                                            {flexRender(
-                                                cell.column.columnDef.cell,
-                                                cell.getContext()
-                                            )}
-                                        </TableCell>
-                                    ))}
-                                </TableRow>
-                            ))
-                        ) : (
-                            <TableRow>
-                                <TableCell
-                                    colSpan={columns.length}
-                                    className="h-24 text-center"
-                                >
-                                    No links. Create one to get started.
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </TableContainer>
-            <div className="mt-4">
-                <DataTablePagination table={table} />
-            </div>
-        </div>
+        <DataTable
+            columns={columns}
+            data={data}
+            title="Share Links"
+            searchPlaceholder="Search share links..."
+            searchColumn="name"
+            onAdd={createShareLink}
+            addButtonText="Create Share Link"
+        />
     );
 }
diff --git a/src/app/[orgId]/settings/share-links/ShareLinksTable.tsx b/src/app/[orgId]/settings/share-links/ShareLinksTable.tsx
index 7d19b2b6..69c88cf7 100644
--- a/src/app/[orgId]/settings/share-links/ShareLinksTable.tsx
+++ b/src/app/[orgId]/settings/share-links/ShareLinksTable.tsx
@@ -306,7 +306,7 @@ export default function ShareLinksTable({
             <ShareLinksDataTable
                 columns={columns}
                 data={rows}
-                addShareLink={() => {
+                createShareLink={() => {
                     setIsCreateModalOpen(true);
                 }}
             />
diff --git a/src/app/[orgId]/settings/share-links/page.tsx b/src/app/[orgId]/settings/share-links/page.tsx
index e09a6b54..0bfa023d 100644
--- a/src/app/[orgId]/settings/share-links/page.tsx
+++ b/src/app/[orgId]/settings/share-links/page.tsx
@@ -53,7 +53,7 @@ export default async function ShareLinksPage(props: ShareLinksPageProps) {
 
     return (
         <>
-            <ShareableLinksSplash />
+            {/* <ShareableLinksSplash /> */}
 
             <SettingsSectionTitle
                 title="Manage Share Links"
diff --git a/src/app/[orgId]/settings/sites/SitesDataTable.tsx b/src/app/[orgId]/settings/sites/SitesDataTable.tsx
index ef6909f1..08d97955 100644
--- a/src/app/[orgId]/settings/sites/SitesDataTable.tsx
+++ b/src/app/[orgId]/settings/sites/SitesDataTable.tsx
@@ -2,149 +2,29 @@
 
 import {
     ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
-    getPaginationRowModel,
-    SortingState,
-    getSortedRowModel,
-    ColumnFiltersState,
-    getFilteredRowModel
 } from "@tanstack/react-table";
-
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableContainer,
-    TableHead,
-    TableHeader,
-    TableRow
-} from "@/components/ui/table";
-import { Button } from "@app/components/ui/button";
-import { useState } from "react";
-import { Input } from "@app/components/ui/input";
-import { DataTablePagination } from "@app/components/DataTablePagination";
-import { Plus, Search } from "lucide-react";
+import { DataTable } from "@app/components/ui/data-table";
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
-    addSite?: () => void;
+    createSite?: () => void;
 }
 
 export function SitesDataTable<TData, TValue>({
-    addSite,
     columns,
-    data
+    data,
+    createSite
 }: DataTableProps<TData, TValue>) {
-    const [sorting, setSorting] = useState<SortingState>([]);
-    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-    const [globalFilter, setGlobalFilter] = useState<any>([]);
-
-    const table = useReactTable({
-        data,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        onSortingChange: setSorting,
-        getSortedRowModel: getSortedRowModel(),
-        onColumnFiltersChange: setColumnFilters,
-        getFilteredRowModel: getFilteredRowModel(),
-        onGlobalFilterChange: setGlobalFilter,
-        initialState: {
-            pagination: {
-                pageSize: 20,
-                pageIndex: 0
-            }
-        },
-        state: {
-            sorting,
-            columnFilters,
-            globalFilter
-        }
-    });
-
     return (
-        <div>
-            <div className="flex items-center justify-between pb-4">
-                <div className="flex items-center max-w-sm mr-2 w-full relative">
-                    <Input
-                        placeholder="Search sites"
-                        value={globalFilter ?? ""}
-                        onChange={(e) =>
-                            table.setGlobalFilter(String(e.target.value))
-                        }
-                        className="w-full pl-8"
-                    />
-                    <Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2" />
-                </div>
-                <Button
-                    onClick={() => {
-                        if (addSite) {
-                            addSite();
-                        }
-                    }}
-                >
-                    <Plus className="mr-2 h-4 w-4" /> Add Site
-                </Button>
-            </div>
-            <TableContainer>
-                <Table>
-                    <TableHeader>
-                        {table.getHeaderGroups().map((headerGroup) => (
-                            <TableRow key={headerGroup.id}>
-                                {headerGroup.headers.map((header) => {
-                                    return (
-                                        <TableHead key={header.id}>
-                                            {header.isPlaceholder
-                                                ? null
-                                                : flexRender(
-                                                      header.column.columnDef
-                                                          .header,
-                                                      header.getContext()
-                                                  )}
-                                        </TableHead>
-                                    );
-                                })}
-                            </TableRow>
-                        ))}
-                    </TableHeader>
-                    <TableBody>
-                        {table.getRowModel().rows?.length ? (
-                            table.getRowModel().rows.map((row) => (
-                                <TableRow
-                                    key={row.id}
-                                    data-state={
-                                        row.getIsSelected() && "selected"
-                                    }
-                                >
-                                    {row.getVisibleCells().map((cell) => (
-                                        <TableCell key={cell.id}>
-                                            {flexRender(
-                                                cell.column.columnDef.cell,
-                                                cell.getContext()
-                                            )}
-                                        </TableCell>
-                                    ))}
-                                </TableRow>
-                            ))
-                        ) : (
-                            <TableRow>
-                                <TableCell
-                                    colSpan={columns.length}
-                                    className="h-24 text-center"
-                                >
-                                    No sites. Create one to get started.
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </TableContainer>
-            <div className="mt-4">
-                <DataTablePagination table={table} />
-            </div>
-        </div>
+        <DataTable
+            columns={columns}
+            data={data}
+            title="Sites"
+            searchPlaceholder="Search sites..."
+            searchColumn="name"
+            onAdd={createSite}
+            addButtonText="Add Site"
+        />
     );
 }
diff --git a/src/app/[orgId]/settings/sites/SitesTable.tsx b/src/app/[orgId]/settings/sites/SitesTable.tsx
index 43ae82a1..801cb909 100644
--- a/src/app/[orgId]/settings/sites/SitesTable.tsx
+++ b/src/app/[orgId]/settings/sites/SitesTable.tsx
@@ -47,7 +47,6 @@ type SitesTableProps = {
 export default function SitesTable({ sites, orgId }: SitesTableProps) {
     const router = useRouter();
 
-    const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const [selectedSite, setSelectedSite] = useState<SiteRow | null>(null);
     const [rows, setRows] = useState<SiteRow[]>(sites);
@@ -281,58 +280,20 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
 
     return (
         <>
-            <CreateSiteFormModal
-                open={isCreateModalOpen}
-                setOpen={setIsCreateModalOpen}
-                onCreate={(val) => {
-                    setRows([val, ...rows]);
-                }}
-                orgId={orgId}
-            />
-
             {selectedSite && (
                 <ConfirmDeleteDialog
                     open={isDeleteModalOpen}
-                    setOpen={(val) => {
-                        setIsDeleteModalOpen(val);
-                        setSelectedSite(null);
-                    }}
-                    dialog={
-                        <div className="space-y-4">
-                            <p>
-                                Are you sure you want to remove the site{" "}
-                                <b>{selectedSite?.name || selectedSite?.id}</b>{" "}
-                                from the organization?
-                            </p>
-
-                            <p>
-                                Once removed, the site will no longer be
-                                accessible.{" "}
-                                <b>
-                                    All resources and targets associated with
-                                    the site will also be removed.
-                                </b>
-                            </p>
-
-                            <p>
-                                To confirm, please type the name of the site
-                                below.
-                            </p>
-                        </div>
-                    }
-                    buttonText="Confirm Delete Site"
-                    onConfirm={async () => deleteSite(selectedSite!.id)}
-                    string={selectedSite.name}
+                    setOpen={setIsDeleteModalOpen}
+                    onConfirm={() => deleteSite(selectedSite.id)}
                     title="Delete Site"
+                    description="Are you sure you want to delete this site? This action cannot be undone."
                 />
             )}
 
             <SitesDataTable
                 columns={columns}
                 data={rows}
-                addSite={() => {
-                    router.push(`/${orgId}/settings/sites/create`);
-                }}
+                createSite={() => router.push(`/${orgId}/settings/sites/create`)}
             />
         </>
     );
diff --git a/src/app/[orgId]/settings/sites/[niceId]/layout.tsx b/src/app/[orgId]/settings/sites/[niceId]/layout.tsx
index 6b6a58e2..b5b10b7e 100644
--- a/src/app/[orgId]/settings/sites/[niceId]/layout.tsx
+++ b/src/app/[orgId]/settings/sites/[niceId]/layout.tsx
@@ -4,7 +4,7 @@ import { GetSiteResponse } from "@server/routers/site";
 import { AxiosResponse } from "axios";
 import { redirect } from "next/navigation";
 import { authCookieHeader } from "@app/lib/api/cookies";
-import { SidebarSettings } from "@app/components/SidebarSettings";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import Link from "next/link";
 import { ArrowLeft } from "lucide-react";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
@@ -38,7 +38,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
         redirect(`/${params.orgId}/settings/sites`);
     }
 
-    const sidebarNavItems = [
+    const navItems = [
         {
             title: "General",
             href: "/{orgId}/settings/sites/{niceId}/general"
@@ -46,32 +46,13 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
     ];
 
     return (
-        <>
-            <div className="mb-4 flex-row">
-                <Breadcrumb>
-                    <BreadcrumbList>
-                        <BreadcrumbItem>
-                            <Link href="../">Sites</Link>
-                        </BreadcrumbItem>
-                        <BreadcrumbSeparator />
-                        <BreadcrumbItem>
-                            <BreadcrumbPage>{site.name}</BreadcrumbPage>
-                        </BreadcrumbItem>
-                    </BreadcrumbList>
-                </Breadcrumb>
-            </div>
-
-            <SettingsSectionTitle
-                title={`${site?.name} Settings`}
-                description="Configure the settings on your site"
-            />
-
-            <SiteProvider site={site}>
-                <SidebarSettings sidebarNavItems={sidebarNavItems}>
-                    <SiteInfoCard />
+        <SiteProvider site={site}>
+            <div className="space-y-6">
+                <SiteInfoCard />
+                <HorizontalTabs items={navItems}>
                     {children}
-                </SidebarSettings>
-            </SiteProvider>
-        </>
+                </HorizontalTabs>
+            </div>
+        </SiteProvider>
     );
 }
diff --git a/src/app/[orgId]/settings/sites/page.tsx b/src/app/[orgId]/settings/sites/page.tsx
index f3fa4957..917a74a3 100644
--- a/src/app/[orgId]/settings/sites/page.tsx
+++ b/src/app/[orgId]/settings/sites/page.tsx
@@ -51,7 +51,7 @@ export default async function SitesPage(props: SitesPageProps) {
 
     return (
         <>
-            <SitesSplashCard />
+            {/* <SitesSplashCard /> */}
 
             <SettingsSectionTitle
                 title="Manage Sites"
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index f3e55a3f..a1f981d7 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -1,7 +1,5 @@
 import { Metadata } from "next";
-import { TopbarNav } from "@app/components/TopbarNav";
 import { Users } from "lucide-react";
-import { Header } from "@app/components/Header";
 import { verifySession } from "@app/lib/auth/verifySession";
 import { redirect } from "next/navigation";
 import { cache } from "react";
@@ -10,6 +8,7 @@ import { ListOrgsResponse } from "@server/routers/org";
 import { internal } from "@app/lib/api";
 import { AxiosResponse } from "axios";
 import { authCookieHeader } from "@app/lib/api/cookies";
+import { Layout } from "@app/components/Layout";
 
 export const dynamic = "force-dynamic";
 
@@ -18,7 +17,7 @@ export const metadata: Metadata = {
     description: ""
 };
 
-const topNavItems = [
+const navItems = [
     {
         title: "All Users",
         href: "/admin/users",
@@ -30,7 +29,7 @@ interface LayoutProps {
     children: React.ReactNode;
 }
 
-export default async function SettingsLayout(props: LayoutProps) {
+export default async function AdminLayout(props: LayoutProps) {
     const getUser = cache(verifySession);
     const user = await getUser();
 
@@ -51,21 +50,10 @@ export default async function SettingsLayout(props: LayoutProps) {
     } catch (e) {}
 
     return (
-        <>
-            <div className="w-full bg-card sm:px-0 fixed top-0 z-10 border-b">
-                <div className="container mx-auto flex flex-col content-between">
-                    <div className="my-4 px-3 md:px-0">
-                        <UserProvider user={user}>
-                            <Header orgId={""} orgs={orgs} />
-                        </UserProvider>
-                    </div>
-                    <TopbarNav items={topNavItems} />
-                </div>
-            </div>
-
-            <div className="container mx-auto sm:px-0 px-3 pt-[155px]">
+        <UserProvider user={user}>
+            <Layout orgs={orgs} navItems={navItems}>
                 {props.children}
-            </div>
-        </>
+            </Layout>
+        </UserProvider>
     );
 }
diff --git a/src/app/admin/users/AdminUsersDataTable.tsx b/src/app/admin/users/AdminUsersDataTable.tsx
index b125c539..7532a8cc 100644
--- a/src/app/admin/users/AdminUsersDataTable.tsx
+++ b/src/app/admin/users/AdminUsersDataTable.tsx
@@ -2,29 +2,8 @@
 
 import {
     ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
-    getPaginationRowModel,
-    SortingState,
-    getSortedRowModel,
-    ColumnFiltersState,
-    getFilteredRowModel
 } from "@tanstack/react-table";
-
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableContainer,
-    TableHead,
-    TableHeader,
-    TableRow
-} from "@/components/ui/table";
-import { useState } from "react";
-import { Input } from "@app/components/ui/input";
-import { DataTablePagination } from "@app/components/DataTablePagination";
-import { Search } from "lucide-react";
+import { DataTable } from "@app/components/ui/data-table";
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
@@ -35,107 +14,13 @@ export function UsersDataTable<TData, TValue>({
     columns,
     data
 }: DataTableProps<TData, TValue>) {
-    const [sorting, setSorting] = useState<SortingState>([]);
-    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-
-    const table = useReactTable({
-        data,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        onSortingChange: setSorting,
-        getSortedRowModel: getSortedRowModel(),
-        onColumnFiltersChange: setColumnFilters,
-        getFilteredRowModel: getFilteredRowModel(),
-        initialState: {
-            pagination: {
-                pageSize: 20,
-                pageIndex: 0
-            }
-        },
-        state: {
-            sorting,
-            columnFilters
-        }
-    });
-
     return (
-        <div>
-            <div className="flex items-center justify-between pb-4">
-                <div className="flex items-center max-w-sm mr-2 w-full relative">
-                    <Input
-                        placeholder="Search server users"
-                        value={
-                            (table
-                                .getColumn("email")
-                                ?.getFilterValue() as string) ?? ""
-                        }
-                        onChange={(event) =>
-                            table
-                                .getColumn("name")
-                                ?.setFilterValue(event.target.value)
-                        }
-                        className="w-full pl-8"
-                    />
-                    <Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2" />
-                </div>
-            </div>
-            <TableContainer>
-                <Table>
-                    <TableHeader>
-                        {table.getHeaderGroups().map((headerGroup) => (
-                            <TableRow key={headerGroup.id}>
-                                {headerGroup.headers.map((header) => {
-                                    return (
-                                        <TableHead key={header.id}>
-                                            {header.isPlaceholder
-                                                ? null
-                                                : flexRender(
-                                                      header.column.columnDef
-                                                          .header,
-                                                      header.getContext()
-                                                  )}
-                                        </TableHead>
-                                    );
-                                })}
-                            </TableRow>
-                        ))}
-                    </TableHeader>
-                    <TableBody>
-                        {table.getRowModel().rows?.length ? (
-                            table.getRowModel().rows.map((row) => (
-                                <TableRow
-                                    key={row.id}
-                                    data-state={
-                                        row.getIsSelected() && "selected"
-                                    }
-                                >
-                                    {row.getVisibleCells().map((cell) => (
-                                        <TableCell key={cell.id}>
-                                            {flexRender(
-                                                cell.column.columnDef.cell,
-                                                cell.getContext()
-                                            )}
-                                        </TableCell>
-                                    ))}
-                                </TableRow>
-                            ))
-                        ) : (
-                            <TableRow>
-                                <TableCell
-                                    colSpan={columns.length}
-                                    className="h-24 text-center"
-                                >
-                                    This server has no users.
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </TableContainer>
-            <div className="mt-4">
-                <DataTablePagination table={table} />
-            </div>
-        </div>
+        <DataTable
+            columns={columns}
+            data={data}
+            title="Server Users"
+            searchPlaceholder="Search server users..."
+            searchColumn="email"
+        />
     );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 53810c18..c8144c6c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -41,8 +41,6 @@ export default async function RootLayout({
     supporterData.visible = res.data.data.visible;
     supporterData.tier = res.data.data.tier;
 
-    const version = env.app.version;
-
     return (
         <html suppressHydrationWarning>
             <body className={`${font.className} min-h-screen flex flex-col`}>
@@ -55,72 +53,11 @@ export default async function RootLayout({
                     <EnvProvider env={pullEnv()}>
                         <SupportStatusProvider supporterStatus={supporterData}>
                             {/* Main content */}
-                            <div className="grow pb-3 md:pb-0">
-                                {children}
-                            </div>
-
-                            {/* Footer */}
-                            <footer className="hidden md:block w-full mt-12 py-3 mb-6 px-4">
-                                <div className="container mx-auto flex flex-wrap justify-center items-center h-3 space-x-4 text-sm text-neutral-400 dark:text-neutral-600">
-                                    {supporterData?.tier ? (
-                                        <SupporterMessage
-                                            tier={supporterData.tier}
-                                        />
-                                    ) : (
-                                        <div className="flex items-center space-x-2 whitespace-nowrap">
-                                            <span>Pangolin</span>
-                                        </div>
-                                    )}
-                                    <Separator orientation="vertical" />
-                                    <a
-                                        href="https://fossorial.io/"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        aria-label="Built by Fossorial"
-                                        className="flex items-center space-x-3 whitespace-nowrap"
-                                    >
-                                        <span>Fossorial</span>
-                                        <ExternalLink className="w-3 h-3" />
-                                    </a>
-                                    <Separator orientation="vertical" />
-                                    <a
-                                        href="https://github.com/fosrl/pangolin"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        aria-label="GitHub"
-                                        className="flex items-center space-x-3 whitespace-nowrap"
-                                    >
-                                        <span>Open Source</span>
-                                        <svg
-                                            xmlns="http://www.w3.org/2000/svg"
-                                            viewBox="0 0 24 24"
-                                            fill="currentColor"
-                                            className="w-3 h-3"
-                                        >
-                                            <path d="M12 0C5.37 0 0 5.373 0 12c0 5.303 3.438 9.8 8.207 11.385.6.11.82-.26.82-.577v-2.17c-3.338.726-4.042-1.61-4.042-1.61-.546-1.385-1.333-1.755-1.333-1.755-1.09-.744.082-.73.082-.73 1.205.085 1.84 1.24 1.84 1.24 1.07 1.835 2.807 1.305 3.492.997.107-.775.42-1.305.763-1.605-2.665-.305-5.467-1.335-5.467-5.93 0-1.31.468-2.382 1.236-3.22-.123-.303-.535-1.523.117-3.176 0 0 1.008-.322 3.3 1.23a11.52 11.52 0 013.006-.403c1.02.005 2.045.137 3.006.403 2.29-1.552 3.295-1.23 3.295-1.23.654 1.653.242 2.873.12 3.176.77.838 1.235 1.91 1.235 3.22 0 4.605-2.805 5.623-5.475 5.92.43.37.814 1.1.814 2.22v3.293c0 .32.217.693.825.576C20.565 21.795 24 17.298 24 12 24 5.373 18.627 0 12 0z" />
-                                        </svg>
-                                    </a>
-                                    <Separator orientation="vertical" />
-                                    <a
-                                        href="https://docs.fossorial.io/Pangolin/overview"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        aria-label="Documentation"
-                                        className="flex items-center space-x-3 whitespace-nowrap"
-                                    >
-                                        <span>Documentation</span>
-                                        <BookOpenText className="w-3 h-3" />
-                                    </a>
-                                    {version && (
-                                        <>
-                                            <Separator orientation="vertical" />
-                                            <div className="whitespace-nowrap">
-                                                v{version}
-                                            </div>
-                                        </>
-                                    )}
+                            <div className="flex flex-col min-h-screen">
+                                <div className="flex-1">
+                                    {children}
                                 </div>
-                            </footer>
+                            </div>
                         </SupportStatusProvider>
                     </EnvProvider>
                     <Toaster />
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
new file mode 100644
index 00000000..bec0973f
--- /dev/null
+++ b/src/components/Breadcrumbs.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import { ChevronRight } from "lucide-react";
+import { cn } from "@app/lib/cn";
+
+interface BreadcrumbItem {
+    label: string;
+    href: string;
+}
+
+export function Breadcrumbs() {
+    const pathname = usePathname();
+    const segments = pathname.split("/").filter(Boolean);
+
+    const breadcrumbs: BreadcrumbItem[] = segments.map((segment, index) => {
+        const href = `/${segments.slice(0, index + 1).join("/")}`;
+        let label = segment;
+
+        // Format labels
+        if (segment === "settings") {
+            label = "Settings";
+        } else if (segment === "sites") {
+            label = "Sites";
+        } else if (segment === "resources") {
+            label = "Resources";
+        } else if (segment === "access") {
+            label = "Users & Roles";
+        } else if (segment === "general") {
+            label = "General";
+        } else if (segment === "share-links") {
+            label = "Shareable Links";
+        } else if (segment === "users") {
+            label = "Users";
+        } else if (segment === "roles") {
+            label = "Roles";
+        } else if (segment === "invitations") {
+            label = "Invitations";
+        } else if (segment === "connectivity") {
+            label = "Connectivity";
+        } else if (segment === "authentication") {
+            label = "Authentication";
+        }
+
+        return { label, href };
+    });
+
+    return (
+        <div className="border-b px-4 py-2">
+            <nav className="flex items-center space-x-1 text-sm text-muted-foreground">
+                <Link href="/" className="hover:text-foreground">
+                    Home
+                </Link>
+                {breadcrumbs.map((crumb, index) => (
+                    <div key={crumb.href} className="flex items-center">
+                        <ChevronRight className="h-4 w-4" />
+                        <Link
+                            href={crumb.href}
+                            className={cn(
+                                "ml-1 hover:text-foreground",
+                                index === breadcrumbs.length - 1 && "text-foreground font-medium"
+                            )}
+                        >
+                            {crumb.label}
+                        </Link>
+                    </div>
+                ))}
+            </nav>
+        </div>
+    );
+} 
\ No newline at end of file
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 8b6e9ad2..6c0fc65a 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,160 +1,22 @@
 "use client";
 
-import { Button } from "@app/components/ui/button";
-import {
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList,
-    CommandSeparator
-} from "@app/components/ui/command";
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger
-} from "@app/components/ui/popover";
-import { useEnvContext } from "@app/hooks/useEnvContext";
-import { cn } from "@app/lib/cn";
-import { ListOrgsResponse } from "@server/routers/org";
-import { Check, ChevronsUpDown, Plus } from "lucide-react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { useUserContext } from "@app/hooks/useUserContext";
-import ProfileIcon from "./ProfileIcon";
-import SupporterStatus from "./SupporterStatus";
+import { useEnvContext } from "@app/hooks/useEnvContext";
 
-type HeaderProps = {
+interface HeaderProps {
     orgId?: string;
-    orgs?: ListOrgsResponse["orgs"];
-};
+    orgs?: any;
+}
 
 export function Header({ orgId, orgs }: HeaderProps) {
-    const { user, updateUser } = useUserContext();
-
-    const [open, setOpen] = useState(false);
-
-    const router = useRouter();
-
     const { env } = useEnvContext();
 
     return (
-        <>
-            <div className="flex items-center justify-between">
-                <ProfileIcon />
-
-                <div className="flex items-center">
-                    <div className="hidden md:block">
-                        <div className="flex items-center gap-4 mr-4">
-                            <Link
-                                href="https://docs.fossorial.io/Pangolin/overview"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="text-muted-foreground hover:text-foreground"
-                            >
-                                Documentation
-                            </Link>
-                            <a
-                                href="mailto:support@fossorial.io"
-                                className="text-muted-foreground hover:text-foreground"
-                            >
-                                Support
-                            </a>
-                        </div>
-                    </div>
-
-                    {orgs && (
-                        <Popover open={open} onOpenChange={setOpen}>
-                            <PopoverTrigger asChild>
-                                <Button
-                                    variant="outline"
-                                    size="lg"
-                                    role="combobox"
-                                    aria-expanded={open}
-                                    className="w-full md:w-[200px] h-12 px-3 py-4 bg-neutral hover:bg-neutral"
-                                >
-                                    <div className="flex items-center justify-between w-full">
-                                        <div className="flex flex-col items-start">
-                                            <span className="font-bold text-sm">
-                                                Organization
-                                            </span>
-                                            <span className="text-sm text-muted-foreground">
-                                                {orgId
-                                                    ? orgs?.find(
-                                                          (org) =>
-                                                              org.orgId ===
-                                                              orgId
-                                                      )?.name
-                                                    : "None selected"}
-                                            </span>
-                                        </div>
-                                        <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
-                                    </div>
-                                </Button>
-                            </PopoverTrigger>
-                            <PopoverContent className="[100px] md:w-[180px] p-0">
-                                <Command>
-                                    <CommandInput placeholder="Search..." />
-                                    <CommandEmpty>
-                                        No organizations found.
-                                    </CommandEmpty>
-                                    {(!env.flags.disableUserCreateOrg ||
-                                        user.serverAdmin) && (
-                                        <>
-                                            <CommandGroup heading="Create">
-                                                <CommandList>
-                                                    <CommandItem
-                                                        onSelect={(
-                                                            currentValue
-                                                        ) => {
-                                                            router.push(
-                                                                "/setup"
-                                                            );
-                                                        }}
-                                                    >
-                                                        <Plus className="mr-2 h-4 w-4" />
-                                                        New Organization
-                                                    </CommandItem>
-                                                </CommandList>
-                                            </CommandGroup>
-                                            <CommandSeparator />
-                                        </>
-                                    )}
-                                    <CommandGroup heading="Organizations">
-                                        <CommandList>
-                                            {orgs.map((org) => (
-                                                <CommandItem
-                                                    key={org.orgId}
-                                                    onSelect={(
-                                                        currentValue
-                                                    ) => {
-                                                        router.push(
-                                                            `/${org.orgId}/settings`
-                                                        );
-                                                    }}
-                                                >
-                                                    <Check
-                                                        className={cn(
-                                                            "mr-2 h-4 w-4",
-                                                            orgId === org.orgId
-                                                                ? "opacity-100"
-                                                                : "opacity-0"
-                                                        )}
-                                                    />
-                                                    {org.name}
-                                                </CommandItem>
-                                            ))}
-                                        </CommandList>
-                                    </CommandGroup>
-                                </Command>
-                            </PopoverContent>
-                        </Popover>
-                    )}
-                </div>
-            </div>
-        </>
+        <div className="flex items-center justify-between w-full">
+            <Link href="/" className="flex items-center space-x-2">
+                <span className="font-bold">Pangolin</span>
+            </Link>
+        </div>
     );
 }
 
diff --git a/src/components/HorizontalTabs.tsx b/src/components/HorizontalTabs.tsx
new file mode 100644
index 00000000..f79b6fc8
--- /dev/null
+++ b/src/components/HorizontalTabs.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+import { cn } from "@app/lib/cn";
+import { buttonVariants } from "@/components/ui/button";
+
+interface HorizontalTabsProps {
+    children: React.ReactNode;
+    items: Array<{
+        title: string;
+        href: string;
+        icon?: React.ReactNode;
+    }>;
+    disabled?: boolean;
+}
+
+export function HorizontalTabs({
+    children,
+    items,
+    disabled = false
+}: HorizontalTabsProps) {
+    const pathname = usePathname();
+    const params = useParams();
+
+    function hydrateHref(href: string) {
+        return href.replace("{orgId}", params.orgId as string);
+    }
+
+    return (
+        <div className="space-y-6">
+            <div className="relative">
+                <div className="overflow-x-auto scrollbar-hide">
+                    <div className="flex space-x-4 border-b min-w-max">
+                        {items.map((item) => {
+                            const hydratedHref = hydrateHref(item.href);
+                            const isActive = pathname.startsWith(hydratedHref) && !pathname.includes("create");
+
+                            return (
+                                <Link
+                                    key={hydratedHref}
+                                    href={hydratedHref}
+                                    className={cn(
+                                        "px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap",
+                                        isActive
+                                            ? "border-b-2 border-primary text-primary"
+                                            : "text-muted-foreground hover:text-foreground",
+                                        disabled && "cursor-not-allowed"
+                                    )}
+                                    onClick={disabled ? (e) => e.preventDefault() : undefined}
+                                    tabIndex={disabled ? -1 : undefined}
+                                    aria-disabled={disabled}
+                                >
+                                    {item.icon ? (
+                                        <div className="flex items-center space-x-2">
+                                            {item.icon}
+                                            <span>{item.title}</span>
+                                        </div>
+                                    ) : (
+                                        item.title
+                                    )}
+                                </Link>
+                            );
+                        })}
+                    </div>
+                </div>
+            </div>
+            <div className="space-y-6">
+                {children}
+            </div>
+        </div>
+    );
+} 
\ No newline at end of file
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
new file mode 100644
index 00000000..9c327019
--- /dev/null
+++ b/src/components/Layout.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import React, { useState } from "react";
+import { Header } from "@app/components/Header";
+import { SidebarNav } from "@app/components/SidebarNav";
+import { TopBar } from "@app/components/TopBar";
+import { OrgSelector } from "@app/components/OrgSelector";
+import { cn } from "@app/lib/cn";
+import { ListOrgsResponse } from "@server/routers/org";
+import SupporterStatus from "@app/components/SupporterStatus";
+import { Separator } from "@app/components/ui/separator";
+import { Button } from "@app/components/ui/button";
+import { Menu, X } from "lucide-react";
+import { Sheet, SheetContent, SheetTrigger, SheetTitle, SheetDescription } from "@app/components/ui/sheet";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { Breadcrumbs } from "@app/components/Breadcrumbs";
+
+interface LayoutProps {
+    children: React.ReactNode;
+    orgId?: string;
+    orgs?: ListOrgsResponse["orgs"];
+    navItems: Array<{
+        title: string;
+        href: string;
+        icon?: React.ReactNode;
+        children?: Array<{
+            title: string;
+            href: string;
+            icon?: React.ReactNode;
+        }>;
+    }>;
+}
+
+export function Layout({ children, orgId, orgs, navItems }: LayoutProps) {
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+    const { env } = useEnvContext();
+
+    return (
+        <div className="flex h-screen overflow-hidden">
+            {/* Mobile Menu Button */}
+            <div className="md:hidden fixed top-4 left-4 z-50">
+                <Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
+                    <SheetTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                            <Menu className="h-6 w-6" />
+                        </Button>
+                    </SheetTrigger>
+                    <SheetContent side="left" className="w-64 p-0">
+                        <SheetTitle className="sr-only">Navigation Menu</SheetTitle>
+                        <SheetDescription className="sr-only">
+                            Main navigation menu for the application
+                        </SheetDescription>
+                        <div className="flex h-16 items-center border-b px-4">
+                            <Header orgId={orgId} orgs={orgs} />
+                        </div>
+                        <div className="flex-1 overflow-y-auto p-4">
+                            <SidebarNav items={navItems} />
+                        </div>
+                        <div className="p-4 space-y-4 border-t">
+                            <SupporterStatus />
+                            <OrgSelector orgId={orgId} orgs={orgs} />
+                            {env?.app?.version && (
+                                <div className="text-xs text-muted-foreground text-center">
+                                    v{env.app.version}
+                                </div>
+                            )}
+                        </div>
+                    </SheetContent>
+                </Sheet>
+            </div>
+
+            {/* Desktop Sidebar */}
+            <div className="hidden md:flex w-64 border-r bg-card flex-col h-full shrink-0">
+                <div className="flex h-16 items-center border-b px-4 shrink-0">
+                    <Header orgId={orgId} orgs={orgs} />
+                </div>
+                <div className="flex-1 overflow-y-auto p-4">
+                    <SidebarNav items={navItems} />
+                </div>
+                <div className="p-4 space-y-4 border-t shrink-0">
+                    <SupporterStatus />
+                    <OrgSelector orgId={orgId} orgs={orgs} />
+                    {env?.app?.version && (
+                        <div className="text-xs text-muted-foreground text-center">
+                            v{env.app.version}
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* Main content */}
+            <div className="flex-1 flex flex-col h-full min-w-0">
+                <div className="h-16 border-b shrink-0">
+                    <div className="flex h-full items-center justify-end px-4">
+                        <TopBar orgId={orgId} orgs={orgs} />
+                    </div>
+                </div>
+                <Breadcrumbs />
+                <main className="flex-1 overflow-y-auto p-4 w-full">
+                    <div className="container mx-auto max-w-12xl">
+                        {children}
+                    </div>
+                </main>
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/OrgSelector.tsx b/src/components/OrgSelector.tsx
new file mode 100644
index 00000000..c6a66725
--- /dev/null
+++ b/src/components/OrgSelector.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { Button } from "@app/components/ui/button";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+    CommandSeparator
+} from "@app/components/ui/command";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "@app/components/ui/popover";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { cn } from "@app/lib/cn";
+import { ListOrgsResponse } from "@server/routers/org";
+import { Check, ChevronsUpDown, Plus } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useUserContext } from "@app/hooks/useUserContext";
+
+interface OrgSelectorProps {
+    orgId?: string;
+    orgs?: ListOrgsResponse["orgs"];
+}
+
+export function OrgSelector({ orgId, orgs }: OrgSelectorProps) {
+    const { user } = useUserContext();
+    const [open, setOpen] = useState(false);
+    const router = useRouter();
+    const { env } = useEnvContext();
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    variant="outline"
+                    size="lg"
+                    role="combobox"
+                    aria-expanded={open}
+                    className="w-full h-12 px-3 py-4 bg-neutral hover:bg-neutral"
+                >
+                    <div className="flex items-center justify-between w-full">
+                        <div className="flex flex-col items-start">
+                            <span className="font-bold text-sm">
+                                Organization
+                            </span>
+                            <span className="text-sm text-muted-foreground">
+                                {orgId
+                                    ? orgs?.find(
+                                          (org) =>
+                                              org.orgId ===
+                                              orgId
+                                      )?.name
+                                    : "None selected"}
+                            </span>
+                        </div>
+                        <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+                    </div>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[180px] p-0">
+                <Command>
+                    <CommandInput placeholder="Search..." />
+                    <CommandEmpty>
+                        No organizations found.
+                    </CommandEmpty>
+                    {(!env.flags.disableUserCreateOrg ||
+                        user.serverAdmin) && (
+                        <>
+                            <CommandGroup heading="Create">
+                                <CommandList>
+                                    <CommandItem
+                                        onSelect={(
+                                            currentValue
+                                        ) => {
+                                            router.push(
+                                                "/setup"
+                                            );
+                                        }}
+                                    >
+                                        <Plus className="mr-2 h-4 w-4" />
+                                        New Organization
+                                    </CommandItem>
+                                </CommandList>
+                            </CommandGroup>
+                            <CommandSeparator />
+                        </>
+                    )}
+                    <CommandGroup heading="Organizations">
+                        <CommandList>
+                            {orgs?.map((org) => (
+                                <CommandItem
+                                    key={org.orgId}
+                                    onSelect={(
+                                        currentValue
+                                    ) => {
+                                        router.push(
+                                            `/${org.orgId}/settings`
+                                        );
+                                    }}
+                                >
+                                    <Check
+                                        className={cn(
+                                            "mr-2 h-4 w-4",
+                                            orgId === org.orgId
+                                                ? "opacity-100"
+                                                : "opacity-0"
+                                        )}
+                                    />
+                                    {org.name}
+                                </CommandItem>
+                            ))}
+                        </CommandList>
+                    </CommandGroup>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+} 
\ No newline at end of file
diff --git a/src/components/ProfileIcon.tsx b/src/components/ProfileIcon.tsx
index b8d13d7a..39f89377 100644
--- a/src/components/ProfileIcon.tsx
+++ b/src/components/ProfileIcon.tsx
@@ -66,7 +66,10 @@ export default function ProfileIcon() {
             <Enable2FaForm open={openEnable2fa} setOpen={setOpenEnable2fa} />
             <Disable2FaForm open={openDisable2fa} setOpen={setOpenDisable2fa} />
 
-            <div className="flex items-center md:gap-4 gap-2 grow min-w-0">
+            <div className="flex items-center md:gap-4 grow min-w-0">
+                <span className="truncate max-w-full font-medium min-w-0">
+                    {user.email}
+                </span>
                 <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                         <Button
@@ -150,12 +153,6 @@ export default function ProfileIcon() {
                         </DropdownMenuItem>
                     </DropdownMenuContent>
                 </DropdownMenu>
-                <span className="truncate max-w-full font-medium min-w-0 mr-1">
-                    {user.email}
-                </span>
-                <div className="hidden md:block">
-                    <SupporterStatus />
-                </div>
             </div>
         </>
     );
diff --git a/src/components/SidebarNav.tsx b/src/components/SidebarNav.tsx
index 20ef5bd1..318a8091 100644
--- a/src/components/SidebarNav.tsx
+++ b/src/components/SidebarNav.tsx
@@ -1,17 +1,9 @@
 "use client";
 
-import React, { useEffect } from "react";
+import React from "react";
 import Link from "next/link";
-import { useParams, usePathname, useRouter } from "next/navigation";
+import { useParams, usePathname } from "next/navigation";
 import { cn } from "@app/lib/cn";
-import { buttonVariants } from "@/components/ui/button";
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue
-} from "@/components/ui/select";
 import { CornerDownRight } from "lucide-react";
 
 interface SidebarNavItem {
@@ -39,43 +31,6 @@ export function SidebarNav({
     const resourceId = params.resourceId as string;
     const userId = params.userId as string;
 
-    const [selectedValue, setSelectedValue] =
-        React.useState<string>(getSelectedValue());
-
-    useEffect(() => {
-        setSelectedValue(getSelectedValue());
-    }, [usePathname()]);
-
-    const router = useRouter();
-
-    const handleSelectChange = (value: string) => {
-        if (!disabled) {
-            router.push(value);
-        }
-    };
-
-    function getSelectedValue() {
-        let foundHref = "";
-        for (const item of items) {
-            const hydratedHref = hydrateHref(item.href);
-            if (hydratedHref === pathname) {
-                foundHref = hydratedHref;
-                break;
-            }
-            if (item.children) {
-                for (const child of item.children) {
-                    const hydratedChildHref = hydrateHref(child.href);
-                    if (hydratedChildHref === pathname) {
-                        foundHref = hydratedChildHref;
-                        break;
-                    }
-                }
-            }
-            if (foundHref) break;
-        }
-        return foundHref;
-    }
-
     function hydrateHref(val: string): string {
         return val
             .replace("{orgId}", orgId)
@@ -85,142 +40,72 @@ export function SidebarNav({
     }
 
     function renderItems(items: SidebarNavItem[]) {
-        return items.map((item) => (
-            <div key={hydrateHref(item.href)}>
-                <Link
-                    href={hydrateHref(item.href)}
-                    className={cn(
-                        "w-full",
-                        buttonVariants({ variant: "ghost" }),
-                        pathname === hydrateHref(item.href) &&
-                            !pathname.includes("create")
-                            ? "bg-accent hover:bg-accent dark:bg-border dark:hover:bg-border"
-                            : "hover:bg-transparent hover:underline",
-                        "justify-start",
-                        disabled && "cursor-not-allowed"
-                    )}
-                    onClick={disabled ? (e) => e.preventDefault() : undefined}
-                    tabIndex={disabled ? -1 : undefined}
-                    aria-disabled={disabled}
-                >
-                    {item.icon ? (
-                        <div className="flex items-center space-x-2">
-                            {item.icon}
-                            <span>{item.title}</span>
+        return items.map((item) => {
+            const hydratedHref = hydrateHref(item.href);
+            const isActive = pathname.startsWith(hydratedHref) && !pathname.includes("create");
+
+            return (
+                <div key={hydratedHref}>
+                    <Link
+                        href={hydratedHref}
+                        className={cn(
+                            "flex items-center py-2 px-3 w-full transition-colors",
+                            isActive
+                                ? "text-primary font-medium"
+                                : "text-muted-foreground hover:text-foreground",
+                            disabled && "cursor-not-allowed opacity-60"
+                        )}
+                        onClick={disabled ? (e) => e.preventDefault() : undefined}
+                        tabIndex={disabled ? -1 : undefined}
+                        aria-disabled={disabled}
+                    >
+                        {item.icon && <span className="mr-2">{item.icon}</span>}
+                        {item.title}
+                    </Link>
+                    {item.children && (
+                        <div className="ml-4 space-y-1 mt-1">
+                            {item.children.map((child) => {
+                                const hydratedChildHref = hydrateHref(child.href);
+                                const isChildActive = pathname.startsWith(hydratedChildHref) && !pathname.includes("create");
+
+                                return (
+                                    <Link
+                                        key={hydratedChildHref}
+                                        href={hydratedChildHref}
+                                        className={cn(
+                                            "flex items-center text-sm py-2 px-3 w-full transition-colors",
+                                            isChildActive
+                                                ? "text-primary font-medium"
+                                                : "text-muted-foreground hover:text-foreground",
+                                            disabled && "cursor-not-allowed opacity-60"
+                                        )}
+                                        onClick={disabled ? (e) => e.preventDefault() : undefined}
+                                        tabIndex={disabled ? -1 : undefined}
+                                        aria-disabled={disabled}
+                                    >
+                                        <CornerDownRight className="h-4 w-4 text-muted-foreground/70 mr-2" />
+                                        {child.icon && <span className="mr-2">{child.icon}</span>}
+                                        {child.title}
+                                    </Link>
+                                );
+                            })}
                         </div>
-                    ) : (
-                        item.title
                     )}
-                </Link>
-                {item.children && (
-                    <div className="ml-4 space-y-2">
-                        {item.children.map((child) => (
-                            <div
-                                key={hydrateHref(child.href)}
-                                className="flex items-center space-x-2"
-                            >
-                                <Link
-                                    href={hydrateHref(child.href)}
-                                    className={cn(
-                                        "w-full",
-                                        buttonVariants({ variant: "ghost" }),
-                                        pathname === hydrateHref(child.href) &&
-                                            !pathname.includes("create")
-                                            ? "bg-accent hover:bg-accent dark:bg-border dark:hover:bg-border"
-                                            : "hover:bg-transparent hover:underline",
-                                        "justify-start",
-                                        disabled && "cursor-not-allowed"
-                                    )}
-                                    onClick={
-                                        disabled
-                                            ? (e) => e.preventDefault()
-                                            : undefined
-                                    }
-                                    tabIndex={disabled ? -1 : undefined}
-                                    aria-disabled={disabled}
-                                >
-                                    <CornerDownRight className="h-4 w-4 text-gray-500 mr-2" />
-                                    {child.icon ? (
-                                        <div className="flex items-center space-x-2">
-                                            {child.icon}
-                                            <span>{child.title}</span>
-                                        </div>
-                                    ) : (
-                                        child.title
-                                    )}
-                                </Link>
-                            </div>
-                        ))}
-                    </div>
-                )}
-            </div>
-        ));
+                </div>
+            );
+        });
     }
 
     return (
-        <div>
-            <div className="block lg:hidden">
-                <Select
-                    defaultValue={selectedValue}
-                    value={selectedValue}
-                    onValueChange={handleSelectChange}
-                    disabled={disabled}
-                >
-                    <SelectTrigger>
-                        <SelectValue placeholder="Select an option" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        {items.flatMap((item) => {
-                            const topLevelItem = (
-                                <SelectItem
-                                    key={hydrateHref(item.href)}
-                                    value={hydrateHref(item.href)}
-                                >
-                                    {item.icon ? (
-                                        <div className="flex items-center space-x-2">
-                                            {item.icon}
-                                            <span>{item.title}</span>
-                                        </div>
-                                    ) : (
-                                        item.title
-                                    )}
-                                </SelectItem>
-                            );
-                            const childItems =
-                                item.children?.map((child) => (
-                                    <SelectItem
-                                        key={hydrateHref(child.href)}
-                                        value={hydrateHref(child.href)}
-                                        className="pl-8"
-                                    >
-                                        <div className="flex items-center space-x-2">
-                                            <CornerDownRight className="h-4 w-4 text-gray-500" />
-                                            {child.icon ? (
-                                                <>
-                                                    {child.icon}
-                                                    <span>{child.title}</span>
-                                                </>
-                                            ) : (
-                                                <span>{child.title}</span>
-                                            )}
-                                        </div>
-                                    </SelectItem>
-                                )) || [];
-                            return [topLevelItem, ...childItems];
-                        })}
-                    </SelectContent>
-                </Select>
-            </div>
-            <nav
-                className={cn(
-                    "hidden lg:flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-3 pr-8",
-                    disabled && "opacity-50 pointer-events-none",
-                    className
-                )}
-                {...props}
-            >
-                {renderItems(items)}
-            </nav>
-        </div>
+        <nav
+            className={cn(
+                "flex flex-col space-y-1",
+                disabled && "pointer-events-none opacity-60",
+                className
+            )}
+            {...props}
+        >
+            {renderItems(items)}
+        </nav>
     );
 }
diff --git a/src/components/SupporterStatus.tsx b/src/components/SupporterStatus.tsx
index a08fdf77..baeeb545 100644
--- a/src/components/SupporterStatus.tsx
+++ b/src/components/SupporterStatus.tsx
@@ -419,7 +419,7 @@ export default function SupporterStatus() {
                 <Button
                     variant="outlinePrimary"
                     size="sm"
-                    className="gap-2"
+                    className="gap-2 w-full"
                     onClick={() => {
                         setPurchaseOptionsOpen(true);
                     }}
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
new file mode 100644
index 00000000..4fbd62e3
--- /dev/null
+++ b/src/components/TopBar.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import ProfileIcon from "@app/components/ProfileIcon";
+import Link from "next/link";
+
+interface TopBarProps {
+    orgId?: string;
+    orgs?: any;
+}
+
+export function TopBar({ orgId, orgs }: TopBarProps) {
+    return (
+        <div className="flex items-center justify-between w-full h-full">
+            <div className="flex items-center space-x-4">
+                <Link
+                    href="https://docs.fossorial.io"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-muted-foreground hover:text-foreground transition-colors"
+                >
+                    Documentation
+                </Link>
+                <Link
+                    href="https://fossorial.io/support"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-muted-foreground hover:text-foreground transition-colors"
+                >
+                    Support
+                </Link>
+            </div>
+            <div>
+                <ProfileIcon />
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/ui/data-table.tsx b/src/components/ui/data-table.tsx
new file mode 100644
index 00000000..23bf8942
--- /dev/null
+++ b/src/components/ui/data-table.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    getPaginationRowModel,
+    SortingState,
+    getSortedRowModel,
+    ColumnFiltersState,
+    getFilteredRowModel
+} from "@tanstack/react-table";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow
+} from "@/components/ui/table";
+import { Button } from "@app/components/ui/button";
+import { useState } from "react";
+import { Input } from "@app/components/ui/input";
+import { DataTablePagination } from "@app/components/DataTablePagination";
+import { Plus, Search } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@app/components/ui/card";
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    title?: string;
+    addButtonText?: string;
+    onAdd?: () => void;
+    searchPlaceholder?: string;
+    searchColumn?: string;
+}
+
+export function DataTable<TData, TValue>({
+    columns,
+    data,
+    title,
+    addButtonText,
+    onAdd,
+    searchPlaceholder = "Search...",
+    searchColumn = "name"
+}: DataTableProps<TData, TValue>) {
+    const [sorting, setSorting] = useState<SortingState>([]);
+    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        onSortingChange: setSorting,
+        getSortedRowModel: getSortedRowModel(),
+        onColumnFiltersChange: setColumnFilters,
+        getFilteredRowModel: getFilteredRowModel(),
+        initialState: {
+            pagination: {
+                pageSize: 20,
+                pageIndex: 0
+            }
+        },
+        state: {
+            sorting,
+            columnFilters
+        }
+    });
+
+    return (
+        <div className="container mx-auto max-w-12xl">
+            <Card>
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
+                    <div className="flex items-center max-w-sm w-full relative">
+                        <Input
+                            placeholder={searchPlaceholder}
+                            value={(table.getColumn(searchColumn)?.getFilterValue() as string) ?? ""}
+                            onChange={(event) =>
+                                table.getColumn(searchColumn)?.setFilterValue(event.target.value)
+                            }
+                            className="w-full pl-8"
+                        />
+                        <Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2 text-muted-foreground" />
+                    </div>
+                    {onAdd && addButtonText && (
+                        <Button onClick={onAdd}>
+                            <Plus className="mr-2 h-4 w-4" />
+                            {addButtonText}
+                        </Button>
+                    )}
+                </CardHeader>
+                <CardContent>
+                    <Table>
+                        <TableHeader>
+                            {table.getHeaderGroups().map((headerGroup) => (
+                                <TableRow key={headerGroup.id}>
+                                    {headerGroup.headers.map((header) => (
+                                        <TableHead key={header.id}>
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                      header.column.columnDef.header,
+                                                      header.getContext()
+                                                  )}
+                                        </TableHead>
+                                    ))}
+                                </TableRow>
+                            ))}
+                        </TableHeader>
+                        <TableBody>
+                            {table.getRowModel().rows?.length ? (
+                                table.getRowModel().rows.map((row) => (
+                                    <TableRow
+                                        key={row.id}
+                                        data-state={row.getIsSelected() && "selected"}
+                                    >
+                                        {row.getVisibleCells().map((cell) => (
+                                            <TableCell key={cell.id}>
+                                                {flexRender(
+                                                    cell.column.columnDef.cell,
+                                                    cell.getContext()
+                                                )}
+                                            </TableCell>
+                                        ))}
+                                    </TableRow>
+                                ))
+                            ) : (
+                                <TableRow>
+                                    <TableCell
+                                        colSpan={columns.length}
+                                        className="h-24 text-center"
+                                    >
+                                        No results found.
+                                    </TableCell>
+                                </TableRow>
+                            )}
+                        </TableBody>
+                    </Table>
+                    <div className="mt-4">
+                        <DataTablePagination table={table} />
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+    );
+}
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index fad6b864..c85b3b97 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -23,30 +23,24 @@ const Table = (
 </div>)
 Table.displayName = "Table"
 
-const TableHeader = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.HTMLAttributes<HTMLTableSectionElement> & {
-    ref: React.RefObject<HTMLTableSectionElement>;
-  }
-) => (<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />)
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
 TableHeader.displayName = "TableHeader"
 
-const TableBody = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.HTMLAttributes<HTMLTableSectionElement> & {
-    ref: React.RefObject<HTMLTableSectionElement>;
-  }
-) => (<tbody
-  ref={ref}
-  className={cn("[&_tr:last-child]:border-0", className)}
-  {...props}
-/>)
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
 TableBody.displayName = "TableBody"
 
 const TableFooter = (
@@ -67,55 +61,49 @@ const TableFooter = (
 />)
 TableFooter.displayName = "TableFooter"
 
-const TableRow = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.HTMLAttributes<HTMLTableRowElement> & {
-    ref: React.RefObject<HTMLTableRowElement>;
-  }
-) => (<tr
-  ref={ref}
-  className={cn(
-    "border-b transition-colors data-[state=selected]:bg-muted",
-    className
-  )}
-  {...props}
-/>)
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
 TableRow.displayName = "TableRow"
 
-const TableHead = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.ThHTMLAttributes<HTMLTableCellElement> & {
-    ref: React.RefObject<HTMLTableCellElement>;
-  }
-) => (<th
-  ref={ref}
-  className={cn(
-    "h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-    className
-  )}
-  {...props}
-/>)
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-8 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
 TableHead.displayName = "TableHead"
 
-const TableCell = (
-  {
-    ref,
-    className,
-    ...props
-  }: React.TdHTMLAttributes<HTMLTableCellElement> & {
-    ref: React.RefObject<HTMLTableCellElement>;
-  }
-) => (<td
-  ref={ref}
-  className={cn("p-3 align-middle [&:has([role=checkbox])]:pr-0", className)}
-  {...props}
-/>)
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
 TableCell.displayName = "TableCell"
 
 const TableCaption = (
diff --git a/tsconfig.json b/tsconfig.json
index 94729399..85c0e6f5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,7 +17,8 @@
             "@server/*": ["../server/*"],
             "@test/*": ["../test/*"],
             "@app/*": ["*"],
-            "@/*": ["./*"]
+            "@/*": ["./*"],
+            "react": [ "./node_modules/@types/react" ]
         },
         "plugins": [
             {