diff --git a/package-lock.json b/package-lock.json
index c80abfc0d0..c0272c726a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
             "version": "0.0.1",
             "dependencies": {
                 "@aw-labs/appwrite-console": "^6.0.0",
-                "@aw-labs/icons": "0.0.0-64",
-                "@aw-labs/ui": "0.0.0-64",
+                "@aw-labs/icons": "0.0.0-66",
+                "@aw-labs/ui": "0.0.0-66",
                 "@popperjs/core": "^2.11.6",
                 "echarts": "^5.4.0",
                 "prismjs": "^1.29.0",
@@ -19,19 +19,19 @@
             },
             "devDependencies": {
                 "@playwright/test": "^1.27.1",
-                "@sveltejs/adapter-static": "1.0.0-next.44",
-                "@sveltejs/kit": "1.0.0-next.516",
-                "@sveltejs/vite-plugin-svelte": "^1.0.9",
+                "@sveltejs/adapter-static": "1.0.0-next.46",
+                "@sveltejs/kit": "1.0.0-next.525",
+                "@sveltejs/vite-plugin-svelte": "^1.1.0",
                 "@testing-library/dom": "^8.19.0",
                 "@testing-library/jest-dom": "^5.16.5",
-                "@testing-library/svelte": "3.1.3",
+                "@testing-library/svelte": "^3.2.2",
                 "@testing-library/user-event": "^14.4.3",
                 "@types/gtag.js": "^0.0.12",
                 "@types/prismjs": "^1.26.0",
-                "@typescript-eslint/eslint-plugin": "^5.40.0",
-                "@typescript-eslint/parser": "^5.40.0",
+                "@typescript-eslint/eslint-plugin": "^5.41.0",
+                "@typescript-eslint/parser": "^5.41.0",
                 "@vitest/ui": "^0.24.3",
-                "eslint": "^8.25.0",
+                "eslint": "^8.26.0",
                 "eslint-config-prettier": "^8.5.0",
                 "eslint-plugin-svelte3": "^4.0.0",
                 "pre-commit": "^1.2.2",
@@ -44,7 +44,7 @@
                 "svelte-preprocess": "^4.10.7",
                 "tslib": "^2.4.0",
                 "typescript": "^4.8.4",
-                "vite": "^3.1.8",
+                "vite": "^3.2.1",
                 "vitest": "^0.24.3"
             },
             "engines": {
@@ -80,14 +80,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-64",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-64.tgz",
-            "integrity": "sha512-oSZptwIflTmoaUwotXS5sOQsrYE+aDHVw7/iI+lvC6bGDg1sljKc2/LrevXX2Z3GTG8Wu27aYHVVgVFB5khSPw=="
+            "version": "0.0.0-66",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-66.tgz",
+            "integrity": "sha512-3r6pxixYZ6Bn9QTUbFk8XYwds+CHz1baRkOVsQ5HoFz6XgvzTWn3/+pvZZ56Ht2Ek//wr4wwI30pdCXaX4QIsA=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-64",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-64.tgz",
-            "integrity": "sha512-s6ntXWKssiUjaberQEZYBFQw7+Ipfn8BOcxJ4DqCMSnvllZvnx9HbPynvKWcSpYgRRUr6wUHrEKBTfKQah1SGA==",
+            "version": "0.0.0-66",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-66.tgz",
+            "integrity": "sha512-5qFISwKzOyZq7Ix5FG/BhVKEcIMXd2/Y8Ioba+ejTQ8B9hzj6FlwxUw7hLT49ZDhU+kxpjJQV51hRpbHGvmEag==",
             "dependencies": {
                 "@aw-labs/icons": "*",
                 "normalize.css": "^8.0.1",
@@ -777,9 +777,9 @@
             }
         },
         "node_modules/@humanwhocodes/config-array": {
-            "version": "0.10.7",
-            "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz",
-            "integrity": "sha512-MDl6D6sBsaV452/QSdX+4CXIjZhIcI0PELsxUjk4U828yd58vk3bTIvk/6w5FY+4hIy9sLW0sfrV7K7Kc++j/w==",
+            "version": "0.11.6",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.6.tgz",
+            "integrity": "sha512-jJr+hPTJYKyDILJfhNSHsjiwXYf26Flsz8DvNndOsHs5pwSnpGUEy8yzF0JYhCEvTDdV2vuOK5tt8BVhwO5/hg==",
             "dev": true,
             "dependencies": {
                 "@humanwhocodes/object-schema": "^1.2.1",
@@ -1299,19 +1299,6 @@
                 "url": "https://opencollective.com/popperjs"
             }
         },
-        "node_modules/@rollup/pluginutils": {
-            "version": "4.2.1",
-            "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
-            "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
-            "dev": true,
-            "dependencies": {
-                "estree-walker": "^2.0.1",
-                "picomatch": "^2.2.2"
-            },
-            "engines": {
-                "node": ">= 8.0.0"
-            }
-        },
         "node_modules/@sinclair/typebox": {
             "version": "0.24.20",
             "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.20.tgz",
@@ -1339,15 +1326,15 @@
             }
         },
         "node_modules/@sveltejs/adapter-static": {
-            "version": "1.0.0-next.44",
-            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-1.0.0-next.44.tgz",
-            "integrity": "sha512-qBtkmIMYGiDv5r2F3AfSG0ABHZim2NC+1PL2YVCa+QYz8IVCm1E/wGQ0RW4KVrANZ3MZk8y52PPajx+8/fwmNw==",
+            "version": "1.0.0-next.46",
+            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-1.0.0-next.46.tgz",
+            "integrity": "sha512-8BlgwD3fjAbtUUgvREjrq5okZSXMTU/Qla99RhTqGaFo+uOrUzguKrXvjeaD4GzxQZdQUNyTX9hKT0V7tX6TMw==",
             "dev": true
         },
         "node_modules/@sveltejs/kit": {
-            "version": "1.0.0-next.516",
-            "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.516.tgz",
-            "integrity": "sha512-n0oGcv7xpgJ81ld1oER5HVREP4TdeDUJ8S64XNDcl3Y2xfQLKk8C4SLYQw2D6V+DxUm8V3aRrj7N7/tm4CQm6A==",
+            "version": "1.0.0-next.525",
+            "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.525.tgz",
+            "integrity": "sha512-a8ivaONZhnRe+5fkyQxhOFgPja6iGwprhubN0Jqfa8AdjAzSBntHAuGqAxPnIGpLpXroXB9eN0tLhvK8xElS9A==",
             "dev": true,
             "hasInstallScript": true,
             "dependencies": {
@@ -1376,9 +1363,9 @@
             }
         },
         "node_modules/@sveltejs/kit/node_modules/magic-string": {
-            "version": "0.26.3",
-            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.3.tgz",
-            "integrity": "sha512-u1Po0NDyFcwdg2nzHT88wSK0+Rih0N1M+Ph1Sp08k8yvFFU3KR72wryS7e1qMPJypt99WB7fIFVCA92mQrMjrg==",
+            "version": "0.26.7",
+            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz",
+            "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==",
             "dev": true,
             "dependencies": {
                 "sourcemap-codec": "^1.4.8"
@@ -1388,16 +1375,15 @@
             }
         },
         "node_modules/@sveltejs/vite-plugin-svelte": {
-            "version": "1.0.9",
-            "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.9.tgz",
-            "integrity": "sha512-+SDrAnT7TDi8sdj4OfD2SC4s9DNrpNVBrue8fT2PmKks9Ddu0JIfSeX91wXZb/1xHz4EkGb+rli8GTRI0yGOjg==",
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.1.0.tgz",
+            "integrity": "sha512-cFRfEdztubtj1c/rYh7ArK7XCfFJn6wG6+J8/e9amFsKtEJILovoBrK0/mxt1AjPQg0vaX+fHPKvhx+q8mTPaQ==",
             "dev": true,
             "dependencies": {
-                "@rollup/pluginutils": "^4.2.1",
                 "debug": "^4.3.4",
                 "deepmerge": "^4.2.2",
                 "kleur": "^4.1.5",
-                "magic-string": "^0.26.5",
+                "magic-string": "^0.26.7",
                 "svelte-hmr": "^0.15.0"
             },
             "engines": {
@@ -1481,9 +1467,9 @@
             }
         },
         "node_modules/@testing-library/svelte": {
-            "version": "3.1.3",
-            "resolved": "https://registry.npmjs.org/@testing-library/svelte/-/svelte-3.1.3.tgz",
-            "integrity": "sha512-pyed3yMnTu7wG9Z4XKoIxdrx52hSEFDC8qUaiSsiSh8tBVj3ZjqEKnV2Nfc0IF2llEkT0B7QOXnOVTLJ3O5RCw==",
+            "version": "3.2.2",
+            "resolved": "https://registry.npmjs.org/@testing-library/svelte/-/svelte-3.2.2.tgz",
+            "integrity": "sha512-IKwZgqbekC3LpoRhSwhd0JswRGxKdAGkf39UiDXTywK61YyLXbCYoR831e/UUC6EeNW4hiHPY+2WuovxOgI5sw==",
             "dev": true,
             "dependencies": {
                 "@testing-library/dom": "^8.1.0"
@@ -1717,6 +1703,12 @@
                 "@types/node": "*"
             }
         },
+        "node_modules/@types/semver": {
+            "version": "7.3.13",
+            "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz",
+            "integrity": "sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==",
+            "dev": true
+        },
         "node_modules/@types/stack-utils": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
@@ -1751,14 +1743,14 @@
             "peer": true
         },
         "node_modules/@typescript-eslint/eslint-plugin": {
-            "version": "5.40.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.40.0.tgz",
-            "integrity": "sha512-FIBZgS3DVJgqPwJzvZTuH4HNsZhHMa9SjxTKAZTlMsPw/UzpEjcf9f4dfgDJEHjK+HboUJo123Eshl6niwEm/Q==",
+            "version": "5.41.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.41.0.tgz",
+            "integrity": "sha512-DXUS22Y57/LAFSg3x7Vi6RNAuLpTXwxB9S2nIA7msBb/Zt8p7XqMwdpdc1IU7CkOQUPgAqR5fWvxuKCbneKGmA==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/scope-manager": "5.40.0",
-                "@typescript-eslint/type-utils": "5.40.0",
-                "@typescript-eslint/utils": "5.40.0",
+                "@typescript-eslint/scope-manager": "5.41.0",
+                "@typescript-eslint/type-utils": "5.41.0",
+                "@typescript-eslint/utils": "5.41.0",
                 "debug": "^4.3.4",
                 "ignore": "^5.2.0",
                 "regexpp": "^3.2.0",
@@ -1783,14 +1775,14 @@
             }
         },
         "node_modules/@typescript-eslint/parser": {
-            "version": "5.40.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.40.0.tgz",
-            "integrity": "sha512-Ah5gqyX2ySkiuYeOIDg7ap51/b63QgWZA7w6AHtFrag7aH0lRQPbLzUjk0c9o5/KZ6JRkTTDKShL4AUrQa6/hw==",
+            "version": "5.41.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.41.0.tgz",
+            "integrity": "sha512-HQVfix4+RL5YRWZboMD1pUfFN8MpRH4laziWkkAzyO1fvNOY/uinZcvo3QiFJVS/siNHupV8E5+xSwQZrl6PZA==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/scope-manager": "5.40.0",
-                "@typescript-eslint/types": "5.40.0",
-                "@typescript-eslint/typescript-estree": "5.40.0",
+                "@typescript-eslint/scope-manager": "5.41.0",
+                "@typescript-eslint/types": "5.41.0",
+                "@typescript-eslint/typescript-estree": "5.41.0",
                 "debug": "^4.3.4"
             },
             "engines": {
@@ -1810,13 +1802,13 @@
             }
         },
         "node_modules/@typescript-eslint/scope-manager": {
-            "version": "5.40.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.40.0.tgz",
-            "integrity": "sha512-d3nPmjUeZtEWRvyReMI4I1MwPGC63E8pDoHy0BnrYjnJgilBD3hv7XOiETKLY/zTwI7kCnBDf2vWTRUVpYw0Uw==",
+            "version": "5.41.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.41.0.tgz",
+            "integrity": "sha512-xOxPJCnuktUkY2xoEZBKXO5DBCugFzjrVndKdUnyQr3+9aDWZReKq9MhaoVnbL+maVwWJu/N0SEtrtEUNb62QQ==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/types": "5.40.0",
-                "@typescript-eslint/visitor-keys": "5.40.0"
+                "@typescript-eslint/types": "5.41.0",
+                "@typescript-eslint/visitor-keys": "5.41.0"
             },
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -1827,13 +1819,13 @@
             }
         },
         "node_modules/@typescript-eslint/type-utils": {
-            "version": "5.40.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.40.0.tgz",
-            "integrity": "sha512-nfuSdKEZY2TpnPz5covjJqav+g5qeBqwSHKBvz7Vm1SAfy93SwKk/JeSTymruDGItTwNijSsno5LhOHRS1pcfw==",
+            "version": "5.41.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.41.0.tgz",
+            "integrity": "sha512-L30HNvIG6A1Q0R58e4hu4h+fZqaO909UcnnPbwKiN6Rc3BUEx6ez2wgN7aC0cBfcAjZfwkzE+E2PQQ9nEuoqfA==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/typescript-estree": "5.40.0",
-                "@typescript-eslint/utils": "5.40.0",
+                "@typescript-eslint/typescript-estree": "5.41.0",
+                "@typescript-eslint/utils": "5.41.0",
                 "debug": "^4.3.4",
                 "tsutils": "^3.21.0"
             },
@@ -1854,9 +1846,9 @@
             }
         },
         "node_modules/@typescript-eslint/types": {
-            "version": "5.40.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.40.0.tgz",
-            "integrity": "sha512-V1KdQRTXsYpf1Y1fXCeZ+uhjW48Niiw0VGt4V8yzuaDTU8Z1Xl7yQDyQNqyAFcVhpYXIVCEuxSIWTsLDpHgTbw==",
+            "version": "5.41.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.41.0.tgz",
+            "integrity": "sha512-5BejraMXMC+2UjefDvrH0Fo/eLwZRV6859SXRg+FgbhA0R0l6lDqDGAQYhKbXhPN2ofk2kY5sgGyLNL907UXpA==",
             "dev": true,
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -1867,13 +1859,13 @@
             }
         },
         "node_modules/@typescript-eslint/typescript-estree": {
-            "version": "5.40.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.40.0.tgz",
-            "integrity": "sha512-b0GYlDj8TLTOqwX7EGbw2gL5EXS2CPEWhF9nGJiGmEcmlpNBjyHsTwbqpyIEPVpl6br4UcBOYlcI2FJVtJkYhg==",
+            "version": "5.41.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.41.0.tgz",
+            "integrity": "sha512-SlzFYRwFSvswzDSQ/zPkIWcHv8O5y42YUskko9c4ki+fV6HATsTODUPbRbcGDFYP86gaJL5xohUEytvyNNcXWg==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/types": "5.40.0",
-                "@typescript-eslint/visitor-keys": "5.40.0",
+                "@typescript-eslint/types": "5.41.0",
+                "@typescript-eslint/visitor-keys": "5.41.0",
                 "debug": "^4.3.4",
                 "globby": "^11.1.0",
                 "is-glob": "^4.0.3",
@@ -1894,15 +1886,16 @@
             }
         },
         "node_modules/@typescript-eslint/utils": {
-            "version": "5.40.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.40.0.tgz",
-            "integrity": "sha512-MO0y3T5BQ5+tkkuYZJBjePewsY+cQnfkYeRqS6tPh28niiIwPnQ1t59CSRcs1ZwJJNOdWw7rv9pF8aP58IMihA==",
+            "version": "5.41.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.41.0.tgz",
+            "integrity": "sha512-QlvfwaN9jaMga9EBazQ+5DDx/4sAdqDkcs05AsQHMaopluVCUyu1bTRUVKzXbgjDlrRAQrYVoi/sXJ9fmG+KLQ==",
             "dev": true,
             "dependencies": {
                 "@types/json-schema": "^7.0.9",
-                "@typescript-eslint/scope-manager": "5.40.0",
-                "@typescript-eslint/types": "5.40.0",
-                "@typescript-eslint/typescript-estree": "5.40.0",
+                "@types/semver": "^7.3.12",
+                "@typescript-eslint/scope-manager": "5.41.0",
+                "@typescript-eslint/types": "5.41.0",
+                "@typescript-eslint/typescript-estree": "5.41.0",
                 "eslint-scope": "^5.1.1",
                 "eslint-utils": "^3.0.0",
                 "semver": "^7.3.7"
@@ -1919,12 +1912,12 @@
             }
         },
         "node_modules/@typescript-eslint/visitor-keys": {
-            "version": "5.40.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.40.0.tgz",
-            "integrity": "sha512-ijJ+6yig+x9XplEpG2K6FUdJeQGGj/15U3S56W9IqXKJqleuD7zJ2AX/miLezwxpd7ZxDAqO87zWufKg+RPZyQ==",
+            "version": "5.41.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.41.0.tgz",
+            "integrity": "sha512-vilqeHj267v8uzzakbm13HkPMl7cbYpKVjgFWZPIOHIJHZtinvypUhJ5xBXfWYg4eFKqztbMMpOgFpT9Gfx4fw==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/types": "5.40.0",
+                "@typescript-eslint/types": "5.41.0",
                 "eslint-visitor-keys": "^3.3.0"
             },
             "engines": {
@@ -3343,14 +3336,15 @@
             }
         },
         "node_modules/eslint": {
-            "version": "8.25.0",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.25.0.tgz",
-            "integrity": "sha512-DVlJOZ4Pn50zcKW5bYH7GQK/9MsoQG2d5eDH0ebEkE8PbgzTTmtt/VTH9GGJ4BfeZCpBLqFfvsjX35UacUL83A==",
+            "version": "8.26.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.26.0.tgz",
+            "integrity": "sha512-kzJkpaw1Bfwheq4VXUezFriD1GxszX6dUekM7Z3aC2o4hju+tsR/XyTC3RcoSD7jmy9VkPU3+N6YjVU2e96Oyg==",
             "dev": true,
             "dependencies": {
                 "@eslint/eslintrc": "^1.3.3",
-                "@humanwhocodes/config-array": "^0.10.5",
+                "@humanwhocodes/config-array": "^0.11.6",
                 "@humanwhocodes/module-importer": "^1.0.1",
+                "@nodelib/fs.walk": "^1.2.8",
                 "ajv": "^6.10.0",
                 "chalk": "^4.0.0",
                 "cross-spawn": "^7.0.2",
@@ -3366,14 +3360,14 @@
                 "fast-deep-equal": "^3.1.3",
                 "file-entry-cache": "^6.0.1",
                 "find-up": "^5.0.0",
-                "glob-parent": "^6.0.1",
+                "glob-parent": "^6.0.2",
                 "globals": "^13.15.0",
-                "globby": "^11.1.0",
                 "grapheme-splitter": "^1.0.4",
                 "ignore": "^5.2.0",
                 "import-fresh": "^3.0.0",
                 "imurmurhash": "^0.1.4",
                 "is-glob": "^4.0.0",
+                "is-path-inside": "^3.0.3",
                 "js-sdsl": "^4.1.4",
                 "js-yaml": "^4.1.0",
                 "json-stable-stringify-without-jsonify": "^1.0.1",
@@ -3633,12 +3627,6 @@
                 "node": ">=4.0"
             }
         },
-        "node_modules/estree-walker": {
-            "version": "2.0.2",
-            "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-            "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-            "dev": true
-        },
         "node_modules/esutils": {
             "version": "2.0.3",
             "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -4279,6 +4267,15 @@
                 "node": ">=0.12.0"
             }
         },
+        "node_modules/is-path-inside": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+            "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/is-potential-custom-element-name": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -6152,9 +6149,9 @@
             }
         },
         "node_modules/postcss": {
-            "version": "8.4.16",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
-            "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
+            "version": "8.4.18",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz",
+            "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==",
             "dev": true,
             "funding": [
                 {
@@ -6547,9 +6544,9 @@
             }
         },
         "node_modules/rollup": {
-            "version": "2.78.1",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz",
-            "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==",
+            "version": "2.79.1",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
+            "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
             "dev": true,
             "bin": {
                 "rollup": "dist/bin/rollup"
@@ -7352,9 +7349,9 @@
             }
         },
         "node_modules/undici": {
-            "version": "5.11.0",
-            "resolved": "https://registry.npmjs.org/undici/-/undici-5.11.0.tgz",
-            "integrity": "sha512-oWjWJHzFet0Ow4YZBkyiJwiK5vWqEYoH7BINzJAJOLedZ++JpAlCbUktW2GQ2DS2FpKmxD/JMtWUUWl1BtghGw==",
+            "version": "5.12.0",
+            "resolved": "https://registry.npmjs.org/undici/-/undici-5.12.0.tgz",
+            "integrity": "sha512-zMLamCG62PGjd9HHMpo05bSLvvwWOZgGeiWlN/vlqu3+lRo3elxktVGEyLMX+IO7c2eflLjcW74AlkhEZm15mg==",
             "dev": true,
             "dependencies": {
                 "busboy": "^1.6.0"
@@ -7405,15 +7402,15 @@
             }
         },
         "node_modules/vite": {
-            "version": "3.1.8",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz",
-            "integrity": "sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==",
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.1.tgz",
+            "integrity": "sha512-ADtMkfHuWq4tskJsri2n2FZkORO8ZyhI+zIz7zTrDAgDEtct1jdxOg3YsZBfHhKjmMoWLOSCr+64qrEDGo/DbQ==",
             "dev": true,
             "dependencies": {
                 "esbuild": "^0.15.9",
-                "postcss": "^8.4.16",
+                "postcss": "^8.4.18",
                 "resolve": "^1.22.1",
-                "rollup": "~2.78.0"
+                "rollup": "^2.79.1"
             },
             "bin": {
                 "vite": "bin/vite.js"
@@ -7428,6 +7425,7 @@
                 "less": "*",
                 "sass": "*",
                 "stylus": "*",
+                "sugarss": "*",
                 "terser": "^5.4.0"
             },
             "peerDependenciesMeta": {
@@ -7440,6 +7438,9 @@
                 "stylus": {
                     "optional": true
                 },
+                "sugarss": {
+                    "optional": true
+                },
                 "terser": {
                     "optional": true
                 }
@@ -7790,14 +7791,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-64",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-64.tgz",
-            "integrity": "sha512-oSZptwIflTmoaUwotXS5sOQsrYE+aDHVw7/iI+lvC6bGDg1sljKc2/LrevXX2Z3GTG8Wu27aYHVVgVFB5khSPw=="
+            "version": "0.0.0-66",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-66.tgz",
+            "integrity": "sha512-3r6pxixYZ6Bn9QTUbFk8XYwds+CHz1baRkOVsQ5HoFz6XgvzTWn3/+pvZZ56Ht2Ek//wr4wwI30pdCXaX4QIsA=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-64",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-64.tgz",
-            "integrity": "sha512-s6ntXWKssiUjaberQEZYBFQw7+Ipfn8BOcxJ4DqCMSnvllZvnx9HbPynvKWcSpYgRRUr6wUHrEKBTfKQah1SGA==",
+            "version": "0.0.0-66",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-66.tgz",
+            "integrity": "sha512-5qFISwKzOyZq7Ix5FG/BhVKEcIMXd2/Y8Ioba+ejTQ8B9hzj6FlwxUw7hLT49ZDhU+kxpjJQV51hRpbHGvmEag==",
             "requires": {
                 "@aw-labs/icons": "*",
                 "normalize.css": "^8.0.1",
@@ -8322,9 +8323,9 @@
             }
         },
         "@humanwhocodes/config-array": {
-            "version": "0.10.7",
-            "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz",
-            "integrity": "sha512-MDl6D6sBsaV452/QSdX+4CXIjZhIcI0PELsxUjk4U828yd58vk3bTIvk/6w5FY+4hIy9sLW0sfrV7K7Kc++j/w==",
+            "version": "0.11.6",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.6.tgz",
+            "integrity": "sha512-jJr+hPTJYKyDILJfhNSHsjiwXYf26Flsz8DvNndOsHs5pwSnpGUEy8yzF0JYhCEvTDdV2vuOK5tt8BVhwO5/hg==",
             "dev": true,
             "requires": {
                 "@humanwhocodes/object-schema": "^1.2.1",
@@ -8736,16 +8737,6 @@
             "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
             "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
         },
-        "@rollup/pluginutils": {
-            "version": "4.2.1",
-            "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
-            "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
-            "dev": true,
-            "requires": {
-                "estree-walker": "^2.0.1",
-                "picomatch": "^2.2.2"
-            }
-        },
         "@sinclair/typebox": {
             "version": "0.24.20",
             "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.20.tgz",
@@ -8773,15 +8764,15 @@
             }
         },
         "@sveltejs/adapter-static": {
-            "version": "1.0.0-next.44",
-            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-1.0.0-next.44.tgz",
-            "integrity": "sha512-qBtkmIMYGiDv5r2F3AfSG0ABHZim2NC+1PL2YVCa+QYz8IVCm1E/wGQ0RW4KVrANZ3MZk8y52PPajx+8/fwmNw==",
+            "version": "1.0.0-next.46",
+            "resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-1.0.0-next.46.tgz",
+            "integrity": "sha512-8BlgwD3fjAbtUUgvREjrq5okZSXMTU/Qla99RhTqGaFo+uOrUzguKrXvjeaD4GzxQZdQUNyTX9hKT0V7tX6TMw==",
             "dev": true
         },
         "@sveltejs/kit": {
-            "version": "1.0.0-next.516",
-            "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.516.tgz",
-            "integrity": "sha512-n0oGcv7xpgJ81ld1oER5HVREP4TdeDUJ8S64XNDcl3Y2xfQLKk8C4SLYQw2D6V+DxUm8V3aRrj7N7/tm4CQm6A==",
+            "version": "1.0.0-next.525",
+            "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.525.tgz",
+            "integrity": "sha512-a8ivaONZhnRe+5fkyQxhOFgPja6iGwprhubN0Jqfa8AdjAzSBntHAuGqAxPnIGpLpXroXB9eN0tLhvK8xElS9A==",
             "dev": true,
             "requires": {
                 "@sveltejs/vite-plugin-svelte": "^1.0.5",
@@ -8799,9 +8790,9 @@
             },
             "dependencies": {
                 "magic-string": {
-                    "version": "0.26.3",
-                    "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.3.tgz",
-                    "integrity": "sha512-u1Po0NDyFcwdg2nzHT88wSK0+Rih0N1M+Ph1Sp08k8yvFFU3KR72wryS7e1qMPJypt99WB7fIFVCA92mQrMjrg==",
+                    "version": "0.26.7",
+                    "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz",
+                    "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==",
                     "dev": true,
                     "requires": {
                         "sourcemap-codec": "^1.4.8"
@@ -8810,16 +8801,15 @@
             }
         },
         "@sveltejs/vite-plugin-svelte": {
-            "version": "1.0.9",
-            "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.9.tgz",
-            "integrity": "sha512-+SDrAnT7TDi8sdj4OfD2SC4s9DNrpNVBrue8fT2PmKks9Ddu0JIfSeX91wXZb/1xHz4EkGb+rli8GTRI0yGOjg==",
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.1.0.tgz",
+            "integrity": "sha512-cFRfEdztubtj1c/rYh7ArK7XCfFJn6wG6+J8/e9amFsKtEJILovoBrK0/mxt1AjPQg0vaX+fHPKvhx+q8mTPaQ==",
             "dev": true,
             "requires": {
-                "@rollup/pluginutils": "^4.2.1",
                 "debug": "^4.3.4",
                 "deepmerge": "^4.2.2",
                 "kleur": "^4.1.5",
-                "magic-string": "^0.26.5",
+                "magic-string": "^0.26.7",
                 "svelte-hmr": "^0.15.0"
             },
             "dependencies": {
@@ -8880,9 +8870,9 @@
             }
         },
         "@testing-library/svelte": {
-            "version": "3.1.3",
-            "resolved": "https://registry.npmjs.org/@testing-library/svelte/-/svelte-3.1.3.tgz",
-            "integrity": "sha512-pyed3yMnTu7wG9Z4XKoIxdrx52hSEFDC8qUaiSsiSh8tBVj3ZjqEKnV2Nfc0IF2llEkT0B7QOXnOVTLJ3O5RCw==",
+            "version": "3.2.2",
+            "resolved": "https://registry.npmjs.org/@testing-library/svelte/-/svelte-3.2.2.tgz",
+            "integrity": "sha512-IKwZgqbekC3LpoRhSwhd0JswRGxKdAGkf39UiDXTywK61YyLXbCYoR831e/UUC6EeNW4hiHPY+2WuovxOgI5sw==",
             "dev": true,
             "requires": {
                 "@testing-library/dom": "^8.1.0"
@@ -9094,6 +9084,12 @@
                 "@types/node": "*"
             }
         },
+        "@types/semver": {
+            "version": "7.3.13",
+            "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz",
+            "integrity": "sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==",
+            "dev": true
+        },
         "@types/stack-utils": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
@@ -9128,14 +9124,14 @@
             "peer": true
         },
         "@typescript-eslint/eslint-plugin": {
-            "version": "5.40.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.40.0.tgz",
-            "integrity": "sha512-FIBZgS3DVJgqPwJzvZTuH4HNsZhHMa9SjxTKAZTlMsPw/UzpEjcf9f4dfgDJEHjK+HboUJo123Eshl6niwEm/Q==",
+            "version": "5.41.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.41.0.tgz",
+            "integrity": "sha512-DXUS22Y57/LAFSg3x7Vi6RNAuLpTXwxB9S2nIA7msBb/Zt8p7XqMwdpdc1IU7CkOQUPgAqR5fWvxuKCbneKGmA==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/scope-manager": "5.40.0",
-                "@typescript-eslint/type-utils": "5.40.0",
-                "@typescript-eslint/utils": "5.40.0",
+                "@typescript-eslint/scope-manager": "5.41.0",
+                "@typescript-eslint/type-utils": "5.41.0",
+                "@typescript-eslint/utils": "5.41.0",
                 "debug": "^4.3.4",
                 "ignore": "^5.2.0",
                 "regexpp": "^3.2.0",
@@ -9144,53 +9140,53 @@
             }
         },
         "@typescript-eslint/parser": {
-            "version": "5.40.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.40.0.tgz",
-            "integrity": "sha512-Ah5gqyX2ySkiuYeOIDg7ap51/b63QgWZA7w6AHtFrag7aH0lRQPbLzUjk0c9o5/KZ6JRkTTDKShL4AUrQa6/hw==",
+            "version": "5.41.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.41.0.tgz",
+            "integrity": "sha512-HQVfix4+RL5YRWZboMD1pUfFN8MpRH4laziWkkAzyO1fvNOY/uinZcvo3QiFJVS/siNHupV8E5+xSwQZrl6PZA==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/scope-manager": "5.40.0",
-                "@typescript-eslint/types": "5.40.0",
-                "@typescript-eslint/typescript-estree": "5.40.0",
+                "@typescript-eslint/scope-manager": "5.41.0",
+                "@typescript-eslint/types": "5.41.0",
+                "@typescript-eslint/typescript-estree": "5.41.0",
                 "debug": "^4.3.4"
             }
         },
         "@typescript-eslint/scope-manager": {
-            "version": "5.40.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.40.0.tgz",
-            "integrity": "sha512-d3nPmjUeZtEWRvyReMI4I1MwPGC63E8pDoHy0BnrYjnJgilBD3hv7XOiETKLY/zTwI7kCnBDf2vWTRUVpYw0Uw==",
+            "version": "5.41.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.41.0.tgz",
+            "integrity": "sha512-xOxPJCnuktUkY2xoEZBKXO5DBCugFzjrVndKdUnyQr3+9aDWZReKq9MhaoVnbL+maVwWJu/N0SEtrtEUNb62QQ==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/types": "5.40.0",
-                "@typescript-eslint/visitor-keys": "5.40.0"
+                "@typescript-eslint/types": "5.41.0",
+                "@typescript-eslint/visitor-keys": "5.41.0"
             }
         },
         "@typescript-eslint/type-utils": {
-            "version": "5.40.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.40.0.tgz",
-            "integrity": "sha512-nfuSdKEZY2TpnPz5covjJqav+g5qeBqwSHKBvz7Vm1SAfy93SwKk/JeSTymruDGItTwNijSsno5LhOHRS1pcfw==",
+            "version": "5.41.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.41.0.tgz",
+            "integrity": "sha512-L30HNvIG6A1Q0R58e4hu4h+fZqaO909UcnnPbwKiN6Rc3BUEx6ez2wgN7aC0cBfcAjZfwkzE+E2PQQ9nEuoqfA==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/typescript-estree": "5.40.0",
-                "@typescript-eslint/utils": "5.40.0",
+                "@typescript-eslint/typescript-estree": "5.41.0",
+                "@typescript-eslint/utils": "5.41.0",
                 "debug": "^4.3.4",
                 "tsutils": "^3.21.0"
             }
         },
         "@typescript-eslint/types": {
-            "version": "5.40.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.40.0.tgz",
-            "integrity": "sha512-V1KdQRTXsYpf1Y1fXCeZ+uhjW48Niiw0VGt4V8yzuaDTU8Z1Xl7yQDyQNqyAFcVhpYXIVCEuxSIWTsLDpHgTbw==",
+            "version": "5.41.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.41.0.tgz",
+            "integrity": "sha512-5BejraMXMC+2UjefDvrH0Fo/eLwZRV6859SXRg+FgbhA0R0l6lDqDGAQYhKbXhPN2ofk2kY5sgGyLNL907UXpA==",
             "dev": true
         },
         "@typescript-eslint/typescript-estree": {
-            "version": "5.40.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.40.0.tgz",
-            "integrity": "sha512-b0GYlDj8TLTOqwX7EGbw2gL5EXS2CPEWhF9nGJiGmEcmlpNBjyHsTwbqpyIEPVpl6br4UcBOYlcI2FJVtJkYhg==",
+            "version": "5.41.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.41.0.tgz",
+            "integrity": "sha512-SlzFYRwFSvswzDSQ/zPkIWcHv8O5y42YUskko9c4ki+fV6HATsTODUPbRbcGDFYP86gaJL5xohUEytvyNNcXWg==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/types": "5.40.0",
-                "@typescript-eslint/visitor-keys": "5.40.0",
+                "@typescript-eslint/types": "5.41.0",
+                "@typescript-eslint/visitor-keys": "5.41.0",
                 "debug": "^4.3.4",
                 "globby": "^11.1.0",
                 "is-glob": "^4.0.3",
@@ -9199,27 +9195,28 @@
             }
         },
         "@typescript-eslint/utils": {
-            "version": "5.40.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.40.0.tgz",
-            "integrity": "sha512-MO0y3T5BQ5+tkkuYZJBjePewsY+cQnfkYeRqS6tPh28niiIwPnQ1t59CSRcs1ZwJJNOdWw7rv9pF8aP58IMihA==",
+            "version": "5.41.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.41.0.tgz",
+            "integrity": "sha512-QlvfwaN9jaMga9EBazQ+5DDx/4sAdqDkcs05AsQHMaopluVCUyu1bTRUVKzXbgjDlrRAQrYVoi/sXJ9fmG+KLQ==",
             "dev": true,
             "requires": {
                 "@types/json-schema": "^7.0.9",
-                "@typescript-eslint/scope-manager": "5.40.0",
-                "@typescript-eslint/types": "5.40.0",
-                "@typescript-eslint/typescript-estree": "5.40.0",
+                "@types/semver": "^7.3.12",
+                "@typescript-eslint/scope-manager": "5.41.0",
+                "@typescript-eslint/types": "5.41.0",
+                "@typescript-eslint/typescript-estree": "5.41.0",
                 "eslint-scope": "^5.1.1",
                 "eslint-utils": "^3.0.0",
                 "semver": "^7.3.7"
             }
         },
         "@typescript-eslint/visitor-keys": {
-            "version": "5.40.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.40.0.tgz",
-            "integrity": "sha512-ijJ+6yig+x9XplEpG2K6FUdJeQGGj/15U3S56W9IqXKJqleuD7zJ2AX/miLezwxpd7ZxDAqO87zWufKg+RPZyQ==",
+            "version": "5.41.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.41.0.tgz",
+            "integrity": "sha512-vilqeHj267v8uzzakbm13HkPMl7cbYpKVjgFWZPIOHIJHZtinvypUhJ5xBXfWYg4eFKqztbMMpOgFpT9Gfx4fw==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/types": "5.40.0",
+                "@typescript-eslint/types": "5.41.0",
                 "eslint-visitor-keys": "^3.3.0"
             }
         },
@@ -10220,14 +10217,15 @@
             }
         },
         "eslint": {
-            "version": "8.25.0",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.25.0.tgz",
-            "integrity": "sha512-DVlJOZ4Pn50zcKW5bYH7GQK/9MsoQG2d5eDH0ebEkE8PbgzTTmtt/VTH9GGJ4BfeZCpBLqFfvsjX35UacUL83A==",
+            "version": "8.26.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.26.0.tgz",
+            "integrity": "sha512-kzJkpaw1Bfwheq4VXUezFriD1GxszX6dUekM7Z3aC2o4hju+tsR/XyTC3RcoSD7jmy9VkPU3+N6YjVU2e96Oyg==",
             "dev": true,
             "requires": {
                 "@eslint/eslintrc": "^1.3.3",
-                "@humanwhocodes/config-array": "^0.10.5",
+                "@humanwhocodes/config-array": "^0.11.6",
                 "@humanwhocodes/module-importer": "^1.0.1",
+                "@nodelib/fs.walk": "^1.2.8",
                 "ajv": "^6.10.0",
                 "chalk": "^4.0.0",
                 "cross-spawn": "^7.0.2",
@@ -10243,14 +10241,14 @@
                 "fast-deep-equal": "^3.1.3",
                 "file-entry-cache": "^6.0.1",
                 "find-up": "^5.0.0",
-                "glob-parent": "^6.0.1",
+                "glob-parent": "^6.0.2",
                 "globals": "^13.15.0",
-                "globby": "^11.1.0",
                 "grapheme-splitter": "^1.0.4",
                 "ignore": "^5.2.0",
                 "import-fresh": "^3.0.0",
                 "imurmurhash": "^0.1.4",
                 "is-glob": "^4.0.0",
+                "is-path-inside": "^3.0.3",
                 "js-sdsl": "^4.1.4",
                 "js-yaml": "^4.1.0",
                 "json-stable-stringify-without-jsonify": "^1.0.1",
@@ -10425,12 +10423,6 @@
             "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
             "dev": true
         },
-        "estree-walker": {
-            "version": "2.0.2",
-            "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-            "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-            "dev": true
-        },
         "esutils": {
             "version": "2.0.3",
             "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -10924,6 +10916,12 @@
             "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
             "dev": true
         },
+        "is-path-inside": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+            "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+            "dev": true
+        },
         "is-potential-custom-element-name": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -12369,9 +12367,9 @@
             "dev": true
         },
         "postcss": {
-            "version": "8.4.16",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
-            "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
+            "version": "8.4.18",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz",
+            "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==",
             "dev": true,
             "requires": {
                 "nanoid": "^3.3.4",
@@ -12656,9 +12654,9 @@
             }
         },
         "rollup": {
-            "version": "2.78.1",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz",
-            "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==",
+            "version": "2.79.1",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
+            "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
             "dev": true,
             "requires": {
                 "fsevents": "~2.3.2"
@@ -13229,9 +13227,9 @@
             "dev": true
         },
         "undici": {
-            "version": "5.11.0",
-            "resolved": "https://registry.npmjs.org/undici/-/undici-5.11.0.tgz",
-            "integrity": "sha512-oWjWJHzFet0Ow4YZBkyiJwiK5vWqEYoH7BINzJAJOLedZ++JpAlCbUktW2GQ2DS2FpKmxD/JMtWUUWl1BtghGw==",
+            "version": "5.12.0",
+            "resolved": "https://registry.npmjs.org/undici/-/undici-5.12.0.tgz",
+            "integrity": "sha512-zMLamCG62PGjd9HHMpo05bSLvvwWOZgGeiWlN/vlqu3+lRo3elxktVGEyLMX+IO7c2eflLjcW74AlkhEZm15mg==",
             "dev": true,
             "requires": {
                 "busboy": "^1.6.0"
@@ -13273,16 +13271,16 @@
             }
         },
         "vite": {
-            "version": "3.1.8",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz",
-            "integrity": "sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==",
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.1.tgz",
+            "integrity": "sha512-ADtMkfHuWq4tskJsri2n2FZkORO8ZyhI+zIz7zTrDAgDEtct1jdxOg3YsZBfHhKjmMoWLOSCr+64qrEDGo/DbQ==",
             "dev": true,
             "requires": {
                 "esbuild": "^0.15.9",
                 "fsevents": "~2.3.2",
-                "postcss": "^8.4.16",
+                "postcss": "^8.4.18",
                 "resolve": "^1.22.1",
-                "rollup": "~2.78.0"
+                "rollup": "^2.79.1"
             }
         },
         "vitest": {
diff --git a/package.json b/package.json
index 2ddcfe3cf2..ec0f461554 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
         "dev": "vite dev",
         "build": "vite build",
         "preview": "vite preview",
+        "sync": "svelte-kit sync",
         "check": "svelte-check --tsconfig ./tsconfig.json --fail-on-warnings --threshold warning",
         "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
         "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint .",
@@ -19,8 +20,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^6.0.0",
-        "@aw-labs/icons": "0.0.0-64",
-        "@aw-labs/ui": "0.0.0-64",
+        "@aw-labs/icons": "0.0.0-66",
+        "@aw-labs/ui": "0.0.0-66",
         "@popperjs/core": "^2.11.6",
         "echarts": "^5.4.0",
         "prismjs": "^1.29.0",
@@ -29,19 +30,19 @@
     },
     "devDependencies": {
         "@playwright/test": "^1.27.1",
-        "@sveltejs/adapter-static": "1.0.0-next.44",
-        "@sveltejs/kit": "1.0.0-next.516",
-        "@sveltejs/vite-plugin-svelte": "^1.0.9",
+        "@sveltejs/adapter-static": "1.0.0-next.46",
+        "@sveltejs/kit": "1.0.0-next.525",
+        "@sveltejs/vite-plugin-svelte": "^1.1.0",
         "@testing-library/dom": "^8.19.0",
         "@testing-library/jest-dom": "^5.16.5",
-        "@testing-library/svelte": "3.1.3",
+        "@testing-library/svelte": "^3.2.2",
         "@testing-library/user-event": "^14.4.3",
         "@types/gtag.js": "^0.0.12",
         "@types/prismjs": "^1.26.0",
-        "@typescript-eslint/eslint-plugin": "^5.40.0",
-        "@typescript-eslint/parser": "^5.40.0",
+        "@typescript-eslint/eslint-plugin": "^5.41.0",
+        "@typescript-eslint/parser": "^5.41.0",
         "@vitest/ui": "^0.24.3",
-        "eslint": "^8.25.0",
+        "eslint": "^8.26.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-svelte3": "^4.0.0",
         "pre-commit": "^1.2.2",
@@ -54,7 +55,7 @@
         "svelte-preprocess": "^4.10.7",
         "tslib": "^2.4.0",
         "typescript": "^4.8.4",
-        "vite": "^3.1.8",
+        "vite": "^3.2.1",
         "vitest": "^0.24.3"
     },
     "type": "module",
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index 92b3b3e0e3..5ba64ae040 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -3,21 +3,23 @@ import type { Action } from 'svelte/action';
 export type AnalyticsActionParam = {
     name: string;
     action: string;
+    category?: string;
+    label?: string;
     parameters?: Record<string, string>;
     event?: keyof HTMLElementEventMap;
 };
 
-export const event: Action<HTMLElement, AnalyticsActionParam> = (node, param) => {
+export const event: Action<HTMLElement, Partial<AnalyticsActionParam>> = (node, param) => {
     if (!isTrackingAllowed()) {
         return;
     }
 
-    node.addEventListener(param.event ?? 'click', () =>
+    node.addEventListener(param.event ?? 'click', () => {
         gtag('event', param.name, {
             ...param.parameters,
             action: param.action
-        })
-    );
+        });
+    });
 };
 
 const isTrackingAllowed = () => {
diff --git a/src/lib/components/back.svelte b/src/lib/components/back.svelte
deleted file mode 100644
index 18980a511e..0000000000
--- a/src/lib/components/back.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script lang="ts">
-    export let href: string;
-</script>
-
-<a {href}>
-    <span class="icon-cheveron-left" aria-hidden="true" />
-    <slot />
-</a>
diff --git a/src/lib/components/dropListLink.svelte b/src/lib/components/dropListLink.svelte
index 738a511347..977a6bce10 100644
--- a/src/lib/components/dropListLink.svelte
+++ b/src/lib/components/dropListLink.svelte
@@ -3,10 +3,11 @@
 
     export let href: string;
     export let icon: string = null;
+    export let disabled = false;
 </script>
 
 <li class="drop-list-item" on:click on:keyup={clickOnEnter}>
-    <a {href} class="drop-button">
+    <a {href} class="drop-button" {disabled}>
         <span class="text"><slot /></span>
         {#if icon}
             <span class={`icon-${icon}`} aria-hidden="true" />
diff --git a/src/lib/components/dropTabsLink.svelte b/src/lib/components/dropTabsLink.svelte
new file mode 100644
index 0000000000..f1eb9481ac
--- /dev/null
+++ b/src/lib/components/dropTabsLink.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    export let href: string;
+    export let disabled = false;
+</script>
+
+<li class="drop-tabs-item">
+    {#if disabled}
+        <span class="drop-tabs-button is-disabled">
+            <span class="text"><slot /></span>
+        </span>
+    {:else}
+        <a class="drop-tabs-button" {href}>
+            <span class="text"><slot /></span>
+        </a>
+    {/if}
+</li>
diff --git a/src/lib/components/emptySearch.svelte b/src/lib/components/emptySearch.svelte
index 15f1d52b94..8034da844f 100644
--- a/src/lib/components/emptySearch.svelte
+++ b/src/lib/components/emptySearch.svelte
@@ -2,7 +2,7 @@
     import { app } from '$lib/stores/app';
     import Light from '$lib/images/search-light.svg';
     import Dark from '$lib/images/search-dark.svg';
-    import Pagination from './pagination.svelte';
+    import PaginationInline from './paginationInline.svelte';
 </script>
 
 <article class="card u-grid u-cross-center u-width-full-line common-section">
@@ -18,5 +18,5 @@
 
 <div class="u-flex u-margin-block-start-32 u-main-space-between">
     <p class="text">Total results: 0</p>
-    <Pagination limit={1} offset={0} sum={0} />
+    <PaginationInline limit={1} offset={0} sum={0} />
 </div>
diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index 2ab43504f5..f812d7ceb5 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { Modal, Copy } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { createEventDispatcher } from 'svelte';
@@ -157,152 +157,147 @@
     //TODO: remove inline style
 </script>
 
-<Form noStyle noMargin on:submit={create}>
-    <Modal bind:show size="big">
-        <svelte:fragment slot="header">Create Event</svelte:fragment>
+<Modal bind:show on:submit={create} size="big">
+    <svelte:fragment slot="header">Create Event</svelte:fragment>
 
+    <div>
+        <p class="u-text">Choose a service</p>
+        <div class="u-flex u-gap-8 u-margin-block-start-8">
+            {#each services as service}
+                <Pill
+                    disabled={showInput}
+                    selected={service.name === selectedService?.name}
+                    button
+                    on:click={() => {
+                        selectedService = service;
+                        inputData = null;
+                    }}>{service.name}</Pill>
+            {/each}
+        </div>
+    </div>
+    {#if selectedService}
         <div>
-            <p class="u-text">Choose a service</p>
+            <p class="u-text">Choose a request (optional)</p>
             <div class="u-flex u-gap-8 u-margin-block-start-8">
-                {#each services as service}
+                {#each selectedService.requests as request}
                     <Pill
                         disabled={showInput}
-                        selected={service.name === selectedService?.name}
+                        selected={request.name === selectedRequest?.name}
                         button
                         on:click={() => {
-                            selectedService = service;
+                            selectedRequest === request
+                                ? (selectedRequest = null)
+                                : (selectedRequest = request);
                             inputData = null;
-                        }}>{service.name}</Pill>
+                        }}>{request.name}</Pill>
                 {/each}
             </div>
         </div>
-        {#if selectedService}
-            <div>
-                <p class="u-text">Choose a request (optional)</p>
-                <div class="u-flex u-gap-8 u-margin-block-start-8">
-                    {#each selectedService.requests as request}
-                        <Pill
-                            disabled={showInput}
-                            selected={request.name === selectedRequest?.name}
-                            button
-                            on:click={() => {
-                                selectedRequest === request
-                                    ? (selectedRequest = null)
-                                    : (selectedRequest = request);
-                                inputData = null;
-                            }}>{request.name}</Pill>
-                    {/each}
-                </div>
+        <div>
+            <p class="u-text">Choose an event (optional)</p>
+            <div class="u-flex u-gap-8 u-margin-block-start-8">
+                {#each selectedRequest?.events ?? selectedService?.events as event}
+                    <Pill
+                        disabled={showInput}
+                        selected={selectedEvent === event}
+                        button
+                        on:click={() => {
+                            selectedEvent === event
+                                ? (selectedEvent = null)
+                                : (selectedEvent = event);
+                            inputData = null;
+                        }}>{event}</Pill>
+                {/each}
             </div>
+        </div>
+        {#if selectedService?.name === 'users' && !selectedRequest?.name}
             <div>
-                <p class="u-text">Choose an event (optional)</p>
+                <p class="u-text">Choose an attribute (optional)</p>
                 <div class="u-flex u-gap-8 u-margin-block-start-8">
-                    {#each selectedRequest?.events ?? selectedService?.events as event}
+                    {#each selectedService?.attributes as attribute}
                         <Pill
                             disabled={showInput}
-                            selected={selectedEvent === event}
+                            selected={selectedAttribute === attribute}
                             button
                             on:click={() => {
-                                selectedEvent === event
-                                    ? (selectedEvent = null)
-                                    : (selectedEvent = event);
+                                selectedAttribute === attribute
+                                    ? (selectedAttribute = null)
+                                    : (selectedAttribute = attribute);
                                 inputData = null;
-                            }}>{event}</Pill>
+                            }}>{attribute}</Pill>
                     {/each}
                 </div>
             </div>
-            {#if selectedService?.name === 'users' && !selectedRequest?.name}
-                <div>
-                    <p class="u-text">Choose an attribute (optional)</p>
-                    <div class="u-flex u-gap-8 u-margin-block-start-8">
-                        {#each selectedService?.attributes as attribute}
-                            <Pill
-                                disabled={showInput}
-                                selected={selectedAttribute === attribute}
-                                button
-                                on:click={() => {
-                                    selectedAttribute === attribute
-                                        ? (selectedAttribute = null)
-                                        : (selectedAttribute = attribute);
-                                    inputData = null;
-                                }}>{attribute}</Pill>
-                        {/each}
-                    </div>
-                </div>
-            {/if}
         {/if}
-        {#if showInput}
-            <div class="input-text-wrapper" style="--amount-of-buttons:2">
-                <input type="text" placeholder="Enter custom event" bind:value={inputData} />
-                <div class="options-list">
-                    <button
-                        on:click|preventDefault={() => {
-                            showInput = false;
-                        }}
-                        class="options-list-button"
-                        aria-label="confirm">
-                        <span class="icon-check" aria-hidden="true" />
-                    </button>
-                    <button
-                        on:click|preventDefault={() => {
-                            inputData = null;
-                            showInput = false;
-                        }}
-                        class="options-list-button"
-                        aria-label="cancel">
-                        <span class="icon-x" aria-hidden="true" />
-                    </button>
-                </div>
+    {/if}
+    {#if showInput}
+        <div class="input-text-wrapper" style="--amount-of-buttons:2">
+            <input type="text" placeholder="Enter custom event" bind:value={inputData} />
+            <div class="options-list">
+                <button
+                    on:click|preventDefault={() => {
+                        showInput = false;
+                    }}
+                    class="options-list-button"
+                    aria-label="confirm">
+                    <span class="icon-check" aria-hidden="true" />
+                </button>
+                <button
+                    on:click|preventDefault={() => {
+                        inputData = null;
+                        showInput = false;
+                    }}
+                    class="options-list-button"
+                    aria-label="cancel">
+                    <span class="icon-x" aria-hidden="true" />
+                </button>
             </div>
-        {:else}
-            <div class="input-text-wrapper" style="--amount-of-buttons:2">
-                <div type="text" readonly style="min-height: 2.5rem;">
-                    {#if inputData}
-                        <span>{inputData}</span>
-                    {:else}
-                        {#each Array.from(eventString.values()) as route, i}
-                            <button
-                                class:u-opacity-0-5={helper !== route.description}
-                                on:mouseenter={() => {
-                                    helper = route.description;
-                                }}
-                                on:mouseleave={() => {
-                                    helper = null;
-                                }}>
-                                {route.value}
-                            </button>
-                            <span class="u-opacity-0-5">
-                                {i + 1 < eventString?.size ? '.' : ''}
-                            </span>
-                        {/each}
-                    {/if}
-                </div>
-                <div class="options-list">
-                    <button
-                        on:click|preventDefault={() => {
-                            inputData = copyValue;
-                            showInput = true;
-                        }}
-                        class="options-list-button"
-                        aria-label="edit event">
-                        <span class="icon-pencil" aria-hidden="true" />
-                    </button>
-                    <button
-                        disabled={!copyValue}
-                        class="options-list-button"
-                        aria-label="copy text">
-                        <Copy value={copyValue}>
-                            <span class="icon-duplicate" aria-hidden="true" />
-                        </Copy>
-                    </button>
-                </div>
-                <p style="height: 2rem;">{helper ?? ''}</p>
+        </div>
+    {:else}
+        <div class="input-text-wrapper" style="--amount-of-buttons:2">
+            <div type="text" readonly style="min-height: 2.5rem;">
+                {#if inputData}
+                    <span>{inputData}</span>
+                {:else}
+                    {#each Array.from(eventString.values()) as route, i}
+                        <button
+                            class:u-opacity-0-5={helper !== route.description}
+                            on:mouseenter={() => {
+                                helper = route.description;
+                            }}
+                            on:mouseleave={() => {
+                                helper = null;
+                            }}>
+                            {route.value}
+                        </button>
+                        <span class="u-opacity-0-5">
+                            {i + 1 < eventString?.size ? '.' : ''}
+                        </span>
+                    {/each}
+                {/if}
             </div>
-        {/if}
+            <div class="options-list">
+                <button
+                    on:click|preventDefault={() => {
+                        inputData = copyValue;
+                        showInput = true;
+                    }}
+                    class="options-list-button"
+                    aria-label="edit event">
+                    <span class="icon-pencil" aria-hidden="true" />
+                </button>
+                <button disabled={!copyValue} class="options-list-button" aria-label="copy text">
+                    <Copy value={copyValue}>
+                        <span class="icon-duplicate" aria-hidden="true" />
+                    </Copy>
+                </button>
+            </div>
+            <p style="height: 2rem;">{helper ?? ''}</p>
+        </div>
+    {/if}
 
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => (show = false)}>Cancel</Button>
-            <Button disabled={showInput || !copyValue} submit>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Cancel</Button>
+        <Button disabled={showInput || !copyValue} submit>Create</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 56df97ac0f..1752e1a211 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -1,12 +1,12 @@
 export { default as Modal } from './modal.svelte';
 export { default as Pagination } from './pagination.svelte';
+export { default as PaginationInline } from './paginationInline.svelte';
 export { default as Card } from './card.svelte';
 export { default as CardGrid } from './cardGrid.svelte';
 export { default as CardContainer } from './cardContainer.svelte';
 export { default as InnerModal } from './innerModal.svelte';
 export { default as Tile } from './tile.svelte';
 export { default as Tiles } from './tiles.svelte';
-export { default as Back } from './back.svelte';
 export { default as Copy } from './copy.svelte';
 export { default as CopyInput } from './copyInput.svelte';
 export { default as UploadBox } from './uploadBox.svelte';
@@ -21,12 +21,14 @@ export { default as Collapsible } from './collapsible.svelte';
 export { default as CollapsibleItem } from './collapsibleItem.svelte';
 export { default as DropTabs } from './dropTabs.svelte';
 export { default as DropTabsItem } from './dropTabsItem.svelte';
+export { default as DropTabsLink } from './dropTabsLink.svelte';
 export { default as Avatar } from './avatar.svelte';
 export { default as AvatarInitials } from './avatarInitials.svelte';
 export { default as AvatarGroup } from './avatarGroup.svelte';
 export { default as Alert } from './alert.svelte';
 export { default as Box } from './box.svelte';
 export { default as Search } from './search.svelte';
+export { default as SearchQuery } from './searchQuery.svelte';
 export { default as GridItem1 } from './gridItem1.svelte';
 export { default as Steps } from './steps.svelte';
 export { default as Step } from './step.svelte';
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 4a42b75338..1204ec24c7 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -1,9 +1,6 @@
 <script lang="ts">
-    import { browser } from '$app/environment';
     import { createEventDispatcher } from 'svelte';
-    import { fade, fly, type FadeParams, type FlyParams } from 'svelte/transition';
-    import { Alert, Heading } from '$lib/components';
-    import { clickOnEnter } from '$lib/helpers/a11y';
+    import { Alert } from '$lib/components';
 
     export let show = false;
     export let size: 'small' | 'big' = null;
@@ -11,107 +8,103 @@
     export let error: string = null;
     export let closable = true;
 
+    let dialog: HTMLDialogElement;
     let alert: HTMLElement;
+
     const dispatch = createEventDispatcher();
-    const transitionFly: FlyParams = {
-        duration: 150,
-        y: 50
-    };
-    const transitionFade: FadeParams = {
-        duration: 150
-    };
 
-    const handleKeydown = (event: KeyboardEvent) => {
-        if (event.key === 'Escape') {
-            event.preventDefault();
+    function handleBLur(event: MouseEvent) {
+        if (event.target === dialog) {
             closeModal();
         }
-    };
-    const handleBLur = (event: MouseEvent) => {
-        const target: Partial<HTMLElement> = event.target;
-        if (target.hasAttribute('data-curtain')) {
-            closeModal();
+    }
+    function openModal() {
+        if (dialog && !dialog.open) {
+            dialog.showModal();
+            document.body.classList.add('u-overflow-hidden');
         }
-    };
-    const closeModal = () => {
+    }
+
+    function closeModal() {
         if (closable) {
-            dispatch('close');
-            show = false;
+            if (dialog && dialog.open) {
+                dispatch('close');
+                dialog.close();
+                show = false;
+                document.body.classList.remove('u-overflow-hidden');
+            }
         }
-    };
+    }
 
-    /**
-     * Workaround until https://github.com/sveltejs/svelte/issues/3105 is resolved.
-     */
-    $: if (browser) {
-        if (show) {
-            document.body.classList.add('u-overflow-hidden');
-        } else {
-            document.body.classList.remove('u-overflow-hidden');
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            closeModal();
         }
     }
 
+    $: if (show) {
+        openModal();
+    } else {
+        closeModal();
+    }
+
     $: if (error) {
         alert?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
     }
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window on:click={handleBLur} on:keydown={handleKeydown} />
 
-{#if show}
-    <div
-        class="modal-curtain"
-        data-curtain
-        on:click={handleBLur}
-        on:keyup|self={clickOnEnter}
-        transition:fade={transitionFade}>
-        <section
-            class:is-small={size === 'small'}
-            class:is-big={size === 'big'}
-            class="modal"
-            transition:fly={transitionFly}>
-            <header class="modal-header">
-                {#if warning}
-                    <div class="avatar is-color-orange is-medium">
-                        <span class="icon-exclamation" aria-hidden="true" />
-                    </div>
-                {/if}
-                <Heading tag="h4" size="5">
-                    <slot name="header" />
-                </Heading>
-                {#if closable}
-                    <button
-                        type="button"
-                        class="x-button"
-                        aria-label="Close Modal"
-                        title="Close Modal"
-                        on:click={closeModal}>
-                        <span class="icon-x" aria-hidden="true" />
-                    </button>
-                {/if}
-            </header>
-            <div class="modal-content">
-                {#if error}
-                    <div bind:this={alert}>
-                        <Alert
-                            dismissible
-                            type="warning"
-                            on:dismiss={() => {
-                                error = null;
-                            }}>
-                            {error}
-                        </Alert>
-                    </div>
-                {/if}
-                <slot />
-            </div>
-            {#if $$slots.footer}
-                <div class="modal-footer">
-                    <div class="u-flex u-main-end u-gap-12">
-                        <slot name="footer" />
-                    </div>
+<dialog
+    class="modal"
+    class:is-small={size === 'small'}
+    class:is-big={size === 'big'}
+    bind:this={dialog}>
+    <!-- svelte-ignore a11y-no-redundant-roles -->
+    <form class="modal-form" role="form" on:submit|preventDefault>
+        <header class="modal-header">
+            {#if warning}
+                <div class="avatar is-color-orange is-medium">
+                    <span class="icon-exclamation" aria-hidden="true" />
                 </div>
             {/if}
-        </section>
-    </div>
-{/if}
+            <h4 class="modal-title heading-level-5">
+                <slot name="header" />
+            </h4>
+            {#if closable}
+                <button
+                    type="button"
+                    class="x-button"
+                    aria-label="Close Modal"
+                    title="Close Modal"
+                    on:click={closeModal}>
+                    <span class="icon-x" aria-hidden="true" />
+                </button>
+            {/if}
+        </header>
+        <div class="modal-content">
+            {#if error}
+                <div bind:this={alert}>
+                    <Alert
+                        dismissible
+                        type="warning"
+                        on:dismiss={() => {
+                            error = null;
+                        }}>
+                        {error}
+                    </Alert>
+                </div>
+            {/if}
+            <slot />
+        </div>
+
+        {#if $$slots.footer}
+            <div class="modal-footer">
+                <div class="u-flex u-main-end u-gap-16">
+                    <slot name="footer" />
+                </div>
+            </div>
+        {/if}
+    </form>
+</dialog>
diff --git a/src/lib/components/pagination.svelte b/src/lib/components/pagination.svelte
index 12d48afb37..f82250018e 100644
--- a/src/lib/components/pagination.svelte
+++ b/src/lib/components/pagination.svelte
@@ -1,37 +1,15 @@
 <script lang="ts">
-    import { createEventDispatcher } from 'svelte';
+    import { page } from '$app/stores';
 
     export let sum: number;
     export let limit: number;
     export let offset: number;
+    export let path: string;
     export let hidePages = false;
-
-    const dispatch = createEventDispatcher();
-
     $: totalPages = Math.ceil(sum / limit);
     $: currentPage = Math.floor(offset / limit + 1);
     $: pages = pagination(currentPage, totalPages);
 
-    function handleOptionClick(page: number) {
-        if (currentPage !== page) {
-            offset = limit * (page - 1);
-            currentPage = page;
-            dispatch('change');
-        }
-    }
-
-    function handleButtonPage(direction: string) {
-        if (direction === 'next' && currentPage < totalPages) {
-            currentPage += 1;
-            offset = limit * (currentPage - 1);
-            dispatch('change');
-        } else if (direction === 'prev' && currentPage > 1) {
-            currentPage -= 1;
-            offset = limit * (currentPage - 1);
-            dispatch('change');
-        }
-    }
-
     function pagination(page: number, total: number) {
         const pagesShown = 5;
         const start = Math.max(
@@ -51,30 +29,29 @@
 </script>
 
 {#if totalPages > 1}
+    {@const search = $page.url.search}
     <nav class="pagination">
-        <button
-            type="button"
-            on:click={() => handleButtonPage('prev')}
+        <a
             class:is-disabled={currentPage <= 1}
             class="button is-text"
-            aria-label="prev page">
+            aria-label="prev page"
+            href={`${path}/${currentPage - 1}${search}`}>
             <span class="icon-cheveron-left" aria-hidden="true" />
             <span class="text">Prev</span>
-        </button>
+        </a>
         {#if !hidePages}
             <ol class="pagination-list is-only-desktop">
                 {#each pages as page}
                     {#if typeof page === 'number'}
                         <li class="pagination-item">
-                            <button
-                                type="button"
+                            <a
+                                href={`${path}/${page}${search}`}
                                 class="button"
-                                on:click={() => handleOptionClick(+page)}
                                 class:is-disabled={currentPage === page}
                                 class:is-text={currentPage !== page}
                                 aria-label="page">
                                 <span class="text">{page}</span>
-                            </button>
+                            </a>
                         </li>
                     {:else}
                         <li class="li is-text">
@@ -84,15 +61,14 @@
                 {/each}
             </ol>
         {/if}
-        <button
-            on:click={() => handleButtonPage('next')}
+        <a
             class:is-disabled={currentPage === totalPages}
             class="button is-text"
-            type="button"
+            href={`${path}/${currentPage + 1}${search}`}
             aria-label="next page">
             <span class="text">Next</span>
             <span class="icon-cheveron-right" aria-hidden="true" />
-        </button>
+        </a>
     </nav>
 {:else}
     <nav class="pagination">
diff --git a/src/lib/components/paginationInline.svelte b/src/lib/components/paginationInline.svelte
new file mode 100644
index 0000000000..12d48afb37
--- /dev/null
+++ b/src/lib/components/paginationInline.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+
+    export let sum: number;
+    export let limit: number;
+    export let offset: number;
+    export let hidePages = false;
+
+    const dispatch = createEventDispatcher();
+
+    $: totalPages = Math.ceil(sum / limit);
+    $: currentPage = Math.floor(offset / limit + 1);
+    $: pages = pagination(currentPage, totalPages);
+
+    function handleOptionClick(page: number) {
+        if (currentPage !== page) {
+            offset = limit * (page - 1);
+            currentPage = page;
+            dispatch('change');
+        }
+    }
+
+    function handleButtonPage(direction: string) {
+        if (direction === 'next' && currentPage < totalPages) {
+            currentPage += 1;
+            offset = limit * (currentPage - 1);
+            dispatch('change');
+        } else if (direction === 'prev' && currentPage > 1) {
+            currentPage -= 1;
+            offset = limit * (currentPage - 1);
+            dispatch('change');
+        }
+    }
+
+    function pagination(page: number, total: number) {
+        const pagesShown = 5;
+        const start = Math.max(
+            1,
+            Math.min(page - Math.floor((pagesShown - 3) / 2), total - pagesShown + 2)
+        );
+        const end = Math.min(
+            total,
+            Math.max(page + Math.floor((pagesShown - 2) / 2), pagesShown - 1)
+        );
+        return [
+            ...(start > 2 ? [1, '...'] : start > 1 ? [1] : []),
+            ...Array.from({ length: end + 1 - start }, (_, i) => i + start),
+            ...(end < total - 1 ? ['...', total] : end < total ? [total] : [])
+        ];
+    }
+</script>
+
+{#if totalPages > 1}
+    <nav class="pagination">
+        <button
+            type="button"
+            on:click={() => handleButtonPage('prev')}
+            class:is-disabled={currentPage <= 1}
+            class="button is-text"
+            aria-label="prev page">
+            <span class="icon-cheveron-left" aria-hidden="true" />
+            <span class="text">Prev</span>
+        </button>
+        {#if !hidePages}
+            <ol class="pagination-list is-only-desktop">
+                {#each pages as page}
+                    {#if typeof page === 'number'}
+                        <li class="pagination-item">
+                            <button
+                                type="button"
+                                class="button"
+                                on:click={() => handleOptionClick(+page)}
+                                class:is-disabled={currentPage === page}
+                                class:is-text={currentPage !== page}
+                                aria-label="page">
+                                <span class="text">{page}</span>
+                            </button>
+                        </li>
+                    {:else}
+                        <li class="li is-text">
+                            <span class="icon">...</span>
+                        </li>
+                    {/if}
+                {/each}
+            </ol>
+        {/if}
+        <button
+            on:click={() => handleButtonPage('next')}
+            class:is-disabled={currentPage === totalPages}
+            class="button is-text"
+            type="button"
+            aria-label="next page">
+            <span class="text">Next</span>
+            <span class="icon-cheveron-right" aria-hidden="true" />
+        </button>
+    </nav>
+{:else}
+    <nav class="pagination">
+        <button type="button" class="button is-text is-disabled" aria-label="prev page">
+            <span class="icon-cheveron-left" aria-hidden="true" />
+            <span class="text">Prev</span>
+        </button>
+        {#if !hidePages}
+            <ol class="pagination-list is-only-desktop">
+                <li class="pagination-item">
+                    <button type="button" class="button is-disabled" aria-label="page">
+                        <span class="text">1</span>
+                    </button>
+                </li>
+            </ol>
+        {/if}
+        <button type="button" class="button is-text is-disabled" aria-label="next page">
+            <span class="text">Next</span>
+            <span class="icon-cheveron-right" aria-hidden="true" />
+        </button>
+    </nav>
+{/if}
diff --git a/src/lib/components/permissions/custom.svelte b/src/lib/components/permissions/custom.svelte
index edda2b7f77..617a635906 100644
--- a/src/lib/components/permissions/custom.svelte
+++ b/src/lib/components/permissions/custom.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Button, Form, FormList, Helper, InputText } from '$lib/elements/forms';
+    import { Button, FormList, Helper, InputText } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
     import { Modal } from '..';
     import type { Writable } from 'svelte/store';
@@ -25,26 +25,22 @@
     $: disabled = !value || $groups.has(value);
 </script>
 
-{#if show}
-    <Form noMargin noStyle on:submit={create}>
-        <Modal bind:show on:close={reset}>
-            <svelte:fragment slot="header">Custom permission</svelte:fragment>
-
-            <FormList>
-                <InputText
-                    showLabel={false}
-                    id="custom-permission"
-                    label="Custom permission"
-                    placeholder="user:[USER_ID] or team:[TEAM_ID]/[ROLE]"
-                    bind:value />
-                <Helper type="neutral">
-                    A permission should be formatted as: user:[USER_ID] or team:[TEAM_ID]/[ROLE]¸
-                </Helper>
-            </FormList>
-
-            <svelte:fragment slot="footer">
-                <Button submit {disabled}>Create</Button>
-            </svelte:fragment>
-        </Modal>
-    </Form>
-{/if}
+<Modal bind:show on:close={reset} on:submit={create}>
+    <svelte:fragment slot="header">Custom permission</svelte:fragment>
+
+    <FormList>
+        <InputText
+            showLabel={false}
+            id="custom-permission"
+            label="Custom permission"
+            placeholder="user:[USER_ID] or team:[TEAM_ID]/[ROLE]"
+            bind:value />
+        <Helper type="neutral">
+            A permission should be formatted as: user:[USER_ID] or team:[TEAM_ID]/[ROLE]¸
+        </Helper>
+    </FormList>
+
+    <svelte:fragment slot="footer">
+        <Button submit {disabled}>Create</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/lib/components/permissions/team.svelte b/src/lib/components/permissions/team.svelte
index 8ea527e80a..073acd0825 100644
--- a/src/lib/components/permissions/team.svelte
+++ b/src/lib/components/permissions/team.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { Button, Form, InputSearch } from '$lib/elements/forms';
+    import { Button, InputSearch } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
     import { sdkForProject } from '$lib/stores/sdk';
     import { Query, type Models } from '@aw-labs/appwrite-console';
-    import { AvatarInitials, Modal, Pagination } from '..';
+    import { AvatarInitials, Modal, PaginationInline } from '..';
     import type { Writable } from 'svelte/store';
     import type { Permission } from './permissions.svelte';
 
@@ -58,54 +58,47 @@
     }
 </script>
 
-{#if show}
-    <Form noStyle noMargin on:submit={create}>
-        <Modal bind:show on:close={reset} size="big">
-            <svelte:fragment slot="header">Select teams</svelte:fragment>
-            <InputSearch bind:value={search} />
-            {#if results?.teams}
-                <div class="table-wrapper">
-                    <table class="table is-table-layout-auto is-remove-outer-styles">
-                        <tbody class="table-tbody">
-                            {#each results.teams as team (team.$id)}
-                                {@const role = `team:${team.$id}`}
-                                {@const exists = $groups.has(role)}
-                                <tr class="table-row">
-                                    <td
-                                        class="table-col"
-                                        data-title="Enabled"
-                                        style="--p-col-width:40">
-                                        <input
-                                            id={team.$id}
-                                            type="checkbox"
-                                            class="icon-check"
-                                            aria-label="Create"
-                                            checked={exists || selected.has(role)}
-                                            disabled={exists}
-                                            on:change={(event) => onSelection(event, role)} />
-                                    </td>
-                                    <td class="table-col" data-title="Team">
-                                        <label class="u-flex u-cross-center u-gap-8" for={team.$id}>
-                                            <AvatarInitials size={32} name={team.name} />
-                                            <div class="u-line-height-1-5">
-                                                <div class="body-text-2">{team.name}</div>
-                                                <div class="u-x-small">{team.$id}</div>
-                                            </div>
-                                        </label>
-                                    </td>
-                                </tr>
-                            {/each}
-                        </tbody>
-                    </table>
-                </div>
-            {/if}
-            <div class="u-flex u-margin-block-start-32 u-main-space-between">
-                <p class="text">Total results: {results?.total}</p>
-                <Pagination limit={5} bind:offset sum={results?.total} hidePages />
-            </div>
-            <svelte:fragment slot="footer">
-                <Button submit disabled={!hasSelection}>Create</Button>
-            </svelte:fragment>
-        </Modal>
-    </Form>
-{/if}
+<Modal bind:show on:submit={create} on:close={reset} size="big">
+    <svelte:fragment slot="header">Select teams</svelte:fragment>
+    <InputSearch bind:value={search} />
+    {#if results?.teams}
+        <div class="table-wrapper">
+            <table class="table is-table-layout-auto is-remove-outer-styles">
+                <tbody class="table-tbody">
+                    {#each results.teams as team (team.$id)}
+                        {@const role = `team:${team.$id}`}
+                        {@const exists = $groups.has(role)}
+                        <tr class="table-row">
+                            <td class="table-col" data-title="Enabled" style="--p-col-width:40">
+                                <input
+                                    id={team.$id}
+                                    type="checkbox"
+                                    class="icon-check"
+                                    aria-label="Create"
+                                    checked={exists || selected.has(role)}
+                                    disabled={exists}
+                                    on:change={(event) => onSelection(event, role)} />
+                            </td>
+                            <td class="table-col" data-title="Team">
+                                <label class="u-flex u-cross-center u-gap-8" for={team.$id}>
+                                    <AvatarInitials size={32} name={team.name} />
+                                    <div class="u-line-height-1-5">
+                                        <div class="body-text-2">{team.name}</div>
+                                        <div class="u-x-small">{team.$id}</div>
+                                    </div>
+                                </label>
+                            </td>
+                        </tr>
+                    {/each}
+                </tbody>
+            </table>
+        </div>
+    {/if}
+    <div class="u-flex u-margin-block-start-32 u-main-space-between">
+        <p class="text">Total results: {results?.total}</p>
+        <PaginationInline limit={5} bind:offset sum={results?.total} hidePages />
+    </div>
+    <svelte:fragment slot="footer">
+        <Button submit disabled={!hasSelection}>Create</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/lib/components/permissions/user.svelte b/src/lib/components/permissions/user.svelte
index 862343d00f..30a83fcb32 100644
--- a/src/lib/components/permissions/user.svelte
+++ b/src/lib/components/permissions/user.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { Button, Form, InputSearch } from '$lib/elements/forms';
+    import { Button, InputSearch } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
-    import { AvatarInitials, Modal, Pagination } from '..';
+    import { AvatarInitials, Modal, PaginationInline } from '..';
     import { sdkForProject } from '$lib/stores/sdk';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import type { Writable } from 'svelte/store';
@@ -58,49 +58,47 @@
     }
 </script>
 
-<Form noStyle noMargin on:submit={create}>
-    <Modal bind:show on:close={reset} size="big">
-        <svelte:fragment slot="header">Select users</svelte:fragment>
-        <InputSearch bind:value={search} />
-        {#if results?.users}
-            <div class="table-wrapper">
-                <table class="table is-table-layout-auto is-remove-outer-styles">
-                    <tbody class="table-tbody">
-                        {#each results.users as user (user.$id)}
-                            {@const role = `user:${user.$id}`}
-                            {@const exists = $groups.has(role)}
-                            <tr class="table-row">
-                                <td class="table-col" data-title="Enabled" style="--p-col-width:40">
-                                    <input
-                                        id={user.$id}
-                                        type="checkbox"
-                                        class="icon-check"
-                                        aria-label="Create"
-                                        checked={exists || selected.has(role)}
-                                        disabled={exists}
-                                        on:change={(event) => onSelection(event, role)} />
-                                </td>
-                                <td class="table-col" data-title="User">
-                                    <label class="u-flex u-cross-center u-gap-8" for={user.$id}>
-                                        <AvatarInitials size={32} name={user.name} />
-                                        <div class="u-line-height-1-5">
-                                            <div class="body-text-2">{user.name}</div>
-                                            <div class="u-x-small">{user.$id}</div>
-                                        </div>
-                                    </label>
-                                </td>
-                            </tr>
-                        {/each}
-                    </tbody>
-                </table>
-            </div>
-        {/if}
-        <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {results?.total}</p>
-            <Pagination limit={5} bind:offset sum={results?.total} hidePages />
+<Modal bind:show on:submit={create} on:close={reset} size="big">
+    <svelte:fragment slot="header">Select users</svelte:fragment>
+    <InputSearch bind:value={search} />
+    {#if results?.users}
+        <div class="table-wrapper">
+            <table class="table is-table-layout-auto is-remove-outer-styles">
+                <tbody class="table-tbody">
+                    {#each results.users as user (user.$id)}
+                        {@const role = `user:${user.$id}`}
+                        {@const exists = $groups.has(role)}
+                        <tr class="table-row">
+                            <td class="table-col" data-title="Enabled" style="--p-col-width:40">
+                                <input
+                                    id={user.$id}
+                                    type="checkbox"
+                                    class="icon-check"
+                                    aria-label="Create"
+                                    checked={exists || selected.has(role)}
+                                    disabled={exists}
+                                    on:change={(event) => onSelection(event, role)} />
+                            </td>
+                            <td class="table-col" data-title="User">
+                                <label class="u-flex u-cross-center u-gap-8" for={user.$id}>
+                                    <AvatarInitials size={32} name={user.name} />
+                                    <div class="u-line-height-1-5">
+                                        <div class="body-text-2">{user.name}</div>
+                                        <div class="u-x-small">{user.$id}</div>
+                                    </div>
+                                </label>
+                            </td>
+                        </tr>
+                    {/each}
+                </tbody>
+            </table>
         </div>
-        <svelte:fragment slot="footer">
-            <Button submit disabled={!hasSelection}>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+    {/if}
+    <div class="u-flex u-margin-block-start-32 u-main-space-between">
+        <p class="text">Total results: {results?.total}</p>
+        <PaginationInline limit={5} bind:offset sum={results?.total} hidePages />
+    </div>
+    <svelte:fragment slot="footer">
+        <Button submit disabled={!hasSelection}>Create</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/lib/components/searchQuery.svelte b/src/lib/components/searchQuery.svelte
new file mode 100644
index 0000000000..9c7660e839
--- /dev/null
+++ b/src/lib/components/searchQuery.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { onMount } from 'svelte';
+    import { onDestroy } from 'svelte';
+
+    export let search = '';
+    export let placeholder = '';
+    export let debounce = 250;
+    export let required = false;
+    export let disabled = false;
+    export let autofocus = false;
+    export let isWithEndButton = true;
+
+    let element: HTMLInputElement;
+    let timer: ReturnType<typeof setTimeout>;
+
+    onMount(() => {
+        if (element && autofocus) {
+            element.focus();
+        }
+    });
+
+    onDestroy(() => {
+        search = '';
+        if (timer) {
+            clearTimeout(timer);
+        }
+    });
+
+    $: valueChange(search);
+
+    const valueChange = (value: string) => {
+        clearTimeout(timer);
+        timer = setTimeout(async () => {
+            const url = new URL($page.url);
+            url.search = value;
+
+            /**
+             * Reset to first page if search changes.
+             */
+            if ($page.data.page > 1) {
+                url.pathname = url.pathname.replace(new RegExp(`/${$page.data.page}*$`), '/');
+            }
+            goto(url, { keepfocus: true });
+        }, debounce);
+    };
+</script>
+
+<div class="u-flex u-gap-12 common-section u-main-space-between">
+    <div class="u-flex-basis-50-percent">
+        <div class="input-text-wrapper" class:is-with-end-button={isWithEndButton}>
+            <input
+                {placeholder}
+                {disabled}
+                {required}
+                type="search"
+                class="input-text"
+                bind:value={search} />
+            <span class="icon-search" aria-hidden="true" />
+            {#if isWithEndButton && search}
+                <button class="x-button" aria-label="Clear search" on:click={() => (search = '')}>
+                    <span class="icon-x" aria-hidden="true" />
+                </button>
+            {/if}
+        </div>
+    </div>
+    <slot />
+</div>
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 08fad97b46..5c2ecc465e 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -1,3 +1,39 @@
+export const PAGE_LIMIT = 12; // default page limit
+export const CARD_LIMIT = 6; // default card limit
+export enum Dependencies {
+    ORGANIZATION = 'organization',
+    PROJECT = 'project',
+    PROJECTS = 'projects',
+    ACCOUNT = 'account',
+    ACCOUNT_SESSIONS = 'account_sessions',
+    USER = 'user',
+    USERS = 'users',
+    SESSIONS = 'sessions',
+    TEAM = 'team',
+    TEAMS = 'teams',
+    MEMBERSHIPS = 'memberships',
+    DATABASE = 'database',
+    COLLECTION = 'collection',
+    DOCUMENT = 'document',
+    DOCUMENTS = 'documents',
+    ATTRIBUTES = 'attributes',
+    INDEXES = 'indexes',
+    BUCKET = 'bucket',
+    FILE = 'file',
+    FILES = 'files',
+    FUNCTION = 'function',
+    FUNCTIONS = 'functions',
+    VARIABLES = 'variables',
+    DEPLOYMENTS = 'deployments',
+    PLATFORM = 'platform',
+    PLATFORMS = 'platforms',
+    KEY = 'key',
+    KEYS = 'keys',
+    DOMAINS = 'domains',
+    WEBHOOK = 'webhook',
+    WEBHOOKS = 'webhooks'
+}
+
 export const scopes = [
     {
         scope: 'users.read',
diff --git a/src/lib/elements/forms/button.svelte b/src/lib/elements/forms/button.svelte
index 66d417a30e..f2279fa4ed 100644
--- a/src/lib/elements/forms/button.svelte
+++ b/src/lib/elements/forms/button.svelte
@@ -16,7 +16,7 @@
     <a
         {disabled}
         {href}
-        target={external ? '_blank' : '_self'}
+        target={external ? '_blank' : ''}
         rel={external ? 'noopener noreferrer' : ''}
         class="button"
         class:is-only-icon={round}
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index 3f4e13f780..c94751329b 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { FormItem, Helper } from '.';
 
+    export let id: string;
     export let label: string;
     export let showLabel = true;
-    export let id: string;
     export let value: string | number | boolean;
     export let placeholder = '';
     export let required = false;
diff --git a/src/lib/helpers/load.ts b/src/lib/helpers/load.ts
new file mode 100644
index 0000000000..dc7b0c9e7b
--- /dev/null
+++ b/src/lib/helpers/load.ts
@@ -0,0 +1,26 @@
+export function pageToOffset(page: number, limit: number): number {
+    return page ? page * limit - limit : 0;
+}
+
+type TabElement = { href: string; title: string; hasChildren?: boolean };
+
+export function isTabSelected(
+    tab: TabElement,
+    pathname: string,
+    basePath: string,
+    tabs: TabElement[]
+) {
+    if (!tab?.hasChildren) {
+        return tab.href === pathname;
+    } else {
+        if (tab.href === pathname) return true;
+
+        if (tab.href === basePath) {
+            if (!tabs.some((t) => pathname.includes(t.href) && t.href !== tab.href)) {
+                return pathname.includes(tab.href);
+            }
+        } else {
+            return pathname.includes(tab.href);
+        }
+    }
+}
diff --git a/src/lib/layout/container.svelte b/src/lib/layout/container.svelte
index 53b395d120..fb9ec29ddc 100644
--- a/src/lib/layout/container.svelte
+++ b/src/lib/layout/container.svelte
@@ -1,9 +1,15 @@
 <script lang="ts">
     export let overlapCover = false;
+    export let size: 'small' | 'medium' | 'large' | 'xl' = null;
+
+    $: style = size
+        ? `--p-container-max-size: var(--container-max-size, var(--container-size-${size}))`
+        : '';
 </script>
 
 <div
     class="container"
+    {style}
     class:u-margin-block-start-24={!overlapCover}
     class:u-margin-block-start-negative-56={overlapCover}>
     <slot />
diff --git a/src/lib/layout/cover.svelte b/src/lib/layout/cover.svelte
index a4bd080fbf..bc13b13d03 100644
--- a/src/lib/layout/cover.svelte
+++ b/src/lib/layout/cover.svelte
@@ -1,9 +1,15 @@
 <script lang="ts">
     export let adjustContentToCover = false;
+
+    export let size: 'small' | 'medium' | 'large' | 'xl' = null;
+
+    $: style = size
+        ? `--p-container-max-size: var(--container-max-size, var(--container-size-${size}))`
+        : '';
 </script>
 
 <div class="top-cover" class:is-adjust-content-to-cover={adjustContentToCover}>
-    <div class="container">
+    <div class="container" {style}>
         <div class="u-flex u-cross-center u-gap-16 u-margin-block-start-20">
             <slot name="header" />
         </div>
diff --git a/src/lib/layout/coverTitle.svelte b/src/lib/layout/coverTitle.svelte
new file mode 100644
index 0000000000..4004afd9b5
--- /dev/null
+++ b/src/lib/layout/coverTitle.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { Heading } from '$lib/components';
+
+    export let href: string = null;
+</script>
+
+<Heading size="4" tag="h1">
+    {#if href}
+        <a class="button is-text is-only-icon" {href} aria-label="page back">
+            <span class="icon-cheveron-left" aria-hidden="true" />
+        </a>
+    {/if}
+    <span class="text">
+        <slot />
+    </span>
+</Heading>
diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index 999426a157..027bdb641d 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -1,27 +1,19 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { onMount } from 'svelte';
     import { AvatarInitials, DropListItem, DropListLink } from '$lib/components';
     import { app } from '$lib/stores/app';
     import { user } from '$lib/stores/user';
     import { organizationList, organization, newOrgModal } from '$lib/stores/organization';
-    import { breadcrumb } from '$lib/stores/layout';
     import AppwriteLogo from '$lib/images/appwrite-gray-light.svg';
     import LightMode from '$lib/images/mode/light-mode.svg';
     import DarkMode from '$lib/images/mode/dark-mode.svg';
     import SystemMode from '$lib/images/mode/system-mode.svg';
     import { slide } from 'svelte/transition';
+    import { page } from '$app/stores';
 
     let showDropdown = false;
     let droplistElement: HTMLDivElement;
 
-    onMount(async () => {
-        await organizationList.load();
-        if (!$organization) {
-            await organization.load($organizationList.teams[0].$id);
-        }
-    });
-
     const onBlur = (event: MouseEvent) => {
         if (
             showDropdown &&
@@ -40,8 +32,8 @@
     <img src={AppwriteLogo} width="132" height="34" alt="Appwrite" />
 </a>
 
-{#if $breadcrumb}
-    <svelte:component this={$breadcrumb} />
+{#if $page.data.breadcrumbs}
+    <svelte:component this={$page.data.breadcrumbs} />
 {/if}
 
 <div class="main-header-end">
diff --git a/src/lib/layout/index.ts b/src/lib/layout/index.ts
index c2bef33798..227e9b8da7 100644
--- a/src/lib/layout/index.ts
+++ b/src/lib/layout/index.ts
@@ -1,5 +1,6 @@
 export { default as Container } from './container.svelte';
 export { default as Cover } from './cover.svelte';
+export { default as CoverTitle } from './coverTitle.svelte';
 export { default as Footer } from './footer.svelte';
 export { default as Header } from './header.svelte';
 export { default as Navigation } from './navigation.svelte';
diff --git a/src/lib/layout/navigation.svelte b/src/lib/layout/navigation.svelte
index 0560177925..be56f170f3 100644
--- a/src/lib/layout/navigation.svelte
+++ b/src/lib/layout/navigation.svelte
@@ -1,9 +1,16 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
+    import { event, type AnalyticsActionParam } from '$lib/actions/analytics';
 
     $: project = $page.params.project;
     $: path = `${base}/console/project-${project}`;
+
+    const defaultEventOptions: Partial<AnalyticsActionParam> = {
+        category: 'console/navigation',
+        name: 'click_menu_link',
+        action: 'click'
+    };
 </script>
 
 <div class="side-nav">
@@ -15,7 +22,11 @@
                         <a
                             class="drop-button"
                             class:is-selected={$page.url.pathname.startsWith(`${path}/overview`)}
-                            href={path}>
+                            href={path}
+                            use:event={{
+                                ...defaultEventOptions,
+                                label: 'Home Link'
+                            }}>
                             <span class="icon-chart-bar" aria-hidden="true" />
                             <span class="text">Overview</span>
                         </a>
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 8866282289..19fdfcc545 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-    import { navigating } from '$app/stores';
-    import { header } from '$lib/stores/layout';
+    import { navigating, page } from '$app/stores';
     import { browser } from '$app/environment';
     import { wizard } from '$lib/stores/wizard';
     import { log } from '$lib/stores/logs';
@@ -48,8 +47,8 @@
         <slot name="side" />
     </nav>
     <section class="main-content">
-        {#if $header}
-            <svelte:component this={$header} />
+        {#if $page.data?.header}
+            <svelte:component this={$page.data.header} />
         {/if}
 
         <slot />
diff --git a/src/lib/layout/usage.svelte b/src/lib/layout/usage.svelte
index 4ea566df19..9ce00d5e0d 100644
--- a/src/lib/layout/usage.svelte
+++ b/src/lib/layout/usage.svelte
@@ -13,14 +13,16 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
     import { BarChart, LineChart } from '$lib/charts';
-    import { Card, DropTabs, DropTabsItem, Heading, Tiles } from '$lib/components';
+    import { Card, DropTabs, DropTabsLink, Heading, Tiles } from '$lib/components';
     import { Colors } from '$lib/charts/config';
     import type { Models } from '@aw-labs/appwrite-console';
+    import { page } from '$app/stores';
 
     type MetricMetadata = {
         title: string;
         legend: string;
     };
+
     export let title: string;
     export let count: Models.Metric[];
     export let created: Models.Metric[];
@@ -33,23 +35,19 @@
     export let readMetadata: MetricMetadata;
     export let updatedMetadata: MetricMetadata;
     export let deletedMetadata: MetricMetadata;
-
-    export let range: UsagePeriods;
+    export let path: string = null;
 </script>
 
 <Container>
     <div class="u-flex u-main-space-between common-section">
         <Heading tag="h2" size="5">{title}</Heading>
         <DropTabs>
-            <DropTabsItem on:click={() => (range = '24h')} disabled={range === '24h'}>
-                24h
-            </DropTabsItem>
-            <DropTabsItem on:click={() => (range = '30d')} disabled={range === '30d'}>
-                30d
-            </DropTabsItem>
-            <DropTabsItem on:click={() => (range = '90d')} disabled={range === '90d'}>
-                90d
-            </DropTabsItem>
+            <DropTabsLink href={`${path}/24h`} disabled={$page.params.period === '24h'}
+                >24h</DropTabsLink>
+            <DropTabsLink href={`${path}/30d`} disabled={$page.params.period === '30d'}
+                >30d</DropTabsLink>
+            <DropTabsLink href={`${path}/90d`} disabled={$page.params.period === '90d'}
+                >90d</DropTabsLink>
         </DropTabs>
     </div>
     <Card>
diff --git a/src/lib/layout/wizardExitModal.svelte b/src/lib/layout/wizardExitModal.svelte
index d9ab70bd72..8f29e59d94 100644
--- a/src/lib/layout/wizardExitModal.svelte
+++ b/src/lib/layout/wizardExitModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
 
     export let show = false;
@@ -11,16 +11,14 @@
     }
 </script>
 
-<Form noMargin on:submit={handleSubmit}>
-    <Modal bind:show warning>
-        <svelte:fragment slot="header">Exit Process</svelte:fragment>
-        <p>
-            Are you sure you want to exit from <slot />? All data will be deleted. This action is
-            irreversible.
-        </p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (show = false)}>Cancel</Button>
-            <Button secondary submit>Exit</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal bind:show on:submit={handleSubmit} warning>
+    <svelte:fragment slot="header">Exit Process</svelte:fragment>
+    <p>
+        Are you sure you want to exit from <slot />? All data will be deleted. This action is
+        irreversible.
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button secondary submit>Exit</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/lib/mock/copy.test.svelte b/src/lib/mock/copy.test.svelte
index e0fb297c1c..ec7911834f 100644
--- a/src/lib/mock/copy.test.svelte
+++ b/src/lib/mock/copy.test.svelte
@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
     import { Copy } from '../components';
 
-    export let value = false;
+    export let value: string;
 </script>
 
 <Copy {value}>
diff --git a/src/lib/mock/modal.test.svelte b/src/lib/mock/modal.test.svelte
index 86afc65f04..570da17413 100644
--- a/src/lib/mock/modal.test.svelte
+++ b/src/lib/mock/modal.test.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import { Modal } from '../components';
 
     export let show = false;
diff --git a/src/lib/stores/organization.ts b/src/lib/stores/organization.ts
index 66cdabbaea..0c780f1d85 100644
--- a/src/lib/stores/organization.ts
+++ b/src/lib/stores/organization.ts
@@ -1,84 +1,12 @@
-import { sdkForConsole } from '$lib/stores/sdk';
+import { page } from '$app/stores';
+import { derived, writable } from 'svelte/store';
 import type { Models } from '@aw-labs/appwrite-console';
-import { writable } from 'svelte/store';
-import { get } from 'svelte/store';
-import { base } from '$app/paths';
-import { goto } from '$app/navigation';
-import { cachedStore } from '$lib/helpers/cache';
 
 export const newOrgModal = writable<boolean>(false);
 export const newMemberModal = writable<boolean>(false);
-
-export const organizationList = cachedStore<
-    Models.TeamList,
-    {
-        load: () => Promise<void>;
-    }
->('organizationList', function ({ set }) {
-    return {
-        load: async () => {
-            const response = await sdkForConsole.teams.list();
-            set(response);
-        }
-    };
-});
-
-export const organization = cachedStore<
-    Models.Team,
-    {
-        load: (teamId: string) => Promise<void>;
-    }
->('organization', function ({ set }) {
-    return {
-        load: async (teamId) => {
-            const response = await sdkForConsole.teams.get(teamId);
-            set(response);
-        }
-    };
-});
-
-export const projectList = cachedStore<
-    Models.ProjectList,
-    {
-        load: (queries: string[], search?: string) => Promise<void>;
-    }
->('projectList', function ({ set }) {
-    return {
-        load: async (queries, search) => {
-            const response = await sdkForConsole.projects.list(queries, search);
-            set(response);
-        }
-    };
-});
-
-export const memberList = cachedStore<
-    Models.MembershipList,
-    {
-        load: (teamId: string, queries?: string[], search?: string) => Promise<void>;
-    }
->('memberList', function ({ set }) {
-    return {
-        load: async (teamId, queries, search) => {
-            const response = await sdkForConsole.teams.listMemberships(teamId, queries, search);
-            set(response);
-        }
-    };
-});
-
-export const redirectTo = async () => {
-    let org = get(organization);
-    if (org) {
-        await goto(`${base}/console/organization-${org.$id}`);
-    } else {
-        await organizationList.load();
-        const orgList = get(organizationList);
-        if (orgList?.total) {
-            await organization.load(orgList.teams[0].$id);
-            org = get(organization);
-            await goto(`${base}/console/organization-${org.$id}`);
-        } else {
-            newOrgModal.set(true);
-            await goto(`${base}/console`);
-        }
-    }
-};
+export const organizationList = derived(
+    page,
+    ($page) => $page.data.organizations as Models.TeamList
+);
+export const organization = derived(page, ($page) => $page.data.organization as Models.Team);
+export const members = derived(page, ($page) => $page.data.members as Models.MembershipList);
diff --git a/src/lib/stores/sdk.ts b/src/lib/stores/sdk.ts
index b387a6d443..7167b5319b 100644
--- a/src/lib/stores/sdk.ts
+++ b/src/lib/stores/sdk.ts
@@ -12,7 +12,8 @@ import {
     Users
 } from '@aw-labs/appwrite-console';
 
-const endpoint = import.meta.env.VITE_APPWRITE_ENDPOINT.toString();
+const endpoint =
+    import.meta.env.VITE_APPWRITE_ENDPOINT?.toString() ?? `${globalThis?.location?.origin}/v1`;
 const clientConsole = new Client();
 clientConsole.setEndpoint(endpoint).setProject('console');
 
diff --git a/src/lib/stores/user.ts b/src/lib/stores/user.ts
index 0e9f1ffa1d..07b5c404b3 100644
--- a/src/lib/stores/user.ts
+++ b/src/lib/stores/user.ts
@@ -1,24 +1,8 @@
+import { page } from '$app/stores';
+import { derived } from 'svelte/store';
 import type { Models } from '@aw-labs/appwrite-console';
-import { writable } from 'svelte/store';
-import { sdkForConsole } from './sdk';
 
-function createUserStore() {
-    const { subscribe, set } = writable<Models.Account<Record<string, unknown>>>();
-
-    return {
-        subscribe,
-        set,
-        fetchUser: async () => {
-            set(await sdkForConsole.account.get());
-        },
-        logout: async () => {
-            await sdkForConsole.account.deleteSession('current');
-            /**
-             * Clear cache.
-             */
-            globalThis.sessionStorage.clear();
-        }
-    };
-}
-
-export const user = createUserStore();
+export const user = derived(
+    page,
+    ($page) => $page.data.account as Models.Account<Record<string, string>>
+);
diff --git a/src/routes/+layout.js b/src/routes/+layout.js
deleted file mode 100644
index a481105bc4..0000000000
--- a/src/routes/+layout.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import '@aw-labs/ui/src/_index.scss';
-import 'tippy.js/dist/tippy.css';
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f533f57c86..8cdaea6c2b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,7 +2,6 @@
     import { goto } from '$app/navigation';
     import { page } from '$app/stores';
     import { user } from '$lib/stores/user';
-    import { redirectTo } from '$lib/stores/organization';
     import { onCLS, onFID, onLCP, onFCP, onINP, onTTFB } from 'web-vitals';
     import { reportWebVitals } from '$lib/helpers/vitals';
     import { onMount } from 'svelte';
@@ -10,17 +9,14 @@
     import { browser, dev } from '$app/environment';
     import { app } from '$lib/stores/app';
     import Notifications from '$lib/layout/notifications.svelte';
-    import Loading from './_loading.svelte';
-
-    let loaded = false;
+    import Loading from './loading.svelte';
+    import { loading } from './store';
 
     if (browser) {
         window.VERCEL_ANALYTICS_ID = import.meta.env.VERCEL_ANALYTICS_ID?.toString() ?? false;
         window.GOOGLE_ANALYTICS = import.meta.env.VITE_GOOGLE_ANALYTICS?.toString() ?? false;
     }
 
-    const acceptedRoutes = ['/login', '/register', '/recover', '/invite'];
-
     onMount(async () => {
         /**
          * Reporting Web Vitals.
@@ -33,29 +29,22 @@
             onINP(reportWebVitals);
             onTTFB(reportWebVitals);
         }
-
-        try {
-            if (!$user) {
-                await user.fetchUser();
-            } else {
-                user.fetchUser();
-            }
-
+        const acceptedRoutes = ['/login', '/register', '/recover', '/invite'];
+        if ($user) {
             if (!$page.url.pathname.startsWith('/console')) {
-                await redirectTo();
+                await goto(`${base}/console`, {
+                    replaceState: true
+                });
             }
-        } catch (error) {
+        } else {
             if (acceptedRoutes.includes($page.url.pathname)) {
                 await goto(`${base}${$page.url.pathname}${$page.url.search}`);
             } else {
-                /**
-                 * Clear cache.
-                 */
-                window.sessionStorage.clear();
-                await goto(`${base}/login`);
+                await goto(`${base}/login`, {
+                    replaceState: true
+                });
             }
-        } finally {
-            loaded = true;
+            loading.set(false);
         }
     });
 
@@ -96,9 +85,9 @@
 
 <Notifications />
 
-{#if loaded}
-    <slot />
-{:else}
+<slot />
+
+{#if $loading}
     <Loading />
 {/if}
 
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
new file mode 100644
index 0000000000..b568c02099
--- /dev/null
+++ b/src/routes/+layout.ts
@@ -0,0 +1,26 @@
+import '@aw-labs/ui/src/_index.scss';
+import 'tippy.js/dist/tippy.css';
+import { sdkForConsole } from '$lib/stores/sdk';
+import { redirect } from '@sveltejs/kit';
+import { Dependencies } from '$lib/constants';
+import type { LayoutLoad } from './$types';
+
+export const ssr = false;
+
+export const load: LayoutLoad = async ({ depends, url }) => {
+    depends(Dependencies.ACCOUNT);
+    try {
+        const account = await sdkForConsole.account.get();
+
+        return {
+            account,
+            organizations: sdkForConsole.teams.list()
+        };
+    } catch (error) {
+        const acceptedRoutes = ['/login', '/register', '/recover', '/invite'];
+
+        if (!acceptedRoutes.includes(url.pathname)) {
+            throw redirect(303, '/login');
+        }
+    }
+};
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
index 8735e80271..81ad25d98d 100644
--- a/src/routes/+page.ts
+++ b/src/routes/+page.ts
@@ -1,6 +1,7 @@
 import { redirect } from '@sveltejs/kit';
 import { base } from '$app/paths';
+import type { PageLoad } from './$types';
 
-export const load = async () => {
+export const load: PageLoad = async () => {
     throw redirect(302, `${base}/login`);
 };
diff --git a/src/routes/console/+layout.svelte b/src/routes/console/+layout.svelte
index 23bd3bf480..0914ae989e 100644
--- a/src/routes/console/+layout.svelte
+++ b/src/routes/console/+layout.svelte
@@ -2,25 +2,18 @@
     import Shell from '$lib/layout/shell.svelte';
     import SideNavigation from '$lib/layout/navigation.svelte';
     import Header from '$lib/layout/header.svelte';
-    import { organizationList, newOrgModal, redirectTo } from '$lib/stores/organization';
-    import Create from './_createOrganization.svelte';
+    import { newOrgModal } from '$lib/stores/organization';
+    import Create from './createOrganization.svelte';
     import { page } from '$app/stores';
-    import { afterNavigate, beforeNavigate } from '$app/navigation';
-    import { onMount } from 'svelte';
+    import { beforeNavigate } from '$app/navigation';
     import { wizard } from '$lib/stores/wizard';
     import { Logs } from '$lib/layout';
     import { log } from '$lib/stores/logs';
+    import { onMount } from 'svelte';
+    import { loading } from '../store';
 
-    onMount(async () => {
-        if ($page.url.pathname === '/console' && !$newOrgModal) {
-            return await redirectTo();
-        }
-    });
-
-    afterNavigate(async () => {
-        if ($page.url.pathname === '/console' && !$newOrgModal) {
-            return await redirectTo();
-        }
+    onMount(() => {
+        loading.set(false);
     });
 
     beforeNavigate(() => {
@@ -40,7 +33,8 @@
 <Shell
     showSideNavigation={$page.url.pathname !== '/console' &&
         !$page?.params.organization &&
-        !$page.url.pathname.includes('/console/account')}>
+        !$page.url.pathname.includes('/console/account') &&
+        !$page.url.pathname.includes('/console/onboarding')}>
     <svelte:fragment slot="header">
         <Header />
     </svelte:fragment>
@@ -55,9 +49,7 @@
     <svelte:component this={$wizard.component} />
 {/if}
 
-{#if $newOrgModal}
-    <Create bind:show={$newOrgModal} closable={!!$organizationList?.total} />
-{/if}
+<Create bind:show={$newOrgModal} />
 
 {#if $log.show}
     <Logs />
diff --git a/src/routes/console/+page.svelte b/src/routes/console/+page.svelte
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/routes/console/+page.ts b/src/routes/console/+page.ts
new file mode 100644
index 0000000000..ed9ab29d9e
--- /dev/null
+++ b/src/routes/console/+page.ts
@@ -0,0 +1,12 @@
+import { base } from '$app/paths';
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ parent }) => {
+    const { organizations } = await parent();
+    if (organizations.total) {
+        throw redirect(303, `${base}/console/organization-${organizations.teams[0].$id}`);
+    } else {
+        throw redirect(303, `${base}/console/onboarding`);
+    }
+};
diff --git a/src/routes/console/_createOrganization.svelte b/src/routes/console/_createOrganization.svelte
deleted file mode 100644
index 152e74c567..0000000000
--- a/src/routes/console/_createOrganization.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script lang="ts">
-    import { Modal, CustomId } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { InputText, Button, Form, FormList } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
-    import { organization, organizationList } from '$lib/stores/organization';
-    import { goto } from '$app/navigation';
-
-    export let show = false;
-    export let closable = true;
-    const dispatch = createEventDispatcher();
-
-    let name: string;
-    let id: string;
-    let showCustomId = false;
-    let error: string;
-
-    const create = async () => {
-        try {
-            const team = await sdkForConsole.teams.create(id ?? 'unique()', name);
-            dispatch('created');
-            await organizationList.load();
-            organization.set(team);
-            await goto(`/console/organization-${$organization.$id}`);
-            addNotification({
-                type: 'success',
-                message: `${name} has been created`
-            });
-            name = null;
-            id = null;
-            show = false;
-        } catch ({ message }) {
-            error = message;
-        }
-    };
-</script>
-
-<Form on:submit={create}>
-    <Modal {error} size="big" bind:show {closable}>
-        <svelte:fragment slot="header">Create New Organization</svelte:fragment>
-        <FormList>
-            <InputText
-                id="name"
-                label="Name"
-                placeholder="Enter name"
-                bind:value={name}
-                autofocus={true}
-                required />
-            {#if !showCustomId}
-                <div>
-                    <Pill button on:click={() => (showCustomId = !showCustomId)}>
-                        <span class="icon-pencil" aria-hidden="true" /><span class="text">
-                            Organization ID
-                        </span>
-                    </Pill>
-                </div>
-            {:else}
-                <CustomId bind:show={showCustomId} name="organization" bind:id />
-            {/if}
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button disabled={!closable} secondary on:click={() => (show = false)}>Cancel</Button>
-            <Button submit>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
diff --git a/src/routes/console/account/+layout.svelte b/src/routes/console/account/+layout.svelte
index 83a588b2d8..af7ca922be 100644
--- a/src/routes/console/account/+layout.svelte
+++ b/src/routes/console/account/+layout.svelte
@@ -1,21 +1,3 @@
-<script lang="ts">
-    import { updateLayout } from '$lib/stores/layout';
-    import { afterNavigate } from '$app/navigation';
-    import { onMount } from 'svelte';
-    import Header from './header.svelte';
-    import Breadcrumbs from './breadcrumbs.svelte';
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle() {
-        updateLayout({
-            header: Header,
-            breadcrumb: Breadcrumbs
-        });
-    }
-</script>
-
 <svelte:head>
     <title>User - Appwrite</title>
 </svelte:head>
diff --git a/src/routes/console/account/+layout.ts b/src/routes/console/account/+layout.ts
new file mode 100644
index 0000000000..2a85f109db
--- /dev/null
+++ b/src/routes/console/account/+layout.ts
@@ -0,0 +1,10 @@
+import Header from './header.svelte';
+import Breadcrumbs from './breadcrumbs.svelte';
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = async () => {
+    return {
+        header: Header,
+        breadcrumb: Breadcrumbs
+    };
+};
diff --git a/src/routes/console/account/+page.svelte b/src/routes/console/account/+page.svelte
index 544ae4d55d..bc54a875b0 100644
--- a/src/routes/console/account/+page.svelte
+++ b/src/routes/console/account/+page.svelte
@@ -7,7 +7,9 @@
     import { sdkForConsole } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
     import { base } from '$app/paths';
-    import Delete from './_delete.svelte';
+    import Delete from './delete.svelte';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
 
     let name: string = null,
         email: string = null,
@@ -24,7 +26,7 @@
     async function updateName() {
         try {
             await sdkForConsole.account.updateName(name);
-            $user.name = name;
+            invalidate(Dependencies.ACCOUNT);
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
@@ -39,7 +41,7 @@
     async function updateEmail() {
         try {
             await sdkForConsole.account.updateEmail(email, emailPassword);
-            $user.email = email;
+            invalidate(Dependencies.ACCOUNT);
             addNotification({
                 message: 'Email has been updated',
                 type: 'success'
diff --git a/src/routes/console/account/activity/+page.svelte b/src/routes/console/account/activity/[[page]]/+page.svelte
similarity index 83%
rename from src/routes/console/account/activity/+page.svelte
rename to src/routes/console/account/activity/[[page]]/+page.svelte
index c3ae5f00d8..cce6320152 100644
--- a/src/routes/console/account/activity/+page.svelte
+++ b/src/routes/console/account/activity/[[page]]/+page.svelte
@@ -13,19 +13,10 @@
     import { Container } from '$lib/layout';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import { pageLimit } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-    import { accountActivity } from '../store';
-    import { Query } from '@aw-labs/appwrite-console';
-    import { createPersistentPagination } from '$lib/stores/pagination';
+    import type { PageData } from './$types';
+    import { PAGE_LIMIT } from '$lib/constants';
 
-    const offset = createPersistentPagination($pageLimit);
-
-    onMount(async () => {
-        await accountActivity.load([Query.offset($offset), Query.limit($pageLimit)]);
-    });
-
-    $: accountActivity.load([Query.offset($offset), Query.limit($pageLimit)]);
+    export let data: PageData;
 
     const getBrowser = (clientCode: string) => {
         return sdkForConsole.avatars.getBrowser(clientCode, 40, 40);
@@ -33,7 +24,7 @@
 </script>
 
 <Container>
-    {#if $accountActivity?.total}
+    {#if data.logs.total}
         <Table>
             <TableHeader>
                 <TableCellHead>Date</TableCellHead>
@@ -43,7 +34,7 @@
                 <TableCellHead>IP</TableCellHead>
             </TableHeader>
             <TableBody>
-                {#each $accountActivity.logs as log}
+                {#each data.logs.logs as log}
                     <TableRow>
                         <TableCellText title="Date">{toLocaleDateTime(log.time)}</TableCellText>
                         <TableCellText title="Event">{log.event}</TableCellText>
@@ -104,7 +95,11 @@
         </Empty>
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
-        <p class="text">Total results: {$accountActivity?.total}</p>
-        <Pagination limit={$pageLimit} bind:offset={$offset} sum={$accountActivity?.total} />
+        <p class="text">Total results: {data.logs.total}</p>
+        <Pagination
+            limit={PAGE_LIMIT}
+            path="/console/account/activity"
+            offset={data.offset}
+            sum={data.logs.total} />
     </div>
 </Container>
diff --git a/src/routes/console/account/activity/[[page]]/+page.ts b/src/routes/console/account/activity/[[page]]/+page.ts
new file mode 100644
index 0000000000..6ac71de8da
--- /dev/null
+++ b/src/routes/console/account/activity/[[page]]/+page.ts
@@ -0,0 +1,15 @@
+import { Query } from '@aw-labs/appwrite-console';
+import { sdkForConsole } from '$lib/stores/sdk';
+import { pageToOffset } from '$lib/helpers/load';
+import { PAGE_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params }) => {
+    const page = Number(params.page);
+    const offset = pageToOffset(page, PAGE_LIMIT);
+
+    return {
+        offset,
+        logs: await sdkForConsole.account.listLogs([Query.offset(offset), Query.limit(PAGE_LIMIT)])
+    };
+};
diff --git a/src/routes/console/account/breadcrumbs.svelte b/src/routes/console/account/breadcrumbs.svelte
index 28d7c4f74c..5fb1813308 100644
--- a/src/routes/console/account/breadcrumbs.svelte
+++ b/src/routes/console/account/breadcrumbs.svelte
@@ -5,7 +5,7 @@
     $: breadcrumbs = [
         {
             href: `/console/account`,
-            title: $user.name
+            title: $user?.name
         }
     ];
 </script>
diff --git a/src/routes/console/account/_delete.svelte b/src/routes/console/account/delete.svelte
similarity index 59%
rename from src/routes/console/account/_delete.svelte
rename to src/routes/console/account/delete.svelte
index f64b36636a..0e6a1e46e5 100644
--- a/src/routes/console/account/_delete.svelte
+++ b/src/routes/console/account/delete.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
@@ -24,13 +24,11 @@
     };
 </script>
 
-<Form on:submit={deleteAccount}>
-    <Modal bind:show={showDelete} warning>
-        <svelte:fragment slot="header">Delete Account</svelte:fragment>
-        <p>Are you sure you want to delete your account?</p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal bind:show={showDelete} on:submit={deleteAccount} warning>
+    <svelte:fragment slot="header">Delete Account</svelte:fragment>
+    <p>Are you sure you want to delete your account?</p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/account/header.svelte b/src/routes/console/account/header.svelte
index 609b3bfd98..1b66dc5324 100644
--- a/src/routes/console/account/header.svelte
+++ b/src/routes/console/account/header.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Copy, Tab, Tabs } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { Cover } from '$lib/layout';
+    import { Button } from '$lib/elements/forms';
+    import { isTabSelected } from '$lib/helpers/load';
+    import { Cover, CoverTitle } from '$lib/layout';
+    import { sdkForConsole } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
 
     const path = `/console/account`;
@@ -18,30 +23,40 @@
         },
         {
             href: `${path}/activity`,
-            title: 'Activity'
+            title: 'Activity',
+            hasChildren: true
         },
         {
             href: `${path}/organizations`,
-            title: 'Organizations'
+            title: 'Organizations',
+            hasChildren: true
         }
     ];
+
+    async function logout() {
+        await sdkForConsole.account.deleteSession('current');
+        await goto(`${base}/login`);
+    }
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
-        <h1 class="heading-level-4">
-            <span class="text">{$user.name}</span>
-        </h1>
+        <CoverTitle>
+            {$user.name}
+        </CoverTitle>
         <Copy value={$user.$id}>
             <Pill button>
                 <span class="icon-duplicate" aria-hidden="true" />
                 Project ID
             </Pill>
         </Copy>
+        <div class="u-margin-inline-start-auto">
+            <Button secondary on:click={logout}>Logout</Button>
+        </div>
     </svelte:fragment>
     <Tabs>
         {#each tabs as tab}
-            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
                 {tab.title}
             </Tab>
         {/each}
diff --git a/src/routes/console/account/organizations/+page.svelte b/src/routes/console/account/organizations/[[page]]/+page.svelte
similarity index 68%
rename from src/routes/console/account/organizations/+page.svelte
rename to src/routes/console/account/organizations/[[page]]/+page.svelte
index 2dc314db23..5f422c3050 100644
--- a/src/routes/console/account/organizations/+page.svelte
+++ b/src/routes/console/account/organizations/[[page]]/+page.svelte
@@ -10,16 +10,12 @@
     } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
-    import CreateOrganization from '../../_createOrganization.svelte';
-    import { organizationList } from '$lib/stores/organization';
-    import { onMount } from 'svelte';
+    import CreateOrganization from '../../../createOrganization.svelte';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import { cardLimit } from '$lib/stores/layout';
-    import { createPersistentPagination } from '$lib/stores/pagination';
+    import { CARD_LIMIT } from '$lib/constants';
+    import type { PageData } from './$types';
 
-    onMount(async () => {
-        await organizationList.load();
-    });
+    export let data: PageData;
 
     const getMemberships = async (teamId: string) => {
         const memberships = await sdkForConsole.teams.listMemberships(teamId);
@@ -27,7 +23,6 @@
     };
 
     let addOrganization = false;
-    const offset = createPersistentPagination($cardLimit);
 </script>
 
 <Container>
@@ -43,17 +38,18 @@
         </Button>
     </div>
 
-    {#if $organizationList?.teams?.length}
+    {#if data.organizations.teams.length}
         <CardContainer
-            total={$organizationList.total}
-            offset={$offset}
+            total={data.organizations.total}
+            offset={data.offset}
             on:click={() => (addOrganization = true)}>
-            {#each $organizationList.teams as organization, index}
+            {#each data.organizations.teams as organization, index}
                 {@const avatarList = getMemberships(organization.$id)}
-                {#if index >= $offset && index < $cardLimit + $offset}
+                {#if index >= data.offset && index < CARD_LIMIT + data.offset}
                     <GridItem1 href={`${base}/console/organization-${organization.$id}`}>
-                        <svelte:fragment slot="eyebrow"
-                            >{organization?.total ? organization?.total : 'No'} projects</svelte:fragment>
+                        <svelte:fragment slot="eyebrow">
+                            {organization?.total ? organization?.total : 'No'} projects
+                        </svelte:fragment>
                         <svelte:fragment slot="title">
                             {organization.name}
                         </svelte:fragment>
@@ -75,8 +71,12 @@
         </Empty>
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
-        <p class="text">Total results: {$organizationList?.total}</p>
-        <Pagination limit={$cardLimit} bind:offset={$offset} sum={$organizationList?.total} />
+        <p class="text">Total results: {data.organizations.total}</p>
+        <Pagination
+            limit={CARD_LIMIT}
+            path="console/account/organizations"
+            offset={data.offset}
+            sum={data.organizations.total} />
     </div>
 </Container>
 
diff --git a/src/routes/console/account/organizations/[[page]]/+page.ts b/src/routes/console/account/organizations/[[page]]/+page.ts
new file mode 100644
index 0000000000..7e1b844184
--- /dev/null
+++ b/src/routes/console/account/organizations/[[page]]/+page.ts
@@ -0,0 +1,18 @@
+import { Query } from '@aw-labs/appwrite-console';
+import { sdkForConsole } from '$lib/stores/sdk';
+import { pageToOffset } from '$lib/helpers/load';
+import { PAGE_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params }) => {
+    const page = Number(params.page);
+    const offset = pageToOffset(page, PAGE_LIMIT);
+
+    return {
+        offset,
+        organizations: await sdkForConsole.teams.list([
+            Query.offset(offset),
+            Query.limit(PAGE_LIMIT)
+        ])
+    };
+};
diff --git a/src/routes/console/account/sessions/+page.svelte b/src/routes/console/account/sessions/[[page]]/+page.svelte
similarity index 85%
rename from src/routes/console/account/sessions/+page.svelte
rename to src/routes/console/account/sessions/[[page]]/+page.svelte
index cf10b0fac3..032cf2f61b 100644
--- a/src/routes/console/account/sessions/+page.svelte
+++ b/src/routes/console/account/sessions/[[page]]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Empty, Heading, Pagination } from '$lib/components';
+    import { Empty, Heading } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
     import {
@@ -13,17 +13,12 @@
     } from '$lib/elements/table';
     import { Container } from '$lib/layout';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import { pageLimit } from '$lib/stores/layout';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
     import type { Models } from '@aw-labs/appwrite-console';
-    import { accountSession } from '../store';
-    import { onMount } from 'svelte';
-    import { createPersistentPagination } from '$lib/stores/pagination';
+    import type { PageData } from './$types';
 
-    const offset = createPersistentPagination($pageLimit);
-
-    onMount(async () => {
-        await accountSession.load();
-    });
+    export let data: PageData;
 
     const getBrowser = (clientCode: string) => {
         return sdkForConsole.avatars.getBrowser(clientCode, 40, 40);
@@ -31,11 +26,11 @@
 
     const logout = async (session: Models.Session) => {
         await sdkForConsole.account.deleteSession(session.$id);
-        await accountSession.load();
+        invalidate(Dependencies.ACCOUNT_SESSIONS);
     };
     const logoutAll = async () => {
         await sdkForConsole.account.deleteSessions();
-        await accountSession.load();
+        invalidate(Dependencies.ACCOUNT_SESSIONS);
     };
 </script>
 
@@ -48,7 +43,7 @@
         </Button>
     </div>
 
-    {#if $accountSession?.total}
+    {#if data.sessions.total}
         <Table>
             <TableHeader>
                 <TableCellHead>Client</TableCellHead>
@@ -57,7 +52,7 @@
                 <TableCellHead width={100} />
             </TableHeader>
             <TableBody>
-                {#each $accountSession.sessions as session}
+                {#each data.sessions.sessions as session}
                     <TableRow>
                         <TableCell title="Client">
                             <div class="u-flex u-gap-12">
@@ -121,7 +116,7 @@
         </Empty>
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
-        <p class="text">Total results: {$accountSession?.total}</p>
-        <Pagination limit={$pageLimit} bind:offset={$offset} sum={$accountSession?.total} />
+        <p class="text">Total results: {data.sessions.total}</p>
+        <!-- <Pagination limit={PAGE_LIMIT} offset={data.offset} sum={data.sessions.total} /> -->
     </div>
 </Container>
diff --git a/src/routes/console/account/sessions/[[page]]/+page.ts b/src/routes/console/account/sessions/[[page]]/+page.ts
new file mode 100644
index 0000000000..ed1eaba0f6
--- /dev/null
+++ b/src/routes/console/account/sessions/[[page]]/+page.ts
@@ -0,0 +1,11 @@
+import { Dependencies } from '$lib/constants';
+import { sdkForConsole } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ depends }) => {
+    depends(Dependencies.ACCOUNT_SESSIONS);
+
+    return {
+        sessions: await sdkForConsole.account.listSessions()
+    };
+};
diff --git a/src/routes/console/account/store.ts b/src/routes/console/account/store.ts
deleted file mode 100644
index 42eafb6bae..0000000000
--- a/src/routes/console/account/store.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { cachedStore } from '$lib/helpers/cache';
-import { sdkForConsole } from '$lib/stores/sdk';
-import type { Models } from '@aw-labs/appwrite-console';
-
-export const accountSession = cachedStore<
-    Models.SessionList,
-    {
-        load: () => Promise<void>;
-    }
->('accountSession', function ({ set }) {
-    return {
-        load: async () => {
-            const response = await sdkForConsole.account.listSessions();
-            set(response);
-        }
-    };
-});
-export const accountActivity = cachedStore<
-    Models.LogList,
-    {
-        load: (queries: string[]) => Promise<void>;
-    }
->('accountActivity', function ({ set }) {
-    return {
-        load: async (queries) => {
-            const response = await sdkForConsole.account.listLogs(queries);
-            set(response);
-        }
-    };
-});
diff --git a/src/routes/console/createOrganization.svelte b/src/routes/console/createOrganization.svelte
new file mode 100644
index 0000000000..6f329afd76
--- /dev/null
+++ b/src/routes/console/createOrganization.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { Modal, CustomId } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { InputText, Button, FormList } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { createEventDispatcher } from 'svelte';
+    import { goto, invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+
+    export let show = false;
+    const dispatch = createEventDispatcher();
+    $: console.log(show);
+    let name: string;
+    let id: string;
+    let showCustomId = false;
+    let error: string;
+
+    const create = async () => {
+        try {
+            const org = await sdkForConsole.teams.create(id ?? 'unique()', name);
+            await invalidate(Dependencies.ACCOUNT);
+            dispatch('created');
+            await goto(`/console/organization-${org.$id}`);
+            addNotification({
+                type: 'success',
+                message: `${name} has been created`
+            });
+            name = null;
+            id = null;
+            show = false;
+        } catch ({ message }) {
+            error = message;
+        }
+    };
+</script>
+
+<Modal {error} on:submit={create} size="big" bind:show>
+    <svelte:fragment slot="header">Create New Organization</svelte:fragment>
+    <FormList>
+        <InputText
+            id="name"
+            label="Name"
+            placeholder="Enter name"
+            bind:value={name}
+            autofocus={true}
+            required />
+        {#if !showCustomId}
+            <div>
+                <Pill button on:click={() => (showCustomId = !showCustomId)}>
+                    <span class="icon-pencil" aria-hidden="true" /><span class="text">
+                        Organization ID
+                    </span>
+                </Pill>
+            </div>
+        {:else}
+            <CustomId bind:show={showCustomId} name="organization" bind:id />
+        {/if}
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Cancel</Button>
+        <Button submit>Create</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/onboarding/+layout.svelte b/src/routes/console/onboarding/+layout.svelte
new file mode 100644
index 0000000000..4fa864ce7a
--- /dev/null
+++ b/src/routes/console/onboarding/+layout.svelte
@@ -0,0 +1 @@
+<slot />
diff --git a/src/routes/console/onboarding/+layout.ts b/src/routes/console/onboarding/+layout.ts
new file mode 100644
index 0000000000..e0a2cb5e52
--- /dev/null
+++ b/src/routes/console/onboarding/+layout.ts
@@ -0,0 +1,8 @@
+import Header from './header.svelte';
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = async () => {
+    return {
+        header: Header
+    };
+};
diff --git a/src/routes/console/onboarding/+page.svelte b/src/routes/console/onboarding/+page.svelte
new file mode 100644
index 0000000000..c3a81f1eb7
--- /dev/null
+++ b/src/routes/console/onboarding/+page.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { goto, invalidate } from '$app/navigation';
+    import { Card } from '$lib/components';
+    import CustomId from '$lib/components/customId.svelte';
+    import { Dependencies } from '$lib/constants';
+    import { Pill } from '$lib/elements';
+    import { Button, Form, InputText } from '$lib/elements/forms';
+    import FormList from '$lib/elements/forms/formList.svelte';
+    import { Container } from '$lib/layout';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { ID } from '@aw-labs/appwrite-console';
+
+    let name: string;
+    let id: string;
+    let showCustomId = false;
+    let loading = false;
+    async function createProject() {
+        try {
+            loading = true;
+            const org = await createOrganization();
+            const project = await sdkForConsole.projects.create(id ?? ID.unique(), name, org.$id);
+            await invalidate(Dependencies.ACCOUNT);
+            goto(`/console/project-${project.$id}`);
+        } catch ({ message }) {
+            addNotification({
+                message,
+                type: 'error'
+            });
+        } finally {
+            loading = false;
+        }
+    }
+
+    async function createOrganization() {
+        return await sdkForConsole.teams.create(ID.unique(), 'Personal Projects');
+    }
+</script>
+
+<Container overlapCover size="large">
+    <Card>
+        <Form on:submit={createProject}>
+            <FormList>
+                <InputText
+                    id="name"
+                    label="Project name"
+                    placeholder="First Appwrite Project"
+                    disabled={loading}
+                    bind:value={name} />
+                {#if !showCustomId}
+                    <div>
+                        <Pill button on:click={() => (showCustomId = !showCustomId)}>
+                            <span class="icon-pencil" aria-hidden="true" /><span class="text">
+                                Project ID
+                            </span>
+                        </Pill>
+                    </div>
+                {:else}
+                    <CustomId bind:show={showCustomId} name="Project ID" bind:id />
+                {/if}
+                <Button fullWidth submit disabled={loading}>Create project</Button>
+            </FormList>
+        </Form>
+    </Card>
+</Container>
diff --git a/src/routes/console/onboarding/header.svelte b/src/routes/console/onboarding/header.svelte
new file mode 100644
index 0000000000..51f7314c6e
--- /dev/null
+++ b/src/routes/console/onboarding/header.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { Cover, CoverTitle } from '$lib/layout';
+</script>
+
+<Cover size="large">
+    <CoverTitle>Let's create your first project</CoverTitle>
+</Cover>
diff --git a/src/routes/console/organization-[organization]/+layout.svelte b/src/routes/console/organization-[organization]/+layout.svelte
index bc7bb1c7f3..ae86b80378 100644
--- a/src/routes/console/organization-[organization]/+layout.svelte
+++ b/src/routes/console/organization-[organization]/+layout.svelte
@@ -1,49 +1,14 @@
 <script lang="ts">
-    import { pageLimit, updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-    import { afterNavigate } from '$app/navigation';
-    import {
-        organization,
-        memberList,
-        newOrgModal,
-        newMemberModal
-    } from '$lib/stores/organization';
-    import CreateMember from './_createMember.svelte';
-    import Create from '../_createOrganization.svelte';
-    import { page } from '$app/stores';
-    import { Query } from '@aw-labs/appwrite-console';
-    import Header from './header.svelte';
-    import Breadcrumbs from './breadcrumbs.svelte';
-
-    $: organizationId = $page.params.organization;
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle() {
-        const promises = Promise.all([
-            organization.load(organizationId),
-            memberList.load(organizationId, [Query.limit($pageLimit)])
-        ]);
-
-        if ($organization?.$id !== organizationId) {
-            await promises;
-        }
-
-        updateLayout({
-            header: Header,
-            breadcrumb: Breadcrumbs
-        });
-    }
+    import { newOrgModal, newMemberModal } from '$lib/stores/organization';
+    import CreateMember from './createMember.svelte';
+    import Create from '../createOrganization.svelte';
 </script>
 
 <svelte:head>
     <title>Organizations - Appwrite</title>
 </svelte:head>
 
-{#if $organization}
-    <slot />
-{/if}
+<slot />
 
 <Create bind:show={$newOrgModal} />
 <CreateMember bind:showCreate={$newMemberModal} />
diff --git a/src/routes/console/organization-[organization]/+layout.ts b/src/routes/console/organization-[organization]/+layout.ts
new file mode 100644
index 0000000000..c01621c393
--- /dev/null
+++ b/src/routes/console/organization-[organization]/+layout.ts
@@ -0,0 +1,21 @@
+import Header from './header.svelte';
+import Breadcrumbs from './breadcrumbs.svelte';
+import { sdkForConsole } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import type { LayoutLoad } from './$types';
+import { error } from '@sveltejs/kit';
+
+export const load: LayoutLoad = async ({ params, depends }) => {
+    depends(Dependencies.ORGANIZATION);
+
+    try {
+        return {
+            header: Header,
+            breadcrumbs: Breadcrumbs,
+            organization: sdkForConsole.teams.get(params.organization),
+            members: sdkForConsole.teams.listMemberships(params.organization)
+        };
+    } catch (e) {
+        throw error(e.code, e.message);
+    }
+};
diff --git a/src/routes/console/organization-[organization]/+page.svelte b/src/routes/console/organization-[organization]/[[page]]/+page.svelte
similarity index 67%
rename from src/routes/console/organization-[organization]/+page.svelte
rename to src/routes/console/organization-[organization]/[[page]]/+page.svelte
index 2fb86f2592..837ac1319e 100644
--- a/src/routes/console/organization-[organization]/+page.svelte
+++ b/src/routes/console/organization-[organization]/[[page]]/+page.svelte
@@ -1,40 +1,23 @@
 <script lang="ts">
-    import { afterNavigate, goto } from '$app/navigation';
+    import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { Pill } from '$lib/elements';
-    import { GridItem1, Heading, Empty, Pagination } from '$lib/components';
+    import { GridItem1, Heading, Empty, CardContainer, Pagination } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
-    import { Query, type Models } from '@aw-labs/appwrite-console';
-    import { projectList } from '$lib/stores/organization';
-    import { project } from '../project-[project]/store';
-    import { onMount } from 'svelte';
+    import CreateProject from '../createProject.svelte';
+    import CreateOrganization from '../../createOrganization.svelte';
+    import type { PageData } from './$types';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { CARD_LIMIT } from '$lib/constants';
     import { page } from '$app/stores';
-    import CreateOrganization from '../_createOrganization.svelte';
-    import CreateProject from './_createProject.svelte';
-    import { cardLimit } from '$lib/stores/layout';
-    import CardContainer from '$lib/components/cardContainer.svelte';
-    import { createPersistentPagination } from '$lib/stores/pagination';
 
-    $: organizationId = $page.params.organization;
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle() {
-        await projectList.load([
-            Query.offset($offset),
-            Query.limit($cardLimit),
-            Query.equal('teamId', organizationId)
-        ]);
-    }
+    export let data: PageData;
 
     let showCreate = false;
     let addOrganization = false;
-    const offset = createPersistentPagination($cardLimit);
 
     const projectCreated = async (event: CustomEvent<Models.Project>) => {
-        await project.load(event.detail.$id);
         await goto(`${base}/console/project-${event.detail.$id}`);
     };
 
@@ -61,9 +44,6 @@
         }
         return { name, icon };
     };
-
-    // $: projectList.load('', limit, offset);
-    // $: projects = $projectList?.projects?.filter((a) => a.teamId === organizationId);
 </script>
 
 <Container>
@@ -77,13 +57,13 @@
         </Button>
     </div>
 
-    {#if $projectList?.total}
+    {#if data.projects.total}
         <CardContainer
-            total={$projectList.total}
-            offset={$offset}
+            total={data.projects.total}
+            offset={data.offset}
             on:click={() => (showCreate = true)}>
-            {#each $projectList.projects as project, index}
-                {#if index >= $offset && index < $cardLimit + $offset}
+            {#each data.projects.projects as project, index}
+                {#if index >= data.offset && index < CARD_LIMIT + data.offset}
                     <GridItem1 href={`${base}/console/project-${project.$id}`}>
                         <svelte:fragment slot="eyebrow">
                             {project?.platforms?.length ? project?.platforms?.length : 'No'} apps
@@ -121,11 +101,18 @@
         </Empty>
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
-        <p class="text">Total results: {$projectList?.total}</p>
-        <Pagination limit={$cardLimit} bind:offset={$offset} sum={$projectList?.total} />
+        <p class="text">Total results: {data.projects.total}</p>
+        <Pagination
+            path={`/console/organization-${$page.params.organization}`}
+            limit={CARD_LIMIT}
+            offset={data.offset}
+            sum={data.projects.total} />
     </div>
 </Container>
 
 <CreateOrganization bind:show={addOrganization} />
 
-<CreateProject bind:show={showCreate} teamId={organizationId} on:created={projectCreated} />
+<CreateProject
+    bind:show={showCreate}
+    teamId={$page.params.organization}
+    on:created={projectCreated} />
diff --git a/src/routes/console/organization-[organization]/[[page]]/+page.ts b/src/routes/console/organization-[organization]/[[page]]/+page.ts
new file mode 100644
index 0000000000..c4a81164dd
--- /dev/null
+++ b/src/routes/console/organization-[organization]/[[page]]/+page.ts
@@ -0,0 +1,19 @@
+import { Query } from '@aw-labs/appwrite-console';
+import { sdkForConsole } from '$lib/stores/sdk';
+import { pageToOffset } from '$lib/helpers/load';
+import { CARD_LIMIT, PAGE_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params }) => {
+    const page = Number(params.page);
+    const offset = pageToOffset(page, PAGE_LIMIT);
+
+    return {
+        offset,
+        projects: await sdkForConsole.projects.list([
+            Query.offset(offset),
+            Query.limit(CARD_LIMIT),
+            Query.equal('teamId', params.organization)
+        ])
+    };
+};
diff --git a/src/routes/console/organization-[organization]/_createMember.svelte b/src/routes/console/organization-[organization]/_createMember.svelte
deleted file mode 100644
index b638882938..0000000000
--- a/src/routes/console/organization-[organization]/_createMember.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-
-    import { Modal } from '$lib/components';
-    import { InputText, InputEmail, Button, Form, FormList } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
-    import { organization, memberList } from '$lib/stores/organization';
-    import { pageLimit } from '$lib/stores/layout';
-    import { Query } from '@aw-labs/appwrite-console';
-
-    export let showCreate = false;
-
-    const dispatch = createEventDispatcher();
-
-    let email: string, name: string, error: string;
-    const url = `${$page.url.origin}/invite`;
-
-    const create = async () => {
-        try {
-            const team = await sdkForConsole.teams.createMembership(
-                $organization.$id,
-                email,
-                ['owner'],
-                url,
-                name
-            );
-            showCreate = false;
-            addNotification({
-                type: 'success',
-                message: `Invite has been sent to ${email}`
-            });
-            memberList.load($organization.$id, [Query.limit($pageLimit)], '');
-            dispatch('created', team);
-        } catch ({ message }) {
-            error = message;
-        }
-    };
-
-    $: if (!showCreate) {
-        error = null;
-        email = null;
-        name = null;
-    }
-</script>
-
-<Form on:submit={create}>
-    <Modal {error} size="big" bind:show={showCreate}>
-        <svelte:fragment slot="header">Invite Member</svelte:fragment>
-        <FormList>
-            <InputEmail
-                id="email"
-                label="Email"
-                placeholder="Enter email"
-                autofocus={true}
-                bind:value={email} />
-            <InputText
-                id="name"
-                label="Name (optional)"
-                placeholder="Enter name"
-                bind:value={name} />
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
-            <Button submit>Send invite</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
diff --git a/src/routes/console/organization-[organization]/_deleteOrganization.svelte b/src/routes/console/organization-[organization]/_deleteOrganization.svelte
deleted file mode 100644
index 8efe40619f..0000000000
--- a/src/routes/console/organization-[organization]/_deleteOrganization.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script lang="ts">
-    import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
-    import { newOrgModal, organization, organizationList } from '$lib/stores/organization';
-    import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
-
-    export let showDelete = false;
-
-    const deleteOrg = async () => {
-        try {
-            await sdkForConsole.teams.delete($organization.$id);
-            addNotification({
-                type: 'success',
-                message: `${$organization.name} has been deleted`
-            });
-            if ($organizationList?.total > 1) {
-                await organizationList.load();
-                goto(`${base}/console/organization-${$organizationList.teams[0].$id}`);
-            } else {
-                newOrgModal.set(true);
-                goto(`${base}/console`);
-            }
-            showDelete = false;
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    };
-</script>
-
-<Form on:submit={deleteOrg}>
-    <Modal bind:show={showDelete} warning>
-        <svelte:fragment slot="header">Delete Organization</svelte:fragment>
-        <p>
-            Are you sure you want to delete <b>{$organization.name}</b>? All projects ({$organization.total})
-            and data associated with this organization will be deleted. This action is irreversible.
-        </p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
diff --git a/src/routes/console/organization-[organization]/createMember.svelte b/src/routes/console/organization-[organization]/createMember.svelte
new file mode 100644
index 0000000000..8149227b56
--- /dev/null
+++ b/src/routes/console/organization-[organization]/createMember.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Modal } from '$lib/components';
+    import { InputText, InputEmail, Button, FormList } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { createEventDispatcher } from 'svelte';
+    import { organization } from '$lib/stores/organization';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+
+    export let showCreate = false;
+
+    const dispatch = createEventDispatcher();
+
+    let email: string, name: string, error: string;
+    const url = `${$page.url.origin}/invite`;
+
+    const create = async () => {
+        try {
+            const team = await sdkForConsole.teams.createMembership(
+                $organization.$id,
+                email,
+                ['owner'],
+                url,
+                name
+            );
+            invalidate(Dependencies.ORGANIZATION);
+            showCreate = false;
+            addNotification({
+                type: 'success',
+                message: `Invite has been sent to ${email}`
+            });
+            dispatch('created', team);
+        } catch ({ message }) {
+            error = message;
+        }
+    };
+
+    $: if (!showCreate) {
+        error = null;
+        email = null;
+        name = null;
+    }
+</script>
+
+<Modal {error} size="big" bind:show={showCreate} on:submit={create}>
+    <svelte:fragment slot="header">Invite Member</svelte:fragment>
+    <FormList>
+        <InputEmail
+            id="email"
+            label="Email"
+            placeholder="Enter email"
+            autofocus={true}
+            bind:value={email} />
+        <InputText id="name" label="Name (optional)" placeholder="Enter name" bind:value={name} />
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
+        <Button submit>Send invite</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/organization-[organization]/_createProject.svelte b/src/routes/console/organization-[organization]/createProject.svelte
similarity index 50%
rename from src/routes/console/organization-[organization]/_createProject.svelte
rename to src/routes/console/organization-[organization]/createProject.svelte
index 92160bd86f..953552594b 100644
--- a/src/routes/console/organization-[organization]/_createProject.svelte
+++ b/src/routes/console/organization-[organization]/createProject.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Modal, CustomId } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { InputText, Button, Form, FormList } from '$lib/elements/forms';
+    import { InputText, Button, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -33,26 +33,24 @@
     };
 </script>
 
-<Form on:submit={create}>
-    <Modal {error} size="big" bind:show>
-        <svelte:fragment slot="header">Create Project</svelte:fragment>
-        <FormList>
-            <InputText id="name" label="Name" bind:value={name} required autofocus={true} />
-            {#if !showCustomId}
-                <div>
-                    <Pill button on:click={() => (showCustomId = !showCustomId)}>
-                        <span class="icon-pencil" aria-hidden="true" /><span class="text">
-                            Project ID
-                        </span>
-                    </Pill>
-                </div>
-            {:else}
-                <CustomId bind:show={showCustomId} name="Project" bind:id />
-            {/if}
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => (show = false)}>Cancel</Button>
-            <Button submit>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal {error} on:submit={create} size="big" bind:show>
+    <svelte:fragment slot="header">Create Project</svelte:fragment>
+    <FormList>
+        <InputText id="name" label="Name" bind:value={name} required autofocus={true} />
+        {#if !showCustomId}
+            <div>
+                <Pill button on:click={() => (showCustomId = !showCustomId)}>
+                    <span class="icon-pencil" aria-hidden="true" /><span class="text">
+                        Project ID
+                    </span>
+                </Pill>
+            </div>
+        {:else}
+            <CustomId bind:show={showCustomId} name="Project" bind:id />
+        {/if}
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Cancel</Button>
+        <Button submit>Create</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/organization-[organization]/_deleteMember.svelte b/src/routes/console/organization-[organization]/deleteMember.svelte
similarity index 62%
rename from src/routes/console/organization-[organization]/_deleteMember.svelte
rename to src/routes/console/organization-[organization]/deleteMember.svelte
index 8a7ba31f5b..68e4fcca92 100644
--- a/src/routes/console/organization-[organization]/_deleteMember.svelte
+++ b/src/routes/console/organization-[organization]/deleteMember.svelte
@@ -2,7 +2,7 @@
     import { base } from '$app/paths';
     import { goto } from '$app/navigation';
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
@@ -19,7 +19,7 @@
             await sdkForConsole.teams.deleteMembership(selectedMember.teamId, selectedMember.$id);
 
             if (isUser) {
-                await user.logout();
+                await sdkForConsole.account.deleteSession('current');
                 await goto(`${base}/login`);
             } else {
                 dispatch('deleted');
@@ -40,19 +40,17 @@
     $: isUser = selectedMember.userId === $user.$id;
 </script>
 
-<Form on:submit={deleteMembership}>
-    <Modal bind:show={showDelete} warning>
-        <svelte:fragment slot="header">
-            {isUser ? 'Leave Organization' : 'Delete Member'}
-        </svelte:fragment>
-        <p>
-            {isUser
-                ? `Are you sure you want to leave '${selectedMember.teamName}'?`
-                : `Are you sure you want to delete ${selectedMember.userName} from '${selectedMember.teamName}'?`}
-        </p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>{isUser ? 'Leave' : 'Delete'}</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal bind:show={showDelete} on:submit={deleteMembership} warning>
+    <svelte:fragment slot="header">
+        {isUser ? 'Leave Organization' : 'Delete Member'}
+    </svelte:fragment>
+    <p>
+        {isUser
+            ? `Are you sure you want to leave '${selectedMember.teamName}'?`
+            : `Are you sure you want to delete ${selectedMember.userName} from '${selectedMember.teamName}'?`}
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>{isUser ? 'Leave' : 'Delete'}</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/organization-[organization]/deleteOrganization.svelte b/src/routes/console/organization-[organization]/deleteOrganization.svelte
new file mode 100644
index 0000000000..37a5adda4c
--- /dev/null
+++ b/src/routes/console/organization-[organization]/deleteOrganization.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { organization, organizationList } from '$lib/stores/organization';
+    import { goto, invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { Dependencies } from '$lib/constants';
+
+    export let showDelete = false;
+
+    const deleteOrg = async () => {
+        try {
+            await sdkForConsole.teams.delete($organization.$id);
+            addNotification({
+                type: 'success',
+                message: `${$organization.name} has been deleted`
+            });
+            if ($organizationList?.total > 1) {
+                await invalidate(Dependencies.ACCOUNT);
+                goto(`${base}/console/`);
+            } else {
+                await invalidate(Dependencies.ACCOUNT);
+                goto(`${base}/console/onboarding`);
+            }
+            showDelete = false;
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Modal on:submit={deleteOrg} bind:show={showDelete} warning>
+    <svelte:fragment slot="header">Delete Organization</svelte:fragment>
+    <p>
+        Are you sure you want to delete <b>{$organization.name}</b>? All projects ({$organization.total})
+        and data associated with this organization will be deleted. This action is irreversible.
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/organization-[organization]/header.svelte b/src/routes/console/organization-[organization]/header.svelte
index 11dcd2149d..e946f15f65 100644
--- a/src/routes/console/organization-[organization]/header.svelte
+++ b/src/routes/console/organization-[organization]/header.svelte
@@ -3,42 +3,31 @@
     import { page } from '$app/stores';
     import { AvatarGroup, DropList, DropListItem, DropListLink, Tab, Tabs } from '$lib/components';
     import { Button } from '$lib/elements/forms';
+    import { isTabSelected } from '$lib/helpers/load';
     import { Cover } from '$lib/layout';
     import {
-        memberList,
+        members,
         newMemberModal,
         newOrgModal,
         organization,
         organizationList
     } from '$lib/stores/organization';
-    import { sdkForConsole } from '$lib/stores/sdk';
 
-    let avatars = [];
-    let avatarsTotal = 0;
     let showDropdown = false;
 
-    memberList.subscribe((value) => {
-        if (value?.total > 0) {
-            avatarsTotal = value.total;
-            avatars = value.memberships.map((team) => {
-                return {
-                    name: team.userName,
-                    img: sdkForConsole.avatars.getInitials(team.userName, 80, 80).toString()
-                };
-            });
-        }
-    });
-
+    $: avatars = $members.memberships?.map((m) => m.userName) ?? [];
     $: organizationId = $page.params.organization;
     $: path = `/console/organization-${organizationId}`;
     $: tabs = [
         {
             href: path,
-            title: 'Projects'
+            title: 'Projects',
+            hasChildren: true
         },
         {
             href: `${path}/members`,
-            title: 'Members'
+            title: 'Members',
+            hasChildren: true
         },
         {
             href: `${path}/settings`,
@@ -63,11 +52,7 @@
             </button>
             <svelte:fragment slot="list">
                 {#each $organizationList.teams as org}
-                    <DropListLink
-                        href={`${base}/console/organization-${org.$id}`}
-                        on:click={() => {
-                            showDropdown = false;
-                        }}>
+                    <DropListLink href={`${base}/console/organization-${org.$id}`}>
                         {org.name}
                     </DropListLink>
                 {/each}
@@ -75,18 +60,15 @@
             <svelte:fragment slot="other">
                 <section class="drop-section">
                     <ul class="drop-list">
-                        <DropListItem
-                            icon="plus"
-                            on:click={() => {
-                                showDropdown = false;
-                                newOrgModal.set(true);
-                            }}>New Organization</DropListItem>
+                        <DropListItem icon="plus" on:click={() => newOrgModal.set(true)}>
+                            New Organization
+                        </DropListItem>
                     </ul>
                 </section></svelte:fragment>
         </DropList>
         <div class="u-margin-inline-start-auto">
             <div class="u-flex u-gap-16">
-                <AvatarGroup size={40} {avatars} total={avatarsTotal} />
+                <AvatarGroup size={40} {avatars} total={$members?.total ?? 0} />
                 <Button secondary on:click={() => newMemberModal.set(true)}>
                     <span class="icon-plus" aria-hidden="true" />
                     <span class="text">Invite</span>
@@ -96,7 +78,7 @@
     </svelte:fragment>
     <Tabs>
         {#each tabs as tab}
-            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
                 {tab.title}
             </Tab>
         {/each}
diff --git a/src/routes/console/organization-[organization]/members/+page.svelte b/src/routes/console/organization-[organization]/members/[[page]]/+page.svelte
similarity index 79%
rename from src/routes/console/organization-[organization]/members/+page.svelte
rename to src/routes/console/organization-[organization]/members/[[page]]/+page.svelte
index 02dd5826c0..e70cbc0e88 100644
--- a/src/routes/console/organization-[organization]/members/+page.svelte
+++ b/src/routes/console/organization-[organization]/members/[[page]]/+page.svelte
@@ -12,27 +12,23 @@
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
-    import Delete from '../_deleteMember.svelte';
-    import { organization, memberList, newMemberModal } from '$lib/stores/organization';
+    import { organization, members, newMemberModal } from '$lib/stores/organization';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import { Query, type Models } from '@aw-labs/appwrite-console';
-    import { pageLimit } from '$lib/stores/layout';
     import { page } from '$app/stores';
     import { addNotification } from '$lib/stores/notifications';
-    import { createPersistentPagination } from '$lib/stores/pagination';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+    import Delete from '../../deleteMember.svelte';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
 
-    let search = '';
     let selectedMember: Models.Membership;
     let showDelete = false;
-    const url = `${$page.url.origin}/console/`;
-    const offset = createPersistentPagination($pageLimit);
 
-    const deleted = () =>
-        memberList.load(
-            $organization.$id,
-            [Query.limit($pageLimit), Query.offset($offset)],
-            search
-        );
+    const url = `${$page.url.origin}/console/`;
+    const deleted = () => invalidate(Dependencies.ORGANIZATION);
     const resend = async (member: Models.Membership) => {
         try {
             await sdkForConsole.teams.createMembership(
@@ -53,13 +49,10 @@
             });
         }
     };
-
-    $: if (search) $offset = 0;
-    $: memberList.load($organization.$id, [Query.limit($pageLimit), Query.offset($offset)], search);
 </script>
 
 <Container>
-    {#if $memberList?.total}
+    {#if data.organizationMembers.total}
         <div class="u-flex u-gap-12 common-section u-main-space-between">
             <Heading tag="h2" size="5">Members</Heading>
 
@@ -77,7 +70,7 @@
                 <TableCellHead width={30} />
             </TableHeader>
             <TableBody>
-                {#each $memberList.memberships as member}
+                {#each data.organizationMembers.memberships as member}
                     <TableRow>
                         <TableCell title="Name">
                             <div class="u-flex u-gap-12 u-cross-center">
@@ -103,7 +96,7 @@
                             <button
                                 class="button is-only-icon is-text"
                                 aria-label="Delete item"
-                                disabled={$memberList.total === 1}
+                                disabled={$members.total === 1}
                                 on:click={() => {
                                     selectedMember = member;
                                     showDelete = true;
@@ -116,8 +109,12 @@
             </TableBody>
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {$memberList.total}</p>
-            <Pagination limit={$pageLimit} bind:offset={$offset} sum={$memberList.total} />
+            <p class="text">Total results: {data.organizationMembers.total}</p>
+            <Pagination
+                offset={data.offset}
+                limit={PAGE_LIMIT}
+                path={`/console/organization-${$page.params.organization}/members`}
+                sum={data.members.total} />
         </div>
     {/if}
 </Container>
diff --git a/src/routes/console/organization-[organization]/members/[[page]]/+page.ts b/src/routes/console/organization-[organization]/members/[[page]]/+page.ts
new file mode 100644
index 0000000000..dcf7db7c9c
--- /dev/null
+++ b/src/routes/console/organization-[organization]/members/[[page]]/+page.ts
@@ -0,0 +1,18 @@
+import { PAGE_LIMIT } from '$lib/constants';
+import { pageToOffset } from '$lib/helpers/load';
+import { sdkForConsole } from '$lib/stores/sdk';
+import { Query } from '@aw-labs/appwrite-console';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params }) => {
+    const page = Number(params.page);
+    const offset = pageToOffset(page, PAGE_LIMIT);
+
+    return {
+        offset,
+        organizationMembers: await sdkForConsole.teams.listMemberships(params.organization, [
+            Query.limit(PAGE_LIMIT),
+            Query.offset(offset)
+        ])
+    };
+};
diff --git a/src/routes/console/organization-[organization]/settings/+page.svelte b/src/routes/console/organization-[organization]/settings/+page.svelte
index cafcd5d286..da6d54c0b3 100644
--- a/src/routes/console/organization-[organization]/settings/+page.svelte
+++ b/src/routes/console/organization-[organization]/settings/+page.svelte
@@ -4,16 +4,23 @@
     import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import { organization, memberList } from '$lib/stores/organization';
-    import Delete from '../_deleteOrganization.svelte';
+    import { members, organization } from '$lib/stores/organization';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { onMount } from 'svelte';
+    import Delete from '../deleteOrganization.svelte';
 
-    let name: string = $organization.name;
+    let name: string;
     let showDelete = false;
 
+    onMount(() => {
+        name = $organization.name;
+    });
+
     async function updateName() {
         try {
             await sdkForConsole.teams.update($organization.$id, name);
-            $organization.name = name;
+            invalidate(Dependencies.ORGANIZATION);
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
@@ -26,19 +33,7 @@
         }
     }
 
-    organization.subscribe((org) => {
-        name = org?.name;
-    });
-
-    let avatars = [];
-    let avatarsTotal = 0;
-
-    memberList.subscribe((value) => {
-        if (value?.total > 0) {
-            avatarsTotal = value.total;
-            avatars = value.memberships.map((team) => team.userName);
-        }
-    });
+    $: avatars = $members.memberships.map((team) => team.userName);
 </script>
 
 <Container>
@@ -75,7 +70,7 @@
             <svelte:fragment slot="aside">
                 <Box>
                     <svelte:fragment slot="image">
-                        <AvatarGroup {avatars} total={avatarsTotal} />
+                        <AvatarGroup {avatars} total={$members.total} />
                     </svelte:fragment>
                     <svelte:fragment slot="title">
                         <h6 class="u-bold">{$organization.name}</h6>
diff --git a/src/routes/console/project-[project]/+error.svelte b/src/routes/console/project-[project]/+error.svelte
new file mode 100644
index 0000000000..eaba0eba14
--- /dev/null
+++ b/src/routes/console/project-[project]/+error.svelte
@@ -0,0 +1,10 @@
+<script>
+    import { page } from '$app/stores';
+    import { Heading } from '$lib/components';
+    import { Container } from '$lib/layout';
+</script>
+
+<Container>
+    <Heading size="1" tag="h3">{$page.status}</Heading>
+    <Heading size="3" tag="h4">{$page.error.message}</Heading>
+</Container>
diff --git a/src/routes/console/project-[project]/+layout.svelte b/src/routes/console/project-[project]/+layout.svelte
index 1d0e84ffb8..6b69070e6d 100644
--- a/src/routes/console/project-[project]/+layout.svelte
+++ b/src/routes/console/project-[project]/+layout.svelte
@@ -1,75 +1,7 @@
 <script lang="ts">
-    import { browser } from '$app/environment';
-    import { page } from '$app/stores';
-    import { sdkForConsole, sdkForProject, setProject } from '$lib/stores/sdk';
-    import { collection } from './databases/database/[database]/collection/[collection]/store';
     import { UploadBox } from '$lib/components';
-    import { project } from './store';
-    import { organization } from '$lib/stores/organization';
-    import { onMount } from 'svelte';
-    import { afterNavigate } from '$app/navigation';
-    import type { Models } from '@aw-labs/appwrite-console';
-
-    type Attributes =
-        | Models.AttributeBoolean
-        | Models.AttributeEmail
-        | Models.AttributeEnum
-        | Models.AttributeFloat
-        | Models.AttributeInteger
-        | Models.AttributeIp
-        | Models.AttributeString
-        | Models.AttributeUrl;
-
-    $: projectId = $page.params.project;
-
-    // TODO: move to database routes
-    if (browser) {
-        sdkForConsole.client.subscribe<Attributes | Models.Index>('console', (message) => {
-            if (message.events.includes('databases.*.collections.*.attributes.*.create')) {
-                collection.addAttribute(<Attributes>message.payload);
-
-                return;
-            }
-
-            if (message.events.includes('databases.*.collections.*.attributes.*.update')) {
-                collection.updateAttribute(<Attributes>message.payload);
-
-                return;
-            }
-
-            if (message.events.includes('databases.*.collections.*.attributes.*.delete')) {
-                collection.removeAttribute(<Attributes>message.payload);
-
-                return;
-            }
-        });
-    }
-    onMount(handle);
-    afterNavigate(handle);
-
-    let loaded = false;
-    async function handle() {
-        if (sdkForProject.client.config.project !== projectId) {
-            setProject(projectId);
-        }
-
-        const promiseProject = project.load(projectId);
-        if ($project?.$id !== projectId) {
-            await promiseProject;
-
-            const promiseOrganization = organization.load($project.teamId);
-            if ($organization?.$id !== $project?.teamId) {
-                await promiseOrganization;
-            }
-        }
-        loaded = true;
-    }
 </script>
 
-{#if loaded}
-    <slot />
-{:else}
-    loading
-{/if}
+<slot />
 
 <UploadBox />
diff --git a/src/routes/console/project-[project]/+layout.ts b/src/routes/console/project-[project]/+layout.ts
new file mode 100644
index 0000000000..ceb51ff806
--- /dev/null
+++ b/src/routes/console/project-[project]/+layout.ts
@@ -0,0 +1,23 @@
+import { Dependencies } from '$lib/constants';
+import { sdkForConsole, sdkForProject, setProject } from '$lib/stores/sdk';
+import { error } from '@sveltejs/kit';
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = async ({ params, depends }) => {
+    depends(Dependencies.PROJECT);
+
+    if (sdkForProject.client.config.project !== params.project) {
+        setProject(params.project);
+    }
+
+    try {
+        const project = await sdkForConsole.projects.get(params.project);
+
+        return {
+            project,
+            organization: await sdkForConsole.teams.get(project.teamId)
+        };
+    } catch (e) {
+        throw error(e.code, e.message);
+    }
+};
diff --git a/src/routes/console/project-[project]/authentication/+layout.svelte b/src/routes/console/project-[project]/authentication/+layout.svelte
index fb4db22594..4fa864ce7a 100644
--- a/src/routes/console/project-[project]/authentication/+layout.svelte
+++ b/src/routes/console/project-[project]/authentication/+layout.svelte
@@ -1,23 +1 @@
-<script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-    import Breadcrumbs from './breadcrumbs.svelte';
-    import Header from './header.svelte';
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    function handle() {
-        updateLayout({
-            header: Header,
-            breadcrumb: Breadcrumbs
-        });
-    }
-</script>
-
-<svelte:head>
-    <title>Users - Appwrite</title>
-</svelte:head>
-
 <slot />
diff --git a/src/routes/console/project-[project]/authentication/+layout.ts b/src/routes/console/project-[project]/authentication/+layout.ts
new file mode 100644
index 0000000000..12cc3f7957
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/+layout.ts
@@ -0,0 +1,12 @@
+import Breadcrumbs from './breadcrumbs.svelte';
+import Header from './header.svelte';
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = async ({ parent }) => {
+    await parent();
+
+    return {
+        header: Header,
+        breadcrumbs: Breadcrumbs
+    };
+};
diff --git a/src/routes/console/project-[project]/authentication/+page.svelte b/src/routes/console/project-[project]/authentication/[[page]]/+page.svelte
similarity index 79%
rename from src/routes/console/project-[project]/authentication/+page.svelte
rename to src/routes/console/project-[project]/authentication/[[page]]/+page.svelte
index a0c6142a9c..3cf47bced5 100644
--- a/src/routes/console/project-[project]/authentication/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/[[page]]/+page.svelte
@@ -1,6 +1,13 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Empty, EmptySearch, Pagination, Copy, Search, AvatarInitials } from '$lib/components';
+    import {
+        Empty,
+        EmptySearch,
+        Pagination,
+        Copy,
+        SearchQuery,
+        AvatarInitials
+    } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import {
         Table,
@@ -11,36 +18,28 @@
         TableCellText,
         TableRowLink
     } from '$lib/elements/table';
-    import Create from './_createUser.svelte';
-    import { goto } from '$app/navigation';
     import { event } from '$lib/actions/analytics';
     import { Pill } from '$lib/elements';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
-    import { usersList } from './store';
-    import { Query, type Models } from '@aw-labs/appwrite-console';
-    import { pageLimit } from '$lib/stores/layout';
-    import { createPersistentPagination } from '$lib/stores/pagination';
+    import { goto } from '$app/navigation';
+    import { PAGE_LIMIT } from '$lib/constants';
+    import Create from '../_createUser.svelte';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import type { PageData } from './$types';
 
-    let showCreate = false;
-    let search = '';
-    const offset = createPersistentPagination($pageLimit);
+    export let data: PageData;
 
-    const project = $page.params.project;
+    let showCreate = false;
+    const projectId = $page.params.project;
     const userCreated = async (event: CustomEvent<Models.User<Record<string, unknown>>>) => {
-        await goto(`${base}/console/project-${project}/authentication/user/${event.detail.$id}`);
+        await goto(`${base}/console/project-${projectId}/authentication/user-${event.detail.$id}`);
     };
-
-    $: if (search) $offset = 0;
-    $: usersList.load(
-        [Query.limit($pageLimit), Query.offset($offset), Query.orderDesc('$createdAt')],
-        search
-    );
 </script>
 
 <Container>
-    <Search bind:search placeholder="Search by name, email, or ID">
+    <SearchQuery search={data.search} placeholder="Search by name, email, or ID">
         <span
             use:event={{
                 name: 'console_users',
@@ -53,8 +52,8 @@
                 <span class="icon-plus" aria-hidden="true" /> <span class="text">Create user</span>
             </Button>
         </span>
-    </Search>
-    {#if $usersList?.total}
+    </SearchQuery>
+    {#if data.users.total}
         <Table>
             <TableHeader>
                 <TableCellHead>Name</TableCellHead>
@@ -64,9 +63,9 @@
                 <TableCellHead>Joined</TableCellHead>
             </TableHeader>
             <TableBody>
-                {#each $usersList.users as user}
+                {#each data.users.users as user}
                     <TableRowLink
-                        href={`${base}/console/project-${project}/authentication/user/${user.$id}`}>
+                        href={`${base}/console/project-${projectId}/authentication/user-${user.$id}`}>
                         <TableCell title="Name">
                             <div class="u-flex u-gap-12 u-cross-center">
                                 {#if user.email || user.phone}
@@ -108,9 +107,10 @@
                         </TableCell>
                         <TableCell showOverflow title="ID">
                             <Copy value={user.$id}>
-                                <Pill button
-                                    ><span class="icon-duplicate" aria-hidden="true" />
-                                    <span class="text">User ID</span></Pill>
+                                <Pill button>
+                                    <span class="icon-duplicate" aria-hidden="true" />
+                                    <span class="text">User ID</span>
+                                </Pill>
                             </Copy>
                         </TableCell>
                         <TableCellText title="Joined">
@@ -121,16 +121,22 @@
             </TableBody>
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {$usersList.total}</p>
-            <Pagination limit={$pageLimit} bind:offset={$offset} sum={$usersList.total} />
+            <p class="text">Total results: {data.users.total}</p>
+            <Pagination
+                offset={data.offset}
+                limit={PAGE_LIMIT}
+                sum={data.users.total}
+                path={`/console/project-${projectId}/authentication`} />
         </div>
-    {:else if search}
+    {:else if data.search}
         <EmptySearch>
             <div class="u-text-center">
-                <b>Sorry, we couldn’t find ‘{search}’</b>
+                <b>Sorry, we couldn’t find ‘{data.search}’</b>
                 <p>There are no users that match your search.</p>
             </div>
-            <Button secondary on:click={() => (search = '')}>Clear Search</Button>
+            <Button href={`/console/project-${projectId}/authentication`} secondary>
+                Clear Search
+            </Button>
         </EmptySearch>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
diff --git a/src/routes/console/project-[project]/authentication/[[page]]/+page.ts b/src/routes/console/project-[project]/authentication/[[page]]/+page.ts
new file mode 100644
index 0000000000..132a73b2ee
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/[[page]]/+page.ts
@@ -0,0 +1,22 @@
+import { Query } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import { pageToOffset } from '$lib/helpers/load';
+import { PAGE_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent, url }) => {
+    await parent();
+    const page = Number(params.page);
+    const offset = pageToOffset(page, PAGE_LIMIT);
+    const search = url.search.slice(1) ?? undefined;
+
+    return {
+        offset,
+        search,
+        page,
+        users: await sdkForProject.users.list(
+            [Query.limit(PAGE_LIMIT), Query.offset(offset), Query.orderDesc('$createdAt')],
+            search
+        )
+    };
+};
diff --git a/src/routes/console/project-[project]/authentication/_appleOAuth.svelte b/src/routes/console/project-[project]/authentication/_appleOAuth.svelte
index 181236ece3..97f64f1bae 100644
--- a/src/routes/console/project-[project]/authentication/_appleOAuth.svelte
+++ b/src/routes/console/project-[project]/authentication/_appleOAuth.svelte
@@ -1,14 +1,7 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { Modal, CopyInput, Alert } from '$lib/components';
-    import {
-        Button,
-        InputText,
-        InputTextarea,
-        InputSwitch,
-        Form,
-        FormList
-    } from '$lib/elements/forms';
+    import { Button, InputText, InputTextarea, InputSwitch, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
@@ -58,46 +51,44 @@
     $: secret = keyID && teamID && p8 ? JSON.stringify({ keyID, teamID, p8 }) : provider.secret;
 </script>
 
-<Form noMargin on:submit={update}>
-    <Modal {error} size="big" bind:show={showModal}>
-        <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
-        <FormList>
-            <p>
-                To use {provider.name} authentication in your application, first fill in this form. For
-                more info you can
-                <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer">
-                    visit the docs.
-                </a>
-            </p>
-            <InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
-            <InputText
-                id="bundleID"
-                label="Bundle ID"
-                autofocus={true}
-                placeholder="com.company.appname"
-                bind:value={id} />
-            <InputText id="keyID" label="Key ID" placeholder="SHAB13ROFN" bind:value={keyID} />
-            <InputText id="teamID" label="Team ID" placeholder="ELA2CD3AED" bind:value={teamID} />
-            <InputTextarea id="p8" label="P8 File" placeholder="" bind:value={p8} />
-            <Alert type="info">
-                To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
-            </Alert>
-            <div>
-                <p>URI</p>
-                <CopyInput
-                    value={`${
-                        sdkForConsole.client.config.endpoint
-                    }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
-            </div>
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
-            <Button
-                disabled={(secret === provider.secret &&
-                    active === provider.active &&
-                    id === provider.id) ||
-                    !(id && keyID && teamID && p8)}
-                submit>Update</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal {error} on:submit={update} size="big" bind:show={showModal}>
+    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <FormList>
+        <p>
+            To use {provider.name} authentication in your application, first fill in this form. For more
+            info you can
+            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer">
+                visit the docs.
+            </a>
+        </p>
+        <InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
+        <InputText
+            id="bundleID"
+            label="Bundle ID"
+            autofocus={true}
+            placeholder="com.company.appname"
+            bind:value={id} />
+        <InputText id="keyID" label="Key ID" placeholder="SHAB13ROFN" bind:value={keyID} />
+        <InputText id="teamID" label="Team ID" placeholder="ELA2CD3AED" bind:value={teamID} />
+        <InputTextarea id="p8" label="P8 File" placeholder="" bind:value={p8} />
+        <Alert type="info">
+            To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
+        </Alert>
+        <div>
+            <p>URI</p>
+            <CopyInput
+                value={`${
+                    sdkForConsole.client.config.endpoint
+                }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
+        </div>
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
+        <Button
+            disabled={(secret === provider.secret &&
+                active === provider.active &&
+                id === provider.id) ||
+                !(id && keyID && teamID && p8)}
+            submit>Update</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/authentication/_auth0OAuth.svelte b/src/routes/console/project-[project]/authentication/_auth0OAuth.svelte
index 8a07aed3c3..b5c85478b2 100644
--- a/src/routes/console/project-[project]/authentication/_auth0OAuth.svelte
+++ b/src/routes/console/project-[project]/authentication/_auth0OAuth.svelte
@@ -1,14 +1,7 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { Modal, CopyInput, Alert } from '$lib/components';
-    import {
-        Button,
-        InputPassword,
-        InputText,
-        InputSwitch,
-        Form,
-        FormList
-    } from '$lib/elements/forms';
+    import { Button, InputPassword, InputText, InputSwitch, FormList } from '$lib/elements/forms';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
     import { addNotification } from '$lib/stores/notifications';
@@ -59,54 +52,52 @@
             : provider.secret;
 </script>
 
-<Form noMargin on:submit={update}>
-    <Modal {error} size="big" bind:show={showModal}>
-        <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
-        <FormList>
-            <p>
-                To use {provider.name} authentication in your application, first fill in this form. For
-                more info you can
-                <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
-                    >visit the docs.</a>
-            </p>
-            <InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
-            <InputText
-                id="clientID"
-                label="Client ID"
-                autofocus={true}
-                placeholder="Enter ID"
-                bind:value={id} />
-            <InputPassword
-                id="secret"
-                label="Client Secret"
-                placeholder="Enter Client Secret"
-                minlength={0}
-                showPasswordButton
-                bind:value={clientSecret} />
-            <InputText
-                id="domain"
-                label="Auth0 Domain"
-                placeholder="Your Auth0 domain"
-                bind:value={auth0Domain} />
-            <Alert type="info">
-                To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
-            </Alert>
-            <div>
-                <p>URI</p>
-                <CopyInput
-                    value={`${
-                        sdkForConsole.client.config.endpoint
-                    }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
-            </div>
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
-            <Button
-                disabled={(secret === provider.secret &&
-                    active === provider.active &&
-                    id === provider.id) ||
-                    !(id && clientSecret && auth0Domain)}
-                submit>Update</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal {error} size="big" bind:show={showModal} on:submit={update}>
+    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <FormList>
+        <p>
+            To use {provider.name} authentication in your application, first fill in this form. For more
+            info you can
+            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+                >visit the docs.</a>
+        </p>
+        <InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
+        <InputText
+            id="clientID"
+            label="Client ID"
+            autofocus={true}
+            placeholder="Enter ID"
+            bind:value={id} />
+        <InputPassword
+            id="secret"
+            label="Client Secret"
+            placeholder="Enter Client Secret"
+            minlength={0}
+            showPasswordButton
+            bind:value={clientSecret} />
+        <InputText
+            id="domain"
+            label="Auth0 Domain"
+            placeholder="Your Auth0 domain"
+            bind:value={auth0Domain} />
+        <Alert type="info">
+            To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
+        </Alert>
+        <div>
+            <p>URI</p>
+            <CopyInput
+                value={`${
+                    sdkForConsole.client.config.endpoint
+                }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
+        </div>
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
+        <Button
+            disabled={(secret === provider.secret &&
+                active === provider.active &&
+                id === provider.id) ||
+                !(id && clientSecret && auth0Domain)}
+            submit>Update</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/authentication/_createTeam.svelte b/src/routes/console/project-[project]/authentication/_createTeam.svelte
index 88004bd2a6..d91118fe51 100644
--- a/src/routes/console/project-[project]/authentication/_createTeam.svelte
+++ b/src/routes/console/project-[project]/authentication/_createTeam.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Modal, CustomId } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { InputText, Button, Form, FormList } from '$lib/elements/forms';
+    import { InputText, Button, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -35,30 +35,29 @@
     }
 </script>
 
-<Form on:submit={create}>
-    <Modal {error} size="big" bind:show={showCreate}>
-        <svelte:fragment slot="header">Create Team</svelte:fragment>
-        <FormList>
-            <InputText
-                id="name"
-                label="Name"
-                placeholder="Enter name"
-                autofocus={true}
-                bind:value={name} />
-            {#if !showCustomId}
-                <div>
-                    <Pill button on:click={() => (showCustomId = !showCustomId)}
-                        ><span class="icon-pencil" aria-hidden="true" />
-                        <span class="text"> Team ID </span>
-                    </Pill>
-                </div>
-            {:else}
-                <CustomId bind:show={showCustomId} name="Team" bind:id />
-            {/if}
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
-            <Button submit>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal {error} size="big" bind:show={showCreate} on:submit={create}>
+    <svelte:fragment slot="header">Create Team</svelte:fragment>
+    <FormList>
+        <InputText
+            id="name"
+            label="Name"
+            placeholder="Enter name"
+            autofocus={true}
+            required
+            bind:value={name} />
+        {#if !showCustomId}
+            <div>
+                <Pill button on:click={() => (showCustomId = !showCustomId)}
+                    ><span class="icon-pencil" aria-hidden="true" />
+                    <span class="text"> Team ID </span>
+                </Pill>
+            </div>
+        {:else}
+            <CustomId bind:show={showCustomId} name="Team" bind:id />
+        {/if}
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
+        <Button submit>Create</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/authentication/_createUser.svelte b/src/routes/console/project-[project]/authentication/_createUser.svelte
index f4c6858f4b..eba9fba720 100644
--- a/src/routes/console/project-[project]/authentication/_createUser.svelte
+++ b/src/routes/console/project-[project]/authentication/_createUser.svelte
@@ -7,7 +7,6 @@
         InputEmail,
         InputText,
         InputPhone,
-        Form,
         FormList
     } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
@@ -53,40 +52,38 @@
     }
 </script>
 
-<Form on:submit={create}>
-    <Modal {error} size="big" bind:show={showCreate}>
-        <svelte:fragment slot="header">Create User</svelte:fragment>
-        <FormList>
-            <InputText
-                id="name"
-                label="Name"
-                placeholder="Enter name"
-                autofocus={true}
-                bind:value={name} />
-            <InputEmail id="email" label="Email" placeholder="Enter email" bind:value={mail} />
-            <InputPhone id="phone" label="Phone" placeholder="Enter phone" bind:value={phone} />
-            <InputPassword
-                id="password"
-                label="Password"
-                placeholder="Enter password"
-                showPasswordButton={true}
-                bind:value={pass} />
+<Modal {error} size="big" bind:show={showCreate} on:submit={create}>
+    <svelte:fragment slot="header">Create User</svelte:fragment>
+    <FormList>
+        <InputText
+            id="name"
+            label="Name"
+            placeholder="Enter name"
+            autofocus={true}
+            bind:value={name} />
+        <InputEmail id="email" label="Email" placeholder="Enter email" bind:value={mail} />
+        <InputPhone id="phone" label="Phone" placeholder="Enter phone" bind:value={phone} />
+        <InputPassword
+            id="password"
+            label="Password"
+            placeholder="Enter password"
+            showPasswordButton={true}
+            bind:value={pass} />
 
-            {#if !showDropdown}
-                <div>
-                    <Pill button on:click={() => (showDropdown = !showDropdown)}>
-                        <span class="icon-pencil" aria-hidden="true" /><span class="text">
-                            User ID
-                        </span>
-                    </Pill>
-                </div>
-            {:else}
-                <CustomId bind:show={showDropdown} name="User" bind:id />
-            {/if}
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showCreate = false)}>Cancel</Button>
-            <Button submit>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+        {#if !showDropdown}
+            <div>
+                <Pill button on:click={() => (showDropdown = !showDropdown)}>
+                    <span class="icon-pencil" aria-hidden="true" /><span class="text">
+                        User ID
+                    </span>
+                </Pill>
+            </div>
+        {:else}
+            <CustomId bind:show={showDropdown} name="User" bind:id />
+        {/if}
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showCreate = false)}>Cancel</Button>
+        <Button submit>Create</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/authentication/_mainOAuth.svelte b/src/routes/console/project-[project]/authentication/_mainOAuth.svelte
index 5c6074b326..88b5272cf9 100644
--- a/src/routes/console/project-[project]/authentication/_mainOAuth.svelte
+++ b/src/routes/console/project-[project]/authentication/_mainOAuth.svelte
@@ -1,14 +1,7 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { Modal, CopyInput, Alert } from '$lib/components';
-    import {
-        Button,
-        InputPassword,
-        InputText,
-        InputSwitch,
-        Form,
-        FormList
-    } from '$lib/elements/forms';
+    import { Button, InputPassword, InputText, InputSwitch, FormList } from '$lib/elements/forms';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
     import { addNotification } from '$lib/stores/notifications';
@@ -54,50 +47,46 @@
     };
 </script>
 
-<Form noMargin on:submit={update}>
-    <Modal {error} size="big" bind:show={showModal}>
-        <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
-        <FormList>
-            <p>
-                To use {provider.name} authentication in your application, first fill in this form. For
-                more info you can
-                <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
-                    >visit the docs.</a>
-            </p>
-            <InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
-            <InputText
-                id="appID"
-                label="App ID"
-                autofocus={true}
-                placeholder="Enter ID"
-                bind:value={id} />
-            <InputPassword
-                id="secret"
-                label="App Secret"
-                placeholder="Enter App Secret"
-                minlength={0}
-                showPasswordButton
-                bind:value={secret} />
-            <Alert type="info">
-                To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
-            </Alert>
-            <div>
-                <p>URI</p>
-                <CopyInput
-                    value={`${
-                        sdkForConsole.client.config.endpoint
-                    }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
-            </div>
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
-            <Button
-                disabled={!id ||
-                    !secret ||
-                    (id === provider.id &&
-                        secret === provider.secret &&
-                        active === provider.active)}
-                submit>Update</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal {error} size="big" bind:show={showModal} on:submit={update}>
+    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <FormList>
+        <p>
+            To use {provider.name} authentication in your application, first fill in this form. For more
+            info you can
+            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+                >visit the docs.</a>
+        </p>
+        <InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
+        <InputText
+            id="appID"
+            label="App ID"
+            autofocus={true}
+            placeholder="Enter ID"
+            bind:value={id} />
+        <InputPassword
+            id="secret"
+            label="App Secret"
+            placeholder="Enter App Secret"
+            minlength={0}
+            showPasswordButton
+            bind:value={secret} />
+        <Alert type="info">
+            To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
+        </Alert>
+        <div>
+            <p>URI</p>
+            <CopyInput
+                value={`${
+                    sdkForConsole.client.config.endpoint
+                }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
+        </div>
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
+        <Button
+            disabled={!id ||
+                !secret ||
+                (id === provider.id && secret === provider.secret && active === provider.active)}
+            submit>Update</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/authentication/_microsoftOAuth.svelte b/src/routes/console/project-[project]/authentication/_microsoftOAuth.svelte
index 6954531531..84338c5e4c 100644
--- a/src/routes/console/project-[project]/authentication/_microsoftOAuth.svelte
+++ b/src/routes/console/project-[project]/authentication/_microsoftOAuth.svelte
@@ -1,14 +1,7 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { Modal, CopyInput, Alert } from '$lib/components';
-    import {
-        Button,
-        InputPassword,
-        InputText,
-        InputSwitch,
-        Form,
-        FormList
-    } from '$lib/elements/forms';
+    import { Button, InputPassword, InputText, InputSwitch, FormList } from '$lib/elements/forms';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
     import { addNotification } from '$lib/stores/notifications';
@@ -59,55 +52,53 @@
         clientSecret && tenantID ? JSON.stringify({ clientSecret, tenantID }) : provider.secret;
 </script>
 
-<Form noMargin on:submit={update}>
-    <Modal {error} size="big" bind:show={showModal}>
-        <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
-        <FormList>
-            <p>
-                To use {provider.name} authentication in your application, first fill in this form. For
-                more info you can
-                <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer">
-                    visit the docs.
-                </a>
-            </p>
-            <InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
-            <InputText
-                id="appID"
-                label="Application (client) ID"
-                autofocus={true}
-                placeholder="Enter ID"
-                bind:value={id} />
-            <InputPassword
-                id="secret"
-                label="Client Secret"
-                placeholder="Enter Client Secret"
-                showPasswordButton
-                minlength={0}
-                bind:value={clientSecret} />
-            <InputText
-                id="tenant"
-                label="Target Tenant"
-                placeholder="'common','organizations','consumers' or your TenantID"
-                bind:value={tenantID} />
-            <Alert type="info">
-                To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
-            </Alert>
-            <div>
-                <p>URI</p>
-                <CopyInput
-                    value={`${
-                        sdkForConsole.client.config.endpoint
-                    }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
-            </div>
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
-            <Button
-                disabled={(secret === provider.secret &&
-                    active === provider.active &&
-                    id === provider.id) ||
-                    !(id && clientSecret && tenantID)}
-                submit>Update</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal {error} on:submit={update} size="big" bind:show={showModal}>
+    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <FormList>
+        <p>
+            To use {provider.name} authentication in your application, first fill in this form. For more
+            info you can
+            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer">
+                visit the docs.
+            </a>
+        </p>
+        <InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
+        <InputText
+            id="appID"
+            label="Application (client) ID"
+            autofocus={true}
+            placeholder="Enter ID"
+            bind:value={id} />
+        <InputPassword
+            id="secret"
+            label="Client Secret"
+            placeholder="Enter Client Secret"
+            showPasswordButton
+            minlength={0}
+            bind:value={clientSecret} />
+        <InputText
+            id="tenant"
+            label="Target Tenant"
+            placeholder="'common','organizations','consumers' or your TenantID"
+            bind:value={tenantID} />
+        <Alert type="info">
+            To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
+        </Alert>
+        <div>
+            <p>URI</p>
+            <CopyInput
+                value={`${
+                    sdkForConsole.client.config.endpoint
+                }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
+        </div>
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
+        <Button
+            disabled={(secret === provider.secret &&
+                active === provider.active &&
+                id === provider.id) ||
+                !(id && clientSecret && tenantID)}
+            submit>Update</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/authentication/_oktaOAuth.svelte b/src/routes/console/project-[project]/authentication/_oktaOAuth.svelte
index 01ec179b7a..6b2bac5d7d 100644
--- a/src/routes/console/project-[project]/authentication/_oktaOAuth.svelte
+++ b/src/routes/console/project-[project]/authentication/_oktaOAuth.svelte
@@ -1,14 +1,7 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { Modal, CopyInput, Alert } from '$lib/components';
-    import {
-        Button,
-        InputPassword,
-        InputText,
-        InputSwitch,
-        Form,
-        FormList
-    } from '$lib/elements/forms';
+    import { Button, InputPassword, InputText, InputSwitch, FormList } from '$lib/elements/forms';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Provider } from '$lib/stores/oauth-providers';
     import { addNotification } from '$lib/stores/notifications';
@@ -63,60 +56,58 @@
             : provider.secret;
 </script>
 
-<Form noMargin on:submit={update}>
-    <Modal {error} size="big" bind:show={showModal}>
-        <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
-        <FormList>
-            <p>
-                To use {provider.name} authentication in your application, first fill in this form. For
-                more info you can
-                <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
-                    >visit the docs.</a>
-            </p>
-            <InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
-            <InputText
-                id="appID"
-                label="Client ID"
-                autofocus={true}
-                placeholder="Enter ID"
-                bind:value={id} />
-            <InputPassword
-                id="secret"
-                label="Client Secret"
-                placeholder="Enter Client Secret"
-                minlength={0}
-                showPasswordButton
-                bind:value={clientSecret} />
-            <InputText
-                id="domain"
-                label="Okta Domain"
-                placeholder="dev-1337.okta.com"
-                bind:value={oktaDomain} />
-            <InputText
-                id="serverID"
-                label="Authorization Server ID"
-                placeholder="default"
-                bind:value={authorizationServerId} />
+<Modal {error} on:submit={update} size="big" bind:show={showModal}>
+    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <FormList>
+        <p>
+            To use {provider.name} authentication in your application, first fill in this form. For more
+            info you can
+            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+                >visit the docs.</a>
+        </p>
+        <InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
+        <InputText
+            id="appID"
+            label="Client ID"
+            autofocus={true}
+            placeholder="Enter ID"
+            bind:value={id} />
+        <InputPassword
+            id="secret"
+            label="Client Secret"
+            placeholder="Enter Client Secret"
+            minlength={0}
+            showPasswordButton
+            bind:value={clientSecret} />
+        <InputText
+            id="domain"
+            label="Okta Domain"
+            placeholder="dev-1337.okta.com"
+            bind:value={oktaDomain} />
+        <InputText
+            id="serverID"
+            label="Authorization Server ID"
+            placeholder="default"
+            bind:value={authorizationServerId} />
 
-            <Alert type="info">
-                To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
-            </Alert>
-            <div>
-                <p>URI</p>
-                <CopyInput
-                    value={`${
-                        sdkForConsole.client.config.endpoint
-                    }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
-            </div>
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
-            <Button
-                disabled={(secret === provider.secret &&
-                    active === provider.active &&
-                    id === provider.id) ||
-                    !(id && clientSecret && oktaDomain && authorizationServerId)}
-                submit>Update</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+        <Alert type="info">
+            To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
+        </Alert>
+        <div>
+            <p>URI</p>
+            <CopyInput
+                value={`${
+                    sdkForConsole.client.config.endpoint
+                }/account/session/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
+        </div>
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showModal = false)}>Cancel</Button>
+        <Button
+            disabled={(secret === provider.secret &&
+                active === provider.active &&
+                id === provider.id) ||
+                !(id && clientSecret && oktaDomain && authorizationServerId)}
+            submit>Update</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/authentication/breadcrumbs.svelte b/src/routes/console/project-[project]/authentication/breadcrumbs.svelte
index e7c4585c7b..5163709a88 100644
--- a/src/routes/console/project-[project]/authentication/breadcrumbs.svelte
+++ b/src/routes/console/project-[project]/authentication/breadcrumbs.svelte
@@ -5,15 +5,15 @@
 
     $: breadcrumbs = [
         {
-            href: `/console/organization-${$organization.$id}`,
-            title: $organization.name
+            href: `/console/organization-${$organization?.$id}`,
+            title: $organization?.name
         },
         {
-            href: `/console/project-${$project.$id}`,
-            title: $project.name
+            href: `/console/project-${$project?.$id}`,
+            title: $project?.name
         },
         {
-            href: `/console/project-${$project.$id}/authentication`,
+            href: `/console/project-${$project?.$id}/authentication`,
             title: 'Authentication'
         }
     ];
diff --git a/src/routes/console/project-[project]/authentication/header.svelte b/src/routes/console/project-[project]/authentication/header.svelte
index 553fabfb61..5b2b0d8688 100644
--- a/src/routes/console/project-[project]/authentication/header.svelte
+++ b/src/routes/console/project-[project]/authentication/header.svelte
@@ -1,18 +1,21 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { Tab, Tabs } from '$lib/components';
-    import { Cover } from '$lib/layout';
+    import { isTabSelected } from '$lib/helpers/load';
+    import { Cover, CoverTitle } from '$lib/layout';
 
     const projectId = $page.params.project;
     const path = `/console/project-${projectId}/authentication`;
     const tabs = [
         {
             href: path,
-            title: 'Users'
+            title: 'Users',
+            hasChildren: true
         },
         {
             href: `${path}/teams`,
-            title: 'Teams'
+            title: 'Teams',
+            hasChildren: true
         },
         {
             href: `${path}/usage`,
@@ -31,14 +34,11 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <h1 class="heading-level-4">
-            <span class="text">Authentication</span>
-        </h1>
+        <CoverTitle>Authentication</CoverTitle>
     </svelte:fragment>
-
     <Tabs>
         {#each tabs as tab}
-            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
                 {tab.title}
             </Tab>
         {/each}
diff --git a/src/routes/console/project-[project]/authentication/security/+page.svelte b/src/routes/console/project-[project]/authentication/security/+page.svelte
index 2c9920d8e1..daf097aef6 100644
--- a/src/routes/console/project-[project]/authentication/security/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/security/+page.svelte
@@ -7,6 +7,8 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { clickOnEnter } from '$lib/helpers/a11y';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
 
     const projectId = $project.$id;
     let isLimited = $project.authLimit === 0 ? 'unlimited' : 'limited';
@@ -33,12 +35,11 @@
 
     async function updateLimit() {
         try {
-            project.set(
-                await sdkForConsole.projects.updateAuthLimit(
-                    projectId,
-                    isLimited === 'unlimited' ? 0 : newLimit
-                )
+            await sdkForConsole.projects.updateAuthLimit(
+                projectId,
+                isLimited === 'unlimited' ? 0 : newLimit
             );
+            invalidate(Dependencies.PROJECT);
             btnActive = false;
 
             addNotification({
diff --git a/src/routes/console/project-[project]/authentication/settings/+page.svelte b/src/routes/console/project-[project]/authentication/settings/+page.svelte
index ac4a4ad9bc..00e4029cc5 100644
--- a/src/routes/console/project-[project]/authentication/settings/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/settings/+page.svelte
@@ -18,7 +18,6 @@
     let showModal = false;
 
     onMount(async () => {
-        await project.load(projectId);
         authMethods.load($project);
         OAuthProviders.load($project);
     });
diff --git a/src/routes/console/project-[project]/authentication/store.ts b/src/routes/console/project-[project]/authentication/store.ts
deleted file mode 100644
index db487c0672..0000000000
--- a/src/routes/console/project-[project]/authentication/store.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { sdkForProject } from '$lib/stores/sdk';
-import type { Models } from '@aw-labs/appwrite-console';
-import { cachedStore } from '$lib/helpers/cache';
-
-export const usersList = cachedStore<
-    Models.UserList<Record<string, unknown>>,
-    {
-        load: (queries: string[], search: string) => Promise<void>;
-    }
->('users', function ({ set }) {
-    return {
-        load: async (queries, search) => {
-            const response = await sdkForProject.users.list(queries, search);
-            set(response);
-        }
-    };
-});
-
-export const teamsList = cachedStore<
-    Models.TeamList,
-    {
-        load: (queries: string[], search: string) => Promise<void>;
-    }
->('teams', function ({ set }) {
-    return {
-        load: async (queries, search) => {
-            const response = await sdkForProject.teams.list(queries, search);
-            set(response);
-        }
-    };
-});
-
-export const usersUsage = cachedStore<
-    Models.UsageUsers,
-    {
-        load: (range: string) => Promise<void>;
-    }
->('usersUsage', function ({ set }) {
-    return {
-        load: async (range) => {
-            const response = await sdkForProject.users.getUsage(range);
-            set(response);
-        }
-    };
-});
diff --git a/src/routes/console/project-[project]/authentication/teams/+page.svelte b/src/routes/console/project-[project]/authentication/teams/[[page]]/+page.svelte
similarity index 72%
rename from src/routes/console/project-[project]/authentication/teams/+page.svelte
rename to src/routes/console/project-[project]/authentication/teams/[[page]]/+page.svelte
index aa1f07f46d..c0954761f7 100644
--- a/src/routes/console/project-[project]/authentication/teams/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[[page]]/+page.svelte
@@ -10,36 +10,31 @@
         TableCell
     } from '$lib/elements/table';
     import { Button } from '$lib/elements/forms';
-    import { Empty, EmptySearch, Pagination, Search, AvatarInitials } from '$lib/components';
-    import Create from '../_createTeam.svelte';
+    import { Empty, EmptySearch, AvatarInitials, Pagination, SearchQuery } from '$lib/components';
+    import Create from '../../_createTeam.svelte';
     import { goto } from '$app/navigation';
     import { event } from '$lib/actions/analytics';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
-    import { teamsList } from '../store';
-    import { Query, type Models } from '@aw-labs/appwrite-console';
-    import { pageLimit } from '$lib/stores/layout';
-    import { createPersistentPagination } from '$lib/stores/pagination';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import type { PageData } from './$types';
+    import { PAGE_LIMIT } from '$lib/constants';
+
+    export let data: PageData;
 
-    let search = '';
     let showCreate = false;
-    const offset = createPersistentPagination($pageLimit);
 
     const project = $page.params.project;
     const teamCreated = async (event: CustomEvent<Models.Team>) => {
-        await goto(`${base}/console/project-${project}/authentication/teams/${event.detail.$id}`);
+        await goto(
+            `${base}/console/project-${project}/authentication/teams/team-${event.detail.$id}`
+        );
     };
-
-    $: if (search) $offset = 0;
-    $: teamsList.load(
-        [Query.limit($pageLimit), Query.offset($offset), Query.orderDesc('$createdAt')],
-        search
-    );
 </script>
 
 <Container>
-    <Search bind:search placeholder="Search by name">
+    <SearchQuery search={data.search} placeholder="Search by name">
         <span
             use:event={{
                 name: 'console_users',
@@ -52,8 +47,8 @@
                 <span class="icon-plus" aria-hidden="true" /> <span class="text">Create team</span>
             </Button>
         </span>
-    </Search>
-    {#if $teamsList?.total}
+    </SearchQuery>
+    {#if data.teams.total}
         <Table>
             <TableHeader>
                 <TableCellHead>Name</TableCellHead>
@@ -61,9 +56,9 @@
                 <TableCellHead>Created</TableCellHead>
             </TableHeader>
             <TableBody>
-                {#each $teamsList.teams as team}
+                {#each data.teams.teams as team}
                     <TableRowLink
-                        href={`${base}/console/project-${project}/authentication/teams/${team.$id}`}>
+                        href={`${base}/console/project-${project}/authentication/teams/team-${team.$id}`}>
                         <TableCell title="ID">
                             <div class="u-flex u-gap-12">
                                 <AvatarInitials size={32} name={team.name} />
@@ -79,16 +74,24 @@
             </TableBody>
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {$teamsList.total}</p>
-            <Pagination limit={$pageLimit} bind:offset={$offset} sum={$teamsList.total} />
+            <p class="text">Total results: {data.teams.total}</p>
+            <Pagination
+                limit={PAGE_LIMIT}
+                path={`/console/project-${$page.params.project}/authentication/teams`}
+                offset={data.offset}
+                sum={data.teams.total} />
         </div>
-    {:else if search}
+    {:else if data.search}
         <EmptySearch>
             <div class="u-text-center">
-                <b>Sorry, we couldn’t find ‘{search}’</b>
+                <b>Sorry, we couldn’t find ‘{data.search}’</b>
                 <p>There are no teams that match your search.</p>
             </div>
-            <Button secondary on:click={() => (search = '')}>Clear Search</Button>
+            <Button
+                secondary
+                href={`/console/project-${$page.params.project}/authentication/teams`}>
+                Clear Search
+            </Button>
         </EmptySearch>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
diff --git a/src/routes/console/project-[project]/authentication/teams/[[page]]/+page.ts b/src/routes/console/project-[project]/authentication/teams/[[page]]/+page.ts
new file mode 100644
index 0000000000..8527fca86a
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/teams/[[page]]/+page.ts
@@ -0,0 +1,21 @@
+import { Query } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import { pageToOffset } from '$lib/helpers/load';
+import { PAGE_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent, url }) => {
+    await parent();
+    const page = Number(params.page);
+    const offset = pageToOffset(page, PAGE_LIMIT);
+    const search = url.search.slice(1) ?? undefined;
+
+    return {
+        offset,
+        search,
+        teams: sdkForProject.teams.list(
+            [Query.limit(PAGE_LIMIT), Query.offset(offset), Query.orderDesc('$createdAt')],
+            search
+        )
+    };
+};
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/+layout.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/+layout.svelte
deleted file mode 100644
index 9136720949..0000000000
--- a/src/routes/console/project-[project]/authentication/teams/[team]/+layout.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { updateLayout } from '$lib/stores/layout';
-    import { team } from './store';
-    import { afterNavigate } from '$app/navigation';
-    import { onMount } from 'svelte';
-    import Header from './header.svelte';
-    import Breadcrumbs from './breadcrumbs.svelte';
-
-    const teamId = $page.params.team;
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle() {
-        const promise = team.load(teamId);
-
-        if ($team?.$id !== teamId) {
-            await promise;
-        }
-
-        updateLayout({
-            header: Header,
-            breadcrumb: Breadcrumbs
-        });
-    }
-</script>
-
-<svelte:head>
-    <title>Team - Appwrite</title>
-</svelte:head>
-
-{#if $team}
-    <slot />
-{/if}
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/_createMembership.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/_createMembership.svelte
deleted file mode 100644
index 099d35b7c5..0000000000
--- a/src/routes/console/project-[project]/authentication/teams/[team]/_createMembership.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { Modal, Alert } from '$lib/components';
-    import { Button, InputEmail, InputText, InputTags, Form, FormList } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
-
-    export let showCreate = false;
-    export let teamId: string;
-
-    const dispatch = createEventDispatcher();
-
-    let name: string, email: string, roles: string[];
-    let error: string;
-
-    const create = async () => {
-        const url = `${$page.url.origin}/console/project-${$page.params.project}/authentication/teams/${$page.params.team}/members`;
-
-        try {
-            const user = await sdkForProject.teams.createMembership(
-                teamId,
-                email,
-                roles,
-                url,
-                name
-            );
-            addNotification({
-                type: 'success',
-                message: `${name ? name : email} created successfully`
-            });
-            email = name = '';
-            roles = [];
-            showCreate = false;
-            dispatch('created', user);
-        } catch ({ message }) {
-            error = message;
-        }
-    };
-</script>
-
-<Form on:submit={create}>
-    <Modal {error} size="big" bind:show={showCreate}>
-        <svelte:fragment slot="header">Create Membership</svelte:fragment>
-        <FormList>
-            <InputEmail
-                id="email"
-                label="Email"
-                placeholder="Enter email"
-                required={true}
-                autofocus={true}
-                bind:value={email} />
-            <InputText
-                id="name"
-                label="Name (optional)"
-                placeholder="Enter name"
-                bind:value={name} />
-            <Alert type="info">
-                Roles are used to manage access permissions. You can create any role you want.
-            </Alert>
-
-            <InputTags id="tags" label="Roles" placeholder="Add roles" bind:tags={roles} />
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showCreate = false)}>Cancel</Button>
-            <Button submit>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte
deleted file mode 100644
index 0eb463d935..0000000000
--- a/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte
+++ /dev/null
@@ -1,108 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { Empty, Pagination } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
-    import {
-        Table,
-        TableBody,
-        TableHeader,
-        TableRow,
-        TableCellHead,
-        TableCell,
-        TableCellText
-    } from '$lib/elements/table';
-    import { Container } from '$lib/layout';
-    import { toLocaleDateTime } from '$lib/helpers/date';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { pageLimit } from '$lib/stores/layout';
-    import { Query } from '@aw-labs/appwrite-console';
-    import { createPersistentPagination } from '$lib/stores/pagination';
-
-    const offset = createPersistentPagination($pageLimit);
-
-    $: request = sdkForProject.teams.listLogs($page.params.team, [
-        Query.limit($pageLimit),
-        Query.offset($offset)
-    ]);
-
-    const getBrowser = (clientCode: string) => {
-        return sdkForProject.avatars.getBrowser(clientCode, 80, 80);
-    };
-</script>
-
-<Container>
-    {#await request}
-        <div aria-busy="true" />
-    {:then response}
-        {#if response.total}
-            <Table>
-                <TableHeader>
-                    <TableCellHead>Client</TableCellHead>
-                    <TableCellHead>Event</TableCellHead>
-                    <TableCellHead>Location</TableCellHead>
-                    <TableCellHead>IP</TableCellHead>
-                    <TableCellHead>Date</TableCellHead>
-                </TableHeader>
-                <TableBody>
-                    {#each response.logs as log}
-                        <TableRow>
-                            <TableCell title="Client">
-                                {#if log.clientName}
-                                    <div class="u-flex u-cross-center u-gap-12">
-                                        <div class="avatar is-small">
-                                            <img
-                                                height="20"
-                                                width="20"
-                                                src={getBrowser(log.clientCode).toString()}
-                                                alt={log.clientName} />
-                                        </div>
-                                        <p class="text u-trim">
-                                            {log.clientName}
-                                            {log.clientVersion}
-                                            on {log.osName}
-                                            {log.osVersion}
-                                        </p>
-                                    </div>
-                                {:else}
-                                    <div class="u-flex u-cross-center u-gap-12">
-                                        <p class="text u-trim">
-                                            <span class="avatar  is-color-empty" />
-                                            Unknown
-                                        </p>
-                                    </div>
-                                {/if}
-                            </TableCell>
-                            <TableCellText title="Event">{log.event}</TableCellText>
-                            <TableCellText title="Location">
-                                {#if log.countryCode !== '--'}
-                                    {log.countryName}
-                                {:else}
-                                    Unknown
-                                {/if}
-                            </TableCellText>
-                            <TableCellText title="IP">{log.ip}</TableCellText>
-                            <TableCellText title="Date">{toLocaleDateTime(log.time)}</TableCellText>
-                        </TableRow>
-                    {/each}
-                </TableBody>
-            </Table>
-        {:else}
-            <Empty>
-                <div class="u-flex u-flex-vertical u-cross-center">
-                    <div class="common-section">
-                        <p>No logs available</p>
-                    </div>
-                    <div class="common-section">
-                        <Button external secondary href="https://appwrite.io/docs/server/teams">
-                            Documentation
-                        </Button>
-                    </div>
-                </div>
-            </Empty>
-        {/if}
-        <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {response.total}</p>
-            <Pagination limit={$pageLimit} bind:offset={$offset} sum={response.total} />
-        </div>
-    {/await}
-</Container>
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/store.ts b/src/routes/console/project-[project]/authentication/teams/[team]/store.ts
deleted file mode 100644
index 860ba0fb35..0000000000
--- a/src/routes/console/project-[project]/authentication/teams/[team]/store.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { sdkForProject } from '$lib/stores/sdk';
-import type { Models } from '@aw-labs/appwrite-console';
-import { cachedStore } from '$lib/helpers/cache';
-
-export const team = cachedStore<
-    Models.Team,
-    {
-        load: (teamId: string) => Promise<void>;
-    }
->('team', function ({ set }) {
-    return {
-        load: async (teamId: string) => {
-            const response = await sdkForProject.teams.get(teamId);
-            set(response);
-        }
-    };
-});
-export const memberships = cachedStore<
-    Models.MembershipList,
-    {
-        load: (teamId: string, queries: string[], search: string) => Promise<void>;
-    }
->('memberships', function ({ set }) {
-    return {
-        load: async (teamId, queries, search) => {
-            const response = await sdkForProject.teams.listMemberships(teamId, queries, search);
-            set(response);
-        }
-    };
-});
diff --git a/src/routes/console/project-[project]/authentication/teams/team-[team]/+layout.svelte b/src/routes/console/project-[project]/authentication/teams/team-[team]/+layout.svelte
new file mode 100644
index 0000000000..f20f1c4b61
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/teams/team-[team]/+layout.svelte
@@ -0,0 +1,5 @@
+<svelte:head>
+    <title>Team - Appwrite</title>
+</svelte:head>
+
+<slot />
diff --git a/src/routes/console/project-[project]/authentication/teams/team-[team]/+layout.ts b/src/routes/console/project-[project]/authentication/teams/team-[team]/+layout.ts
new file mode 100644
index 0000000000..f7b8997b63
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/teams/team-[team]/+layout.ts
@@ -0,0 +1,20 @@
+import Breadcrumbs from './breadcrumbs.svelte';
+import Header from './header.svelte';
+import { sdkForProject } from '$lib/stores/sdk';
+import type { LayoutLoad } from './$types';
+import { Dependencies } from '$lib/constants';
+import { error } from '@sveltejs/kit';
+
+export const load: LayoutLoad = async ({ params, parent, depends }) => {
+    await parent();
+    depends(Dependencies.TEAM);
+    try {
+        return {
+            header: Header,
+            breadcrumbs: Breadcrumbs,
+            team: await sdkForProject.teams.get(params.team)
+        };
+    } catch (e) {
+        throw error(e.code, e.message);
+    }
+};
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/+page.svelte b/src/routes/console/project-[project]/authentication/teams/team-[team]/+page.svelte
similarity index 94%
rename from src/routes/console/project-[project]/authentication/teams/[team]/+page.svelte
rename to src/routes/console/project-[project]/authentication/teams/team-[team]/+page.svelte
index 5c072a4540..1b411daea1 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/team-[team]/+page.svelte
@@ -8,7 +8,9 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { addNotification } from '$lib/stores/notifications';
     import { team } from './store';
-    import DeleteTeam from './_deleteTeam.svelte';
+    import { Dependencies } from '$lib/constants';
+    import { invalidate } from '$app/navigation';
+    import DeleteTeam from './deleteTeam.svelte';
 
     let showDelete = false;
     let teamName: string = null;
@@ -20,7 +22,7 @@
     async function updateName() {
         try {
             await sdkForProject.teams.update($page.params.team, teamName);
-            $team.name = teamName;
+            invalidate(Dependencies.TEAM);
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
diff --git a/src/routes/console/project-[project]/authentication/teams/team-[team]/activity/[[page]]/+page.svelte b/src/routes/console/project-[project]/authentication/teams/team-[team]/activity/[[page]]/+page.svelte
new file mode 100644
index 0000000000..b624f59d90
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/teams/team-[team]/activity/[[page]]/+page.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+    import { Empty, Pagination } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import {
+        Table,
+        TableBody,
+        TableHeader,
+        TableRow,
+        TableCellHead,
+        TableCell,
+        TableCellText
+    } from '$lib/elements/table';
+    import { Container } from '$lib/layout';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import type { PageData } from './$types';
+    import { PAGE_LIMIT } from '$lib/constants';
+    import { page } from '$app/stores';
+
+    export let data: PageData;
+
+    const getBrowser = (clientCode: string) => sdkForProject.avatars.getBrowser(clientCode, 80, 80);
+</script>
+
+<Container>
+    {#if data.logs.total}
+        <Table>
+            <TableHeader>
+                <TableCellHead>Client</TableCellHead>
+                <TableCellHead>Event</TableCellHead>
+                <TableCellHead>Location</TableCellHead>
+                <TableCellHead>IP</TableCellHead>
+                <TableCellHead>Date</TableCellHead>
+            </TableHeader>
+            <TableBody>
+                {#each data.logs.logs as log}
+                    <TableRow>
+                        <TableCell title="Client">
+                            {#if log.clientName}
+                                <div class="u-flex u-cross-center u-gap-12">
+                                    <div class="avatar is-small">
+                                        <img
+                                            height="20"
+                                            width="20"
+                                            src={getBrowser(log.clientCode).toString()}
+                                            alt={log.clientName} />
+                                    </div>
+                                    <p class="text u-trim">
+                                        {log.clientName}
+                                        {log.clientVersion}
+                                        on {log.osName}
+                                        {log.osVersion}
+                                    </p>
+                                </div>
+                            {:else}
+                                <div class="u-flex u-cross-center u-gap-12">
+                                    <p class="text u-trim">
+                                        <span class="avatar  is-color-empty" />
+                                        Unknown
+                                    </p>
+                                </div>
+                            {/if}
+                        </TableCell>
+                        <TableCellText title="Event">{log.event}</TableCellText>
+                        <TableCellText title="Location">
+                            {#if log.countryCode !== '--'}
+                                {log.countryName}
+                            {:else}
+                                Unknown
+                            {/if}
+                        </TableCellText>
+                        <TableCellText title="IP">{log.ip}</TableCellText>
+                        <TableCellText title="Date">{toLocaleDateTime(log.time)}</TableCellText>
+                    </TableRow>
+                {/each}
+            </TableBody>
+        </Table>
+    {:else}
+        <Empty>
+            <div class="u-flex u-flex-vertical u-cross-center">
+                <div class="common-section">
+                    <p>No logs available</p>
+                </div>
+                <div class="common-section">
+                    <Button external secondary href="https://appwrite.io/docs/server/teams">
+                        Documentation
+                    </Button>
+                </div>
+            </div>
+        </Empty>
+    {/if}
+    <div class="u-flex u-margin-block-start-32 u-main-space-between">
+        <p class="text">Total results: {data.logs.total}</p>
+        <Pagination
+            limit={PAGE_LIMIT}
+            path={`/console/project-${$page.params.project}/authentication/teams/team-${$page.params.team}/activity`}
+            offset={data.offset}
+            sum={data.logs.total} />
+    </div>
+</Container>
diff --git a/src/routes/console/project-[project]/authentication/teams/team-[team]/activity/[[page]]/+page.ts b/src/routes/console/project-[project]/authentication/teams/team-[team]/activity/[[page]]/+page.ts
new file mode 100644
index 0000000000..7a37ebc804
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/teams/team-[team]/activity/[[page]]/+page.ts
@@ -0,0 +1,19 @@
+import { Query } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import { pageToOffset } from '$lib/helpers/load';
+import { PAGE_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent }) => {
+    await parent();
+    const page = Number(params.page);
+    const offset = pageToOffset(page, PAGE_LIMIT);
+
+    return {
+        offset,
+        logs: sdkForProject.teams.listLogs(params.team, [
+            Query.limit(PAGE_LIMIT),
+            Query.offset(offset)
+        ])
+    };
+};
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/breadcrumbs.svelte b/src/routes/console/project-[project]/authentication/teams/team-[team]/breadcrumbs.svelte
similarity index 57%
rename from src/routes/console/project-[project]/authentication/teams/[team]/breadcrumbs.svelte
rename to src/routes/console/project-[project]/authentication/teams/team-[team]/breadcrumbs.svelte
index 2c2e76a278..aded4517bc 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/breadcrumbs.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/team-[team]/breadcrumbs.svelte
@@ -6,20 +6,20 @@
 
     $: breadcrumbs = [
         {
-            href: `/console/organization-${$organization.$id}`,
-            title: $organization.name
+            href: `/console/organization-${$organization?.$id}`,
+            title: $organization?.name
         },
         {
             href: `/console/project-${$project.$id}`,
-            title: $project.name
+            title: $project?.name
         },
         {
-            href: `/console/project-${$project.$id}/authentication`,
+            href: `/console/project-${$project?.$id}/authentication`,
             title: 'Authentication'
         },
         {
-            href: `/console/project-${$project.$id}/authentication/teams/${$team.$id}`,
-            title: $team.name
+            href: `/console/project-${$project?.$id}/authentication/teams-${$team?.$id}`,
+            title: $team?.name
         }
     ];
 </script>
diff --git a/src/routes/console/project-[project]/authentication/teams/team-[team]/createMembership.svelte b/src/routes/console/project-[project]/authentication/teams/team-[team]/createMembership.svelte
new file mode 100644
index 0000000000..155c411800
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/teams/team-[team]/createMembership.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Modal, Alert } from '$lib/components';
+    import { Button, InputEmail, InputText, InputTags, FormList } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { createEventDispatcher } from 'svelte';
+
+    export let showCreate = false;
+    export let teamId: string;
+
+    const dispatch = createEventDispatcher();
+
+    let name: string, email: string, roles: string[];
+    let error: string;
+
+    const create = async () => {
+        const url = `${$page.url.origin}/console/project-${$page.params.project}/authentication/teams-${$page.params.team}/members`;
+
+        try {
+            const user = await sdkForProject.teams.createMembership(
+                teamId,
+                email,
+                roles,
+                url,
+                name
+            );
+            addNotification({
+                type: 'success',
+                message: `${name ? name : email} created successfully`
+            });
+            email = name = '';
+            roles = [];
+            showCreate = false;
+            dispatch('created', user);
+        } catch ({ message }) {
+            error = message;
+        }
+    };
+</script>
+
+<Modal {error} on:submit={create} size="big" bind:show={showCreate}>
+    <svelte:fragment slot="header">Create Membership</svelte:fragment>
+    <FormList>
+        <InputEmail
+            id="email"
+            label="Email"
+            placeholder="Enter email"
+            required={true}
+            autofocus={true}
+            bind:value={email} />
+        <InputText id="name" label="Name (optional)" placeholder="Enter name" bind:value={name} />
+        <Alert type="info">
+            Roles are used to manage access permissions. You can create any role you want.
+        </Alert>
+
+        <InputTags id="tags" label="Roles" placeholder="Add roles" bind:tags={roles} />
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showCreate = false)}>Cancel</Button>
+        <Button submit>Create</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/_deleteMembership.svelte b/src/routes/console/project-[project]/authentication/teams/team-[team]/deleteMembership.svelte
similarity index 63%
rename from src/routes/console/project-[project]/authentication/teams/[team]/_deleteMembership.svelte
rename to src/routes/console/project-[project]/authentication/teams/team-[team]/deleteMembership.svelte
index ebd0aae32f..30c91e5fc8 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/_deleteMembership.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/team-[team]/deleteMembership.svelte
@@ -3,7 +3,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
@@ -23,7 +23,7 @@
             showDelete = false;
             dispatch('deleted');
             await goto(
-                `${base}/console/project-${$page.params.project}/authentication/teams/${selectedMembership.teamId}/members`
+                `${base}/console/project-${$page.params.project}/authentication/teams/team-${selectedMembership.teamId}/members`
             );
         } catch (error) {
             addNotification({
@@ -34,15 +34,13 @@
     };
 </script>
 
-<Form on:submit={deleteMembership}>
-    <Modal bind:show={showDelete} warning>
-        <svelte:fragment slot="header">Delete Member</svelte:fragment>
-        <p>
-            Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
-        </p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal bind:show={showDelete} on:submit={deleteMembership} warning>
+    <svelte:fragment slot="header">Delete Member</svelte:fragment>
+    <p>
+        Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/_deleteTeam.svelte b/src/routes/console/project-[project]/authentication/teams/team-[team]/deleteTeam.svelte
similarity index 62%
rename from src/routes/console/project-[project]/authentication/teams/[team]/_deleteTeam.svelte
rename to src/routes/console/project-[project]/authentication/teams/team-[team]/deleteTeam.svelte
index e906e405eb..5447d91626 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/_deleteTeam.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/team-[team]/deleteTeam.svelte
@@ -3,7 +3,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
@@ -25,16 +25,14 @@
     };
 </script>
 
-<Form on:submit={deleteTeam}>
-    <Modal bind:show={showDelete} warning>
-        <svelte:fragment slot="header">Delete Team</svelte:fragment>
+<Modal bind:show={showDelete} on:submit={deleteTeam} warning>
+    <svelte:fragment slot="header">Delete Team</svelte:fragment>
 
-        <p>
-            Are you sure you want to delete <b>{team.name}</b>?
-        </p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+    <p>
+        Are you sure you want to delete <b>{team.name}</b>?
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/header.svelte b/src/routes/console/project-[project]/authentication/teams/team-[team]/header.svelte
similarity index 62%
rename from src/routes/console/project-[project]/authentication/teams/[team]/header.svelte
rename to src/routes/console/project-[project]/authentication/teams/team-[team]/header.svelte
index 80a00e18b6..b908cb5f70 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/header.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/team-[team]/header.svelte
@@ -2,12 +2,13 @@
     import { page } from '$app/stores';
     import { Copy, Tab, Tabs } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { Cover } from '$lib/layout';
+    import { isTabSelected } from '$lib/helpers/load';
+    import { Cover, CoverTitle } from '$lib/layout';
     import { team } from './store';
 
     const projectId = $page.params.project;
     const teamId = $page.params.team;
-    const path = `/console/project-${projectId}/authentication/teams/${teamId}`;
+    const path = `/console/project-${projectId}/authentication/teams/team-${teamId}`;
     const tabs = [
         {
             href: path,
@@ -15,27 +16,23 @@
         },
         {
             href: `${path}/members`,
-            title: 'Members'
+            title: 'Members',
+            hasChildren: true
         },
         {
             href: `${path}/activity`,
-            title: 'Activity'
+            title: 'Activity',
+            hasChildren: true
         }
     ];
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
-        <a
-            class="back-button"
-            href={`/console/project-${projectId}/authentication`}
-            aria-label="page back">
-            <span class="icon-cheveron-left" aria-hidden="true" />
-        </a>
-        <h1 class="heading-level-4">
-            <span class="text">{$team.name}</span>
-        </h1>
-        <Copy value={$team.$id}>
+        <CoverTitle href={`/console/project-${projectId}/authentication/teams`}>
+            {$team?.name}
+        </CoverTitle>
+        <Copy value={$team?.$id}>
             <Pill button>
                 <span class="icon-duplicate" aria-hidden="true" />
                 Team ID
@@ -45,7 +42,7 @@
 
     <Tabs>
         {#each tabs as tab}
-            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
                 {tab.title}
             </Tab>
         {/each}
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte b/src/routes/console/project-[project]/authentication/teams/team-[team]/members/[[page]]/+page.svelte
similarity index 61%
rename from src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
rename to src/routes/console/project-[project]/authentication/teams/team-[team]/members/[[page]]/+page.svelte
index 7774adbf10..44a3e44306 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/team-[team]/members/[[page]]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Pagination, Empty, EmptySearch, Search, AvatarInitials } from '$lib/components';
+    import { Empty, EmptySearch, AvatarInitials, Pagination, SearchQuery } from '$lib/components';
     import {
         Table,
         TableHeader,
@@ -11,59 +11,38 @@
     } from '$lib/elements/table';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
-    import { Query, type Models } from '@aw-labs/appwrite-console';
-    import { goto } from '$app/navigation';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { memberships } from '../store';
-    import CreateMember from '../_createMembership.svelte';
-    import DeleteMembership from '../_deleteMembership.svelte';
-    import { pageLimit } from '$lib/stores/layout';
-    import { createPersistentPagination } from '$lib/stores/pagination';
+    import type { PageData } from './$types';
+    import CreateMember from '../../createMembership.svelte';
+    import DeleteMembership from '../../deleteMembership.svelte';
+    import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+
+    export let data: PageData;
 
     let showCreate = false;
     let showDelete = false;
-    let search = '';
     let selectedMembership: Models.Membership;
 
     const project = $page.params.project;
-    const offset = createPersistentPagination($pageLimit);
-
-    $: if (search) $offset = 0;
-    $: memberships.load(
-        $page.params.team,
-        [Query.limit($pageLimit), Query.offset($offset)],
-        search
-    );
 
     async function memberCreated(event: CustomEvent<Models.Membership>) {
-        memberships.load(
-            $page.params.team,
-            [Query.limit($pageLimit), Query.offset($offset)],
-            search
-        );
         await goto(
-            `${base}/console/project-${project}/authentication/teams/${event.detail.teamId}/members`
-        );
-    }
-
-    function deleted() {
-        memberships.load(
-            $page.params.team,
-            [Query.limit($pageLimit), Query.offset($offset)],
-            search
+            `${base}/console/project-${project}/authentication/teams-${event.detail.teamId}/members`
         );
     }
 </script>
 
 <Container>
-    <Search bind:search placeholder="Search by ID">
+    <SearchQuery search={data.search} placeholder="Search by ID">
         <Button on:click={() => (showCreate = true)}>
             <span class="icon-plus" aria-hidden="true" />
             <span class="text">Create membership</span>
         </Button>
-    </Search>
-    {#if $memberships?.total}
+    </SearchQuery>
+    {#if data.memberships.total}
         <Table>
             <TableHeader>
                 <TableCellHead>Name</TableCellHead>
@@ -72,9 +51,9 @@
                 <TableCellHead width={30} />
             </TableHeader>
             <TableBody>
-                {#each $memberships.memberships as membership}
+                {#each data.memberships.memberships as membership}
                     <TableRowLink
-                        href={`${base}/console/project-${project}/authentication/user/${membership.userId}`}>
+                        href={`${base}/console/project-${project}/authentication/user-${membership.userId}`}>
                         <TableCellText title="Name">
                             <div class="u-flex u-gap-12">
                                 <AvatarInitials size={32} name={membership.userName} />
@@ -82,8 +61,9 @@
                             </div>
                         </TableCellText>
                         <TableCellText title="Role">{membership.roles}</TableCellText>
-                        <TableCellText title="Joined"
-                            >{toLocaleDateTime(membership.joined)}</TableCellText>
+                        <TableCellText title="Joined">
+                            {toLocaleDateTime(membership.joined)}
+                        </TableCellText>
                         <TableCellText title="">
                             <button
                                 class="button is-only-icon is-text"
@@ -100,16 +80,23 @@
             </TableBody>
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {$memberships.total}</p>
-            <Pagination limit={$pageLimit} bind:offset={$offset} sum={$memberships.total} />
+            <p class="text">Total results: {data.memberships.total}</p>
+            <Pagination
+                limit={PAGE_LIMIT}
+                path={`/console/project-${$page.params.project}/authentication/teams/team-${$page.params.team}/members`}
+                offset={data.offset}
+                sum={data.memberships.total} />
         </div>
-    {:else if search}
+    {:else if data.search}
         <EmptySearch>
             <div class="u-text-center">
-                <b>Sorry, we couldn’t find ‘{search}’</b>
+                <b>Sorry, we couldn’t find ‘{data.search}’</b>
                 <p>There are no members that match your search.</p>
             </div>
-            <Button secondary on:click={() => (search = '')}>Clear Search</Button>
+            <Button
+                secondary
+                href={`/console/project-${$page.params.project}/authentication/teams/team-${$page.params.team}/members`}
+                >Clear Search</Button>
         </EmptySearch>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
@@ -119,4 +106,7 @@
 </Container>
 
 <CreateMember teamId={$page.params.team} bind:showCreate on:created={memberCreated} />
-<DeleteMembership {selectedMembership} bind:showDelete on:deleted={() => deleted()} />
+<DeleteMembership
+    {selectedMembership}
+    bind:showDelete
+    on:deleted={() => invalidate(Dependencies.MEMBERSHIPS)} />
diff --git a/src/routes/console/project-[project]/authentication/teams/team-[team]/members/[[page]]/+page.ts b/src/routes/console/project-[project]/authentication/teams/team-[team]/members/[[page]]/+page.ts
new file mode 100644
index 0000000000..2aa0f1ac32
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/teams/team-[team]/members/[[page]]/+page.ts
@@ -0,0 +1,24 @@
+import { Query } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import { pageToOffset } from '$lib/helpers/load';
+import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent, depends, url }) => {
+    await parent();
+    depends(Dependencies.MEMBERSHIPS);
+    const teamId = params.team;
+    const page = Number(params.page);
+    const offset = pageToOffset(page, PAGE_LIMIT);
+    const search = url.search.slice(1) ?? undefined;
+
+    return {
+        offset,
+        search,
+        memberships: sdkForProject.teams.listMemberships(
+            teamId,
+            [Query.limit(PAGE_LIMIT), Query.offset(offset), Query.orderDesc('$createdAt')],
+            search
+        )
+    };
+};
diff --git a/src/routes/console/project-[project]/authentication/teams/team-[team]/store.ts b/src/routes/console/project-[project]/authentication/teams/team-[team]/store.ts
new file mode 100644
index 0000000000..5b81e517e1
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/teams/team-[team]/store.ts
@@ -0,0 +1,5 @@
+import { derived } from 'svelte/store';
+import { page } from '$app/stores';
+import type { Models } from '@aw-labs/appwrite-console';
+
+export const team = derived(page, ($page) => $page.data.team as Models.Team);
diff --git a/src/routes/console/project-[project]/authentication/usage/+page.svelte b/src/routes/console/project-[project]/authentication/usage/+page.svelte
deleted file mode 100644
index 1a4a385215..0000000000
--- a/src/routes/console/project-[project]/authentication/usage/+page.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-    import { Usage } from '$lib/layout';
-    import { usersUsage } from '../store';
-    import type { Models } from '@aw-labs/appwrite-console';
-    import type { UsagePeriods } from '$lib/layout/usage.svelte';
-
-    let range: UsagePeriods = '30d';
-
-    $: usersUsage.load(range);
-
-    // TODO: metric type is wrong
-    $: count = $usersUsage?.usersCount as unknown as Models.Metric[];
-    $: created = $usersUsage?.usersCreate as unknown as Models.Metric[];
-    $: read = $usersUsage?.usersRead as unknown as Models.Metric[];
-    $: updated = $usersUsage?.usersUpdate as unknown as Models.Metric[];
-    $: deleted = $usersUsage?.usersDelete as unknown as Models.Metric[];
-</script>
-
-<Usage
-    title="Users"
-    bind:range
-    {count}
-    {created}
-    {read}
-    {updated}
-    {deleted}
-    countMetadata={{
-        legend: 'Users',
-        title: 'Registered users'
-    }}
-    createdMetadata={{
-        legend: 'Create',
-        title: 'Users created'
-    }}
-    readMetadata={{
-        legend: 'Read',
-        title: 'Users read'
-    }}
-    updatedMetadata={{
-        legend: 'Update',
-        title: 'Users updated'
-    }}
-    deletedMetadata={{
-        legend: 'Delete',
-        title: 'Users deleted'
-    }} />
diff --git a/src/routes/console/project-[project]/authentication/usage/[[period]]/+page.svelte b/src/routes/console/project-[project]/authentication/usage/[[period]]/+page.svelte
new file mode 100644
index 0000000000..db2b7c9f10
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/usage/[[period]]/+page.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Usage } from '$lib/layout';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
+
+    $: count = data.count;
+    $: created = data.created;
+    $: read = data.read;
+    $: updated = data.updated;
+    $: deleted = data.deleted;
+</script>
+
+<Usage
+    title="Users"
+    path={`/console/project-${$page.params.project}/authentication/usage`}
+    {count}
+    {created}
+    {read}
+    {updated}
+    {deleted}
+    countMetadata={{
+        legend: 'Users',
+        title: 'Registered users'
+    }}
+    createdMetadata={{
+        legend: 'Create',
+        title: 'Users created'
+    }}
+    readMetadata={{
+        legend: 'Read',
+        title: 'Users read'
+    }}
+    updatedMetadata={{
+        legend: 'Update',
+        title: 'Users updated'
+    }}
+    deletedMetadata={{
+        legend: 'Delete',
+        title: 'Users deleted'
+    }} />
diff --git a/src/routes/console/project-[project]/authentication/usage/[[period]]/+page.ts b/src/routes/console/project-[project]/authentication/usage/[[period]]/+page.ts
new file mode 100644
index 0000000000..fbc99f7084
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/usage/[[period]]/+page.ts
@@ -0,0 +1,16 @@
+import type { Models } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent }) => {
+    await parent();
+    const { period } = params;
+    const response = await sdkForProject.users.getUsage(period ?? '30d');
+    return {
+        count: response.usersCount as unknown as Models.Metric[],
+        created: response.usersCreate as unknown as Models.Metric[],
+        read: response.usersRead as unknown as Models.Metric[],
+        updated: response.usersUpdate as unknown as Models.Metric[],
+        deleted: response.usersDelete as unknown as Models.Metric[]
+    };
+};
diff --git a/src/routes/console/project-[project]/authentication/user-[user]/+layout.svelte b/src/routes/console/project-[project]/authentication/user-[user]/+layout.svelte
new file mode 100644
index 0000000000..af7ca922be
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/user-[user]/+layout.svelte
@@ -0,0 +1,5 @@
+<svelte:head>
+    <title>User - Appwrite</title>
+</svelte:head>
+
+<slot />
diff --git a/src/routes/console/project-[project]/authentication/user-[user]/+layout.ts b/src/routes/console/project-[project]/authentication/user-[user]/+layout.ts
new file mode 100644
index 0000000000..2cbe498c24
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/user-[user]/+layout.ts
@@ -0,0 +1,21 @@
+import type { LayoutLoad } from './$types';
+import Breadcrumbs from './breadcrumbs.svelte';
+import Header from './header.svelte';
+import { sdkForProject } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import { error } from '@sveltejs/kit';
+
+export const load: LayoutLoad = async ({ params, parent, depends }) => {
+    await parent();
+    depends(Dependencies.USER);
+
+    try {
+        return {
+            header: Header,
+            breadcrumbs: Breadcrumbs,
+            user: await sdkForProject.users.get(params.user)
+        };
+    } catch (e) {
+        throw error(e.code, e.message);
+    }
+};
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/+page.svelte b/src/routes/console/project-[project]/authentication/user-[user]/+page.svelte
similarity index 97%
rename from src/routes/console/project-[project]/authentication/user/[user]/+page.svelte
rename to src/routes/console/project-[project]/authentication/user-[user]/+page.svelte
index 58a631b76b..11a18313d8 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user-[user]/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { page } from '$app/stores';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import {
         CardGrid,
@@ -21,9 +20,11 @@
     import { Container } from '$lib/layout';
     import { sdkForProject } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
-    import DeleteUser from './_deleteUser.svelte';
+    import DeleteUser from './deleteUser.svelte';
     import { user } from './store';
     import { onMount } from 'svelte';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
 
     $: if (prefs) {
         if (JSON.stringify(prefs) !== JSON.stringify(Object.entries($user.prefs))) {
@@ -45,7 +46,6 @@
     let showVerifcationDropdown = false;
 
     onMount(async () => {
-        await user.load($page.params.user);
         prefs = Object.entries($user.prefs);
         if (!prefs?.length) {
             prefs.push(['', '']);
@@ -77,7 +77,7 @@
         showVerifcationDropdown = false;
         try {
             await sdkForProject.users.updatePhoneVerification($user.$id, !$user.phoneVerification);
-            $user.phoneVerification = !$user.phoneVerification;
+            invalidate(Dependencies.USER);
             addNotification({
                 message: `${$user.name || $user.email || $user.phone || 'The account'} has been ${
                     $user.phoneVerification ? 'verified' : 'unverified'
@@ -94,7 +94,7 @@
     async function updateStatus() {
         try {
             await sdkForProject.users.updateStatus($user.$id, !$user.status);
-            $user.status = !$user.status;
+            invalidate(Dependencies.USER);
             addNotification({
                 message: `${$user.name || $user.email || $user.phone || 'The account'} has been ${
                     $user.status ? 'unblocked' : 'blocked'
@@ -111,7 +111,7 @@
     async function updateName() {
         try {
             await sdkForProject.users.updateName($user.$id, userName);
-            $user.name = userName;
+            invalidate(Dependencies.USER);
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
@@ -126,7 +126,7 @@
     async function updateEmail() {
         try {
             await sdkForProject.users.updateEmail($user.$id, userEmail);
-            $user.email = userEmail;
+            invalidate(Dependencies.USER);
             addNotification({
                 message: 'Email has been updated',
                 type: 'success'
@@ -141,7 +141,7 @@
     async function updatePhone() {
         try {
             await sdkForProject.users.updatePhone($user.$id, userPhone);
-            $user.phone = userPhone;
+            invalidate(Dependencies.USER);
             addNotification({
                 message: 'Phone has been updated',
                 type: 'success'
@@ -174,7 +174,7 @@
             let updatedPrefs = Object.fromEntries(prefs);
 
             await sdkForProject.users.updatePrefs($user.$id, updatedPrefs);
-            $user.prefs = updatedPrefs;
+            invalidate(Dependencies.USER);
             arePrefsDisabled = true;
 
             addNotification({
diff --git a/src/routes/console/project-[project]/authentication/user-[user]/activity/[[page]]/+page.svelte b/src/routes/console/project-[project]/authentication/user-[user]/activity/[[page]]/+page.svelte
new file mode 100644
index 0000000000..cf8154ed6a
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/user-[user]/activity/[[page]]/+page.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+    import { Empty, Pagination } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import {
+        Table,
+        TableBody,
+        TableHeader,
+        TableRow,
+        TableCellHead,
+        TableCell,
+        TableCellText
+    } from '$lib/elements/table';
+    import { Container } from '$lib/layout';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import type { PageData } from './$types';
+    import { PAGE_LIMIT } from '$lib/constants';
+    import { page } from '$app/stores';
+
+    export let data: PageData;
+
+    const getBrowser = (clientCode: string) => sdkForProject.avatars.getBrowser(clientCode, 80, 80);
+</script>
+
+<Container>
+    {#if data.logs.total}
+        <Table>
+            <TableHeader>
+                <TableCellHead>Client</TableCellHead>
+                <TableCellHead>Event</TableCellHead>
+                <TableCellHead>Location</TableCellHead>
+                <TableCellHead>IP</TableCellHead>
+                <TableCellHead>Date</TableCellHead>
+            </TableHeader>
+            <TableBody>
+                {#each data.logs.logs as log}
+                    <TableRow>
+                        <TableCell title="Client">
+                            {#if log.clientName}
+                                <div class="u-flex u-cross-center u-gap-12">
+                                    <div class="avatar is-small">
+                                        <img
+                                            height="20"
+                                            width="20"
+                                            src={getBrowser(log.clientCode).toString()}
+                                            alt={log.clientName} />
+                                    </div>
+                                    <p class="text u-trim">
+                                        {log.clientName}
+                                        {log.clientVersion}
+                                        on {log.osName}
+                                        {log.osVersion}
+                                    </p>
+                                </div>
+                            {:else}
+                                <div class="u-flex u-cross-center u-gap-12">
+                                    <p class="text u-trim">
+                                        <span class="avatar  is-color-empty" />
+
+                                        Unknown
+                                    </p>
+                                </div>
+                            {/if}
+                        </TableCell>
+                        <TableCellText title="Event">{log.event}</TableCellText>
+
+                        <TableCellText title="Location">
+                            {#if log.countryCode !== '--'}
+                                {log.countryName}
+                            {:else}
+                                Unknown
+                            {/if}
+                        </TableCellText>
+                        <TableCellText title="IP">{log.ip}</TableCellText>
+                        <TableCellText title="Date">{toLocaleDateTime(log.time)}</TableCellText>
+                    </TableRow>
+                {/each}
+            </TableBody>
+        </Table>
+    {:else}
+        <Empty single>
+            <p>No logs available</p>
+            <Button
+                external
+                secondary
+                href="https://appwrite.io/docs/server/authentication?sdk=nodejs-default#usersGetLogs"
+                >Documentation</Button>
+        </Empty>
+    {/if}
+    <div class="u-flex u-margin-block-start-32 u-main-space-between">
+        <p class="text">Total results: {data.logs.total}</p>
+        <Pagination
+            limit={PAGE_LIMIT}
+            path={`/console/project-${$page.params.project}/authentication/user-${$page.params.user}/activity`}
+            offset={data.offset}
+            sum={data.logs.total} />
+    </div>
+</Container>
diff --git a/src/routes/console/project-[project]/authentication/user-[user]/activity/[[page]]/+page.ts b/src/routes/console/project-[project]/authentication/user-[user]/activity/[[page]]/+page.ts
new file mode 100644
index 0000000000..278b663d50
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/user-[user]/activity/[[page]]/+page.ts
@@ -0,0 +1,16 @@
+import { Query } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import { pageToOffset } from '$lib/helpers/load';
+import { PAGE_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent }) => {
+    await parent();
+    const page = Number(params.page);
+    const offset = pageToOffset(page, PAGE_LIMIT);
+
+    return {
+        offset,
+        logs: await sdkForProject.account.listLogs([Query.limit(PAGE_LIMIT), Query.offset(offset)])
+    };
+};
diff --git a/src/routes/console/project-[project]/authentication/user-[user]/breadcrumbs.svelte b/src/routes/console/project-[project]/authentication/user-[user]/breadcrumbs.svelte
new file mode 100644
index 0000000000..3f590af6b2
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/user-[user]/breadcrumbs.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../../store';
+    import { user } from './store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization?.$id}`,
+            title: $organization?.name
+        },
+        {
+            href: `/console/project-${$project?.$id}`,
+            title: $project?.name
+        },
+        {
+            href: `/console/project-${$project?.$id}/authentication`,
+            title: 'Authentication'
+        },
+        {
+            href: `/console/project-${$project?.$id}/authentication/user-${$user?.$id}`,
+            title: $user?.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/_deleteAllMemberships.svelte b/src/routes/console/project-[project]/authentication/user-[user]/deleteAllMemberships.svelte
similarity index 64%
rename from src/routes/console/project-[project]/authentication/user/[user]/_deleteAllMemberships.svelte
rename to src/routes/console/project-[project]/authentication/user-[user]/deleteAllMemberships.svelte
index 0a853040ba..58a5229667 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/_deleteAllMemberships.svelte
+++ b/src/routes/console/project-[project]/authentication/user-[user]/deleteAllMemberships.svelte
@@ -3,7 +3,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { user } from './store';
@@ -32,16 +32,14 @@
     //TODO: implelment delete all memberships
 </script>
 
-<Form on:submit={deleteAllMemberships}>
-    <Modal bind:show={showDeleteAll} warning>
-        <svelte:fragment slot="header">Delete All Memberships</svelte:fragment>
+<Modal bind:show={showDeleteAll} on:submit={deleteAllMemberships} warning>
+    <svelte:fragment slot="header">Delete All Memberships</svelte:fragment>
 
-        <p>
-            Are you sure you want to delete <b>{$user.name}'s</b> all memberships?
-        </p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDeleteAll = false)}>Cancel</Button>
-            <Button secondary submit disabled>To implement Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+    <p>
+        Are you sure you want to delete <b>{$user.name}'s</b> all memberships?
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDeleteAll = false)}>Cancel</Button>
+        <Button secondary submit disabled>To implement Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/_deleteAllSessions.svelte b/src/routes/console/project-[project]/authentication/user-[user]/deleteAllSessions.svelte
similarity index 54%
rename from src/routes/console/project-[project]/authentication/user/[user]/_deleteAllSessions.svelte
rename to src/routes/console/project-[project]/authentication/user-[user]/deleteAllSessions.svelte
index 13ec19badb..f80d82f50e 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/_deleteAllSessions.svelte
+++ b/src/routes/console/project-[project]/authentication/user-[user]/deleteAllSessions.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { user } from './store';
@@ -11,6 +13,7 @@
     const deleteAllSessions = async () => {
         try {
             await sdkForProject.users.deleteSessions($page.params.user);
+            invalidate(Dependencies.SESSIONS);
             showDeleteAll = false;
             addNotification({
                 type: 'success',
@@ -25,15 +28,13 @@
     };
 </script>
 
-<Form on:submit={deleteAllSessions}>
-    <Modal bind:show={showDeleteAll} warning>
-        <svelte:fragment slot="header">Delete All Sessions</svelte:fragment>
-        <p>
-            Are you sure you want to delete <b>all of {$user.name}'s sessions?</b>
-        </p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDeleteAll = false)}>Cancel</Button>
-            <Button secondary submit>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal bind:show={showDeleteAll} on:submit={deleteAllSessions} warning>
+    <svelte:fragment slot="header">Delete All Sessions</svelte:fragment>
+    <p>
+        Are you sure you want to delete <b>all of {$user.name}'s sessions?</b>
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDeleteAll = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/_deleteMembership.svelte b/src/routes/console/project-[project]/authentication/user-[user]/deleteMembership.svelte
similarity index 64%
rename from src/routes/console/project-[project]/authentication/user/[user]/_deleteMembership.svelte
rename to src/routes/console/project-[project]/authentication/user-[user]/deleteMembership.svelte
index 154f9c8693..e5d48a753f 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/_deleteMembership.svelte
+++ b/src/routes/console/project-[project]/authentication/user-[user]/deleteMembership.svelte
@@ -1,15 +1,13 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
+    import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
-    import { createEventDispatcher } from 'svelte';
-
-    const dispatch = createEventDispatcher();
 
     export let showDelete = false;
     export let selectedMembership: Models.Membership;
@@ -20,14 +18,15 @@
                 selectedMembership.teamId,
                 selectedMembership.$id
             );
+            invalidate(Dependencies.MEMBERSHIPS);
             showDelete = false;
-            dispatch('deleted');
+
             addNotification({
                 type: 'success',
                 message: `Membership has been deleted`
             });
             await goto(
-                `${base}/console/project-${$page.params.project}/authentication/user/${selectedMembership.userId}/memberships`
+                `${base}/console/project-${$page.params.project}/authentication/user-${selectedMembership.userId}/memberships`
             );
         } catch (error) {
             addNotification({
@@ -38,15 +37,15 @@
     };
 </script>
 
-<Form on:submit={deleteMembership}>
-    <Modal bind:show={showDelete} warning>
-        <svelte:fragment slot="header">Delete Member</svelte:fragment>
+<Modal bind:show={showDelete} on:submit={deleteMembership} warning>
+    <svelte:fragment slot="header">Delete Member</svelte:fragment>
+    {#if selectedMembership}
         <p>
             Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
         </p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+    {/if}
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/_deleteSession.svelte b/src/routes/console/project-[project]/authentication/user-[user]/deleteSession.svelte
similarity index 56%
rename from src/routes/console/project-[project]/authentication/user/[user]/_deleteSession.svelte
rename to src/routes/console/project-[project]/authentication/user-[user]/deleteSession.svelte
index b447e8f90c..8091070cea 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/_deleteSession.svelte
+++ b/src/routes/console/project-[project]/authentication/user-[user]/deleteSession.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
 
@@ -11,7 +13,7 @@
     const deleteSession = async () => {
         try {
             await sdkForProject.users.deleteSession($page.params.user, selectedSessionId);
-            showDelete = false;
+            invalidate(Dependencies.SESSIONS);
             addNotification({
                 type: 'success',
                 message: 'Session has been deleted'
@@ -25,14 +27,12 @@
     };
 </script>
 
-<Form on:submit={deleteSession}>
-    <Modal bind:show={showDelete} warning>
-        <svelte:fragment slot="header">Delete Sessions</svelte:fragment>
+<Modal bind:show={showDelete} on:submit={deleteSession} warning>
+    <svelte:fragment slot="header">Delete Sessions</svelte:fragment>
 
-        <p>Are you sure you want to delete this session?</p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+    <p>Are you sure you want to delete this session?</p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/_deleteUser.svelte b/src/routes/console/project-[project]/authentication/user-[user]/deleteUser.svelte
similarity index 62%
rename from src/routes/console/project-[project]/authentication/user/[user]/_deleteUser.svelte
rename to src/routes/console/project-[project]/authentication/user-[user]/deleteUser.svelte
index 45825cac00..737db21138 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/_deleteUser.svelte
+++ b/src/routes/console/project-[project]/authentication/user-[user]/deleteUser.svelte
@@ -3,11 +3,11 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { user } from './store';
-    import { project } from '../../../store';
+    import { project } from '../../store';
 
     export let showDelete = false;
 
@@ -29,13 +29,11 @@
     };
 </script>
 
-<Form on:submit={deleteUser}>
-    <Modal bind:show={showDelete} warning>
-        <svelte:fragment slot="header">Delete User</svelte:fragment>
-        <p>Are you sure you want to delete <b>{$user.name}</b> from '{$project.name}'?</p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal bind:show={showDelete} on:submit={deleteUser} warning>
+    <svelte:fragment slot="header">Delete User</svelte:fragment>
+    <p>Are you sure you want to delete <b>{$user.name}</b> from '{$project.name}'?</p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/header.svelte b/src/routes/console/project-[project]/authentication/user-[user]/header.svelte
similarity index 68%
rename from src/routes/console/project-[project]/authentication/user/[user]/header.svelte
rename to src/routes/console/project-[project]/authentication/user-[user]/header.svelte
index 901e7acc82..db724fc2cb 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/header.svelte
+++ b/src/routes/console/project-[project]/authentication/user-[user]/header.svelte
@@ -2,12 +2,13 @@
     import { page } from '$app/stores';
     import { Copy, Tab, Tabs } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { Cover } from '$lib/layout';
+    import { isTabSelected } from '$lib/helpers/load';
+    import { Cover, CoverTitle } from '$lib/layout';
     import { user } from './store';
 
     const projectId = $page.params.project;
     const userId = $page.params.user;
-    const path = `/console/project-${projectId}/authentication/user/${userId}`;
+    const path = `/console/project-${projectId}/authentication/user-${userId}`;
     const tabs = [
         {
             href: path,
@@ -23,22 +24,17 @@
         },
         {
             href: `${path}/activity`,
-            title: 'Activity'
+            title: 'Activity',
+            hasChildren: true
         }
     ];
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
-        <a
-            class="back-button"
-            href={`/console/project-${projectId}/authentication`}
-            aria-label="page back">
-            <span class="icon-cheveron-left" aria-hidden="true" />
-        </a>
-        <h1 class="heading-level-4">
-            <span class="text">{$user.name}</span>
-        </h1>
+        <CoverTitle href={`/console/project-${projectId}/authentication`}>
+            {$user.name}
+        </CoverTitle>
         <Copy value={$user.$id}>
             <Pill button>
                 <span class="icon-duplicate" aria-hidden="true" />
@@ -49,7 +45,7 @@
 
     <Tabs>
         {#each tabs as tab}
-            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
                 {tab.title}
             </Tab>
         {/each}
diff --git a/src/routes/console/project-[project]/authentication/user-[user]/memberships/[[page]]/+page.svelte b/src/routes/console/project-[project]/authentication/user-[user]/memberships/[[page]]/+page.svelte
new file mode 100644
index 0000000000..fdaee9d8fb
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/user-[user]/memberships/[[page]]/+page.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { base } from '$app/paths';
+    import { Empty, AvatarInitials } from '$lib/components';
+    import {
+        Table,
+        TableHeader,
+        TableBody,
+        TableRowLink,
+        TableCellHead,
+        TableCellText,
+        TableCell
+    } from '$lib/elements/table';
+    import { Button } from '$lib/elements/forms';
+    import { Container } from '$lib/layout';
+    import DeleteMembership from '../../deleteMembership.svelte';
+    import DeleteAllMemberships from '../../deleteAllMemberships.svelte';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
+
+    let selectedMembership: Models.Membership;
+    let showDelete = false;
+    let showDeleteAll = false;
+
+    const project = $page.params.project;
+</script>
+
+<Container>
+    {#if data.memberships.total}
+        <div class="u-flex u-main-end  common-section">
+            <Button secondary on:click={() => (showDeleteAll = true)}>
+                <span class="text">Delete All</span>
+            </Button>
+        </div>
+        <Table>
+            <TableHeader>
+                <TableCellHead>Name</TableCellHead>
+                <TableCellHead>Role</TableCellHead>
+                <TableCellHead width={30} />
+            </TableHeader>
+            <TableBody>
+                {#each data.memberships.memberships as membership}
+                    <TableRowLink
+                        href={`${base}/console/project-${project}/authentication/teams/team-${membership.teamId}`}>
+                        <TableCellText title="Name">
+                            <div class="u-flex u-gap-12">
+                                <AvatarInitials size={32} name={membership.teamName} />
+                                <span>{membership.teamName ? membership.teamName : 'n/a'}</span>
+                            </div>
+                        </TableCellText>
+                        <TableCellText title="Role">{membership.roles}</TableCellText>
+                        <TableCell>
+                            <button
+                                class="button is-only-icon is-text"
+                                aria-label="Delete item"
+                                on:click|preventDefault={() => {
+                                    selectedMembership = membership;
+                                    showDelete = true;
+                                }}>
+                                <span class="icon-trash" aria-hidden="true" />
+                            </button>
+                        </TableCell>
+                    </TableRowLink>
+                {/each}
+            </TableBody>
+        </Table>
+    {:else}
+        <Empty single>
+            <p>No memberships available</p>
+            <Button
+                external
+                secondary
+                href="https://appwrite.io/docs/server/authentication?sdk=nodejs-default#usersGetMemberships"
+                >Documentation</Button>
+        </Empty>
+    {/if}
+    <div class="u-flex u-margin-block-start-32 u-main-space-between">
+        <p class="text">Total results: {data.memberships.total}</p>
+        <!-- <Pagination limit={PAGE_LIMIT} bind:offset={$offset} sum={data.total} /> -->
+    </div>
+</Container>
+
+<DeleteMembership {selectedMembership} bind:showDelete />
+<DeleteAllMemberships bind:showDeleteAll />
diff --git a/src/routes/console/project-[project]/authentication/user-[user]/memberships/[[page]]/+page.ts b/src/routes/console/project-[project]/authentication/user-[user]/memberships/[[page]]/+page.ts
new file mode 100644
index 0000000000..6d3659337a
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/user-[user]/memberships/[[page]]/+page.ts
@@ -0,0 +1,10 @@
+import { sdkForProject } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent }) => {
+    await parent();
+
+    return {
+        memberships: await sdkForProject.users.listMemberships(params.user)
+    };
+};
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte b/src/routes/console/project-[project]/authentication/user-[user]/sessions/[[page]]/+page.svelte
similarity index 77%
rename from src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte
rename to src/routes/console/project-[project]/authentication/user-[user]/sessions/[[page]]/+page.svelte
index a960f8fc03..595e95d7b8 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user-[user]/sessions/[[page]]/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { Empty, Pagination } from '$lib/components';
+    import { Empty } from '$lib/components';
     import {
         Table,
         TableBody,
@@ -14,29 +13,21 @@
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { sdkForProject } from '$lib/stores/sdk';
-    import DeleteAllSessions from '../_deleteAllSessions.svelte';
-    import DeleteSessions from '../_deleteSession.svelte';
-    import { pageLimit } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-    import type { Models } from '@aw-labs/appwrite-console';
-    import { createPersistentPagination } from '$lib/stores/pagination';
+    import DeleteAllSessions from '../../deleteAllSessions.svelte';
+    import DeleteSessions from '../../deleteSession.svelte';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
 
     let showDelete = false;
     let showDeleteAll = false;
-    let selectedSessionId: string = null;
-    let sessionList: Models.SessionList = null;
-
-    const offset = createPersistentPagination($pageLimit);
-
-    onMount(async () => {
-        sessionList = await sdkForProject.users.listSessions($page.params.user);
-    });
+    let selectedSessionId: string;
 
     const getBrowser = (clientCode: string) => sdkForProject.avatars.getBrowser(clientCode, 40, 40);
 </script>
 
 <Container>
-    {#if sessionList?.total}
+    {#if data.sessions.total}
         <div class="u-flex u-main-end  common-section">
             <Button secondary on:click={() => (showDeleteAll = true)}>
                 <span class="text">Delete All</span>
@@ -51,7 +42,7 @@
                 <TableCellHead width={30} />
             </TableHeader>
             <TableBody>
-                {#each sessionList.sessions as session}
+                {#each data.sessions.sessions as session}
                     <TableRow>
                         <TableCell title="Client">
                             <div class="u-flex u-gap-12">
@@ -97,13 +88,14 @@
             <Button
                 external
                 secondary
-                href="https://appwrite.io/docs/server/authentication?sdk=nodejs-default#usersGetSessions"
-                >Documentation</Button>
+                href="https://appwrite.io/docs/server/authentication?sdk=nodejs-default#usersGetSessions">
+                Documentation
+            </Button>
         </Empty>
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
-        <p class="text">Total results: {sessionList?.total}</p>
-        <Pagination limit={$pageLimit} bind:offset={$offset} sum={sessionList?.total} />
+        <p class="text">Total results: {data.sessions.total}</p>
+        <!-- <Pagination limit={PAGE_LIMIT} bind:offset={$offset} sum={data.sessions.total} /> -->
     </div>
 </Container>
 
diff --git a/src/routes/console/project-[project]/authentication/user-[user]/sessions/[[page]]/+page.ts b/src/routes/console/project-[project]/authentication/user-[user]/sessions/[[page]]/+page.ts
new file mode 100644
index 0000000000..530b913961
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/user-[user]/sessions/[[page]]/+page.ts
@@ -0,0 +1,12 @@
+import { Dependencies } from '$lib/constants';
+import { sdkForProject } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent, depends }) => {
+    depends(Dependencies.SESSIONS);
+    await parent();
+
+    return {
+        sessions: await sdkForProject.users.listSessions(params.user)
+    };
+};
diff --git a/src/routes/console/project-[project]/authentication/user-[user]/store.ts b/src/routes/console/project-[project]/authentication/user-[user]/store.ts
new file mode 100644
index 0000000000..f1ffab21e2
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/user-[user]/store.ts
@@ -0,0 +1,8 @@
+import { derived } from 'svelte/store';
+import { page } from '$app/stores';
+import type { Models } from '@aw-labs/appwrite-console';
+
+export const user = derived(
+    page,
+    ($page) => $page.data.user as Models.User<Record<string, string>>
+);
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/+layout.svelte b/src/routes/console/project-[project]/authentication/user/[user]/+layout.svelte
deleted file mode 100644
index 2ee46f3fb6..0000000000
--- a/src/routes/console/project-[project]/authentication/user/[user]/+layout.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { page } from '$app/stores';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-    import Breadcrumbs from './breadcrumbs.svelte';
-    import Header from './header.svelte';
-    import { user } from './store';
-
-    const userId = $page.params.user;
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle() {
-        const promise = user.load(userId);
-
-        if ($user?.$id !== userId) {
-            await promise;
-        }
-
-        updateLayout({
-            header: Header,
-            breadcrumb: Breadcrumbs
-        });
-    }
-</script>
-
-<svelte:head>
-    <title>User - Appwrite</title>
-</svelte:head>
-
-{#if $user}
-    <slot />
-{/if}
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/activity/+page.svelte b/src/routes/console/project-[project]/authentication/user/[user]/activity/+page.svelte
deleted file mode 100644
index 9244eb8ac6..0000000000
--- a/src/routes/console/project-[project]/authentication/user/[user]/activity/+page.svelte
+++ /dev/null
@@ -1,104 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { Empty, Pagination } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
-    import {
-        Table,
-        TableBody,
-        TableHeader,
-        TableRow,
-        TableCellHead,
-        TableCell,
-        TableCellText
-    } from '$lib/elements/table';
-    import { Container } from '$lib/layout';
-    import { toLocaleDateTime } from '$lib/helpers/date';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { pageLimit } from '$lib/stores/layout';
-    import { Query } from '@aw-labs/appwrite-console';
-    import { createPersistentPagination } from '$lib/stores/pagination';
-
-    const offset = createPersistentPagination($pageLimit);
-
-    $: request = sdkForProject.users.listLogs($page.params.user, [
-        Query.limit($pageLimit),
-        Query.offset($offset)
-    ]);
-
-    const getBrowser = (clientCode: string) => sdkForProject.avatars.getBrowser(clientCode, 80, 80);
-</script>
-
-<Container>
-    {#await request}
-        <div aria-busy="true" />
-    {:then response}
-        {#if response.total}
-            <Table>
-                <TableHeader>
-                    <TableCellHead>Client</TableCellHead>
-                    <TableCellHead>Event</TableCellHead>
-                    <TableCellHead>Location</TableCellHead>
-                    <TableCellHead>IP</TableCellHead>
-                    <TableCellHead>Date</TableCellHead>
-                </TableHeader>
-                <TableBody>
-                    {#each response.logs as log}
-                        <TableRow>
-                            <TableCell title="Client">
-                                {#if log.clientName}
-                                    <div class="u-flex u-cross-center u-gap-12">
-                                        <div class="avatar is-small">
-                                            <img
-                                                height="20"
-                                                width="20"
-                                                src={getBrowser(log.clientCode).toString()}
-                                                alt={log.clientName} />
-                                        </div>
-                                        <p class="text u-trim">
-                                            {log.clientName}
-                                            {log.clientVersion}
-                                            on {log.osName}
-                                            {log.osVersion}
-                                        </p>
-                                    </div>
-                                {:else}
-                                    <div class="u-flex u-cross-center u-gap-12">
-                                        <p class="text u-trim">
-                                            <span class="avatar  is-color-empty" />
-
-                                            Unknown
-                                        </p>
-                                    </div>
-                                {/if}
-                            </TableCell>
-                            <TableCellText title="Event">{log.event}</TableCellText>
-
-                            <TableCellText title="Location">
-                                {#if log.countryCode !== '--'}
-                                    {log.countryName}
-                                {:else}
-                                    Unknown
-                                {/if}
-                            </TableCellText>
-                            <TableCellText title="IP">{log.ip}</TableCellText>
-                            <TableCellText title="Date">{toLocaleDateTime(log.time)}</TableCellText>
-                        </TableRow>
-                    {/each}
-                </TableBody>
-            </Table>
-        {:else}
-            <Empty single>
-                <p>No logs available</p>
-                <Button
-                    external
-                    secondary
-                    href="https://appwrite.io/docs/server/authentication?sdk=nodejs-default#usersGetLogs"
-                    >Documentation</Button>
-            </Empty>
-        {/if}
-        <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {response.total}</p>
-            <Pagination limit={$pageLimit} bind:offset={$offset} sum={response.total} />
-        </div>
-    {/await}
-</Container>
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/breadcrumbs.svelte b/src/routes/console/project-[project]/authentication/user/[user]/breadcrumbs.svelte
deleted file mode 100644
index 9cc20db488..0000000000
--- a/src/routes/console/project-[project]/authentication/user/[user]/breadcrumbs.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-    import { Breadcrumbs } from '$lib/layout';
-    import { organization } from '$lib/stores/organization';
-    import { project } from '../../../store';
-    import { user } from './store';
-
-    $: breadcrumbs = [
-        {
-            href: `/console/organization-${$organization.$id}`,
-            title: $organization.name
-        },
-        {
-            href: `/console/project-${$project.$id}`,
-            title: $project.name
-        },
-        {
-            href: `/console/project-${$project.$id}/authentication`,
-            title: 'Authentication'
-        },
-        {
-            href: `/console/project-${$project.$id}/authentication/user/${$user.$id}`,
-            title: $user.name
-        }
-    ];
-</script>
-
-<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte b/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte
deleted file mode 100644
index 20921e4879..0000000000
--- a/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte
+++ /dev/null
@@ -1,97 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { base } from '$app/paths';
-    import { Pagination, Empty, AvatarInitials } from '$lib/components';
-    import {
-        Table,
-        TableHeader,
-        TableBody,
-        TableRowLink,
-        TableCellHead,
-        TableCellText,
-        TableCell
-    } from '$lib/elements/table';
-    import { Button } from '$lib/elements/forms';
-    import { Container } from '$lib/layout';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { pageLimit } from '$lib/stores/layout';
-    import { createPersistentPagination } from '$lib/stores/pagination';
-    import DeleteMembership from '../_deleteMembership.svelte';
-    import DeleteAllMemberships from '../_deleteAllMemberships.svelte';
-    import type { Models } from '@aw-labs/appwrite-console';
-
-    let selectedMembership: Models.Membership;
-    let showDelete = false;
-    let showDeleteAll = false;
-
-    const project = $page.params.project;
-    const offset = createPersistentPagination($pageLimit);
-
-    $: request = sdkForProject.users.listMemberships($page.params.user);
-
-    function deleted() {
-        request = sdkForProject.users.listMemberships($page.params.user);
-    }
-</script>
-
-<Container>
-    {#await request}
-        <div aria-busy="true" />
-    {:then response}
-        {#if response.total}
-            <div class="u-flex u-main-end  common-section">
-                <Button secondary on:click={() => (showDeleteAll = true)}>
-                    <span class="text">Delete All</span>
-                </Button>
-            </div>
-            <Table>
-                <TableHeader>
-                    <TableCellHead>Name</TableCellHead>
-                    <TableCellHead>Role</TableCellHead>
-                    <TableCellHead width={30} />
-                </TableHeader>
-                <TableBody>
-                    {#each response.memberships as membership}
-                        <TableRowLink
-                            href={`${base}/console/project-${project}/authentication/teams/${membership.teamId}`}>
-                            <TableCellText title="Name">
-                                <div class="u-flex u-gap-12">
-                                    <AvatarInitials size={32} name={membership.teamName} />
-                                    <span>{membership.teamName ? membership.teamName : 'n/a'}</span>
-                                </div>
-                            </TableCellText>
-                            <TableCellText title="Role">{membership.roles}</TableCellText>
-                            <TableCell>
-                                <button
-                                    class="button is-only-icon is-text"
-                                    aria-label="Delete item"
-                                    on:click|preventDefault={() => {
-                                        selectedMembership = membership;
-                                        showDelete = true;
-                                    }}>
-                                    <span class="icon-trash" aria-hidden="true" />
-                                </button>
-                            </TableCell>
-                        </TableRowLink>
-                    {/each}
-                </TableBody>
-            </Table>
-        {:else}
-            <Empty single>
-                <p>No memberships available</p>
-                <Button
-                    external
-                    secondary
-                    href="https://appwrite.io/docs/server/authentication?sdk=nodejs-default#usersGetMemberships"
-                    >Documentation</Button>
-            </Empty>
-        {/if}
-        <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {response.total}</p>
-            <Pagination limit={$pageLimit} bind:offset={$offset} sum={response.total} />
-        </div>
-    {/await}
-</Container>
-
-<DeleteMembership {selectedMembership} bind:showDelete on:deleted={() => deleted()} />
-<DeleteAllMemberships bind:showDeleteAll />
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/store.ts b/src/routes/console/project-[project]/authentication/user/[user]/store.ts
deleted file mode 100644
index bd6bdc02f5..0000000000
--- a/src/routes/console/project-[project]/authentication/user/[user]/store.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { sdkForProject } from '$lib/stores/sdk';
-import type { Models } from '@aw-labs/appwrite-console';
-import { cachedStore } from '$lib/helpers/cache';
-
-export const user = cachedStore<
-    Models.User<Record<string, unknown>>,
-    {
-        load: (userId: string) => Promise<void>;
-    }
->('selectedUser', function ({ set }) {
-    return {
-        load: async (userId: string) => {
-            const response = await sdkForProject.users.get(userId);
-            set(response);
-        }
-    };
-});
diff --git a/src/routes/console/project-[project]/databases/+layout.svelte b/src/routes/console/project-[project]/databases/+layout.svelte
index a5dac35a56..766790be12 100644
--- a/src/routes/console/project-[project]/databases/+layout.svelte
+++ b/src/routes/console/project-[project]/databases/+layout.svelte
@@ -1,27 +1,5 @@
-<script>
-    import { afterNavigate } from '$app/navigation';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-    import Breadcrumbs from './breadcrumbs.svelte';
-    import Header from './header.svelte';
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    let loaded = false;
-    function handle() {
-        updateLayout({
-            header: Header,
-            breadcrumb: Breadcrumbs
-        });
-        loaded = true;
-    }
-</script>
-
 <svelte:head>
     <title>Database - Appwrite</title>
 </svelte:head>
 
-{#if loaded}
-    <slot />
-{/if}
+<slot />
diff --git a/src/routes/console/project-[project]/databases/+layout.ts b/src/routes/console/project-[project]/databases/+layout.ts
new file mode 100644
index 0000000000..12cc3f7957
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/+layout.ts
@@ -0,0 +1,12 @@
+import Breadcrumbs from './breadcrumbs.svelte';
+import Header from './header.svelte';
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = async ({ parent }) => {
+    await parent();
+
+    return {
+        header: Header,
+        breadcrumbs: Breadcrumbs
+    };
+};
diff --git a/src/routes/console/project-[project]/databases/+page.svelte b/src/routes/console/project-[project]/databases/[[page]]/+page.svelte
similarity index 64%
rename from src/routes/console/project-[project]/databases/+page.svelte
rename to src/routes/console/project-[project]/databases/[[page]]/+page.svelte
index 8bb880d00f..e2bf04e5d2 100644
--- a/src/routes/console/project-[project]/databases/+page.svelte
+++ b/src/routes/console/project-[project]/databases/[[page]]/+page.svelte
@@ -2,31 +2,24 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
-    import { Empty, Pagination, Copy, GridItem1, CardContainer, Heading } from '$lib/components';
+    import { Empty, Copy, GridItem1, CardContainer, Heading, Pagination } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { Query, type Models } from '@aw-labs/appwrite-console';
-    import Create from './_create.svelte';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
-    import { databaseList } from './store';
-    import { cardLimit } from '$lib/stores/layout';
-    import { createPersistentPagination } from '$lib/stores/pagination';
+    import Create from '../_create.svelte';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import type { PageData } from './$types';
+    import { CARD_LIMIT } from '$lib/constants';
 
-    let showCreate = false;
-    let search = '';
+    export let data: PageData;
 
+    let showCreate = false;
     const project = $page.params.project;
-    const offset = createPersistentPagination($cardLimit);
 
     async function handleCreate(event: CustomEvent<Models.Database>) {
         showCreate = false;
-        await goto(`${base}/console/project-${project}/databases/database/${event.detail.$id}`);
+        await goto(`${base}/console/project-${project}/databases/database-${event.detail.$id}`);
     }
-
-    $: databaseList.load(
-        [Query.limit($cardLimit), Query.offset($offset), Query.orderDesc('$createdAt')],
-        search
-    );
 </script>
 
 <Container>
@@ -38,15 +31,12 @@
         </Button>
     </div>
 
-    {#if $databaseList?.total}
-        <CardContainer
-            total={$databaseList.total}
-            offset={$offset}
-            on:click={() => (showCreate = true)}>
-            {#each $databaseList.databases as database}
+    {#if data.databases.total}
+        <CardContainer total={data.databases.total} on:click={() => (showCreate = true)}>
+            {#each data.databases.databases as database}
                 <GridItem1
-                    href={`${base}/console/project-${project}/databases/database/${database.$id}`}>
-                    <svelte:fragment slot="eyebrow">X Collections</svelte:fragment>
+                    href={`${base}/console/project-${project}/databases/database-${database.$id}`}>
+                    <!-- <svelte:fragment slot="eyebrow">X Collections</svelte:fragment> -->
                     <svelte:fragment slot="title">{database.name}</svelte:fragment>
 
                     <Copy value={database.$id}>
@@ -60,8 +50,12 @@
         </CardContainer>
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {$databaseList.total}</p>
-            <Pagination limit={$cardLimit} bind:offset={$offset} sum={$databaseList.total} />
+            <p class="text">Total results: {data.databases.total}</p>
+            <Pagination
+                limit={CARD_LIMIT}
+                path={`/console/project-${$page.params.project}/databases`}
+                offset={data.offset}
+                sum={data.databases.total} />
         </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
diff --git a/src/routes/console/project-[project]/databases/[[page]]/+page.ts b/src/routes/console/project-[project]/databases/[[page]]/+page.ts
new file mode 100644
index 0000000000..47cc014c6a
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/[[page]]/+page.ts
@@ -0,0 +1,20 @@
+import { Query } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import { pageToOffset } from '$lib/helpers/load';
+import { CARD_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent }) => {
+    await parent();
+    const page = Number(params.page);
+    const offset = pageToOffset(page, CARD_LIMIT);
+
+    return {
+        offset,
+        databases: await sdkForProject.databases.list([
+            Query.limit(CARD_LIMIT),
+            Query.offset(offset),
+            Query.orderDesc('$createdAt')
+        ])
+    };
+};
diff --git a/src/routes/console/project-[project]/databases/_create.svelte b/src/routes/console/project-[project]/databases/_create.svelte
index 864baecc41..eed9550f68 100644
--- a/src/routes/console/project-[project]/databases/_create.svelte
+++ b/src/routes/console/project-[project]/databases/_create.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Modal, CustomId } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { Button, InputText, Form, FormList } from '$lib/elements/forms';
+    import { Button, InputText, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -29,32 +29,30 @@
     };
 </script>
 
-<Form on:submit={create}>
-    <Modal size="big" bind:show={showCreate}>
-        <svelte:fragment slot="header">Create Database</svelte:fragment>
-        <FormList>
-            <InputText
-                id="name"
-                label="Name"
-                placeholder="Enter database name"
-                bind:value={name}
-                autofocus
-                required />
+<Modal size="big" on:submit={create} bind:show={showCreate}>
+    <svelte:fragment slot="header">Create Database</svelte:fragment>
+    <FormList>
+        <InputText
+            id="name"
+            label="Name"
+            placeholder="Enter database name"
+            bind:value={name}
+            autofocus
+            required />
 
-            {#if !showCustomId}
-                <div>
-                    <Pill button on:click={() => (showCustomId = !showCustomId)}
-                        ><span class="icon-pencil" aria-hidden="true" /><span class="text">
-                            Database ID
-                        </span></Pill>
-                </div>
-            {:else}
-                <CustomId bind:show={showCustomId} name="Database" bind:id />
-            {/if}
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
-            <Button submit>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+        {#if !showCustomId}
+            <div>
+                <Pill button on:click={() => (showCustomId = !showCustomId)}
+                    ><span class="icon-pencil" aria-hidden="true" /><span class="text">
+                        Database ID
+                    </span></Pill>
+            </div>
+        {:else}
+            <CustomId bind:show={showCustomId} name="Database" bind:id />
+        {/if}
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
+        <Button submit>Create</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/databases/breadcrumbs.svelte b/src/routes/console/project-[project]/databases/breadcrumbs.svelte
index cbd1db386a..4460be30e5 100644
--- a/src/routes/console/project-[project]/databases/breadcrumbs.svelte
+++ b/src/routes/console/project-[project]/databases/breadcrumbs.svelte
@@ -1,19 +1,20 @@
 <script lang="ts">
+    import { page } from '$app/stores';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../store';
 
     $: breadcrumbs = [
         {
-            href: `/console/organization-${$organization.$id}`,
-            title: $organization.name
+            href: `/console/organization-${$page.data.organization?.$id}`,
+            title: $organization?.name
         },
         {
-            href: `/console/project-${$project.$id}`,
-            title: $project.name
+            href: `/console/project-${$page.data.project?.$id}`,
+            title: $project?.name
         },
         {
-            href: `/console/project-${$project.$id}/databases`,
+            href: `/console/project-${$page.data.project?.$id}/databases`,
             title: 'Databases'
         }
     ];
diff --git a/src/routes/console/project-[project]/databases/database-[database]/+layout.svelte b/src/routes/console/project-[project]/databases/database-[database]/+layout.svelte
new file mode 100644
index 0000000000..766790be12
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/+layout.svelte
@@ -0,0 +1,5 @@
+<svelte:head>
+    <title>Database - Appwrite</title>
+</svelte:head>
+
+<slot />
diff --git a/src/routes/console/project-[project]/databases/database-[database]/+layout.ts b/src/routes/console/project-[project]/databases/database-[database]/+layout.ts
new file mode 100644
index 0000000000..fc344a75ea
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/+layout.ts
@@ -0,0 +1,21 @@
+import { sdkForProject } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import type { LayoutLoad } from './$types';
+import Breadcrumbs from './breadcrumbs.svelte';
+import Header from './header.svelte';
+import { error } from '@sveltejs/kit';
+
+export const load: LayoutLoad = async ({ params, parent, depends }) => {
+    await parent();
+    depends(Dependencies.DATABASE);
+
+    try {
+        return {
+            header: Header,
+            breadcrumbs: Breadcrumbs,
+            database: await sdkForProject.databases.get(params.database)
+        };
+    } catch (e) {
+        throw error(e.code, e.message);
+    }
+};
diff --git a/src/routes/console/project-[project]/databases/database/[database]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.svelte
similarity index 74%
rename from src/routes/console/project-[project]/databases/database/[database]/+page.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.svelte
index 94b5c9ecdb..41b51c87e1 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.svelte
@@ -2,16 +2,18 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
-    import { Empty, Pagination, Copy, GridItem1, CardContainer, Heading } from '$lib/components';
+    import { Empty, Copy, GridItem1, CardContainer, Heading, Pagination } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { Query, type Models } from '@aw-labs/appwrite-console';
-    import Create from './_create.svelte';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
-    import { collections } from './store';
     import { cardLimit } from '$lib/stores/layout';
     import { createPersistentPagination } from '$lib/stores/pagination';
+    import type { PageData } from './$types';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import Create from '../create.svelte';
+    import { CARD_LIMIT } from '$lib/constants';
 
+    export let data: PageData;
     let showCreate = false;
 
     const project = $page.params.project;
@@ -21,15 +23,9 @@
     async function handleCreate(event: CustomEvent<Models.Collection>) {
         showCreate = false;
         await goto(
-            `${base}/console/project-${project}/databases/database/${databaseId}/collection/${event.detail.$id}`
+            `${base}/console/project-${project}/databases/database-${databaseId}/collection/${event.detail.$id}`
         );
     }
-
-    $: collections.load(databaseId, [
-        Query.limit($cardLimit),
-        Query.offset($offset),
-        Query.orderDesc('$createdAt')
-    ]);
 </script>
 
 <Container>
@@ -42,20 +38,20 @@
         </Button>
     </div>
 
-    {#if $collections?.total}
+    {#if data.collections.total}
         <CardContainer
-            total={$collections.total}
+            total={data.collections.total}
             offset={$offset}
             on:click={() => (showCreate = true)}>
-            {#each $collections.collections as collection}
+            {#each data.collections.collections as collection}
                 <GridItem1
-                    href={`${base}/console/project-${project}/databases/database/${databaseId}/collection/${collection.$id}`}>
-                    <svelte:fragment slot="eyebrow">
+                    href={`${base}/console/project-${project}/databases/database-${databaseId}/collection-${collection.$id}`}>
+                    <!-- <svelte:fragment slot="eyebrow">
                         {#await collections.total(databaseId, collection.$id)}
                             N Documents
                         {:then n}
                             {n[collection.$id] ? n[collection.$id] : 'NO'} Documents
-                        {/await}</svelte:fragment>
+                        {/await}</svelte:fragment> -->
                     <svelte:fragment slot="title">{collection.name}</svelte:fragment>
                     <svelte:fragment slot="status">
                         {#if !collection.enabled}
@@ -73,8 +69,12 @@
         </CardContainer>
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {$collections.total}</p>
-            <Pagination limit={$cardLimit} bind:offset={$offset} sum={$collections.total} />
+            <p class="text">Total results: {data.collections.total}</p>
+            <Pagination
+                limit={CARD_LIMIT}
+                path={`/console/project-${$page.params.project}/databases/database-${$page.params.database}`}
+                offset={data.offset}
+                sum={data.collections.total} />
         </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.ts
new file mode 100644
index 0000000000..d7c69f3caf
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/[[page]]/+page.ts
@@ -0,0 +1,20 @@
+import { Query } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import { pageToOffset } from '$lib/helpers/load';
+import { CARD_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent }) => {
+    await parent();
+    const page = Number(params.page);
+    const offset = pageToOffset(page, CARD_LIMIT);
+
+    return {
+        offset,
+        collections: await sdkForProject.databases.listCollections(params.database, [
+            Query.limit(CARD_LIMIT),
+            Query.offset(offset),
+            Query.orderDesc('$createdAt')
+        ])
+    };
+};
diff --git a/src/routes/console/project-[project]/databases/database/[database]/breadcrumbs.svelte b/src/routes/console/project-[project]/databases/database-[database]/breadcrumbs.svelte
similarity index 60%
rename from src/routes/console/project-[project]/databases/database/[database]/breadcrumbs.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/breadcrumbs.svelte
index b863a9111e..0da8a67053 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/breadcrumbs.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/breadcrumbs.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+    import { page } from '$app/stores';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
-    import { project } from '../../../store';
     import { database } from './store';
 
     $: breadcrumbs = [
@@ -10,15 +10,15 @@
             title: $organization.name
         },
         {
-            href: `/console/project-${$project.$id}`,
-            title: $project.name
+            href: `/console/project-${$page.data.project.$id}`,
+            title: $page.data.project.name
         },
         {
-            href: `/console/project-${$project.$id}/databases`,
+            href: `/console/project-${$page.data.project.$id}/databases`,
             title: 'Databases'
         },
         {
-            href: `/console/project-${$project.$id}/databases/database/${$database.$id}`,
+            href: `/console/project-${$page.data.project.$id}/databases/database-${$database.$id}`,
             title: $database.name
         }
     ];
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+layout.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
new file mode 100644
index 0000000000..3a2840920c
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    import { collection } from './store';
+</script>
+
+<svelte:head>
+    <title>{$collection?.name ?? 'Collection'} - Appwrite</title>
+</svelte:head>
+
+<slot />
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+layout.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+layout.ts
new file mode 100644
index 0000000000..65447fe199
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+layout.ts
@@ -0,0 +1,24 @@
+import { sdkForProject } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import type { LayoutLoad } from './$types';
+import Breadcrumbs from './breadcrumbs.svelte';
+import Header from './header.svelte';
+import { error } from '@sveltejs/kit';
+
+export const load: LayoutLoad = async ({ params, parent, depends }) => {
+    await parent();
+    depends(Dependencies.COLLECTION);
+
+    try {
+        return {
+            header: Header,
+            breadcrumbs: Breadcrumbs,
+            collection: await sdkForProject.databases.getCollection(
+                params.database,
+                params.collection
+            )
+        };
+    } catch (e) {
+        throw error(e.code, e.message);
+    }
+};
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
similarity index 71%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
index 3afdb591ad..1c88f65d10 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { page } from '$app/stores';
     import {
         TableScroll,
         TableRowLink,
@@ -8,32 +7,24 @@
         TableCellHead,
         TableCell
     } from '$lib/elements/table';
-    import { Empty, Pagination, Copy, Heading } from '$lib/components';
+    import { Empty, Copy, Heading, Pagination } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { collection, documentList } from './store';
     import { Container } from '$lib/layout';
     import { Button } from '$lib/elements/forms';
     import { base } from '$app/paths';
     import { wizard } from '$lib/stores/wizard';
-    import Create from './createDocument.svelte';
-    import { Query } from '@aw-labs/appwrite-console';
-    import { pageLimit } from '$lib/stores/layout';
-    import { createPersistentPagination } from '$lib/stores/pagination';
+    import Create from '../createDocument.svelte';
+    import type { PageData } from './$types';
+    import { collection } from '../store';
+    import { page } from '$app/stores';
+    import { PAGE_LIMIT } from '$lib/constants';
 
-    const projectId = $page.params.project;
-    const databaseId = $page.params.database;
-    const offset = createPersistentPagination($pageLimit);
+    export let data: PageData;
 
     function openWizard() {
         wizard.start(Create);
     }
 
-    $: documentList.load(databaseId, $collection.$id, [
-        Query.limit($pageLimit),
-        Query.offset($offset),
-        Query.orderDesc('$createdAt')
-    ]);
-
     $: columns = [
         ...$collection.attributes.map((attribute) => ({
             key: attribute.key,
@@ -53,7 +44,7 @@
     </div>
 
     {#if $collection?.attributes?.length}
-        {#if $documentList?.total}
+        {#if data.documents.total}
             <TableScroll>
                 <TableHeader>
                     <TableCellHead>Document ID</TableCellHead>
@@ -62,9 +53,9 @@
                     {/each}
                 </TableHeader>
                 <TableBody>
-                    {#each $documentList.documents as document}
+                    {#each data.documents.documents as document}
                         <TableRowLink
-                            href={`${base}/console/project-${projectId}/databases/database/${databaseId}/collection/${$collection.$id}/document/${document.$id}`}>
+                            href={`${base}/console/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$collection.$id}/document-${document.$id}`}>
                             <TableCell width={230}>
                                 <Copy value={document.$id}>
                                     <Pill button>
@@ -84,8 +75,12 @@
             </TableScroll>
 
             <div class="u-flex common-section u-main-space-between">
-                <p class="text">Total results: {$documentList.total}</p>
-                <Pagination limit={$pageLimit} bind:offset={$offset} sum={$documentList.total} />
+                <p class="text">Total results: {data.documents.total}</p>
+                <Pagination
+                    limit={PAGE_LIMIT}
+                    path={`/console/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}`}
+                    offset={data.offset}
+                    sum={data.documents.total} />
             </div>
         {:else}
             <Empty isButton single on:click={openWizard}>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.ts
new file mode 100644
index 0000000000..7c19bb9dca
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.ts
@@ -0,0 +1,21 @@
+import { Query } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import { pageToOffset } from '$lib/helpers/load';
+import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent, depends }) => {
+    await parent();
+    depends(Dependencies.DOCUMENTS);
+    const page = Number(params.page);
+    const offset = pageToOffset(page, PAGE_LIMIT);
+
+    return {
+        offset,
+        documents: await sdkForProject.databases.listDocuments(params.database, params.collection, [
+            Query.limit(PAGE_LIMIT),
+            Query.offset(offset),
+            Query.orderDesc('$createdAt')
+        ])
+    };
+};
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/[[page]]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/[[page]]/+page.svelte
new file mode 100644
index 0000000000..9426dfff0a
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/[[page]]/+page.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+    import { Empty, Pagination } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import {
+        Table,
+        TableBody,
+        TableHeader,
+        TableRow,
+        TableCellHead,
+        TableCell,
+        TableCellText
+    } from '$lib/elements/table';
+    import { Container } from '$lib/layout';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import type { PageData } from './$types';
+    import { PAGE_LIMIT } from '$lib/constants';
+    import { page } from '$app/stores';
+
+    export let data: PageData;
+
+    const getBrowser = (clientCode: string) => sdkForProject.avatars.getBrowser(clientCode, 80, 80);
+</script>
+
+<Container>
+    {#if data.logs.total}
+        <Table>
+            <TableHeader>
+                <TableCellHead>Client</TableCellHead>
+                <TableCellHead>Event</TableCellHead>
+                <TableCellHead>Location</TableCellHead>
+                <TableCellHead>IP</TableCellHead>
+                <TableCellHead>Date</TableCellHead>
+            </TableHeader>
+            <TableBody>
+                {#each data.logs.logs as log}
+                    <TableRow>
+                        <TableCell title="Client">
+                            {#if log.clientName}
+                                <div class="u-flex u-cross-center u-gap-12">
+                                    <div class="avatar is-small">
+                                        <img
+                                            height="20"
+                                            width="20"
+                                            src={getBrowser(log.clientCode).toString()}
+                                            alt={log.clientName} />
+                                    </div>
+                                    <p class="text u-trim">
+                                        {log.clientName}
+                                        {log.clientVersion}
+                                        on {log.osName}
+                                        {log.osVersion}
+                                    </p>
+                                </div>
+                            {:else}
+                                <div class="u-flex u-cross-center u-gap-12">
+                                    <p class="text u-trim">
+                                        <span class="avatar  is-color-empty" />
+                                        Unknown
+                                    </p>
+                                </div>
+                            {/if}
+                        </TableCell>
+                        <TableCellText title="Event">{log.event}</TableCellText>
+                        <TableCellText title="Location">
+                            {#if log.countryCode !== '--'}
+                                {log.countryName}
+                            {:else}
+                                Unknown
+                            {/if}
+                        </TableCellText>
+                        <TableCellText title="IP">{log.ip}</TableCellText>
+                        <TableCellText title="Date">{toLocaleDateTime(log.time)}</TableCellText>
+                    </TableRow>
+                {/each}
+            </TableBody>
+        </Table>
+    {:else}
+        <Empty>
+            <div class="u-flex u-flex-vertical u-cross-center">
+                <div class="common-section">
+                    <p>No logs available</p>
+                </div>
+                <div class="common-section">
+                    <Button external secondary href="https://appwrite.io/docs/server/database">
+                        Documentation
+                    </Button>
+                </div>
+            </div>
+        </Empty>
+    {/if}
+    <div class="u-flex u-margin-block-start-32 u-main-space-between">
+        <p class="text">Total results: {data.logs.total}</p>
+        <Pagination
+            limit={PAGE_LIMIT}
+            path={`/console/project-${$page.params.project}/authentication/databases/database-${$page.params.team}/collection-${$page.params.collection}/document-${$page.params.document}/activity`}
+            offset={data.offset}
+            sum={data.logs.total} />
+    </div>
+</Container>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/[[page]]/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/[[page]]/+page.ts
new file mode 100644
index 0000000000..bfb63d8c6c
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/[[page]]/+page.ts
@@ -0,0 +1,19 @@
+import { Query } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import { pageToOffset } from '$lib/helpers/load';
+import { PAGE_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent }) => {
+    await parent();
+    const page = Number(params.page);
+    const offset = pageToOffset(page, PAGE_LIMIT);
+
+    return {
+        offset,
+        logs: sdkForProject.databases.listCollectionLogs(params.database, params.collection, [
+            Query.limit(PAGE_LIMIT),
+            Query.offset(offset)
+        ])
+    };
+};
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
similarity index 85%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index 5dd2ee7264..2714091daa 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -9,8 +9,7 @@
         TableCell
     } from '$lib/elements/table';
     import { Button } from '$lib/elements/forms';
-    import { DropList, DropListItem, Empty, Heading, Pagination } from '$lib/components';
-    import { collection } from '../store';
+    import { DropList, DropListItem, Empty, Heading } from '$lib/components';
     import type { Attributes } from '../store';
     import { Container } from '$lib/layout';
     import { Pill } from '$lib/elements';
@@ -18,8 +17,9 @@
     import CreateIndex from '../indexes/createIndex.svelte';
     import Delete from './deleteAttribute.svelte';
     import Overview from './overview.svelte';
-    import { pageLimit } from '$lib/stores/layout';
-    import { createPersistentPagination } from '$lib/stores/pagination';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
 
     let showDropdown = [];
     let selectedAttribute: Attributes = null;
@@ -27,8 +27,6 @@
     let showDelete = false;
     let showOverview = false;
     let showCreateIndex = false;
-
-    const offset = createPersistentPagination($pageLimit);
 </script>
 
 <Container>
@@ -41,7 +39,7 @@
         </Button>
     </div>
 
-    {#if $collection?.attributes.length}
+    {#if data.attributes.total}
         <Table>
             <TableHeader>
                 <TableCellHead>Key</TableCellHead>
@@ -50,7 +48,7 @@
                 <TableCellHead width={30} />
             </TableHeader>
             <TableBody>
-                {#each $collection.attributes as attribute, index}
+                {#each data.attributes.attributes as attribute, index}
                     <TableRow>
                         <TableCell title="Key">
                             <div class="u-flex u-main-space-between">
@@ -112,11 +110,7 @@
             </TableBody>
         </Table>
         <div class="u-flex common-section u-main-space-between">
-            <p class="text">Total results: {$collection?.attributes?.length}</p>
-            <Pagination
-                limit={$pageLimit}
-                bind:offset={$offset}
-                sum={$collection?.attributes?.length} />
+            <p class="text">Total results: {data.attributes.total}</p>
         </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
@@ -126,8 +120,6 @@
 </Container>
 
 <Create bind:showCreate />
-{#if selectedAttribute}
-    <Delete bind:showDelete {selectedAttribute} />
-    <Overview bind:showOverview {selectedAttribute} />
-    <CreateIndex bind:showCreateIndex externalAttribute={selectedAttribute} />
-{/if}
+<Delete bind:showDelete {selectedAttribute} />
+<Overview bind:showOverview {selectedAttribute} />
+<CreateIndex bind:showCreateIndex externalAttribute={selectedAttribute} />
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.ts
new file mode 100644
index 0000000000..565b2e3c85
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.ts
@@ -0,0 +1,19 @@
+import { sdkForProject } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import type { PageLoad } from './$types';
+import type { Attributes } from '../store';
+
+export const load: PageLoad = async ({ params, parent, depends }) => {
+    await parent();
+    depends(Dependencies.ATTRIBUTES);
+
+    return {
+        attributes: (await sdkForProject.databases.listAttributes(
+            params.database,
+            params.collection
+        )) as unknown as {
+            total: number;
+            attributes: Attributes[];
+        }
+    };
+};
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/boolean.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/boolean.svelte
similarity index 100%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/boolean.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/boolean.svelte
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/createAttribute.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/createAttribute.svelte
new file mode 100644
index 0000000000..0d36d76c8f
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/createAttribute.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { option, options } from './store';
+    import { Button, InputText, FormList, InputSelect } from '$lib/elements/forms';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+
+    export let showCreate = false;
+
+    let key: string = null;
+    let selectedOption = null;
+    let submitted = false;
+
+    const created = async () => {
+        invalidate(Dependencies.ATTRIBUTES);
+        showCreate = false;
+    };
+
+    $: if (selectedOption) {
+        $option = options.find((option) => option.name === selectedOption);
+    }
+
+    $: if (!showCreate) {
+        key = null;
+        selectedOption = null;
+        submitted = false;
+    }
+</script>
+
+<Modal size="big" bind:show={showCreate} on:submit={() => (submitted = true)}>
+    <svelte:fragment slot="header">Create Attribute</svelte:fragment>
+    <FormList>
+        <div>
+            <InputText
+                id="key"
+                label="Attribute Key"
+                placeholder="Enter Key"
+                bind:value={key}
+                autofocus
+                required />
+
+            <div class="u-flex u-gap-4 u-margin-block-start-8 u-small">
+                <span
+                    class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
+                    aria-hidden="true" />
+                <span class="text u-line-height-1-5">
+                    Allowed characters: alphanumeric, hyphen, non-leading underscore, period
+                </span>
+            </div>
+        </div>
+
+        <InputSelect
+            options={options.map((n) => ({ value: n.name, label: n.name }))}
+            id="type"
+            label="Attribute type"
+            placeholder="Select type"
+            bind:value={selectedOption}
+            required />
+        {#if selectedOption}
+            <svelte:component
+                this={$option.component}
+                {key}
+                bind:submitted
+                on:created={created}
+                on:close={() => ($option = null)} />
+        {/if}
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
+        <Button submit>Create</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/deleteAttribute.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
similarity index 58%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/deleteAttribute.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
index edfa1795e6..f3227e6f63 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/deleteAttribute.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
+    import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { collection } from '../store';
     import type { Attributes } from '../store';
     import { sdkForProject } from '$lib/stores/sdk';
+    import { Dependencies } from '$lib/constants';
 
     export let showDelete = false;
     export let selectedAttribute: Attributes;
@@ -20,10 +21,10 @@
                 $collection.$id,
                 selectedAttribute.key
             );
-            collection.removeAttribute(selectedAttribute);
+            invalidate(Dependencies.ATTRIBUTES);
             showDelete = false;
             await goto(
-                `${base}/console/project-${$page.params.project}/databases/database/${databaseId}/collection/${$page.params.collection}/attributes`
+                `${base}/console/project-${$page.params.project}/databases/database-${databaseId}/collection-${$page.params.collection}/attributes`
             );
         } catch (error) {
             addNotification({
@@ -34,17 +35,13 @@
     };
 </script>
 
-<Form on:submit={handleDelete}>
-    <Modal warning={true} bind:show={showDelete}>
-        <svelte:fragment slot="header">Delete Attribute</svelte:fragment>
-
-        <p>
-            Are you sure you want to delete <b>'{selectedAttribute.key}' from {$collection.name}</b
-            >?
-        </p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal warning={true} bind:show={showDelete} on:submit={handleDelete}>
+    <svelte:fragment slot="header">Delete Attribute</svelte:fragment>
+    <p>
+        Are you sure you want to delete <b>'{selectedAttribute?.key}' from {$collection?.name}</b>?
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/email.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/email.svelte
similarity index 100%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/email.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/email.svelte
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/enum.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/enum.svelte
similarity index 100%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/enum.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/enum.svelte
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/float.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte
similarity index 100%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/float.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/integer.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte
similarity index 100%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/integer.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/ip.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/ip.svelte
similarity index 100%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/ip.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/ip.svelte
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/overview.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/overview.svelte
new file mode 100644
index 0000000000..8d89a65c54
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/overview.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { InputText, FormList, InputChoice, InputTags } from '$lib/elements/forms';
+    import type { Attributes } from '../store';
+
+    export let showOverview = false;
+    export let selectedAttribute: Attributes;
+
+    $: attr = selectedAttribute as {
+        type?: string;
+        format?: string;
+        array?: boolean;
+        required?: boolean;
+        status?: string;
+        key?: string;
+        min?: string;
+        max?: string;
+        default: string;
+        elements?: string[];
+    };
+</script>
+
+<Modal size="big" bind:show={showOverview}>
+    <svelte:fragment slot="header">Overview</svelte:fragment>
+    <FormList>
+        {#if attr}
+            <InputText
+                id="ID"
+                label="Attribute ID"
+                placeholder="Enter ID"
+                bind:value={attr.key}
+                disabled />
+            <InputText id="type" label="Type" value={attr.type ?? ''} readonly />
+            {#if attr.format}
+                <InputText id="format" label="Format" value={attr.format} readonly />
+            {/if}
+            {#if attr.min}
+                <InputText id="min" label="Min" value={attr.min ?? ''} readonly />
+            {/if}
+            {#if attr.max}
+                <InputText id="max" label="Max" value={attr.max ?? ''} readonly />
+            {/if}
+            {#if attr.elements}
+                <InputTags id="elements" label="Elements" tags={attr.elements} readonly />
+            {/if}
+            <InputText id="default" label="Default value" value={attr.default} readonly />
+            <InputChoice id="required" label="Required" value={attr.required} disabled>
+                Indicate whether this is a required attribute</InputChoice>
+            <InputChoice id="array" label="Array" value={attr.array} disabled>
+                Indicate whether this attribute should act as an array</InputChoice>
+        {/if}
+    </FormList>
+</Modal>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/store.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts
similarity index 55%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/store.ts
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts
index cd0baad188..ca2b439e57 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/store.ts
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts
@@ -12,41 +12,55 @@ import Url from './url.svelte';
 export type Option = {
     name: string;
     component: typeof SvelteComponent;
+    type: 'string' | 'integer' | 'double' | 'boolean';
+    format?: 'email' | 'ip' | 'url' | 'enum';
 };
 
 export const options: Option[] = [
     {
         name: 'String',
-        component: String
+        component: String,
+        type: 'string'
     },
     {
         name: 'Integer',
-        component: Integer
+        component: Integer,
+        type: 'integer'
     },
     {
         name: 'Float',
-        component: Float
+        component: Float,
+        type: 'double'
     },
     {
         name: 'Boolean',
-        component: Boolean
+        component: Boolean,
+        type: 'boolean'
     },
     {
         name: 'Email',
-        component: Email
+        component: Email,
+        type: 'string',
+        format: 'email'
     },
     {
         name: 'IP',
-        component: Ip
+        component: Ip,
+        type: 'string',
+        format: 'ip'
     },
     {
         name: 'URL',
-        component: Url
+        component: Url,
+        type: 'string',
+        format: 'url'
     },
     {
         name: 'Enum',
-        component: Enum
+        component: Enum,
+        type: 'string',
+        format: 'enum'
     }
 ];
 
-export const option = writable<Option>({ name: null, component: null });
+export const option = writable<Option>();
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/string.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
similarity index 100%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/string.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/url.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte
similarity index 100%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/url.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/breadcrumbs.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/breadcrumbs.svelte
new file mode 100644
index 0000000000..07620ef932
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/breadcrumbs.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { project } from '../../../store';
+    import { database } from '../store';
+    import { collection } from './store';
+
+    $: breadcrumbs = [
+        {
+            title: '...'
+        },
+        {
+            href: `/console/project-${$project?.$id}/databases`,
+            title: 'Databases'
+        },
+        {
+            href: `/console/project-${$project?.$id}/databases/database-${$database?.$id}`,
+            title: $database?.name
+        },
+        {
+            href: `/console/project-${$project?.$id}/databases/database-${$database?.$id}/collection-${$collection?.$id}`,
+            title: $collection?.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/createDocument.svelte
similarity index 83%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/createDocument.svelte
index 0e01728130..617e3c5c14 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/createDocument.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { beforeNavigate } from '$app/navigation';
-    import { attributeList, documentList } from './store';
+    import { beforeNavigate, invalidate } from '$app/navigation';
+    import { attributes } from './store';
     import { sdkForProject } from '$lib/stores/sdk';
     import { page } from '$app/stores';
     import { onDestroy, onMount } from 'svelte';
@@ -11,20 +11,18 @@
     import Step2 from './wizard/step2.svelte';
     import { createDocument } from './wizard/store';
     import type { WizardStepsType } from '$lib/layout/wizard.svelte';
+    import { Dependencies } from '$lib/constants';
 
     const databaseId = $page.params.database;
     const collectionId = $page.params.collection;
 
     onMount(async () => {
-        await attributeList.load(databaseId, collectionId);
         initializeDocument();
     });
 
     const initializeDocument = () => {
-        $createDocument.attributes = $attributeList?.attributes?.filter(
-            (a) => a.status === 'available'
-        );
-        $attributeList.attributes.forEach((attr) => {
+        $createDocument.attributes = $attributes.filter((a) => a.status === 'available');
+        $attributes.forEach((attr) => {
             if (attr.array) {
                 $createDocument.document[attr.key] = [null];
             } else {
@@ -46,7 +44,7 @@
                 message: 'Document has been created',
                 type: 'success'
             });
-            documentList.load(databaseId, collectionId);
+            invalidate(Dependencies.DOCUMENTS);
             wizard.hide();
         } catch (error) {
             addNotification({
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/+layout.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/+layout.svelte
new file mode 100644
index 0000000000..215b93a8a8
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/+layout.svelte
@@ -0,0 +1,5 @@
+<svelte:head>
+    <title>Document - Appwrite</title>
+</svelte:head>
+
+<slot />
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/+layout.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/+layout.ts
new file mode 100644
index 0000000000..c7761a8d2a
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/+layout.ts
@@ -0,0 +1,25 @@
+import { sdkForProject } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import type { LayoutLoad } from './$types';
+import Breadcrumbs from './breadcrumbs.svelte';
+import Header from './header.svelte';
+import { error } from '@sveltejs/kit';
+
+export const load: LayoutLoad = async ({ params, parent, depends }) => {
+    await parent();
+    depends(Dependencies.DOCUMENT);
+
+    try {
+        return {
+            header: Header,
+            breadcrumbs: Breadcrumbs,
+            document: await sdkForProject.databases.getDocument(
+                params.database,
+                params.collection,
+                params.document
+            )
+        };
+    } catch (e) {
+        throw error(e.code, e.message);
+    }
+};
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/+page.svelte
new file mode 100644
index 0000000000..2b52ed462f
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/+page.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+    import { CardGrid, Box, Heading } from '$lib/components';
+    import { Container } from '$lib/layout';
+    import { Button } from '$lib/elements/forms';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { doc } from './store';
+    import { addNotification } from '$lib/stores/notifications';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import Document from './document.svelte';
+    import Delete from './delete.svelte';
+    import { difference } from '$lib/helpers/array';
+    import { Permissions } from '$lib/components/permissions';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+
+    let showDelete = false;
+    let permissions = $doc?.$permissions;
+    let arePermsDisabled = true;
+
+    async function updatePermissions() {
+        try {
+            await sdkForProject.databases.updateDocument(
+                $doc.$databaseId,
+                $doc.$collectionId,
+                $doc.$id,
+                $doc.data,
+                permissions
+            );
+            invalidate(Dependencies.DOCUMENT);
+            arePermsDisabled = true;
+            addNotification({
+                message: 'Permissions have been updated',
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
+
+    $: if (permissions) {
+        if (difference(permissions, $doc.$permissions).length) {
+            arePermsDisabled = false;
+        } else arePermsDisabled = true;
+    }
+</script>
+
+<svelte:head>
+    <title>Document - Appwrite</title>
+</svelte:head>
+
+<Container>
+    <CardGrid>
+        <Heading tag="h2" size="7">Document</Heading>
+        <svelte:fragment slot="aside">
+            <div>
+                <p>Created: {toLocaleDateTime($doc.$createdAt)}</p>
+                <p>Last Updated: {toLocaleDateTime($doc.$updatedAt)}</p>
+            </div>
+        </svelte:fragment>
+    </CardGrid>
+    <Document />
+    <CardGrid>
+        <Heading tag="h6" size="7">Update Permissions</Heading>
+        <p>
+            Assign read or write permissions at the <b> Collection Level</b> or
+            <b> Document Level</b>. If collection Level permissions are assigned, permissions
+            applied to individual documents are ignored.
+        </p>
+
+        <svelte:fragment slot="aside">
+            <Permissions bind:permissions />
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button
+                disabled={arePermsDisabled}
+                on:click={() => {
+                    updatePermissions();
+                }}>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+
+    <CardGrid>
+        <Heading tag="h6" size="7">Delete Document</Heading>
+        <p>
+            The document will be permanently deleted, including all the data within it. This action
+            is irreversible.
+        </p>
+        <svelte:fragment slot="aside">
+            <Box>
+                <svelte:fragment slot="title">
+                    <h6 class="u-bold">{$doc.$id}</h6>
+                </svelte:fragment>
+                <p>
+                    Last Updated: {toLocaleDateTime($doc.$updatedAt)}
+                </p>
+            </Box>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Container>
+
+<Delete bind:showDelete />
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/[[page]]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/[[page]]/+page.svelte
new file mode 100644
index 0000000000..9426dfff0a
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/[[page]]/+page.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+    import { Empty, Pagination } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import {
+        Table,
+        TableBody,
+        TableHeader,
+        TableRow,
+        TableCellHead,
+        TableCell,
+        TableCellText
+    } from '$lib/elements/table';
+    import { Container } from '$lib/layout';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import type { PageData } from './$types';
+    import { PAGE_LIMIT } from '$lib/constants';
+    import { page } from '$app/stores';
+
+    export let data: PageData;
+
+    const getBrowser = (clientCode: string) => sdkForProject.avatars.getBrowser(clientCode, 80, 80);
+</script>
+
+<Container>
+    {#if data.logs.total}
+        <Table>
+            <TableHeader>
+                <TableCellHead>Client</TableCellHead>
+                <TableCellHead>Event</TableCellHead>
+                <TableCellHead>Location</TableCellHead>
+                <TableCellHead>IP</TableCellHead>
+                <TableCellHead>Date</TableCellHead>
+            </TableHeader>
+            <TableBody>
+                {#each data.logs.logs as log}
+                    <TableRow>
+                        <TableCell title="Client">
+                            {#if log.clientName}
+                                <div class="u-flex u-cross-center u-gap-12">
+                                    <div class="avatar is-small">
+                                        <img
+                                            height="20"
+                                            width="20"
+                                            src={getBrowser(log.clientCode).toString()}
+                                            alt={log.clientName} />
+                                    </div>
+                                    <p class="text u-trim">
+                                        {log.clientName}
+                                        {log.clientVersion}
+                                        on {log.osName}
+                                        {log.osVersion}
+                                    </p>
+                                </div>
+                            {:else}
+                                <div class="u-flex u-cross-center u-gap-12">
+                                    <p class="text u-trim">
+                                        <span class="avatar  is-color-empty" />
+                                        Unknown
+                                    </p>
+                                </div>
+                            {/if}
+                        </TableCell>
+                        <TableCellText title="Event">{log.event}</TableCellText>
+                        <TableCellText title="Location">
+                            {#if log.countryCode !== '--'}
+                                {log.countryName}
+                            {:else}
+                                Unknown
+                            {/if}
+                        </TableCellText>
+                        <TableCellText title="IP">{log.ip}</TableCellText>
+                        <TableCellText title="Date">{toLocaleDateTime(log.time)}</TableCellText>
+                    </TableRow>
+                {/each}
+            </TableBody>
+        </Table>
+    {:else}
+        <Empty>
+            <div class="u-flex u-flex-vertical u-cross-center">
+                <div class="common-section">
+                    <p>No logs available</p>
+                </div>
+                <div class="common-section">
+                    <Button external secondary href="https://appwrite.io/docs/server/database">
+                        Documentation
+                    </Button>
+                </div>
+            </div>
+        </Empty>
+    {/if}
+    <div class="u-flex u-margin-block-start-32 u-main-space-between">
+        <p class="text">Total results: {data.logs.total}</p>
+        <Pagination
+            limit={PAGE_LIMIT}
+            path={`/console/project-${$page.params.project}/authentication/databases/database-${$page.params.team}/collection-${$page.params.collection}/document-${$page.params.document}/activity`}
+            offset={data.offset}
+            sum={data.logs.total} />
+    </div>
+</Container>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/[[page]]/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/[[page]]/+page.ts
new file mode 100644
index 0000000000..aa93b9396b
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/[[page]]/+page.ts
@@ -0,0 +1,21 @@
+import { Query } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import { pageToOffset } from '$lib/helpers/load';
+import { PAGE_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent }) => {
+    await parent();
+    const page = Number(params.page);
+    const offset = pageToOffset(page, PAGE_LIMIT);
+
+    return {
+        offset,
+        logs: sdkForProject.databases.listDocumentLogs(
+            params.database,
+            params.collection,
+            params.document,
+            [Query.limit(PAGE_LIMIT), Query.offset(offset)]
+        )
+    };
+};
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_attribute.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attribute.svelte
similarity index 100%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_attribute.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attribute.svelte
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_boolean.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/_boolean.svelte
similarity index 100%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_boolean.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/_boolean.svelte
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_enum.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/_enum.svelte
similarity index 100%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_enum.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/_enum.svelte
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_integer.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/_integer.svelte
similarity index 100%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_integer.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/_integer.svelte
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_string.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/_string.svelte
similarity index 100%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_string.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/_string.svelte
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/breadcrumbs.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/breadcrumbs.svelte
new file mode 100644
index 0000000000..788e293090
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/breadcrumbs.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { project } from '../../../../store';
+    import { database } from '../../store';
+    import { collection } from '../store';
+    import { doc } from './store';
+
+    $: breadcrumbs = [
+        {
+            title: '...'
+        },
+        {
+            href: `/console/project-${$project?.$id}/databases/database-${$database?.$id}`,
+            title: $database?.name
+        },
+        {
+            href: `/console/project-${$project?.$id}/databases/database-${$database?.$id}/collection-${$collection?.$id}`,
+            title: $collection?.name
+        },
+        {
+            href: `/console/project-${$project?.$id}/databases/database-${$database?.$id}/collection-${$collection?.$id}/document-${$doc?.$id}`,
+            title: $doc?.$id
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_delete.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte
similarity index 59%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_delete.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte
index 80d5708503..7fcc6a4c45 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_delete.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte
@@ -3,10 +3,10 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
-    import { collection } from '../../store';
+    import { collection } from '../store';
 
     export let showDelete = false;
 
@@ -21,7 +21,7 @@
             );
             showDelete = false;
             await goto(
-                `${base}/console/project-${$page.params.project}/databases/database/${$page.params.database}/collection/${$page.params.collection}`
+                `${base}/console/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}`
             );
         } catch (error) {
             addNotification({
@@ -32,16 +32,14 @@
     };
 </script>
 
-<Form on:submit={handleDelete}>
-    <Modal warning={true} bind:show={showDelete}>
-        <svelte:fragment slot="header">Delete Document</svelte:fragment>
+<Modal warning={true} on:submit={handleDelete} bind:show={showDelete}>
+    <svelte:fragment slot="header">Delete Document</svelte:fragment>
 
-        <p>
-            Are you sure you want to delete <b>the document from {$collection.name}</b>?
-        </p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+    <p>
+        Are you sure you want to delete <b>the document from {$collection.name}</b>?
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/document.svelte
similarity index 70%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/document.svelte
index 01fff58adf..3f93af8f34 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/document.svelte
@@ -1,28 +1,48 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
     import { CardGrid, Heading } from '$lib/components';
-    import { collection } from '../../store';
+    import { collection } from '../store';
     import { doc } from './store';
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
     import { sdkForProject } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
-    import Attribute from './_attribute.svelte';
+    import { writable } from 'svelte/store';
+    import Attribute from './attribute.svelte';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { Dependencies } from '$lib/constants';
+    import { invalidate } from '$app/navigation';
 
-    let currentDoc: string;
     let disableUpdate = true;
-
+    let currentDoc: string;
     const databaseId = $page.params.database;
     const collectionId = $page.params.collection;
     const documentId = $page.params.document;
+    const work = writable(
+        Object.keys($doc)
+            .filter(
+                (key) =>
+                    ![
+                        '$id',
+                        '$collection',
+                        '$collectionId',
+                        '$databaseId',
+                        '$createdAt',
+                        '$updatedAt'
+                    ].includes(key)
+            )
+            .reduce((obj, key) => {
+                obj[key] = $doc[key];
+                return obj;
+            }, {}) as Models.Document
+    );
 
     onMount(async () => {
-        await doc.load(databaseId, collectionId, documentId);
-        currentDoc = JSON.stringify($doc);
+        currentDoc = JSON.stringify($work);
     });
 
-    $: if (currentDoc && $doc) {
-        if (currentDoc !== JSON.stringify($doc)) {
+    $: if (currentDoc && $work) {
+        if (currentDoc !== JSON.stringify($work)) {
             disableUpdate = false;
         } else {
             disableUpdate = true;
@@ -35,11 +55,12 @@
                 databaseId,
                 collectionId,
                 documentId,
-                $doc,
-                $doc.$permissions
+                $work,
+                $work.$permissions
             );
 
-            currentDoc = JSON.stringify($doc);
+            currentDoc = JSON.stringify($work);
+            invalidate(Dependencies.DOCUMENT);
             disableUpdate = true;
             addNotification({
                 message: 'Document was updated!',
@@ -62,20 +83,20 @@
             {#each $collection.attributes.filter((a) => a.status === 'available') as attribute}
                 {#if attribute.array}
                     <ul class="form-list">
-                        {#each $doc[attribute.key] as _v, index}
+                        {#each $work[attribute.key] as _v, index}
                             <li class="form-item is-multiple">
                                 <div class="form-item-part u-stretch">
                                     <Attribute
                                         {attribute}
                                         id={`${attribute.key}-${index}`}
                                         label={index === 0 ? attribute.key : ''}
-                                        bind:value={$doc[attribute.key][index]} />
+                                        bind:value={$work[attribute.key][index]} />
                                 </div>
                                 <div class="form-item-part u-cross-child-end">
                                     <Button
                                         text
                                         disabled={index === 0}
-                                        on:click={() => doc.removeAttribute(attribute.key, index)}>
+                                        on:click={() => console.log('remove')}>
                                         <span class="icon-x" aria-hidden="true" />
                                     </Button>
                                 </div>
@@ -87,7 +108,7 @@
                                         {attribute}
                                         id={`${attribute.key}-0`}
                                         label={attribute.key}
-                                        bind:value={$doc[attribute.key][0]} />
+                                        bind:value={$work[attribute.key][0]} />
                                 </div>
                                 <div class="form-item-part u-cross-child-end">
                                     <Button text disabled>
@@ -100,10 +121,8 @@
 
                     <Button
                         text
-                        disabled={$doc[attribute.key][$doc[attribute.key].length - 1] === null}
-                        on:click={() => {
-                            doc.addAttribute(attribute.key);
-                        }}>
+                        disabled={$work[attribute.key][$work[attribute.key].length - 1] === null}
+                        on:click={() => console.log('remove')}>
                         <span class="icon-plus" aria-hidden="true" />
                         <span class="text"> Add item</span>
                     </Button>
@@ -113,7 +132,7 @@
                             {attribute}
                             id={attribute.key}
                             label={attribute.key}
-                            bind:value={$doc[attribute.key]} />
+                            bind:value={$work[attribute.key]} />
                     </ul>
                 {/if}
             {/each}
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/header.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/header.svelte
similarity index 67%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/header.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/header.svelte
index c40d3295d0..7cdec919cc 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/header.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/header.svelte
@@ -2,14 +2,15 @@
     import { page } from '$app/stores';
     import { Copy, Tab, Tabs } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { Cover } from '$lib/layout';
+    import { isTabSelected } from '$lib/helpers/load';
+    import { Cover, CoverTitle } from '$lib/layout';
     import { doc } from './store';
 
     const projectId = $page.params.project;
     const databaseId = $page.params.database;
     const collectionId = $page.params.collection;
     const documentId = $page.params.document;
-    const path = `/console/project-${projectId}/databases/database/${databaseId}/collection/${collectionId}/document/${documentId}`;
+    const path = `/console/project-${projectId}/databases/database-${databaseId}/collection-${collectionId}/document-${documentId}`;
     const tabs = [
         {
             href: path,
@@ -17,22 +18,18 @@
         },
         {
             href: `${path}/activity`,
-            title: 'Activity'
+            title: 'Activity',
+            hasChildren: true
         }
     ];
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
-        <a
-            class="back-button"
-            href={`/console/project-${projectId}/databases/database/${databaseId}/collection/${collectionId}`}
-            aria-label="page back">
-            <span class="icon-cheveron-left" aria-hidden="true" />
-        </a>
-        <h1 class="heading-level-4">
-            <span class="text">{$doc.$id}</span>
-        </h1>
+        <CoverTitle
+            href={`/console/project-${projectId}/databases/database-${databaseId}/collection-${collectionId}`}>
+            {$doc?.$id}
+        </CoverTitle>
         <Copy value={$doc.$id}>
             <Pill button>
                 <span class="icon-duplicate" aria-hidden="true" />
@@ -43,7 +40,7 @@
 
     <Tabs>
         {#each tabs as tab}
-            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
                 {tab.title}
             </Tab>
         {/each}
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/store.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/store.ts
new file mode 100644
index 0000000000..2f8a7ddaef
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/store.ts
@@ -0,0 +1,5 @@
+import { page } from '$app/stores';
+import { derived } from 'svelte/store';
+import type { Models } from '@aw-labs/appwrite-console';
+
+export const doc = derived(page, ($page) => $page.data.document as Models.Document);
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/header.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/header.svelte
similarity index 65%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/header.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/header.svelte
index 72e1d2c0d1..42dcec3c3d 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/header.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/header.svelte
@@ -2,17 +2,19 @@
     import { page } from '$app/stores';
     import { Copy, Tab, Tabs } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { Cover } from '$lib/layout';
+    import { isTabSelected } from '$lib/helpers/load';
+    import { Cover, CoverTitle } from '$lib/layout';
     import { collection } from './store';
 
     const projectId = $page.params.project;
     const databaseId = $page.params.database;
     const collectionId = $page.params.collection;
-    const path = `/console/project-${projectId}/databases/database/${databaseId}/collection/${collectionId}`;
+    const path = `/console/project-${projectId}/databases/database-${databaseId}/collection-${collectionId}`;
     const tabs = [
         {
             href: path,
-            title: 'Documents'
+            title: 'Documents',
+            hasChildren: true
         },
         {
             href: `${path}/attributes`,
@@ -22,6 +24,11 @@
             href: `${path}/indexes`,
             title: 'Indexes'
         },
+        {
+            href: `${path}/activity`,
+            title: 'Activity',
+            hasChildren: true
+        },
         {
             href: `${path}/usage`,
             title: 'Usage'
@@ -35,16 +42,10 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <a
-            class="back-button"
-            href={`/console/project-${projectId}/databases/database/${databaseId}`}
-            aria-label="page back">
-            <span class="icon-cheveron-left" aria-hidden="true" />
-        </a>
-        <h1 class="heading-level-4">
-            <span class="text">{$collection.name}</span>
-        </h1>
-        <Copy value={$collection.$id}>
+        <CoverTitle href={`/console/project-${projectId}/databases/database-${databaseId}`}>
+            {$collection?.name}
+        </CoverTitle>
+        <Copy value={$collection?.$id}>
             <Pill button>
                 <span class="icon-duplicate" aria-hidden="true" />
                 Collection ID
@@ -54,7 +55,7 @@
 
     <Tabs>
         {#each tabs as tab}
-            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
                 {tab.title}
             </Tab>
         {/each}
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
similarity index 67%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
index a9981c2b2b..377c17561e 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
@@ -1,14 +1,5 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import {
-        Empty,
-        EmptySearch,
-        Pagination,
-        Search,
-        DropList,
-        DropListItem
-    } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
+    import { Empty, DropList, DropListItem } from '$lib/components';
     import { Pill } from '$lib/elements';
     import {
         Table,
@@ -20,61 +11,30 @@
         TableRow
     } from '$lib/elements/table';
     import { Container } from '$lib/layout';
-    import { indexList, collection } from '../store';
-    import { onMount } from 'svelte';
+    import { collection } from '../store';
     import Delete from './deleteIndex.svelte';
     import Create from './createIndex.svelte';
     import Overview from './overviewIndex.svelte';
     import type { Models } from '@aw-labs/appwrite-console';
-    import { pageLimit } from '$lib/stores/layout';
+    import type { PageData } from './$types';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+
+    export let data: PageData;
 
     let showDropdown = [];
     let selectedIndex: Models.Index = null;
     let showCreateIndex = false;
     let showOverview = false;
     let showDelete = false;
-    let search = '';
-    let offset: number = null;
-    const collectionId = $page.params.collection;
-    const databaseId = $page.params.database;
 
     const handleDelete = async () => {
-        await indexList.load(databaseId, collectionId);
+        invalidate(Dependencies.INDEXES);
     };
-
-    // $: indexes.load(search);
-    // $: if (search) offset = 0;
-    // $: {
-    //     //TODO: refactor this into something maintainable without the use of goto
-    //     if (offset !== null) {
-    //         $page.url.searchParams.set('offset', offset.toString());
-    //         goto(`?${$page.url.searchParams.toString()}`, { replaceState: true, keepfocus: true });
-    //     }
-    // }
-
-    // onMount(() => {
-    //     const queryOffset = +$page.url.searchParams.get('offset') ?? 0;
-    //     if (offset && offset !== queryOffset) {
-    //         offset = queryOffset;
-    //     }
-    // });
-
-    onMount(async () => {
-        await indexList.load(databaseId, collectionId);
-    });
 </script>
 
 <Container>
-    <Search bind:search placeholder="Search by key or type">
-        <span>
-            <Button
-                disabled={!$collection.attributes?.length}
-                on:click={() => (showCreateIndex = true)}>
-                <span class="icon-plus" aria-hidden="true" /> <span class="text">Create index</span>
-            </Button>
-        </span>
-    </Search>
-    {#if $indexList?.total}
+    {#if data.indexes.total}
         <Table>
             <TableHeader>
                 <TableCellHead>Key</TableCellHead>
@@ -84,7 +44,7 @@
                 <TableCellHead width={30} />
             </TableHeader>
             <TableBody>
-                {#each $indexList.indexes as index, i}
+                {#each data.indexes.indexes as index, i}
                     <TableRow>
                         <TableCell title="Key">
                             <div class="u-flex u-main-space-between">
@@ -139,17 +99,8 @@
             </TableBody>
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {$indexList?.total}</p>
-            <Pagination limit={$pageLimit} bind:offset sum={$indexList?.total} />
+            <p class="text">Total results: {data.indexes.total}</p>
         </div>
-    {:else if search}
-        <EmptySearch>
-            <div class="u-text-center">
-                <b>Sorry, we couldn’t find ‘{search}’</b>
-                <p>There are no indexes that match your search.</p>
-            </div>
-            <Button secondary on:click={() => (search = '')}>Clear Search</Button>
-        </EmptySearch>
     {:else if $collection.indexes?.length}
         <Empty isButton single on:click={() => (showCreateIndex = true)}>
             <p>Create your first attribute to get started</p>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.ts
new file mode 100644
index 0000000000..48cb2571dd
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.ts
@@ -0,0 +1,12 @@
+import { sdkForProject } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent, depends }) => {
+    await parent();
+    depends(Dependencies.INDEXES);
+
+    return {
+        indexes: await sdkForProject.databases.listIndexes(params.database, params.collection)
+    };
+};
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
new file mode 100644
index 0000000000..c8f444c733
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
@@ -0,0 +1,213 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button, InputText, FormList, InputSelect } from '$lib/elements/forms';
+    import { collection } from '../store';
+    import { onMount } from 'svelte';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { page } from '$app/stores';
+    import type { Attributes } from '../store';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+
+    export let showCreateIndex = false;
+    export let externalAttribute: Attributes = null;
+
+    const databaseId = $page.params.database;
+
+    let key: string = null;
+    let types = [
+        { value: 'key', label: 'Key' },
+        { value: 'unique', label: 'Unique' },
+        { value: 'fulltext', label: 'FullText' }
+    ];
+    let newAttr = false;
+    let selectedType = '';
+    let attributeOptions = $collection.attributes.map((attribute: Attributes) => ({
+        value: attribute.key,
+        label: attribute.key
+    }));
+    $: attributeList = [];
+
+    let selectedAttribute = '';
+    let selectedOrder = '';
+
+    onMount(() => {
+        if (externalAttribute) {
+            attributeList = [{ value: externalAttribute.key, order: 'ASC' }];
+        }
+    });
+
+    $: if (showCreateIndex) {
+        attributeList = [];
+        selectedType = selectedOrder = selectedAttribute = '';
+        key = null;
+    }
+    const created = async () => {
+        if (selectedAttribute && selectedOrder) {
+            attributeList.push({ value: selectedAttribute, order: selectedOrder });
+            selectedAttribute = selectedOrder = '';
+        }
+        try {
+            await sdkForProject.databases.createIndex(
+                databaseId,
+                $collection.$id,
+                key,
+                selectedType,
+                attributeList.map((a) => a.value),
+                attributeList.map((a) => a.order)
+            );
+            invalidate(Dependencies.INDEXES);
+            addNotification({
+                message: 'Index created!',
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+
+        showCreateIndex = false;
+    };
+</script>
+
+<Modal size="big" on:submit={created} bind:show={showCreateIndex}>
+    <svelte:fragment slot="header">Create Index</svelte:fragment>
+    <FormList>
+        <InputText
+            id="key"
+            label="Index Key"
+            placeholder="Enter Key"
+            bind:value={key}
+            autofocus
+            required />
+        <InputSelect
+            options={types}
+            id="type"
+            label="Index type"
+            placeholder="Select type"
+            bind:value={selectedType}
+            required />
+
+        {#if attributeList?.length}
+            {#each attributeList as index, i}
+                <li class="form-item is-multiple">
+                    <div class="form-item-part u-stretch">
+                        <label class="label" for="attribute">Attribute</label>
+                        <div class="select">
+                            <select id="attribute" bind:value={index.value}>
+                                <optgroup label="Internal">
+                                    <option value="$id">$id</option>
+                                    <option value="$createdAt">$createdAt</option>
+                                    <option value="$updatedAt">$updatedAt</option>
+                                </optgroup>
+                                <optgroup label="Attributes">
+                                    {#each attributeOptions as option}
+                                        <option
+                                            value={option.value}
+                                            selected={option.value === selectedAttribute}>
+                                            {option.label}
+                                        </option>
+                                    {/each}
+                                </optgroup>
+                            </select>
+                            <span class="icon-cheveron-down" aria-hidden="true" />
+                        </div>
+                    </div>
+                    <div class="form-item-part u-stretch">
+                        <label class="label" for="order">Order</label>
+                        <div class="select">
+                            <select id="order" bind:value={index.order}>
+                                <option value="ASC"> ASC </option>
+                                <option value="DESC"> DESC </option>
+                            </select>
+                            <span class="icon-cheveron-down" aria-hidden="true" />
+                        </div>
+                    </div>
+
+                    <div class="form-item-part u-cross-child-end">
+                        <Button
+                            text
+                            disabled={externalAttribute && i === 0}
+                            on:click={() => {
+                                if (i === 0) attributeList = [];
+                                attributeList = attributeList.splice(i, 1);
+                            }}>
+                            <span class="icon-x" aria-hidden="true" />
+                        </Button>
+                    </div>
+                </li>
+            {/each}
+        {/if}
+        {#if !attributeList?.length || newAttr}
+            <li class="form-item is-multiple">
+                <div class="form-item-part u-stretch">
+                    <label class="label" for="attribute">Attribute</label>
+                    <div class="select">
+                        <select required id="attribute" bind:value={selectedAttribute}>
+                            <option value="" disabled selected hidden>Select Attribute</option>
+
+                            <optgroup label="Internal">
+                                <option value="$id">$id</option>
+                                <option value="$createdAt">$createdAt</option>
+                                <option value="$updatedAt">$updatedAt</option>
+                            </optgroup>
+                            <optgroup label="Attributes">
+                                {#each attributeOptions as option}
+                                    <option
+                                        value={option.value}
+                                        selected={option.value === selectedAttribute}>
+                                        {option.label}
+                                    </option>
+                                {/each}
+                            </optgroup>
+                        </select>
+                        <span class="icon-cheveron-down" aria-hidden="true" />
+                    </div>
+                </div>
+                <div class="form-item-part u-stretch">
+                    <label class="label" for="order">Order</label>
+                    <div class="select">
+                        <select id="order" bind:value={selectedOrder}>
+                            <option value="" disabled selected hidden>Select Order</option>
+
+                            <option value="ASC"> ASC </option>
+                            <option value="DESC"> DESC </option>
+                        </select>
+                        <span class="icon-cheveron-down" aria-hidden="true" />
+                    </div>
+                </div>
+
+                <div class="form-item-part u-cross-child-end">
+                    <Button
+                        text
+                        disabled={false}
+                        on:click={() => {
+                            newAttr = false;
+                            selectedAttribute = selectedOrder = '';
+                        }}>
+                        <span class="icon-x" aria-hidden="true" />
+                    </Button>
+                </div>
+            </li>
+        {/if}
+        <Button
+            text
+            on:click={() => {
+                newAttr = true;
+                if (selectedAttribute && selectedOrder) {
+                    attributeList.push({ value: selectedAttribute, order: selectedOrder });
+                    selectedAttribute = selectedOrder = '';
+                }
+            }}>
+            <span class="icon-plus" aria-hidden="true" />
+            <span class="text"> Add attribute </span>
+        </Button>
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showCreateIndex = false)}>Cancel</Button>
+        <Button submit>Create</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/deleteIndex.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte
similarity index 64%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/deleteIndex.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte
index aadfe32965..f4b59ec443 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/deleteIndex.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { collection } from '../store';
     import { sdkForProject } from '$lib/stores/sdk';
@@ -32,16 +32,14 @@
     };
 </script>
 
-<Form on:submit={handleDelete}>
-    <Modal warning={true} bind:show={showDelete}>
-        <svelte:fragment slot="header">Delete Index</svelte:fragment>
+<Modal warning={true} on:submit={handleDelete} bind:show={showDelete}>
+    <svelte:fragment slot="header">Delete Index</svelte:fragment>
 
-        <p>
-            Are you sure you want to delete <b>'{selectedIndex.key}' from {$collection.name}</b>?
-        </p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+    <p>
+        Are you sure you want to delete <b>'{selectedIndex.key}' from {$collection.name}</b>?
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/overviewIndex.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte
similarity index 100%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/overviewIndex.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/queries.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/queries.svelte
similarity index 100%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/queries.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/queries.svelte
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte
similarity index 96%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte
index a957e54e36..6b84220068 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte
@@ -11,6 +11,8 @@
     import { page } from '$app/stores';
     import { difference } from '$lib/helpers/array';
     import Delete from './deleteCollection.svelte';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
 
     const databaseId = $page.params.database;
 
@@ -60,7 +62,7 @@
                 $collection.documentSecurity,
                 enabled
             );
-            $collection.enabled = enabled;
+            invalidate(Dependencies.COLLECTION);
             addNotification({
                 message: `${$collection.name} has been updated`,
                 type: 'success'
@@ -77,10 +79,10 @@
             await sdkForProject.databases.updateCollection(
                 databaseId,
                 $collection.$id,
-                $collection.name,
+                collectionName,
                 $collection.$permissions
             );
-            $collection.name = collectionName;
+            invalidate(Dependencies.COLLECTION);
             showError = false;
             addNotification({
                 message: 'Name has been updated',
@@ -98,8 +100,7 @@
                 $collection.name,
                 collectionDocumentSecurity ? $collection.$permissions : collectionPermissions
             );
-            $collection.$permissions = collectionPermissions;
-            $collection.documentSecurity = collectionDocumentSecurity;
+            invalidate(Dependencies.COLLECTION);
             arePermsDisabled = true;
             addNotification({
                 message: 'Permissions have been updated',
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/deleteCollection.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/deleteCollection.svelte
similarity index 63%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/deleteCollection.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/deleteCollection.svelte
index d4f8638f83..b5b57fc07f 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/deleteCollection.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/deleteCollection.svelte
@@ -3,7 +3,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { collection } from '../store';
@@ -28,16 +28,14 @@
     };
 </script>
 
-<Form on:submit={handleDelete}>
-    <Modal warning={true} bind:show={showDelete}>
-        <svelte:fragment slot="header">Delete Collection</svelte:fragment>
+<Modal warning={true} bind:show={showDelete} on:submit={handleDelete}>
+    <svelte:fragment slot="header">Delete Collection</svelte:fragment>
 
-        <p>
-            Are you sure you want to delete <b>{$collection.name}</b>?
-        </p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+    <p>
+        Are you sure you want to delete <b>{$collection.name}</b>?
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/store.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/store.ts
new file mode 100644
index 0000000000..ee7b13498e
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/store.ts
@@ -0,0 +1,23 @@
+import { derived } from 'svelte/store';
+import { page } from '$app/stores';
+import type { Models } from '@aw-labs/appwrite-console';
+
+export type Attributes =
+    | Models.AttributeBoolean
+    | Models.AttributeEmail
+    | Models.AttributeEnum
+    | Models.AttributeFloat
+    | Models.AttributeInteger
+    | Models.AttributeIp
+    | Models.AttributeString
+    | Models.AttributeUrl;
+
+type Collection = Omit<Models.Collection, 'attributes'> & {
+    attributes: Array<Attributes>;
+};
+
+export const collection = derived(page, ($page) => $page.data.collection as Collection);
+export const attributes = derived(
+    page,
+    ($page) => $page.data.collection.attributes as Attributes[]
+);
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte
new file mode 100644
index 0000000000..b4f9eb530d
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Usage } from '$lib/layout';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
+
+    $: count = data.count;
+    $: created = data.created;
+    $: read = data.read;
+    $: updated = data.updated;
+    $: deleted = data.deleted;
+</script>
+
+<Usage
+    title="Databases"
+    path={`/console/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}/usage`}
+    {count}
+    {created}
+    {read}
+    {updated}
+    {deleted}
+    countMetadata={{
+        legend: 'Documents',
+        title: 'Total documents'
+    }}
+    createdMetadata={{
+        legend: 'Create',
+        title: 'Documents created'
+    }}
+    readMetadata={{
+        legend: 'Read',
+        title: 'Documents read'
+    }}
+    updatedMetadata={{
+        legend: 'Update',
+        title: 'Documents updated'
+    }}
+    deletedMetadata={{
+        legend: 'Delete',
+        title: 'Documents deleted'
+    }} />
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.ts
new file mode 100644
index 0000000000..cf4a899cf1
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.ts
@@ -0,0 +1,20 @@
+import type { Models } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent }) => {
+    await parent();
+    const response = await sdkForProject.databases.getCollectionUsage(
+        params.database,
+        params.collection,
+        params.period ?? '30d'
+    );
+
+    return {
+        count: response.documentsCount as unknown as Models.Metric[],
+        created: response.documentsCreate as unknown as Models.Metric[],
+        read: response.documentsRead as unknown as Models.Metric[],
+        updated: response.documentsUpdate as unknown as Models.Metric[],
+        deleted: response.documentsDelete as unknown as Models.Metric[]
+    };
+};
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/wizard/step1.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/step1.svelte
similarity index 98%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/wizard/step1.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/step1.svelte
index 5ffc08aaa2..3be1f4734a 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/wizard/step1.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/step1.svelte
@@ -4,7 +4,7 @@
     import { Button } from '$lib/elements/forms';
     import { WizardStep } from '$lib/layout';
     import { createDocument } from './store';
-    import Attribute from '../document/[document]/_attribute.svelte';
+    import Attribute from '../document-[document]/attribute.svelte';
 
     let showCustomId = false;
 </script>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/wizard/step2.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/step2.svelte
similarity index 100%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/wizard/step2.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/step2.svelte
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/wizard/store.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/store.ts
similarity index 100%
rename from src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/wizard/store.ts
rename to src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/store.ts
diff --git a/src/routes/console/project-[project]/databases/database/[database]/_create.svelte b/src/routes/console/project-[project]/databases/database-[database]/create.svelte
similarity index 50%
rename from src/routes/console/project-[project]/databases/database/[database]/_create.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/create.svelte
index ac54188b83..3b99cb29a7 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/_create.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/create.svelte
@@ -3,7 +3,7 @@
 
     import { Modal, CustomId } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { Button, InputText, Form, FormList } from '$lib/elements/forms';
+    import { Button, InputText, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -40,32 +40,30 @@
     };
 </script>
 
-<Form on:submit={create}>
-    <Modal size="big" bind:show={showCreate}>
-        <svelte:fragment slot="header">Create Collection</svelte:fragment>
-        <FormList>
-            <InputText
-                id="name"
-                label="Name"
-                placeholder="Enter collection name"
-                bind:value={name}
-                autofocus
-                required />
+<Modal size="big" bind:show={showCreate} on:submit={create}>
+    <svelte:fragment slot="header">Create Collection</svelte:fragment>
+    <FormList>
+        <InputText
+            id="name"
+            label="Name"
+            placeholder="Enter collection name"
+            bind:value={name}
+            autofocus
+            required />
 
-            {#if !showCustomId}
-                <div>
-                    <Pill button on:click={() => (showCustomId = !showCustomId)}
-                        ><span class="icon-pencil" aria-hidden="true" /><span class="text">
-                            Collection ID
-                        </span></Pill>
-                </div>
-            {:else}
-                <CustomId bind:show={showCustomId} name="Collection" bind:id />
-            {/if}
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
-            <Button submit>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+        {#if !showCustomId}
+            <div>
+                <Pill button on:click={() => (showCustomId = !showCustomId)}
+                    ><span class="icon-pencil" aria-hidden="true" /><span class="text">
+                        Collection ID
+                    </span></Pill>
+            </div>
+        {:else}
+            <CustomId bind:show={showCustomId} name="Collection" bind:id />
+        {/if}
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
+        <Button submit>Create</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/_delete.svelte b/src/routes/console/project-[project]/databases/database-[database]/delete.svelte
similarity index 61%
rename from src/routes/console/project-[project]/databases/database/[database]/_delete.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/delete.svelte
index 696eda69de..a82be62a93 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/_delete.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/delete.svelte
@@ -3,7 +3,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { database } from './store';
@@ -25,16 +25,14 @@
     };
 </script>
 
-<Form on:submit={handleDelete}>
-    <Modal warning={true} bind:show={showDelete}>
-        <svelte:fragment slot="header">Delete Database</svelte:fragment>
+<Modal warning={true} bind:show={showDelete} on:submit={handleDelete}>
+    <svelte:fragment slot="header">Delete Database</svelte:fragment>
 
-        <p>
-            Are you sure you want to delete <b>{$database.name}</b>?
-        </p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+    <p>
+        Are you sure you want to delete <b>{$database.name}</b>?
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/header.svelte b/src/routes/console/project-[project]/databases/database-[database]/header.svelte
similarity index 66%
rename from src/routes/console/project-[project]/databases/database/[database]/header.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/header.svelte
index d487258c0e..185bce8a68 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/header.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/header.svelte
@@ -2,16 +2,18 @@
     import { page } from '$app/stores';
     import { Copy, Tab, Tabs } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { Cover } from '$lib/layout';
+    import { isTabSelected } from '$lib/helpers/load';
+    import { Cover, CoverTitle } from '$lib/layout';
     import { database } from './store';
 
     const projectId = $page.params.project;
     const databaseId = $page.params.database;
-    const path = `/console/project-${projectId}/databases/database/${databaseId}`;
+    const path = `/console/project-${projectId}/databases/database-${databaseId}`;
     const tabs = [
         {
             href: path,
-            title: 'Collections'
+            title: 'Collections',
+            hasChildren: true
         },
         {
             href: `${path}/usage`,
@@ -26,15 +28,9 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <a
-            class="back-button"
-            href={`/console/project-${projectId}/databases`}
-            aria-label="page back">
-            <span class="icon-cheveron-left" aria-hidden="true" />
-        </a>
-        <h1 class="heading-level-4">
-            <span class="text">{$database.name}</span>
-        </h1>
+        <CoverTitle href={`/console/project-${projectId}/databases`}>
+            {$database.name}
+        </CoverTitle>
         <Copy value={$database.$id}>
             <Pill button>
                 <span class="icon-duplicate" aria-hidden="true" />
@@ -45,7 +41,7 @@
 
     <Tabs>
         {#each tabs as tab}
-            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
                 {tab.title}
             </Tab>
         {/each}
diff --git a/src/routes/console/project-[project]/databases/database/[database]/settings/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/settings/+page.svelte
similarity index 93%
rename from src/routes/console/project-[project]/databases/database/[database]/settings/+page.svelte
rename to src/routes/console/project-[project]/databases/database-[database]/settings/+page.svelte
index f7d315e7bf..25c58275d3 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/settings/+page.svelte
@@ -6,11 +6,11 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
     import { database } from '../store';
-    import Delete from '../_delete.svelte';
     import { onMount } from 'svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
-
-    const databaseId = $page.params.database;
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import Delete from '../delete.svelte';
 
     let showDelete = false;
     let showError: false | 'name' | 'email' | 'password' = false;
@@ -19,7 +19,6 @@
     let databaseName: string = null;
 
     onMount(async () => {
-        await database.load(databaseId);
         databaseName ??= $database.name;
     });
 
@@ -31,8 +30,8 @@
 
     async function updateName() {
         try {
-            await sdkForProject.teams.update($page.params.team, databaseName);
-            $database.name = databaseName;
+            await sdkForProject.databases.update($page.params.database, databaseName);
+            invalidate(Dependencies.DATABASE);
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
diff --git a/src/routes/console/project-[project]/databases/database-[database]/store.ts b/src/routes/console/project-[project]/databases/database-[database]/store.ts
new file mode 100644
index 0000000000..37fc827841
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/store.ts
@@ -0,0 +1,5 @@
+import { derived } from 'svelte/store';
+import { page } from '$app/stores';
+import type { Models } from '@aw-labs/appwrite-console';
+
+export const database = derived(page, ($page) => $page.data.database as Models.Database);
diff --git a/src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
new file mode 100644
index 0000000000..8691504465
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Usage } from '$lib/layout';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
+
+    $: count = data.count;
+    $: created = data.created;
+    $: read = data.read;
+    $: updated = data.updated;
+    $: deleted = data.deleted;
+</script>
+
+<Usage
+    title="Databases"
+    path={`/console/project-${$page.params.project}/databases/database-${$page.params.database}/usage`}
+    {count}
+    {created}
+    {read}
+    {updated}
+    {deleted}
+    countMetadata={{
+        legend: 'Collections',
+        title: 'Total collections'
+    }}
+    createdMetadata={{
+        legend: 'Create',
+        title: 'Collections created'
+    }}
+    readMetadata={{
+        legend: 'Read',
+        title: 'Collections read'
+    }}
+    updatedMetadata={{
+        legend: 'Update',
+        title: 'Collections updated'
+    }}
+    deletedMetadata={{
+        legend: 'Delete',
+        title: 'Collections deleted'
+    }} />
diff --git a/src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.ts
new file mode 100644
index 0000000000..bc1023198b
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/usage/[[period]]/+page.ts
@@ -0,0 +1,19 @@
+import type { Models } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent }) => {
+    await parent();
+    const response = await sdkForProject.databases.getDatabaseUsage(
+        params.database,
+        params.period ?? '30d'
+    );
+
+    return {
+        count: response.collectionsCount as unknown as Models.Metric[],
+        created: response.collectionsCreate as unknown as Models.Metric[],
+        read: response.collectionsRead as unknown as Models.Metric[],
+        updated: response.collectionsUpdate as unknown as Models.Metric[],
+        deleted: response.collectionsDelete as unknown as Models.Metric[]
+    };
+};
diff --git a/src/routes/console/project-[project]/databases/database/[database]/+layout.svelte b/src/routes/console/project-[project]/databases/database/[database]/+layout.svelte
deleted file mode 100644
index 84a39c5380..0000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/+layout.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script>
-    import { onMount } from 'svelte';
-    import { afterNavigate } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { breadcrumb, updateLayout } from '$lib/stores/layout';
-    import { database } from './store';
-    import Breadcrumbs from './breadcrumbs.svelte';
-    import Header from './header.svelte';
-
-    const databaseId = $page.params.database;
-    const path = `databases/database/${databaseId}`;
-
-    onMount(handle);
-    afterNavigate(handle);
-    let loaded = false;
-    async function handle(event = null) {
-        const promise = database.load(databaseId);
-        if ($database?.$id !== databaseId) {
-            await promise;
-        }
-
-        updateLayout({
-            header: Header,
-            breadcrumb: Breadcrumbs
-        });
-        loaded = true;
-    }
-</script>
-
-<svelte:head>
-    <title>Database - Appwrite</title>
-</svelte:head>
-
-{#if loaded}
-    <slot />
-{/if}
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+layout.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+layout.svelte
deleted file mode 100644
index 5106a7a8a3..0000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+layout.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { page } from '$app/stores';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-    import Breadcrumbs from './breadcrumbs.svelte';
-    import Header from './header.svelte';
-    import { collection } from './store';
-
-    const databaseId = $page.params.database;
-    const collectionId = $page.params.collection;
-
-    onMount(handle);
-    afterNavigate(handle);
-    let loaded = false;
-    async function handle() {
-        const promise = collection.load(databaseId, collectionId);
-        if ($collection?.$id !== collectionId) {
-            await promise;
-        }
-
-        updateLayout({
-            header: Header,
-            breadcrumb: Breadcrumbs
-        });
-        loaded = true;
-    }
-</script>
-
-<svelte:head>
-    <title>{$collection?.name ?? 'Collection'} - Appwrite</title>
-</svelte:head>
-
-{#if $collection && loaded}
-    <slot />
-{/if}
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/createAttribute.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/createAttribute.svelte
deleted file mode 100644
index 47fe506d12..0000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/createAttribute.svelte
+++ /dev/null
@@ -1,73 +0,0 @@
-<script lang="ts">
-    import { Modal } from '$lib/components';
-    import { option, options } from './store';
-    import { Button, InputText, Form, FormList, InputSelect } from '$lib/elements/forms';
-    import { collection } from '../store';
-    import type { Attributes } from '../store';
-
-    export let showCreate = false;
-
-    let key: string = null;
-    let selectedOption = null;
-    let submitted = false;
-
-    const created = async (event: CustomEvent<Attributes>) => {
-        collection.addAttribute(event.detail);
-        showCreate = false;
-    };
-
-    $: if (selectedOption) {
-        $option = options.find((option) => option.name === selectedOption);
-    }
-
-    $: if (!showCreate) {
-        key = null;
-        selectedOption = null;
-        submitted = false;
-    }
-</script>
-
-<Form on:submit={() => (submitted = true)}>
-    <Modal size="big" bind:show={showCreate}>
-        <svelte:fragment slot="header">Create Attribute</svelte:fragment>
-        <FormList>
-            <div>
-                <InputText
-                    id="key"
-                    label="Attribute Key"
-                    placeholder="Enter Key"
-                    bind:value={key}
-                    autofocus
-                    required />
-
-                <div class="u-flex u-gap-4 u-margin-block-start-8 u-small">
-                    <span
-                        class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
-                        aria-hidden="true" />
-                    <span class="text u-line-height-1-5"
-                        >Allowed characters: alphanumeric, hyphen, non-leading underscore, period</span>
-                </div>
-            </div>
-
-            <InputSelect
-                options={options.map((n) => ({ value: n.name, label: n.name }))}
-                id="type"
-                label="Attribute type"
-                placeholder="Select type"
-                bind:value={selectedOption}
-                required />
-            {#if selectedOption}
-                <svelte:component
-                    this={$option.component}
-                    {key}
-                    bind:submitted
-                    on:created={created}
-                    on:close={() => ($option = null)} />
-            {/if}
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
-            <Button submit>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/overview.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/overview.svelte
deleted file mode 100644
index e6a1d4cb4c..0000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/overview.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script lang="ts">
-    import { Modal } from '$lib/components';
-    import { option, options } from './store';
-    import { InputText, FormList } from '$lib/elements/forms';
-    import type { Attributes } from '../store';
-
-    export let showOverview = false;
-    export let selectedAttribute: Attributes;
-
-    $: if (selectedAttribute) {
-        $option = options.find(
-            (option) => option.name.toLocaleLowerCase() === selectedAttribute.type
-        );
-    }
-</script>
-
-{#if selectedAttribute}
-    <Modal size="big" bind:show={showOverview}>
-        <svelte:fragment slot="header">Overview</svelte:fragment>
-        <FormList>
-            <InputText
-                id="ID"
-                label="Attribute ID"
-                placeholder="Enter ID"
-                bind:value={selectedAttribute.key}
-                disabled />
-
-            {#if selectedAttribute}
-                <svelte:component this={$option.component} overview={true} {selectedAttribute} />
-            {/if}
-        </FormList>
-    </Modal>
-{/if}
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/breadcrumbs.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/breadcrumbs.svelte
deleted file mode 100644
index 3c2869348d..0000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/breadcrumbs.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-    import { Breadcrumbs } from '$lib/layout';
-    import { project } from '../../../../../store';
-    import { database } from '../../store';
-    import { collection } from './store';
-
-    $: breadcrumbs = [
-        {
-            title: '...'
-        },
-        {
-            href: `/console/project-${$project.$id}/databases`,
-            title: 'Databases'
-        },
-        {
-            href: `/console/project-${$project.$id}/databases/database/${$database.$id}`,
-            title: $database.name
-        },
-        {
-            href: `/console/project-${$project.$id}/databases/database/${$database.$id}/collection/${$collection.$id}`,
-            title: $collection.name
-        }
-    ];
-</script>
-
-<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+layout.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+layout.svelte
deleted file mode 100644
index d7c5c48279..0000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+layout.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { updateLayout } from '$lib/stores/layout';
-    import { doc } from './store';
-    import { onMount } from 'svelte';
-    import { afterNavigate } from '$app/navigation';
-    import Header from './header.svelte';
-    import Breadcrumbs from './breadcrumbs.svelte';
-
-    const databaseId = $page.params.database;
-    const collectionId = $page.params.collection;
-    const documentId = $page.params.document;
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle() {
-        const promise = doc.load(databaseId, collectionId, documentId);
-        if ($doc?.$id !== documentId) {
-            await promise;
-        }
-
-        updateLayout({
-            header: Header,
-            breadcrumb: Breadcrumbs
-        });
-    }
-</script>
-
-<svelte:head>
-    <title>Database Document - Appwrite</title>
-</svelte:head>
-
-{#if $doc}
-    <slot />
-{/if}
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+page.svelte
deleted file mode 100644
index 621adcac5d..0000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+page.svelte
+++ /dev/null
@@ -1,110 +0,0 @@
-<script lang="ts">
-    import { CardGrid, Box, Heading } from '$lib/components';
-    import { Container } from '$lib/layout';
-    import { Button } from '$lib/elements/forms';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { doc } from './store';
-    import { addNotification } from '$lib/stores/notifications';
-    import { toLocaleDateTime } from '$lib/helpers/date';
-    import Document from './_document.svelte';
-    import Delete from './_delete.svelte';
-    import { difference } from '$lib/helpers/array';
-    import { Permissions } from '$lib/components/permissions';
-
-    let showDelete = false;
-    let permissions = $doc?.$permissions;
-    let arePermsDisabled = true;
-
-    async function updatePermissions() {
-        try {
-            await sdkForProject.databases.updateDocument(
-                $doc.$databaseId,
-                $doc.$collectionId,
-                $doc.$id,
-                $doc.data,
-                permissions
-            );
-            $doc.$permissions = permissions;
-            arePermsDisabled = true;
-            addNotification({
-                message: 'Permissions have been updated',
-                type: 'success'
-            });
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-        }
-    }
-
-    $: if (permissions) {
-        if (difference(permissions, $doc.$permissions).length) {
-            arePermsDisabled = false;
-        } else arePermsDisabled = true;
-    }
-</script>
-
-<svelte:head>
-    <title>Document - Appwrite</title>
-</svelte:head>
-
-<Container>
-    {#if $doc}
-        <CardGrid>
-            <Heading tag="h2" size="7">Document</Heading>
-            <svelte:fragment slot="aside">
-                <div>
-                    <p>Created: {toLocaleDateTime($doc.$createdAt)}</p>
-                    <p>Last Updated: {toLocaleDateTime($doc.$updatedAt)}</p>
-                </div>
-            </svelte:fragment>
-        </CardGrid>
-        <Document />
-
-        <CardGrid>
-            <Heading tag="h6" size="7">Update Permissions</Heading>
-            <p>
-                Assign read or write permissions at the <b> Collection Level</b> or
-                <b> Document Level</b>. If collection Level permissions are assigned, permissions
-                applied to individual documents are ignored.
-            </p>
-
-            <svelte:fragment slot="aside">
-                <Permissions bind:permissions />
-            </svelte:fragment>
-
-            <svelte:fragment slot="actions">
-                <Button
-                    disabled={arePermsDisabled}
-                    on:click={() => {
-                        updatePermissions();
-                    }}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
-
-        <CardGrid>
-            <Heading tag="h6" size="7">Delete Document</Heading>
-            <p>
-                The document will be permanently deleted, including all the data within it. This
-                action is irreversible.
-            </p>
-            <svelte:fragment slot="aside">
-                <Box>
-                    <svelte:fragment slot="title">
-                        <h6 class="u-bold">{$doc.$id}</h6>
-                    </svelte:fragment>
-                    <p>
-                        Last Updated: {toLocaleDateTime($doc.$updatedAt)}
-                    </p>
-                </Box>
-            </svelte:fragment>
-
-            <svelte:fragment slot="actions">
-                <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
-            </svelte:fragment>
-        </CardGrid>
-    {/if}
-</Container>
-
-<Delete bind:showDelete />
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/activity/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/activity/+page.svelte
deleted file mode 100644
index dde4f656b5..0000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/activity/+page.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-    import { Card } from '$lib/components';
-</script>
-
-<h1>Activity</h1>
-
-<Card />
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/breadcrumbs.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/breadcrumbs.svelte
deleted file mode 100644
index a350da0c23..0000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/breadcrumbs.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-    import { Breadcrumbs } from '$lib/layout';
-    import { project } from '../../../../../../../store';
-    import { database } from '../../../../store';
-    import { collection } from '../../store';
-    import { doc } from './store';
-
-    $: breadcrumbs = [
-        {
-            title: '...'
-        },
-        {
-            href: `/console/project-${$project.$id}/databases/database/${$database.$id}`,
-            title: $database.name
-        },
-        {
-            href: `/console/project-${$project.$id}/databases/database/${$database.$id}/collection/${$collection.$id}`,
-            title: $collection.name
-        },
-        {
-            href: `/console/project-${$project.$id}/databases/database/${$database.$id}/collection/${$collection.$id}/document/${$doc.$id}`,
-            title: $doc.$id
-        }
-    ];
-</script>
-
-<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/store.ts b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/store.ts
deleted file mode 100644
index 7e6e18331c..0000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/store.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { cachedStore } from '$lib/helpers/cache';
-import { sdkForProject } from '$lib/stores/sdk';
-import type { Models } from '@aw-labs/appwrite-console';
-
-export const doc = cachedStore<
-    Models.Document,
-    {
-        load: (databaseId: string, collectionId: string, documentId: string) => Promise<void>;
-        addAttribute: (attribute: string) => void;
-        removeAttribute: (attribute: string, index: number) => void;
-    }
->('doc', function ({ set, update }) {
-    return {
-        load: async (databaseId, collectionId, documentId) =>
-            set(await sdkForProject.databases.getDocument(databaseId, collectionId, documentId)),
-        addAttribute: (attribute) =>
-            update((n) => {
-                n[attribute].push(null);
-
-                return n;
-            }),
-        removeAttribute: (attribute, index) =>
-            update((n) => {
-                n[attribute].splice(index, 1);
-
-                return n;
-            })
-    };
-});
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/createIndex.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/createIndex.svelte
deleted file mode 100644
index c184a80ad7..0000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/createIndex.svelte
+++ /dev/null
@@ -1,212 +0,0 @@
-<script lang="ts">
-    import { Modal } from '$lib/components';
-    import { Button, InputText, Form, FormList, InputSelect } from '$lib/elements/forms';
-    import { collection } from '../store';
-    import type { Attributes } from '../store';
-    import { onMount } from 'svelte';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { addNotification } from '$lib/stores/notifications';
-    import { page } from '$app/stores';
-
-    export let showCreateIndex = false;
-    export let externalAttribute: Attributes = null;
-
-    const databaseId = $page.params.database;
-
-    let key: string = null;
-    let types = [
-        { value: 'key', label: 'Key' },
-        { value: 'unique', label: 'Unique' },
-        { value: 'fulltext', label: 'FullText' }
-    ];
-    let newAttr = false;
-    let selectedType = '';
-    let attributeOptions = $collection.attributes.map((attribute: Attributes) => ({
-        value: attribute.key,
-        label: attribute.key
-    }));
-    $: attributeList = [];
-
-    let selectedAttribute = '';
-    let selectedOrder = '';
-
-    onMount(() => {
-        if (externalAttribute) {
-            attributeList = [{ value: externalAttribute.key, order: 'ASC' }];
-        }
-    });
-
-    $: if (showCreateIndex) {
-        attributeList = [];
-        selectedType = selectedOrder = selectedAttribute = '';
-        key = null;
-    }
-    const created = async () => {
-        if (selectedAttribute && selectedOrder) {
-            attributeList.push({ value: selectedAttribute, order: selectedOrder });
-            selectedAttribute = selectedOrder = '';
-        }
-        try {
-            await sdkForProject.databases.createIndex(
-                databaseId,
-                $collection.$id,
-                key,
-                selectedType,
-                attributeList.map((a) => a.value),
-                attributeList.map((a) => a.order)
-            );
-            addNotification({
-                message: 'Index created!',
-                type: 'success'
-            });
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-        }
-
-        showCreateIndex = false;
-    };
-</script>
-
-<Form on:submit={created}>
-    <Modal size="big" bind:show={showCreateIndex}>
-        <svelte:fragment slot="header">Create Index</svelte:fragment>
-        <FormList>
-            <InputText
-                id="key"
-                label="Index Key"
-                placeholder="Enter Key"
-                bind:value={key}
-                autofocus
-                required />
-            <InputSelect
-                options={types}
-                id="type"
-                label="Index type"
-                placeholder="Select type"
-                bind:value={selectedType}
-                required />
-
-            {#if attributeList?.length}
-                {#each attributeList as index, i}
-                    <li class="form-item is-multiple">
-                        <div class="form-item-part u-stretch">
-                            <label class="label" for="attribute">Attribute</label>
-                            <div class="select">
-                                <select id="attribute" bind:value={index.value}>
-                                    <optgroup label="Internal">
-                                        <option value="$id">$id</option>
-                                        <option value="$createdAt">$createdAt</option>
-                                        <option value="$updatedAt">$updatedAt</option>
-                                    </optgroup>
-                                    <optgroup label="Attributes">
-                                        {#each attributeOptions as option}
-                                            <option
-                                                value={option.value}
-                                                selected={option.value === selectedAttribute}>
-                                                {option.label}
-                                            </option>
-                                        {/each}
-                                    </optgroup>
-                                </select>
-                                <span class="icon-cheveron-down" aria-hidden="true" />
-                            </div>
-                        </div>
-                        <div class="form-item-part u-stretch">
-                            <label class="label" for="order">Order</label>
-                            <div class="select">
-                                <select id="order" bind:value={index.order}>
-                                    <option value="ASC"> ASC </option>
-                                    <option value="DESC"> DESC </option>
-                                </select>
-                                <span class="icon-cheveron-down" aria-hidden="true" />
-                            </div>
-                        </div>
-
-                        <div class="form-item-part u-cross-child-end">
-                            <Button
-                                text
-                                disabled={externalAttribute && i === 0}
-                                on:click={() => {
-                                    if (i === 0) attributeList = [];
-                                    attributeList = attributeList.splice(i, 1);
-                                }}>
-                                <span class="icon-x" aria-hidden="true" />
-                            </Button>
-                        </div>
-                    </li>
-                {/each}
-            {/if}
-            {#if !attributeList?.length || newAttr}
-                <li class="form-item is-multiple">
-                    <div class="form-item-part u-stretch">
-                        <label class="label" for="attribute">Attribute</label>
-                        <div class="select">
-                            <select required id="attribute" bind:value={selectedAttribute}>
-                                <option value="" disabled selected hidden>Select Attribute</option>
-
-                                <optgroup label="Internal">
-                                    <option value="$id">$id</option>
-                                    <option value="$createdAt">$createdAt</option>
-                                    <option value="$updatedAt">$updatedAt</option>
-                                </optgroup>
-                                <optgroup label="Attributes">
-                                    {#each attributeOptions as option}
-                                        <option
-                                            value={option.value}
-                                            selected={option.value === selectedAttribute}>
-                                            {option.label}
-                                        </option>
-                                    {/each}
-                                </optgroup>
-                            </select>
-                            <span class="icon-cheveron-down" aria-hidden="true" />
-                        </div>
-                    </div>
-                    <div class="form-item-part u-stretch">
-                        <label class="label" for="order">Order</label>
-                        <div class="select">
-                            <select id="order" bind:value={selectedOrder}>
-                                <option value="" disabled selected hidden>Select Order</option>
-
-                                <option value="ASC"> ASC </option>
-                                <option value="DESC"> DESC </option>
-                            </select>
-                            <span class="icon-cheveron-down" aria-hidden="true" />
-                        </div>
-                    </div>
-
-                    <div class="form-item-part u-cross-child-end">
-                        <Button
-                            text
-                            disabled={false}
-                            on:click={() => {
-                                newAttr = false;
-                                selectedAttribute = selectedOrder = '';
-                            }}>
-                            <span class="icon-x" aria-hidden="true" />
-                        </Button>
-                    </div>
-                </li>
-            {/if}
-            <Button
-                text
-                on:click={() => {
-                    newAttr = true;
-                    if (selectedAttribute && selectedOrder) {
-                        attributeList.push({ value: selectedAttribute, order: selectedOrder });
-                        selectedAttribute = selectedOrder = '';
-                    }
-                }}>
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text"> Add attribute </span>
-            </Button>
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => (showCreateIndex = false)}>Cancel</Button>
-            <Button submit>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts
deleted file mode 100644
index 35af4cde80..0000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-import { sdkForProject } from '$lib/stores/sdk';
-import type { Models } from '@aw-labs/appwrite-console';
-import { cachedStore } from '$lib/helpers/cache';
-
-export type Attributes =
-    | Models.AttributeBoolean
-    | Models.AttributeEmail
-    | Models.AttributeEnum
-    | Models.AttributeFloat
-    | Models.AttributeInteger
-    | Models.AttributeIp
-    | Models.AttributeString
-    | Models.AttributeUrl;
-
-type Collection = Omit<Models.Collection, 'attributes'> & {
-    attributes: Array<Attributes>;
-};
-
-export const collection = cachedStore<
-    Collection,
-    {
-        load: (databaseId: string, collectionId: string) => Promise<void>;
-        addAttribute: (attribute: Attributes) => void;
-        updateAttribute: (attribute: Attributes) => void;
-        removeAttribute: (attribute: Attributes) => void;
-    }
->('collection', function ({ set, update }) {
-    return {
-        load: async (databaseId, collectionId) => {
-            set(
-                (await sdkForProject.databases.getCollection(
-                    databaseId,
-                    collectionId
-                )) as unknown as Collection
-            );
-        },
-        addAttribute: (attribute) =>
-            update((n) => {
-                if (!n.attributes.some((a) => a.key === attribute.key)) {
-                    n.attributes.push(attribute);
-                }
-
-                return n;
-            }),
-        updateAttribute: (attribute) =>
-            update((n) => {
-                const index = n.attributes.findIndex((a) => a.key === attribute.key);
-                if (index !== -1) {
-                    n.attributes[index] = attribute;
-                }
-
-                return n;
-            }),
-        removeAttribute: (attribute) =>
-            update((n) => {
-                n.attributes = n.attributes.filter((a) => a.key !== attribute.key);
-
-                return n;
-            })
-    };
-});
-
-export const documentList = cachedStore<
-    Models.DocumentList<Models.Document>,
-    {
-        load: (databaseId: string, collectionId: string, queries?: string[]) => Promise<void>;
-    }
->('documentList', function ({ set }) {
-    return {
-        load: async (databaseId, collectionId, queries) => {
-            const response = await sdkForProject.databases.listDocuments(
-                databaseId,
-                collectionId,
-                queries
-            );
-            set(response);
-        }
-    };
-});
-
-export const indexList = cachedStore<
-    Models.IndexList,
-    {
-        load: (databaseId: string, collectionId: string) => Promise<void>;
-    }
->('indexList', function ({ set }) {
-    return {
-        load: async (databaseId: string, collectionId: string) => {
-            const response = await sdkForProject.databases.listIndexes(databaseId, collectionId);
-            set(response);
-        }
-    };
-});
-
-/**
- * TODO: Mock proper types until the SKD is fixed.
- */
-export type AttributeResponse = Omit<Models.AttributeList, 'attributes'> & {
-    attributes: Attributes[];
-};
-
-export const attributeList = cachedStore<
-    AttributeResponse,
-    {
-        load: (databaseId: string, collectionId: string) => Promise<void>;
-    }
->('attributeList', function ({ set }) {
-    return {
-        load: async (databaseId, collectionId) => {
-            const response: unknown = await sdkForProject.databases.listAttributes(
-                databaseId,
-                collectionId
-            );
-
-            set(response as AttributeResponse);
-        }
-    };
-});
-
-export const collectionUsage = cachedStore<
-    Models.UsageCollection,
-    {
-        load: (databaseId: string, collectionId: string, range: string) => Promise<void>;
-    }
->('collectionUsage', function ({ set }) {
-    return {
-        load: async (databaseId, range) => {
-            const usages = await sdkForProject.databases.getCollectionUsage(databaseId, range);
-            set(usages);
-        }
-    };
-});
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/usage/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/usage/+page.svelte
deleted file mode 100644
index 06b7832cb2..0000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/usage/+page.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { Usage, type UsagePeriods } from '$lib/layout';
-    import { collectionUsage } from '../store';
-    import type { Models } from '@aw-labs/appwrite-console';
-
-    let range: UsagePeriods = '30d';
-
-    const databaseId = $page.params.database;
-    const collectionId = $page.params.collection;
-
-    $: collectionUsage.load(databaseId, collectionId, range);
-
-    // TODO: metric type is wrong
-    $: count = $collectionUsage?.documentsCount as unknown as Models.Metric[];
-    $: created = $collectionUsage?.documentsCreate as unknown as Models.Metric[];
-    $: read = $collectionUsage?.documentsRead as unknown as Models.Metric[];
-    $: updated = $collectionUsage?.documentsUpdate as unknown as Models.Metric[];
-    $: deleted = $collectionUsage?.documentsDelete as unknown as Models.Metric[];
-</script>
-
-<Usage
-    title="Documents"
-    bind:range
-    {count}
-    {created}
-    {read}
-    {updated}
-    {deleted}
-    countMetadata={{
-        legend: 'Documents',
-        title: 'Total documents'
-    }}
-    createdMetadata={{
-        legend: 'Create',
-        title: 'Documents created'
-    }}
-    readMetadata={{
-        legend: 'Read',
-        title: 'Documents read'
-    }}
-    updatedMetadata={{
-        legend: 'Update',
-        title: 'Documents updated'
-    }}
-    deletedMetadata={{
-        legend: 'Delete',
-        title: 'Documents deleted'
-    }} />
diff --git a/src/routes/console/project-[project]/databases/database/[database]/store.ts b/src/routes/console/project-[project]/databases/database/[database]/store.ts
deleted file mode 100644
index 69072d890c..0000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/store.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { sdkForProject } from '$lib/stores/sdk';
-import type { Models } from '@aw-labs/appwrite-console';
-import { browser } from '$app/environment';
-import { cachedStore } from '$lib/helpers/cache';
-
-export const collections = cachedStore<
-    Models.CollectionList,
-    {
-        load: (databaseId: string, queries: string[]) => Promise<void>;
-        total: (databaseId: string, id: string) => Promise<Record<string, unknown>>;
-    }
->('collections', function ({ set }) {
-    return {
-        load: async (databaseId, queries) => {
-            const response = await sdkForProject.databases.listCollections(databaseId, queries);
-            set(response);
-        },
-        total: async (databaseId, id) => {
-            let total = {};
-            total = browser ? JSON.parse(sessionStorage.getItem('collectionTotal')) ?? {} : {};
-            const response = await sdkForProject.databases.listDocuments(databaseId, id);
-            total[id] = response.total;
-            sessionStorage?.setItem('collectionTotal', JSON.stringify(total));
-            return total;
-        }
-    };
-});
-
-export const database = cachedStore<
-    Models.Database,
-    {
-        load: (databaseId: string) => Promise<void>;
-    }
->('database', function ({ set }) {
-    return {
-        load: async (databaseId) => {
-            set(await sdkForProject.databases.get(databaseId));
-        }
-    };
-});
-
-export const databaseUsage = cachedStore<
-    Models.UsageDatabase,
-    {
-        load: (databaseId: string, range: string) => Promise<void>;
-    }
->('databaseUsage', function ({ set }) {
-    return {
-        load: async (databaseId, range) => {
-            const usages = await sdkForProject.databases.getDatabaseUsage(databaseId, range);
-            set(usages);
-        }
-    };
-});
diff --git a/src/routes/console/project-[project]/databases/database/[database]/usage/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/usage/+page.svelte
deleted file mode 100644
index 6cd0260859..0000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/usage/+page.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { Usage, type UsagePeriods } from '$lib/layout';
-    import { databaseUsage } from '../store';
-    import type { Models } from '@aw-labs/appwrite-console';
-
-    let range: UsagePeriods = '30d';
-
-    const databaseId = $page.params.database;
-
-    $: databaseUsage.load(databaseId, range);
-
-    // TODO: metric type is wrong
-    $: count = $databaseUsage?.collectionsCount as unknown as Models.Metric[];
-    $: created = $databaseUsage?.collectionsCreate as unknown as Models.Metric[];
-    $: read = $databaseUsage?.collectionsRead as unknown as Models.Metric[];
-    $: updated = $databaseUsage?.collectionsUpdate as unknown as Models.Metric[];
-    $: deleted = $databaseUsage?.collectionsDelete as unknown as Models.Metric[];
-</script>
-
-<Usage
-    title="Collections"
-    bind:range
-    {count}
-    {created}
-    {read}
-    {updated}
-    {deleted}
-    countMetadata={{
-        legend: 'Collections',
-        title: 'Total collections'
-    }}
-    createdMetadata={{
-        legend: 'Create',
-        title: 'Collections created'
-    }}
-    readMetadata={{
-        legend: 'Read',
-        title: 'Collections read'
-    }}
-    updatedMetadata={{
-        legend: 'Update',
-        title: 'Collections updated'
-    }}
-    deletedMetadata={{
-        legend: 'Delete',
-        title: 'Collections deleted'
-    }} />
diff --git a/src/routes/console/project-[project]/databases/header.svelte b/src/routes/console/project-[project]/databases/header.svelte
index 97b1b7098e..b37a3406e8 100644
--- a/src/routes/console/project-[project]/databases/header.svelte
+++ b/src/routes/console/project-[project]/databases/header.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { Tab, Tabs } from '$lib/components';
-    import { Cover } from '$lib/layout';
+    import { isTabSelected } from '$lib/helpers/load';
+    import { Cover, CoverTitle } from '$lib/layout';
 
     const projectId = $page.params.project;
     const path = `/console/project-${projectId}/databases`;
     const tabs = [
         {
             href: path,
-            title: 'Databases'
+            title: 'Databases',
+            hasChildren: true
         },
         {
             href: `${path}/usage`,
@@ -19,14 +21,11 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <h1 class="heading-level-4">
-            <span class="text">Databases</span>
-        </h1>
+        <CoverTitle>Databases</CoverTitle>
     </svelte:fragment>
-
     <Tabs>
         {#each tabs as tab}
-            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
                 {tab.title}
             </Tab>
         {/each}
diff --git a/src/routes/console/project-[project]/databases/store.ts b/src/routes/console/project-[project]/databases/store.ts
deleted file mode 100644
index 642b5c4719..0000000000
--- a/src/routes/console/project-[project]/databases/store.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { sdkForProject } from '$lib/stores/sdk';
-import { cachedStore } from '$lib/helpers/cache';
-import type { Models } from '@aw-labs/appwrite-console';
-
-export const databaseList = cachedStore<
-    Models.DatabaseList,
-    {
-        load: (queries: string[], search: string) => Promise<void>;
-    }
->('databaseList', function ({ set }) {
-    return {
-        load: async (queries, search) => {
-            const response = await sdkForProject.databases.list(queries, search);
-            set(response);
-        }
-    };
-});
-
-export const databasesUsage = cachedStore<
-    Models.UsageDatabases,
-    {
-        load: (range: string) => Promise<void>;
-    }
->('databasesUsage', function ({ set }) {
-    return {
-        load: async (range) => {
-            const usages = await sdkForProject.databases.getUsage(range);
-            set(usages);
-        }
-    };
-});
diff --git a/src/routes/console/project-[project]/databases/usage/+page.svelte b/src/routes/console/project-[project]/databases/usage/+page.svelte
deleted file mode 100644
index 2c19b78c31..0000000000
--- a/src/routes/console/project-[project]/databases/usage/+page.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts">
-    import { Usage, type UsagePeriods } from '$lib/layout';
-    import { databasesUsage } from '../store';
-    import type { Models } from '@aw-labs/appwrite-console';
-
-    let range: UsagePeriods = '30d';
-
-    $: databasesUsage.load(range);
-
-    // TODO: metric type is wrong
-    $: count = $databasesUsage?.databasesCount as unknown as Models.Metric[];
-    $: created = $databasesUsage?.databasesCreate as unknown as Models.Metric[];
-    $: read = $databasesUsage?.databasesRead as unknown as Models.Metric[];
-    $: updated = $databasesUsage?.databasesUpdate as unknown as Models.Metric[];
-    $: deleted = $databasesUsage?.databasesDelete as unknown as Models.Metric[];
-</script>
-
-<Usage
-    title="Databases"
-    bind:range
-    {count}
-    {created}
-    {read}
-    {updated}
-    {deleted}
-    countMetadata={{
-        legend: 'Databases',
-        title: 'Total databases'
-    }}
-    createdMetadata={{
-        legend: 'Create',
-        title: 'Databases created'
-    }}
-    readMetadata={{
-        legend: 'Read',
-        title: 'Databases read'
-    }}
-    updatedMetadata={{
-        legend: 'Update',
-        title: 'Databases updated'
-    }}
-    deletedMetadata={{
-        legend: 'Delete',
-        title: 'Databases deleted'
-    }} />
diff --git a/src/routes/console/project-[project]/databases/usage/[[period]]/+page.svelte b/src/routes/console/project-[project]/databases/usage/[[period]]/+page.svelte
new file mode 100644
index 0000000000..a4a116618b
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/usage/[[period]]/+page.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Usage } from '$lib/layout';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
+
+    $: count = data.count;
+    $: created = data.created;
+    $: read = data.read;
+    $: updated = data.updated;
+    $: deleted = data.deleted;
+</script>
+
+<Usage
+    title="Databases"
+    path={`/console/project-${$page.params.project}/databases/usage`}
+    {count}
+    {created}
+    {read}
+    {updated}
+    {deleted}
+    countMetadata={{
+        legend: 'Databases',
+        title: 'Total databases'
+    }}
+    createdMetadata={{
+        legend: 'Create',
+        title: 'Databases created'
+    }}
+    readMetadata={{
+        legend: 'Read',
+        title: 'Databases read'
+    }}
+    updatedMetadata={{
+        legend: 'Update',
+        title: 'Databases updated'
+    }}
+    deletedMetadata={{
+        legend: 'Delete',
+        title: 'Databases deleted'
+    }} />
diff --git a/src/routes/console/project-[project]/databases/usage/[[period]]/+page.ts b/src/routes/console/project-[project]/databases/usage/[[period]]/+page.ts
new file mode 100644
index 0000000000..9017a1b246
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/usage/[[period]]/+page.ts
@@ -0,0 +1,17 @@
+import type { Models } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent }) => {
+    await parent();
+    const { period } = params;
+    const response = await sdkForProject.databases.getUsage(period ?? '30d');
+
+    return {
+        count: response.databasesCount as unknown as Models.Metric[],
+        created: response.databasesCreate as unknown as Models.Metric[],
+        read: response.databasesRead as unknown as Models.Metric[],
+        updated: response.databasesUpdate as unknown as Models.Metric[],
+        deleted: response.databasesDelete as unknown as Models.Metric[]
+    };
+};
diff --git a/src/routes/console/project-[project]/functions/+layout.svelte b/src/routes/console/project-[project]/functions/+layout.svelte
index ceddf8198e..5796af77b2 100644
--- a/src/routes/console/project-[project]/functions/+layout.svelte
+++ b/src/routes/console/project-[project]/functions/+layout.svelte
@@ -1,51 +1,5 @@
-<script lang="ts">
-    import { browser } from '$app/environment';
-    import { afterNavigate } from '$app/navigation';
-    import { updateLayout } from '$lib/stores/layout';
-    import { sdkForConsole } from '$lib/stores/sdk';
-    import { onMount } from 'svelte';
-    import type { Models } from '@aw-labs/appwrite-console';
-    import { deploymentList } from './function/[function]/store';
-    import Breadcrumbs from './breadcrumbs.svelte';
-    import Header from './header.svelte';
-
-    let loaded = false;
-
-    if (browser) {
-        sdkForConsole.client.subscribe<Models.Deployment>('console', (message) => {
-            if (message.events.includes('functions.*.deployments.*.create')) {
-                deploymentList.createDeployment(message.payload);
-
-                return;
-            }
-            if (message.events.includes('functions.*.deployments.*.update')) {
-                deploymentList.updateDeployment(message.payload);
-
-                return;
-            }
-            if (message.events.includes('functions.*.deployments.*.delete')) {
-                //TODO: add delete method
-
-                return;
-            }
-        });
-    }
-    onMount(handle);
-    afterNavigate(handle);
-
-    function handle() {
-        updateLayout({
-            breadcrumb: Breadcrumbs,
-            header: Header
-        });
-        loaded = true;
-    }
-</script>
-
 <svelte:head>
     <title>Functions - Appwrite</title>
 </svelte:head>
 
-{#if loaded}
-    <slot />
-{/if}
+<slot />
diff --git a/src/routes/console/project-[project]/functions/+layout.ts b/src/routes/console/project-[project]/functions/+layout.ts
new file mode 100644
index 0000000000..12cc3f7957
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/+layout.ts
@@ -0,0 +1,12 @@
+import Breadcrumbs from './breadcrumbs.svelte';
+import Header from './header.svelte';
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = async ({ parent }) => {
+    await parent();
+
+    return {
+        header: Header,
+        breadcrumbs: Breadcrumbs
+    };
+};
diff --git a/src/routes/console/project-[project]/functions/+page.svelte b/src/routes/console/project-[project]/functions/[[page]]/+page.svelte
similarity index 73%
rename from src/routes/console/project-[project]/functions/+page.svelte
rename to src/routes/console/project-[project]/functions/[[page]]/+page.svelte
index efc48a4acb..30e19e79ec 100644
--- a/src/routes/console/project-[project]/functions/+page.svelte
+++ b/src/routes/console/project-[project]/functions/[[page]]/+page.svelte
@@ -1,32 +1,25 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { Button } from '$lib/elements/forms';
-    import { Empty, CardContainer, Pagination, Copy, GridItem1, Heading } from '$lib/components';
+    import { Empty, CardContainer, Copy, GridItem1, Heading, Pagination } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import type { Models } from '@aw-labs/appwrite-console';
-    import Create from './createFunction.svelte';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
     import { tooltip } from '$lib/actions/tooltip';
-    import { functionList } from './store';
     import { app } from '$lib/stores/app';
-    import { onMount } from 'svelte';
     import { wizard } from '$lib/stores/wizard';
     import { beforeNavigate } from '$app/navigation';
-    import { Query } from '@aw-labs/appwrite-console';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { cardLimit } from '$lib/stores/layout';
+    import Create from '../createFunction.svelte';
+    import type { PageData } from './$types';
+    import { CARD_LIMIT } from '$lib/constants';
+
+    export let data: PageData;
 
-    let search = '';
     let offset = 0;
 
     const project = $page.params.project;
 
-    let deployments: Record<string, Models.Deployment> = null;
-    onMount(async () => {
-        deployments = await functionList.getDeployments($functionList.functions);
-    });
-
     function openWizard() {
         wizard.start(Create);
     }
@@ -34,12 +27,6 @@
     beforeNavigate(() => {
         wizard.hide();
     });
-
-    $: functionList.load(
-        [Query.limit($cardLimit), Query.offset(offset), Query.orderDesc('$createdAt')],
-        search
-    );
-    $: if (search) offset = 0;
 </script>
 
 <Container>
@@ -50,11 +37,11 @@
         </Button>
     </div>
 
-    {#if $functionList?.total}
-        <CardContainer total={$functionList.total} {offset} on:click={openWizard}>
-            {#each $functionList.functions as func}
+    {#if data.functions.total}
+        <CardContainer total={data.functions.total} {offset} on:click={openWizard}>
+            {#each data.functions.functions as func}
                 <GridItem1
-                    href={`${base}/console/project-${project}/functions/function/${func.$id}`}>
+                    href={`${base}/console/project-${project}/functions/function-${func.$id}`}>
                     <svelte:fragment slot="title">
                         <div class="u-flex u-gap-32 u-cross-center">
                             <div class="avatar is-medium">
@@ -68,12 +55,12 @@
                         </div>
                     </svelte:fragment>
                     <svelte:fragment slot="status">
-                        {#if deployments && deployments[func.$id]}
+                        <!-- {#if deployments && deployments[func.$id]}
                             {deployments[func.$id].status ?? 'No deployment'}
-                        {/if}
+                        {/if} -->
                     </svelte:fragment>
                     <svelte:fragment slot="icons">
-                        {#if deployments && deployments[func.$id] && deployments[func.$id].status === 'failed'}
+                        <!-- {#if deployments && deployments[func.$id] && deployments[func.$id].status === 'failed'}
                             <li>
                                 <span
                                     class="icon-exclamation"
@@ -82,7 +69,7 @@
                                         content: 'Build error'
                                     }} />
                             </li>
-                        {/if}
+                        {/if} -->
                         {#if func.scheduleNext}
                             <li>
                                 <span
@@ -106,8 +93,12 @@
             </svelte:fragment>
         </CardContainer>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {$functionList.total}</p>
-            <Pagination limit={$cardLimit} bind:offset sum={$functionList.total} />
+            <p class="text">Total results: {data.functions.total}</p>
+            <Pagination
+                limit={CARD_LIMIT}
+                path={`/console/project-${$page.params.project}/functions`}
+                offset={data.offset}
+                sum={data.functions.total} />
         </div>
     {:else}
         <Empty isButton single on:click={openWizard}>
diff --git a/src/routes/console/project-[project]/functions/[[page]]/+page.ts b/src/routes/console/project-[project]/functions/[[page]]/+page.ts
new file mode 100644
index 0000000000..3c3b826a6a
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/[[page]]/+page.ts
@@ -0,0 +1,21 @@
+import { Query } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import { pageToOffset } from '$lib/helpers/load';
+import { CARD_LIMIT, Dependencies } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent, depends }) => {
+    await parent();
+    depends(Dependencies.FUNCTIONS);
+    const page = Number(params.page);
+    const offset = pageToOffset(page, CARD_LIMIT);
+
+    return {
+        offset,
+        functions: await sdkForProject.functions.list([
+            Query.limit(CARD_LIMIT),
+            Query.offset(offset),
+            Query.orderDesc('$createdAt')
+        ])
+    };
+};
diff --git a/src/routes/console/project-[project]/functions/breadcrumbs.svelte b/src/routes/console/project-[project]/functions/breadcrumbs.svelte
index 9259aa4f4d..65754ecd09 100644
--- a/src/routes/console/project-[project]/functions/breadcrumbs.svelte
+++ b/src/routes/console/project-[project]/functions/breadcrumbs.svelte
@@ -5,15 +5,15 @@
 
     $: breadcrumbs = [
         {
-            href: `/console/organization-${$organization.$id}`,
-            title: $organization.name
+            href: `/console/organization-${$organization?.$id}`,
+            title: $organization?.name
         },
         {
-            href: `/console/project-${$project.$id}`,
-            title: $project.name
+            href: `/console/project-${$project?.$id}`,
+            title: $project?.name
         },
         {
-            href: `/console/project-${$project.$id}/functions`,
+            href: `/console/project-${$project?.$id}/functions`,
             title: 'Functions'
         }
     ];
diff --git a/src/routes/console/project-[project]/functions/createFunction.svelte b/src/routes/console/project-[project]/functions/createFunction.svelte
index b18299e61d..96a756337f 100644
--- a/src/routes/console/project-[project]/functions/createFunction.svelte
+++ b/src/routes/console/project-[project]/functions/createFunction.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { functionList } from './store';
     import { sdkForProject } from '$lib/stores/sdk';
     import { onDestroy } from 'svelte';
     import { addNotification } from '$lib/stores/notifications';
@@ -12,9 +11,15 @@
     import Step5 from './wizard/step5.svelte';
     import { createFunction } from './wizard/store';
     import type { WizardStepsType } from '$lib/layout/wizard.svelte';
-    import { Query } from '@aw-labs/appwrite-console';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
 
-    const create = async () => {
+    async function onFinish() {
+        console.log(2);
+        await invalidate(Dependencies.FUNCTIONS);
+    }
+    async function create() {
+        console.log(1);
         try {
             const response = await sdkForProject.functions.create(
                 $createFunction.id ?? 'unique()',
@@ -29,11 +34,12 @@
                 async (v) =>
                     await sdkForProject.functions.createVariable(response.$id, v.key, v.value)
             );
+            await invalidate(Dependencies.FUNCTIONS);
+
             addNotification({
                 message: 'Function has been created',
                 type: 'success'
             });
-            functionList.load([Query.limit(6), Query.offset(0), Query.orderDesc('$createdAt')]);
             wizard.hide();
         } catch (error) {
             addNotification({
@@ -41,7 +47,7 @@
                 type: 'error'
             });
         }
-    };
+    }
 
     onDestroy(() => {
         $createFunction = {
@@ -83,4 +89,4 @@
     });
 </script>
 
-<Wizard title="Create Function" steps={stepsComponents} on:finish={create} />
+<Wizard title="Create Function" steps={stepsComponents} on:finish={create} on:exit={onFinish} />
diff --git a/src/routes/console/project-[project]/functions/createVariable.svelte b/src/routes/console/project-[project]/functions/createVariable.svelte
index 8c0ea8700c..2654e31c6d 100644
--- a/src/routes/console/project-[project]/functions/createVariable.svelte
+++ b/src/routes/console/project-[project]/functions/createVariable.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { Modal } from '$lib/components';
     import { InputText, InputPassword, FormList } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
     import type { Models } from '@aw-labs/appwrite-console';
 
     export let showCreate = false;
-
     export let selectedVar: Partial<Models.Variable> = null;
 
     let pair = {
@@ -27,31 +26,29 @@
     };
 </script>
 
-<Form noStyle noMargin on:submit={handleVariable}>
-    <Modal bind:show={showCreate} size="big">
-        <svelte:fragment slot="header">
-            {selectedVar ? 'Update' : 'Create'} Variable
-        </svelte:fragment>
-        <FormList>
-            <InputText
-                id="key"
-                label="Key"
-                placeholder="Enter key"
-                bind:value={pair.key}
-                required
-                autofocus />
-            <InputPassword
-                id="value"
-                label="Value"
-                minlength={0}
-                showPasswordButton
-                placeholder="Enter value"
-                bind:value={pair.value}
-                required />
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
-            <Button submit>{selectedVar ? 'Update' : 'Create'}</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal bind:show={showCreate} on:submit={handleVariable} size="big">
+    <svelte:fragment slot="header">
+        {selectedVar ? 'Update' : 'Create'} Variable
+    </svelte:fragment>
+    <FormList>
+        <InputText
+            id="key"
+            label="Key"
+            placeholder="Enter key"
+            bind:value={pair.key}
+            required
+            autofocus />
+        <InputPassword
+            id="value"
+            label="Value"
+            minlength={0}
+            showPasswordButton
+            placeholder="Enter value"
+            bind:value={pair.value}
+            required />
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
+        <Button submit>{selectedVar ? 'Update' : 'Create'}</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/+layout.svelte b/src/routes/console/project-[project]/functions/function-[function]/+layout.svelte
new file mode 100644
index 0000000000..e8b8dae48d
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function-[function]/+layout.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+    import { execute } from './store';
+    import Execute from './execute.svelte';
+</script>
+
+<slot />
+
+<Execute selectedFunction={$execute} />
diff --git a/src/routes/console/project-[project]/functions/function-[function]/+layout.ts b/src/routes/console/project-[project]/functions/function-[function]/+layout.ts
new file mode 100644
index 0000000000..d91cd63008
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function-[function]/+layout.ts
@@ -0,0 +1,21 @@
+import { sdkForProject } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import type { LayoutLoad } from './$types';
+import Breadcrumbs from './breadcrumbs.svelte';
+import Header from './header.svelte';
+import { error } from '@sveltejs/kit';
+
+export const load: LayoutLoad = async ({ params, parent, depends }) => {
+    await parent();
+    depends(Dependencies.FUNCTION);
+
+    try {
+        return {
+            header: Header,
+            breadcrumbs: Breadcrumbs,
+            function: await sdkForProject.functions.get(params.function)
+        };
+    } catch (e) {
+        throw error(e.code, e.message);
+    }
+};
diff --git a/src/routes/console/project-[project]/functions/function/[function]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.svelte
similarity index 85%
rename from src/routes/console/project-[project]/functions/function/[function]/+page.svelte
rename to src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.svelte
index aee45511a4..ab53276489 100644
--- a/src/routes/console/project-[project]/functions/function/[function]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
-    import { page } from '$app/stores';
     import { Button } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
     import {
         CardGrid,
-        Pagination,
         Copy,
         DropList,
         DropListItem,
         Empty,
         Status,
-        Heading
+        Heading,
+        Pagination
     } from '$lib/components';
     import {
         Table,
@@ -21,22 +20,26 @@
         TableCell,
         TableCellText
     } from '$lib/elements/table';
-    import { deploymentList, execute, func } from './store';
+    import { execute, func } from '../store';
     import { Container } from '$lib/layout';
-    import Create from './create.svelte';
     import { base } from '$app/paths';
     import { app } from '$lib/stores/app';
-    import { pageLimit } from '$lib/stores/layout';
-    import type { Models } from '@aw-labs/appwrite-console';
-    import Delete from './delete.svelte';
     import { calculateSize } from '$lib/helpers/sizeConvertion';
-    import Activate from './activate.svelte';
-    import { Query } from '@aw-labs/appwrite-console';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { log } from '$lib/stores/logs';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import type { PageData } from './$types';
+    import Delete from '../delete.svelte';
+    import Create from '../create.svelte';
+    import Activate from '../activate.svelte';
+    import { browser } from '$app/environment';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { page } from '$app/stores';
+
+    export let data: PageData;
 
-    let search = '';
-    let offset = 0;
     let showCreate = false;
     let showDropdown = [];
     let showDelete = false;
@@ -44,27 +47,31 @@
 
     let selectedDeployment: Models.Deployment = null;
 
-    const functionId = $page.params.function;
-
     const handleActivate = () => {
-        func.load(functionId);
+        invalidate(Dependencies.DEPLOYMENTS);
     };
 
-    function loadDeployments() {
-        deploymentList.load(
-            functionId,
-            [Query.offset(offset), Query.limit($pageLimit), Query.orderDesc('$createdAt')],
-            search
-        );
-    }
+    $: activeDeployment = data.deployments.deployments.find((d) => d.$id === $func?.deployment);
+
+    if (browser) {
+        sdkForConsole.client.subscribe<Models.Deployment>('console', (message) => {
+            if (message.events.includes('functions.*.deployments.*.create')) {
+                invalidate(Dependencies.DEPLOYMENTS);
+
+                return;
+            }
+            if (message.events.includes('functions.*.deployments.*.update')) {
+                invalidate(Dependencies.DEPLOYMENTS);
 
-    $: deploymentList.load(
-        functionId,
-        [Query.offset(offset), Query.limit($pageLimit), Query.orderDesc('$createdAt')],
-        search
-    );
-    $: if (search) offset = 0;
-    $: activeDeployment = $deploymentList?.deployments?.find((d) => d.$id === $func?.deployment);
+                return;
+            }
+            if (message.events.includes('functions.*.deployments.*.delete')) {
+                invalidate(Dependencies.DEPLOYMENTS);
+
+                return;
+            }
+        });
+    }
 </script>
 
 <Container>
@@ -75,7 +82,7 @@
             <span class="text">Create deployment</span>
         </Button>
     </div>
-    {#if $deploymentList?.total}
+    {#if data.deployments.total}
         <div class="common-section">
             <Heading tag="h3" size="7">Active</Heading>
         </div>
@@ -154,7 +161,7 @@
                 <TableCellHead width={25} />
             </TableHeader>
             <TableBody>
-                {#each $deploymentList.deployments as deployment, index}
+                {#each data.deployments.deployments as deployment, index}
                     {#if deployment.$id !== $func.deployment}
                         <TableRow>
                             <TableCell title="Deployment ID">
@@ -244,12 +251,16 @@
         </Empty>
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
-        <p class="text">Total results: {$deploymentList?.total}</p>
-        <Pagination limit={$pageLimit} bind:offset sum={$deploymentList?.total} />
+        <p class="text">Total results: {data.deployments.total}</p>
+        <Pagination
+            limit={PAGE_LIMIT}
+            path={`/console/project-${$page.params.project}/functions/function-${$page.params.function}`}
+            offset={data.offset}
+            sum={data.deployments.total} />
     </div>
 </Container>
 
-<Create bind:showCreate on:created={loadDeployments} />
+<Create bind:showCreate />
 
 {#if selectedDeployment}
     <Delete {selectedDeployment} bind:showDelete />
diff --git a/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.ts b/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.ts
new file mode 100644
index 0000000000..90964b6730
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function-[function]/[[page]]/+page.ts
@@ -0,0 +1,21 @@
+import { Query } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import { pageToOffset } from '$lib/helpers/load';
+import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent, depends }) => {
+    await parent();
+    depends(Dependencies.DEPLOYMENTS);
+    const page = Number(params.page);
+    const offset = pageToOffset(page, PAGE_LIMIT);
+
+    return {
+        offset,
+        deployments: await sdkForProject.functions.listDeployments(params.function, [
+            Query.limit(PAGE_LIMIT),
+            Query.offset(offset),
+            Query.orderDesc('$createdAt')
+        ])
+    };
+};
diff --git a/src/routes/console/project-[project]/functions/function/[function]/activate.svelte b/src/routes/console/project-[project]/functions/function-[function]/activate.svelte
similarity index 67%
rename from src/routes/console/project-[project]/functions/function/[function]/activate.svelte
rename to src/routes/console/project-[project]/functions/function-[function]/activate.svelte
index deeb750ac1..0313ab76c7 100644
--- a/src/routes/console/project-[project]/functions/function/[function]/activate.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/activate.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
@@ -32,13 +32,11 @@
     };
 </script>
 
-<Form noMargin on:submit={handleSubmit}>
-    <Modal bind:show={showActivate}>
-        <svelte:fragment slot="header">Activate Deployment</svelte:fragment>
-        <p>Are you sure you want to activate this deployment?</p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showActivate = false)}>Cancel</Button>
-            <Button secondary submit>Activate</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal bind:show={showActivate} on:submit={handleSubmit}>
+    <svelte:fragment slot="header">Activate Deployment</svelte:fragment>
+    <p>Are you sure you want to activate this deployment?</p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showActivate = false)}>Cancel</Button>
+        <Button secondary submit>Activate</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/breadcrumbs.svelte b/src/routes/console/project-[project]/functions/function-[function]/breadcrumbs.svelte
new file mode 100644
index 0000000000..d0af4e3ca0
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function-[function]/breadcrumbs.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../../store';
+    import { func } from './store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization?.$id}`,
+            title: $organization?.name
+        },
+        {
+            href: `/console/project-${$project?.$id}`,
+            title: $project?.name
+        },
+        {
+            href: `/console/project-${$project?.$id}/functions`,
+            title: 'Functions'
+        },
+        {
+            href: `/console/project-${$project?.$id}/functions/function-${$func?.$id}`,
+            title: $func?.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/functions/function-[function]/create.svelte b/src/routes/console/project-[project]/functions/function-[function]/create.svelte
new file mode 100644
index 0000000000..d066395304
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function-[function]/create.svelte
@@ -0,0 +1,143 @@
+<script lang="ts">
+    import { InputChoice, Button, InputText, InputFile, FormList } from '$lib/elements/forms';
+    import { Modal, Collapsible, CollapsibleItem, Tabs, Tab, Code } from '$lib/components';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { createEventDispatcher } from 'svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { page } from '$app/stores';
+    import Github from '$lib/images/github-illustration.svg';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+
+    export let showCreate = false;
+
+    enum Mode {
+        CLI,
+        Github,
+        Manual
+    }
+    let mode: Mode = Mode.CLI;
+    let entrypoint: string;
+    let active: boolean;
+    let files: FileList;
+
+    const functionId = $page.params.function;
+    const dispatch = createEventDispatcher();
+
+    const create = async () => {
+        try {
+            await sdkForProject.functions.createDeployment(
+                functionId,
+                entrypoint,
+                files[0],
+                active
+            );
+            await invalidate(Dependencies.FUNCTION);
+            files = entrypoint = active = null;
+            showCreate = false;
+            dispatch('created');
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+
+    const codeSnippets = {
+        Unix: {
+            code: `appwrite functions createDeployment \\ 
+    --functionId=${functionId} \\ 
+    --entrypoint='index.js' \\ 
+    --code="." \\ 
+    --activate=true`,
+            language: 'bash'
+        },
+
+        CMD: {
+            code: `appwrite functions createDeployment ^
+    --functionId=${functionId} ^
+    --entrypoint='index.js' ^
+    --code="." ^
+    --activate=true`,
+            language: 'CMD'
+        },
+        PowerShell: {
+            code: `appwrite functions createDeployment ,
+    --functionId=${functionId} ,
+    --entrypoint='index.js' ,
+    --code="." ,
+    --activate=true`,
+            language: 'PowerShell'
+        }
+    };
+</script>
+
+<Modal size="big" bind:show={showCreate} on:submit={create}>
+    <svelte:fragment slot="header">Create Deployment</svelte:fragment>
+    <Tabs>
+        <Tab on:click={() => (mode = Mode.CLI)} selected={mode === Mode.CLI}>CLI</Tab>
+        <Tab on:click={() => (mode = Mode.Github)} selected={mode === Mode.Github}>
+            GitHub - Soon!
+        </Tab>
+        <Tab on:click={() => (mode = Mode.Manual)} selected={mode === Mode.Manual}>Manual</Tab>
+    </Tabs>
+    {#if mode === Mode.CLI}
+        <p class="text">
+            You can deploy your function from the Appwrite CLI using Unix, CMD, or PowerShell. Check
+            out our Documentation to learn more about <a
+                href="https://appwrite.io/docs/functions#deployFunction"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="link">deploying your functions</a
+            >, or how to install and use the
+            <a href="#/" target="_blank" rel="noopener noreferrer" class="link">Appwrite CLI</a>.
+        </p>
+        <Collapsible>
+            {#each ['Unix', 'CMD', 'PowerShell'] as category}
+                <CollapsibleItem>
+                    <svelte:fragment slot="title">{category}</svelte:fragment>
+                    <Code
+                        withLineNumbers
+                        withCopy
+                        language="sh"
+                        label={codeSnippets[category].language}
+                        code={codeSnippets[category].code} />
+                </CollapsibleItem>
+            {/each}
+        </Collapsible>
+    {:else if mode === Mode.Github}
+        <div class="common-section grid-1-2">
+            <div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16">
+                <img src={Github} alt="github" />
+            </div>
+            <div class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-24">
+                <h3 class="body-text-1">Coming Soon!</h3>
+                <p>
+                    Creating deployments will be easier than ever with our upcoming Git Integration.
+                    Just set up a repository and we’ll do the rest.
+                </p>
+            </div>
+        </div>
+    {:else if mode === Mode.Manual}
+        <FormList>
+            <InputText
+                label="Entrypoint"
+                placeholder="main.py"
+                id="entrypoint"
+                bind:value={entrypoint}
+                required />
+            <InputFile label="Gzipped code (tar.gz)" bind:files />
+            <InputChoice label="Activate Deployment after build" id="activate" bind:value={active}>
+                This deployment will be activated after the build is completed.</InputChoice>
+        </FormList>
+    {/if}
+    <svelte:fragment slot="footer">
+        {#if mode === Mode.Manual}
+            <Button secondary on:click={() => (showCreate = false)}>Close</Button>
+            <Button submit>Create</Button>
+        {:else}
+            <Button secondary on:click={() => (showCreate = false)}>Close</Button>
+        {/if}
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/functions/function/[function]/delete.svelte b/src/routes/console/project-[project]/functions/function-[function]/delete.svelte
similarity index 53%
rename from src/routes/console/project-[project]/functions/function/[function]/delete.svelte
rename to src/routes/console/project-[project]/functions/function-[function]/delete.svelte
index c4eaa6e69a..78fa59a2a7 100644
--- a/src/routes/console/project-[project]/functions/function/[function]/delete.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/delete.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
+    import { invalidate } from '$app/navigation';
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
@@ -17,14 +16,12 @@
                 selectedDeployment.resourceId,
                 selectedDeployment.$id
             );
+            await invalidate(Dependencies.FUNCTION);
             showDelete = false;
             addNotification({
                 type: 'success',
                 message: `Deployment has been deleted`
             });
-            await goto(
-                `${base}/console/project-${$page.params.project}/functions/${selectedDeployment.resourceId}`
-            );
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -34,13 +31,11 @@
     };
 </script>
 
-<Form noStyle noMargin on:submit={handleSubmit}>
-    <Modal bind:show={showDelete} warning>
-        <svelte:fragment slot="header">Delete Deployment</svelte:fragment>
-        <p>Are you sure you want to delete this deployment?</p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal bind:show={showDelete} on:submit={handleSubmit} warning>
+    <svelte:fragment slot="header">Delete Deployment</svelte:fragment>
+    <p>Are you sure you want to delete this deployment?</p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/functions/function/[function]/execute.svelte b/src/routes/console/project-[project]/functions/function-[function]/execute.svelte
similarity index 59%
rename from src/routes/console/project-[project]/functions/function/[function]/execute.svelte
rename to src/routes/console/project-[project]/functions/function-[function]/execute.svelte
index 4bd3d0e011..093cd4e3a6 100644
--- a/src/routes/console/project-[project]/functions/function/[function]/execute.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/execute.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Code, Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { InputTextarea, FormList, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
@@ -48,21 +48,19 @@
     }
 </script>
 
-<Form noStyle noMargin on:submit={handleSubmit}>
-    <Modal bind:show size="big" on:close={close}>
-        <svelte:fragment slot="header">Execute Function</svelte:fragment>
-        <FormList>
-            <InputTextarea bind:value={data} id="data" label="Custom data (optional)" />
-            <InputChoice type="switchbox" id="json" label="Show example JSON" bind:value={showJson}>
-                Here's an example of some custom data.</InputChoice>
-            {#if showJson}
-                <Code noMargin language="json" withLineNumbers code={example} />
-            {/if}
-        </FormList>
+<Modal bind:show size="big" on:submit={handleSubmit} on:close={close}>
+    <svelte:fragment slot="header">Execute Function</svelte:fragment>
+    <FormList>
+        <InputTextarea bind:value={data} id="data" label="Custom data (optional)" />
+        <InputChoice type="switchbox" id="json" label="Show example JSON" bind:value={showJson}>
+            Here's an example of some custom data.</InputChoice>
+        {#if showJson}
+            <Code noMargin language="json" withLineNumbers code={example} />
+        {/if}
+    </FormList>
 
-        <svelte:fragment slot="footer">
-            <Button text on:click={close}>Cancel</Button>
-            <Button submit>Execute Now</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+    <svelte:fragment slot="footer">
+        <Button text on:click={close}>Cancel</Button>
+        <Button submit>Execute Now</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/functions/function/[function]/executions/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.svelte
similarity index 82%
rename from src/routes/console/project-[project]/functions/function/[function]/executions/+page.svelte
rename to src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.svelte
index af1e706041..828ecc3899 100644
--- a/src/routes/console/project-[project]/functions/function/[function]/executions/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { pageLimit } from '$lib/stores/layout';
-    import { executionList } from './store';
     import { Container } from '$lib/layout';
     import { Button } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
-    import { Pagination, Copy, Empty, Status, Heading } from '$lib/components';
+    import { Copy, Empty, Status, Heading, Pagination } from '$lib/components';
     import {
         Table,
         TableHeader,
@@ -17,15 +14,13 @@
     } from '$lib/elements/table';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { calculateTime } from '$lib/helpers/timeConversion';
-    import { Query } from '@aw-labs/appwrite-console';
     import { log } from '$lib/stores/logs';
-    import { func } from '../store';
-
-    let search = '';
-    let offset = 0;
-    const functionId = $page.params.function;
+    import { func } from '../../store';
+    import type { PageData } from './$types';
+    import { PAGE_LIMIT } from '$lib/constants';
+    import { page } from '$app/stores';
 
-    $: executionList.load(functionId, [Query.offset(offset), Query.limit($pageLimit)], search);
+    export let data: PageData;
 
     //TODO: add optional hover state to rows
 </script>
@@ -34,7 +29,7 @@
     <div class="u-flex u-gap-12 common-section u-main-space-between">
         <Heading tag="h2" size="5">Logs</Heading>
     </div>
-    {#if $executionList?.total}
+    {#if data.executions.total}
         <Table>
             <TableHeader>
                 <TableCellHead>Deployment ID</TableCellHead>
@@ -45,7 +40,7 @@
                 <TableCellHead width={100}>Build Time</TableCellHead>
             </TableHeader>
             <TableBody>
-                {#each $executionList.executions as execution}
+                {#each data.executions.executions as execution}
                     <TableRowButton
                         on:click={() => {
                             $log.show = true;
@@ -86,7 +81,11 @@
         </Empty>
     {/if}
     <div class="u-flex u-margin-block-start-32 u-main-space-between">
-        <p class="text">Total results: {$executionList?.total}</p>
-        <Pagination limit={$pageLimit} bind:offset sum={$executionList?.total} />
+        <p class="text">Total results: {data.executions.total}</p>
+        <Pagination
+            limit={PAGE_LIMIT}
+            path={`/console/project-${$page.params.project}/functions/function-${$page.params.function}/executions`}
+            offset={data.offset}
+            sum={data.executions.total} />
     </div>
 </Container>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.ts b/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.ts
new file mode 100644
index 0000000000..23c185827e
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function-[function]/executions/[[page]]/+page.ts
@@ -0,0 +1,20 @@
+import { Query } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import { pageToOffset } from '$lib/helpers/load';
+import { PAGE_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent }) => {
+    await parent();
+    const page = Number(params.page);
+    const offset = pageToOffset(page, PAGE_LIMIT);
+
+    return {
+        offset,
+        executions: await sdkForProject.functions.listExecutions(params.function, [
+            Query.limit(PAGE_LIMIT),
+            Query.offset(offset),
+            Query.orderDesc('$createdAt')
+        ])
+    };
+};
diff --git a/src/routes/console/project-[project]/functions/function/[function]/header.svelte b/src/routes/console/project-[project]/functions/function-[function]/header.svelte
similarity index 64%
rename from src/routes/console/project-[project]/functions/function/[function]/header.svelte
rename to src/routes/console/project-[project]/functions/function-[function]/header.svelte
index 660f7cd930..19c0de0c67 100644
--- a/src/routes/console/project-[project]/functions/function/[function]/header.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/header.svelte
@@ -2,16 +2,18 @@
     import { page } from '$app/stores';
     import { Copy, Tab, Tabs } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { Cover } from '$lib/layout';
+    import { isTabSelected } from '$lib/helpers/load';
+    import { Cover, CoverTitle } from '$lib/layout';
     import { func } from './store';
 
     const projectId = $page.params.project;
     const functionId = $page.params.function;
-    const path = `/console/project-${projectId}/functions/function/${functionId}`;
+    const path = `/console/project-${projectId}/functions/function-${functionId}`;
     const tabs = [
         {
             href: path,
-            title: 'Deployments'
+            title: 'Deployments',
+            hasChildren: true
         },
         {
             href: `${path}/usage`,
@@ -19,7 +21,8 @@
         },
         {
             href: `${path}/executions`,
-            title: 'Executions'
+            title: 'Executions',
+            hasChildren: true
         },
         {
             href: `${path}/settings`,
@@ -30,16 +33,10 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <a
-            class="back-button"
-            href={`/console/project-${projectId}/functions`}
-            aria-label="page back">
-            <span class="icon-cheveron-left" aria-hidden="true" />
-        </a>
-        <h1 class="heading-level-4">
-            <span class="text">{$func.name}</span>
-        </h1>
-        <Copy value={$func.$id}>
+        <CoverTitle href={`/console/project-${projectId}/functions`}>
+            {$func?.name}
+        </CoverTitle>
+        <Copy value={$func?.$id}>
             <Pill button>
                 <span class="icon-duplicate" aria-hidden="true" />
                 ID Details
@@ -49,7 +46,7 @@
 
     <Tabs>
         {#each tabs as tab}
-            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
                 {tab.title}
             </Tab>
         {/each}
diff --git a/src/routes/console/project-[project]/functions/function/[function]/settings/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
similarity index 91%
rename from src/routes/console/project-[project]/functions/function/[function]/settings/+page.svelte
rename to src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
index 9c4b3410bd..80841688b4 100644
--- a/src/routes/console/project-[project]/functions/function/[function]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
@@ -19,16 +19,20 @@
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
     import type { Models } from '@aw-labs/appwrite-console';
-    import Variable from '../../../createVariable.svelte';
+    import Variable from '../../createVariable.svelte';
     import Upload from './uploadVariables.svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { variableList } from '../../../store';
     import { Permissions } from '$lib/components/permissions';
     import { difference } from '$lib/helpers/array';
     import TableList from '$lib/elements/table/tableList.svelte';
     import { TableCell, TableCellText } from '$lib/elements/table';
     import Heading from '$lib/components/heading.svelte';
     import { writable, type Writable } from 'svelte/store';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
 
     const functionId = $page.params.function;
     let showDelete = false;
@@ -48,10 +52,6 @@
     let areEventsDisabled = true;
 
     onMount(async () => {
-        if ($func?.$id !== functionId) {
-            await func.load(functionId);
-        }
-        await variableList.load(functionId);
         timeout ??= $func.timeout;
         functionName ??= $func.name;
         functionSchedule ??= $func.schedule;
@@ -62,7 +62,7 @@
     async function updateName() {
         try {
             await sdkForProject.functions.update(functionId, functionName, $func.execute);
-            $func.name = functionName;
+            invalidate(Dependencies.FUNCTION);
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
@@ -74,10 +74,11 @@
             });
         }
     }
+
     async function updatePermissions() {
         try {
             await sdkForProject.functions.update(functionId, $func.name, permissions);
-            $func.execute = permissions;
+            invalidate(Dependencies.FUNCTION);
             addNotification({
                 message: 'Permissions have been updated',
                 type: 'success'
@@ -89,6 +90,7 @@
             });
         }
     }
+
     async function updateEvents() {
         try {
             await sdkForProject.functions.update(
@@ -97,7 +99,7 @@
                 $func.execute,
                 Array.from($eventSet)
             );
-            $func.events = Array.from($eventSet);
+            invalidate(Dependencies.FUNCTION);
             addNotification({
                 message: 'Permissions have been updated',
                 type: 'success'
@@ -120,7 +122,7 @@
                 functionSchedule,
                 timeout
             );
-            $func.schedule = functionSchedule;
+            invalidate(Dependencies.FUNCTION);
 
             addNotification({
                 type: 'success',
@@ -157,17 +159,17 @@
         }
     }
 
-    async function handleVariableCreated(dispatchedData: CustomEvent) {
-        const variable = dispatchedData.detail;
+    async function handleVariableCreated(event: CustomEvent<Models.Variable>) {
+        const variable = event.detail;
 
         try {
-            await variableList.create(functionId, variable.key, variable.value);
+            await sdkForProject.functions.createVariable(functionId, variable.key, variable.value);
             showVariablesModal = false;
+            invalidate(Dependencies.VARIABLES);
             addNotification({
                 type: 'success',
                 message: `${$func.name} variables have been updated`
             });
-            variableList.load(functionId);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -176,17 +178,22 @@
         }
     }
 
-    async function handleVariableUpdated(dispatcedData: CustomEvent) {
-        const variable = dispatcedData.detail;
+    async function handleVariableUpdated(event: CustomEvent<Models.Variable>) {
+        const variable = event.detail;
         try {
-            await variableList.update(functionId, variable.$id, variable.key, variable.value);
+            await sdkForProject.functions.updateVariable(
+                functionId,
+                variable.$id,
+                variable.key,
+                variable.value
+            );
             selectedVar = null;
             showVariablesModal = false;
+            invalidate(Dependencies.VARIABLES);
             addNotification({
                 type: 'success',
                 message: `${$func.name} variables have been updated`
             });
-            variableList.load(functionId);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -194,14 +201,14 @@
             });
         }
     }
-    async function handleVariableDeleted(variableId: string) {
+    async function handleVariableDeleted(variable: Models.Variable) {
         try {
-            await variableList.delete(functionId, variableId);
+            await sdkForProject.functions.deleteVariable(variable.functionId, variable.$id);
+            invalidate(Dependencies.VARIABLES);
             addNotification({
                 type: 'success',
                 message: `Variable has been deleted`
             });
-            variableList.load(functionId);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -211,13 +218,11 @@
     }
 
     function downloadVariables() {
-        if ($variableList?.total) {
-            let data = $variableList.variables
-                .map((variable) => {
-                    return `${variable.key}=${variable.value}`;
-                })
+        if (data.variables.total) {
+            let content = data.variables.variables
+                .map((variable) => `${variable.key}=${variable.value}`)
                 .join('\n');
-            const file = new File([data], '.env', {
+            const file = new File([content], '.env', {
                 type: 'application/x-envoy'
             });
 
@@ -284,11 +289,7 @@
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
-            <Button
-                secondary
-                on:click={() => {
-                    $execute = $func;
-                }}>Execute now</Button>
+            <Button secondary on:click={() => ($execute = $func)}>Execute now</Button>
         </svelte:fragment>
     </CardGrid>
 
@@ -455,8 +456,8 @@
                     </tr>
                 </thead>
                 <tbody class="table-tbody">
-                    {#if $variableList?.total}
-                        {#each $variableList.variables as variable, i}
+                    {#if data.variables.total}
+                        {#each data.variables.variables as variable, i}
                             <tr class="table-row">
                                 <td class="table-col" data-title="Key">
                                     <span class="text">{variable.key}</span>
@@ -519,7 +520,7 @@
                                             <DropListItem
                                                 icon="trash"
                                                 on:click={async () => {
-                                                    handleVariableDeleted(variable.$id);
+                                                    handleVariableDeleted(variable);
                                                     showVariablesDropdown[i] = false;
                                                 }}>
                                                 Delete
@@ -568,13 +569,10 @@
 </Container>
 
 <Delete bind:showDelete />
-{#if showVariablesModal}
-    <Variable
-        bind:showCreate={showVariablesModal}
-        bind:selectedVar
-        on:created={handleVariableCreated}
-        on:updated={handleVariableUpdated} />
-{/if}
-
+<Variable
+    bind:selectedVar
+    bind:showCreate={showVariablesModal}
+    on:created={handleVariableCreated}
+    on:updated={handleVariableUpdated} />
 <Upload bind:show={showVariablesUpload} on:uploaded={handleVariableCreated} />
 <EventModal bind:show={showEvents} on:created={handleEvent} />
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.ts b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.ts
new file mode 100644
index 0000000000..897dbb0586
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.ts
@@ -0,0 +1,12 @@
+import { sdkForProject } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent, depends }) => {
+    await parent();
+    depends(Dependencies.VARIABLES);
+
+    return {
+        variables: await sdkForProject.functions.listVariables(params.function)
+    };
+};
diff --git a/src/routes/console/project-[project]/functions/function/[function]/settings/delete.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/delete.svelte
similarity index 61%
rename from src/routes/console/project-[project]/functions/function/[function]/settings/delete.svelte
rename to src/routes/console/project-[project]/functions/function-[function]/settings/delete.svelte
index 854459e132..1ffb3d806f 100644
--- a/src/routes/console/project-[project]/functions/function/[function]/settings/delete.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/delete.svelte
@@ -3,7 +3,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
 
@@ -28,16 +28,14 @@
     };
 </script>
 
-<Form noMargin on:submit={handleSubmit}>
-    <Modal bind:show={showDelete} warning>
-        <svelte:fragment slot="header">Delete Function</svelte:fragment>
-        <p>
-            Are you sure you want to delete this function and all associated deployments from your
-            project?
-        </p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal bind:show={showDelete} on:submit={handleSubmit} warning>
+    <svelte:fragment slot="header">Delete Function</svelte:fragment>
+    <p>
+        Are you sure you want to delete this function and all associated deployments from your
+        project?
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/functions/function/[function]/settings/uploadVariables.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte
similarity index 61%
rename from src/routes/console/project-[project]/functions/function/[function]/settings/uploadVariables.svelte
rename to src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte
index d92a4b18f5..5c61222359 100644
--- a/src/routes/console/project-[project]/functions/function/[function]/settings/uploadVariables.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Modal } from '$lib/components';
-    import { Button, Form, InputFile } from '$lib/elements/forms';
+    import { Dependencies } from '$lib/constants';
+    import { Button, InputFile } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
-    import { variableList } from '../../../store';
 
     export let show = false;
+
     const dispatch = createEventDispatcher();
 
     const functionId = $page.params.function;
@@ -17,7 +20,12 @@
             const variables = await parseFile(files[0]);
             for (const variable of variables) {
                 try {
-                    await variableList.create(functionId, variable.key, variable.value);
+                    await sdkForProject.functions.createVariable(
+                        functionId,
+                        variable.key,
+                        variable.value
+                    );
+                    invalidate(Dependencies.VARIABLES);
                     addNotification({
                         type: 'success',
                         message: 'Variable uploaded'
@@ -51,19 +59,16 @@
     }
 </script>
 
-<Form noStyle noMargin on:submit={handleSubmit}>
-    <Modal bind:show>
-        <svelte:fragment slot="header">Upload Variables</svelte:fragment>
-        <p>
-            Upload multiple variables via a .env file that will be passed to your function at
-            runtime.
-        </p>
+<Modal bind:show on:submit={handleSubmit}>
+    <svelte:fragment slot="header">Upload Variables</svelte:fragment>
+    <p>
+        Upload multiple variables via a .env file that will be passed to your function at runtime.
+    </p>
 
-        <InputFile bind:files label="Attach a file" />
+    <InputFile bind:files label="Attach a file" />
 
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (show = false)}>Cancel</Button>
-            <Button submit>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button submit>Create</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/store.ts b/src/routes/console/project-[project]/functions/function-[function]/store.ts
new file mode 100644
index 0000000000..726e6cd0e2
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function-[function]/store.ts
@@ -0,0 +1,6 @@
+import { page } from '$app/stores';
+import { derived, writable, type Writable } from 'svelte/store';
+import type { Models } from '@aw-labs/appwrite-console';
+
+export const func = derived(page, ($page) => $page.data.function);
+export const execute: Writable<Models.Function> = writable();
diff --git a/src/routes/console/project-[project]/functions/function/[function]/usage/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
similarity index 60%
rename from src/routes/console/project-[project]/functions/function/[function]/usage/+page.svelte
rename to src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
index c510d9e8e4..628eaf11e8 100644
--- a/src/routes/console/project-[project]/functions/function/[function]/usage/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
@@ -1,36 +1,36 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { functionUsage } from '../store';
     import { Container } from '$lib/layout';
-    import type { UsagePeriods } from '$lib/layout/usage.svelte';
-    import { Card, DropTabs, DropTabsItem, Heading } from '$lib/components';
-    import type { Models } from '@aw-labs/appwrite-console';
-
-    const functionId = $page.params.function;
+    import { Card, DropListLink, DropTabs, Heading } from '$lib/components';
     import { last } from '$lib/layout/usage.svelte';
     import { BarChart } from '$lib/charts';
-    let range: UsagePeriods = '30d';
+    import { page } from '$app/stores';
+    import type { PageData } from './$types';
 
-    $: functionUsage.load(functionId, range);
+    export let data: PageData;
 
-    // TODO: metric type is wrong
-    $: count = $functionUsage?.executionsTotal as unknown as Models.Metric[];
-    $: errors = $functionUsage?.buildsFailure as unknown as Models.Metric[];
+    $: count = data.count;
+    $: errors = data.errors;
 </script>
 
 <Container>
     <div class="u-flex u-main-space-between common-section">
         <Heading tag="h2" size="5">Functions</Heading>
         <DropTabs>
-            <DropTabsItem on:click={() => (range = '24h')} disabled={range === '24h'}>
+            <DropListLink
+                href={`/console/project-${data.project.$id}/functions/function-${data.function.$id}/usage/24h`}
+                disabled={($page.params.period ?? '24h') === '24h'}>
                 24h
-            </DropTabsItem>
-            <DropTabsItem on:click={() => (range = '30d')} disabled={range === '30d'}>
+            </DropListLink>
+            <DropListLink
+                href={`/console/project-${data.project.$id}/functions/function-${data.function.$id}/usage/30d`}
+                disabled={$page.params.period === '30d'}>
                 30d
-            </DropTabsItem>
-            <DropTabsItem on:click={() => (range = '90d')} disabled={range === '90d'}>
+            </DropListLink>
+            <DropListLink
+                href={`/console/project-${data.project.$id}/functions/function-${data.function.$id}/usage/90d`}
+                disabled={$page.params.period === '90d'}>
                 90d
-            </DropTabsItem>
+            </DropListLink>
         </DropTabs>
     </div>
     {#if count}
diff --git a/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.ts b/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.ts
new file mode 100644
index 0000000000..fcba697b3b
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.ts
@@ -0,0 +1,16 @@
+import type { Models } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent }) => {
+    await parent();
+    const response = await sdkForProject.functions.getFunctionUsage(
+        params.function,
+        params.period ?? '30d'
+    );
+
+    return {
+        count: response.executionsTotal as unknown as Models.Metric[],
+        errors: response.buildsFailure as unknown as Models.Metric[]
+    };
+};
diff --git a/src/routes/console/project-[project]/functions/function/[function]/+layout.svelte b/src/routes/console/project-[project]/functions/function/[function]/+layout.svelte
deleted file mode 100644
index 13c8951d7d..0000000000
--- a/src/routes/console/project-[project]/functions/function/[function]/+layout.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { page } from '$app/stores';
-    import { onMount } from 'svelte';
-    import { func, execute } from './store';
-    import Execute from './execute.svelte';
-    import { updateLayout } from '$lib/stores/layout';
-    import Header from './header.svelte';
-    import Breadcrumbs from './breadcrumbs.svelte';
-
-    const functionId = $page.params.function;
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle() {
-        const promise = func.load(functionId);
-        if ($func?.$id !== functionId) {
-            await promise;
-        }
-
-        updateLayout({
-            breadcrumb: Breadcrumbs,
-            header: Header
-        });
-    }
-</script>
-
-{#if $func}
-    <slot />
-{/if}
-
-{#if $execute}
-    <Execute selectedFunction={$execute} />
-{/if}
diff --git a/src/routes/console/project-[project]/functions/function/[function]/breadcrumbs.svelte b/src/routes/console/project-[project]/functions/function/[function]/breadcrumbs.svelte
deleted file mode 100644
index 26be510d54..0000000000
--- a/src/routes/console/project-[project]/functions/function/[function]/breadcrumbs.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-    import { Breadcrumbs } from '$lib/layout';
-    import { organization } from '$lib/stores/organization';
-    import { project } from '../../../store';
-    import { func } from './store';
-
-    $: breadcrumbs = [
-        {
-            href: `/console/organization-${$organization.$id}`,
-            title: $organization.name
-        },
-        {
-            href: `/console/project-${$project.$id}`,
-            title: $project.name
-        },
-        {
-            href: `/console/project-${$project.$id}/functions`,
-            title: 'Functions'
-        },
-        {
-            href: `/console/project-${$project.$id}/functions/function/${$func.$id}`,
-            title: $func.name
-        }
-    ];
-</script>
-
-<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/functions/function/[function]/create.svelte b/src/routes/console/project-[project]/functions/function/[function]/create.svelte
deleted file mode 100644
index 97973aa9e2..0000000000
--- a/src/routes/console/project-[project]/functions/function/[function]/create.svelte
+++ /dev/null
@@ -1,147 +0,0 @@
-<script lang="ts">
-    import { InputChoice, Button, InputText, InputFile, Form } from '$lib/elements/forms';
-    import { Modal, Collapsible, CollapsibleItem, Tabs, Tab, Code } from '$lib/components';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
-    import { addNotification } from '$lib/stores/notifications';
-    import { page } from '$app/stores';
-    import FormList from '$lib/elements/forms/formList.svelte';
-    import Github from '$lib/images/github-illustration.svg';
-
-    export let showCreate = false;
-
-    enum Mode {
-        CLI,
-        Github,
-        Manual
-    }
-    let mode: Mode = Mode.CLI;
-    let entrypoint: string;
-    let active: boolean;
-    let files: FileList;
-
-    const functionId = $page.params.function;
-    const dispatch = createEventDispatcher();
-
-    const create = async () => {
-        try {
-            await sdkForProject.functions.createDeployment(
-                functionId,
-                entrypoint,
-                files[0],
-                active
-            );
-            files = entrypoint = active = null;
-            showCreate = false;
-            dispatch('created');
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    };
-
-    const codeSnippets = {
-        Unix: {
-            code: `appwrite functions createDeployment \\ 
-    --functionId=${functionId} \\ 
-    --entrypoint='index.js' \\ 
-    --code="." \\ 
-    --activate=true`,
-            language: 'bash'
-        },
-
-        CMD: {
-            code: `appwrite functions createDeployment ^
-    --functionId=${functionId} ^
-    --entrypoint='index.js' ^
-    --code="." ^
-    --activate=true`,
-            language: 'CMD'
-        },
-        PowerShell: {
-            code: `appwrite functions createDeployment ,
-    --functionId=${functionId} ,
-    --entrypoint='index.js' ,
-    --code="." ,
-    --activate=true`,
-            language: 'PowerShell'
-        }
-    };
-</script>
-
-<Form noStyle noMargin on:submit={create}>
-    <Modal size="big" bind:show={showCreate}>
-        <svelte:fragment slot="header">Create Deployment</svelte:fragment>
-        <Tabs>
-            <Tab on:click={() => (mode = Mode.CLI)} selected={mode === Mode.CLI}>CLI</Tab>
-            <Tab on:click={() => (mode = Mode.Github)} selected={mode === Mode.Github}>
-                GitHub - Soon!
-            </Tab>
-            <Tab on:click={() => (mode = Mode.Manual)} selected={mode === Mode.Manual}>Manual</Tab>
-        </Tabs>
-        {#if mode === Mode.CLI}
-            <p class="text">
-                You can deploy your function from the Appwrite CLI using Unix, CMD, or PowerShell.
-                Check out our Documentation to learn more about <a
-                    href="https://appwrite.io/docs/functions#deployFunction"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="link">deploying your functions</a
-                >, or how to install and use the
-                <a href="#/" target="_blank" rel="noopener noreferrer" class="link">Appwrite CLI</a
-                >.
-            </p>
-            <Collapsible>
-                {#each ['Unix', 'CMD', 'PowerShell'] as category}
-                    <CollapsibleItem>
-                        <svelte:fragment slot="title">{category}</svelte:fragment>
-                        <Code
-                            withLineNumbers
-                            withCopy
-                            language="sh"
-                            label={codeSnippets[category].language}
-                            code={codeSnippets[category].code} />
-                    </CollapsibleItem>
-                {/each}
-            </Collapsible>
-        {:else if mode === Mode.Github}
-            <div class="common-section grid-1-2">
-                <div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16">
-                    <img src={Github} alt="github" />
-                </div>
-                <div class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-24">
-                    <h3 class="body-text-1">Coming Soon!</h3>
-                    <p>
-                        Creating deployments will be easier than ever with our upcoming Git
-                        Integration. Just set up a repository and we’ll do the rest.
-                    </p>
-                </div>
-            </div>
-        {:else if mode === Mode.Manual}
-            <FormList>
-                <InputText
-                    label="Entrypoint"
-                    placeholder="main.py"
-                    id="entrypoint"
-                    bind:value={entrypoint}
-                    required />
-                <InputFile label="Gzipped code (tar.gz)" bind:files />
-                <InputChoice
-                    label="Activate Deployment after build"
-                    id="activate"
-                    bind:value={active}>
-                    This deployment will be activated after the build is completed.</InputChoice>
-            </FormList>
-        {/if}
-        <svelte:fragment slot="footer">
-            {#if mode === Mode.Manual}
-                <Button secondary on:click={() => (showCreate = false)}>Close</Button>
-                <Button submit>Create</Button>
-            {:else}
-                <Button secondary on:click={() => (showCreate = false)}>Close</Button>
-            {/if}
-        </svelte:fragment>
-    </Modal>
-</Form>
diff --git a/src/routes/console/project-[project]/functions/function/[function]/executions/store.ts b/src/routes/console/project-[project]/functions/function/[function]/executions/store.ts
deleted file mode 100644
index a093153080..0000000000
--- a/src/routes/console/project-[project]/functions/function/[function]/executions/store.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { sdkForProject } from '$lib/stores/sdk';
-import type { Models } from '@aw-labs/appwrite-console';
-import { cachedStore } from '$lib/helpers/cache';
-
-export const executionList = cachedStore<
-    Models.ExecutionList,
-    {
-        load: (functionId: string, queries?: string[], search?: string) => Promise<void>;
-    }
->('executionList', function ({ set }) {
-    return {
-        load: async (functionId, queries, search) => {
-            const response = await sdkForProject.functions.listExecutions(
-                functionId,
-                queries,
-                search
-            );
-            set(response);
-        }
-    };
-});
diff --git a/src/routes/console/project-[project]/functions/function/[function]/store.ts b/src/routes/console/project-[project]/functions/function/[function]/store.ts
deleted file mode 100644
index 9ebb1f1a8a..0000000000
--- a/src/routes/console/project-[project]/functions/function/[function]/store.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { cachedStore } from '$lib/helpers/cache';
-import { sdkForProject } from '$lib/stores/sdk';
-import type { Models } from '@aw-labs/appwrite-console';
-import { writable, type Writable } from 'svelte/store';
-
-export const func = cachedStore<
-    Models.Function,
-    {
-        load: (functionId: string) => Promise<void>;
-        getDeployment: (functionId: string, deploymentId: string) => Promise<Models.Deployment>;
-    }
->('func', function ({ set }) {
-    return {
-        load: async (functionId) => {
-            set(await sdkForProject.functions.get(functionId));
-        },
-        getDeployment: async (functionId, deploymentId) => {
-            return await sdkForProject.functions.getDeployment(functionId, deploymentId);
-        }
-    };
-});
-
-export const deploymentList = cachedStore<
-    Models.DeploymentList,
-    {
-        load: (functionId: string, queries?: string[], search?: string) => Promise<void>;
-        createDeployment: (deployment: Models.Deployment) => void;
-        updateDeployment: (deployment: Models.Deployment) => void;
-    }
->('deploymentList', function ({ set, update }) {
-    return {
-        load: async (functionId, queries, search) => {
-            const response = await sdkForProject.functions.listDeployments(
-                functionId,
-                queries,
-                search
-            );
-            set(response);
-        },
-        createDeployment: (deployment) =>
-            update((n) => {
-                n.deployments.unshift(deployment);
-
-                return n;
-            }),
-        updateDeployment: (deployment) =>
-            update((n) => {
-                const index = n.deployments.findIndex((a) => a.$id === deployment.$id);
-                if (index !== -1) {
-                    n.deployments[index] = deployment;
-                }
-
-                return n;
-            })
-    };
-});
-
-export const execute: Writable<Models.Function> = writable();
-
-export const functionUsage = cachedStore<
-    Models.UsageFunctions,
-    {
-        load: (functionId: string, range: string) => Promise<void>;
-    }
->('functionUsage', function ({ set }) {
-    return {
-        load: async (functionId, range) => {
-            const usages = await sdkForProject.functions.getFunctionUsage(functionId, range);
-            set(usages);
-        }
-    };
-});
diff --git a/src/routes/console/project-[project]/functions/header.svelte b/src/routes/console/project-[project]/functions/header.svelte
index 9fbd3e3641..6ea24a4d9d 100644
--- a/src/routes/console/project-[project]/functions/header.svelte
+++ b/src/routes/console/project-[project]/functions/header.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
-    import { Cover } from '$lib/layout';
+    import { Cover, CoverTitle } from '$lib/layout';
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
-        <h1 class="heading-level-4">
-            <span class="text">Functions</span>
-        </h1>
+        <CoverTitle>Functions</CoverTitle>
     </svelte:fragment>
 </Cover>
diff --git a/src/routes/console/project-[project]/functions/store.ts b/src/routes/console/project-[project]/functions/store.ts
deleted file mode 100644
index 725cb52380..0000000000
--- a/src/routes/console/project-[project]/functions/store.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { sdkForProject } from '$lib/stores/sdk';
-import type { Models } from '@aw-labs/appwrite-console';
-import { cachedStore } from '$lib/helpers/cache';
-import { browser } from '$app/environment';
-
-export const functionList = cachedStore<
-    Models.FunctionList,
-    {
-        load: (queries?: string[], search?: string) => Promise<void>;
-        getDeployments: (
-            functions: Models.Function[]
-        ) => Promise<Record<string, Models.Deployment>>;
-    }
->('functionList', function ({ set }) {
-    return {
-        load: async (queries, search) => {
-            const response = await sdkForProject.functions.list(queries, search);
-            set(response);
-        },
-
-        getDeployments: async (functions) => {
-            let activeDeployments = {};
-            activeDeployments = browser
-                ? JSON.parse(sessionStorage.getItem('activeDeployments')) ?? {}
-                : {};
-
-            for (let i = 0; i < functions.length; i++) {
-                const fn = functions[i];
-                if (fn.deployment) {
-                    const response = await sdkForProject.functions.getDeployment(
-                        fn.$id,
-                        fn.deployment
-                    );
-                    activeDeployments[fn.$id] = response;
-                }
-            }
-
-            sessionStorage?.setItem('activeDeployments', JSON.stringify(activeDeployments));
-            return activeDeployments;
-        }
-    };
-});
-
-export const variableList = cachedStore<
-    Models.VariableList,
-    {
-        load: (functionId: string) => Promise<void>;
-        delete: (functionId: string, variableId: string) => Promise<void>;
-        create: (functionId: string, key: string, value: string) => Promise<void>;
-        update: (
-            functionId: string,
-            variableId: string,
-            key: string,
-            value: string
-        ) => Promise<void>;
-    }
->('variableList', function ({ set }) {
-    return {
-        load: async (functionId) => {
-            const response = await sdkForProject.functions.listVariables(functionId);
-            set(response);
-        },
-        delete: async (functionId, variableId) => {
-            await sdkForProject.functions.deleteVariable(functionId, variableId);
-        },
-        create: async (functionId, key, value) => {
-            await sdkForProject.functions.createVariable(functionId, key, value);
-        },
-        update: async (functionId, variableId, key, value) => {
-            await sdkForProject.functions.updateVariable(functionId, variableId, key, value);
-        }
-    };
-});
diff --git a/src/routes/console/project-[project]/overview/+layout.svelte b/src/routes/console/project-[project]/overview/+layout.svelte
index a60b1f84c8..87145363e2 100644
--- a/src/routes/console/project-[project]/overview/+layout.svelte
+++ b/src/routes/console/project-[project]/overview/+layout.svelte
@@ -11,9 +11,6 @@
     import { DropList, DropListItem, Heading } from '$lib/components';
     import { BarChart, LineChart } from '$lib/charts';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
-    import { updateLayout } from '$lib/stores/layout';
-    import Header from './header.svelte';
-    import Breadcrumbs from './breadcrumbs.svelte';
 
     $: projectId = $page.params.project;
     $: path = `/console/project-${projectId}/overview`;
@@ -31,10 +28,6 @@
         if ($usage) {
             await promise;
         }
-        updateLayout({
-            header: Header,
-            breadcrumb: Breadcrumbs
-        });
     }
 
     const formatter = Intl.NumberFormat('en', {
diff --git a/src/routes/console/project-[project]/overview/+layout.ts b/src/routes/console/project-[project]/overview/+layout.ts
new file mode 100644
index 0000000000..7db345058e
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/+layout.ts
@@ -0,0 +1,10 @@
+import Breadcrumbs from './breadcrumbs.svelte';
+import Header from './header.svelte';
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = async () => {
+    return {
+        header: Header,
+        breadcrumbs: Breadcrumbs
+    };
+};
diff --git a/src/routes/console/project-[project]/overview/breadcrumbs.svelte b/src/routes/console/project-[project]/overview/breadcrumbs.svelte
index d679cf74ed..cf6b91aec3 100644
--- a/src/routes/console/project-[project]/overview/breadcrumbs.svelte
+++ b/src/routes/console/project-[project]/overview/breadcrumbs.svelte
@@ -5,12 +5,12 @@
 
     $: breadcrumbs = [
         {
-            href: `/console/organization-${$organization.$id}`,
-            title: $organization.name
+            href: `/console/organization-${$organization?.$id}`,
+            title: $organization?.name
         },
         {
-            href: `/console/project-${$project.$id}`,
-            title: $project.name
+            href: `/console/project-${$project?.$id}`,
+            title: $project?.name
         }
     ];
 </script>
diff --git a/src/routes/console/project-[project]/overview/header.svelte b/src/routes/console/project-[project]/overview/header.svelte
index 40589b702a..ee3ea2506e 100644
--- a/src/routes/console/project-[project]/overview/header.svelte
+++ b/src/routes/console/project-[project]/overview/header.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
     import { Copy } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { Cover } from '$lib/layout';
+    import { Cover, CoverTitle } from '$lib/layout';
     import { project } from '../store';
 </script>
 
 <Cover>
     <svelte:fragment slot="header">
-        <h1 class="heading-level-4">
-            <span class="text">{$project.name}</span>
-        </h1>
+        <CoverTitle>
+            {$project?.name}
+        </CoverTitle>
         <Copy value={$project.$id}>
             <Pill button>
                 <span class="icon-duplicate" aria-hidden="true" />
diff --git a/src/routes/console/project-[project]/overview/keys/+page.svelte b/src/routes/console/project-[project]/overview/keys/+page.svelte
index 7c86fd9ded..1709372d05 100644
--- a/src/routes/console/project-[project]/overview/keys/+page.svelte
+++ b/src/routes/console/project-[project]/overview/keys/+page.svelte
@@ -10,9 +10,9 @@
         TableRowLink
     } from '$lib/elements/table';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { project } from '../../store';
+    import type { PageData } from './$types';
     import Create from './create.svelte';
-
+    export let data: PageData;
     let show = false;
 </script>
 
@@ -34,7 +34,7 @@
         <TableCellHead>clients</TableCellHead>
     </TableHeader>
     <TableBody>
-        {#each $project.keys as key}
+        {#each data.keys.keys as key}
             <TableRowLink href={`keys/${key.$id}`}>
                 <TableCellText title="Name">
                     {key.name}
diff --git a/src/routes/console/project-[project]/overview/keys/+page.ts b/src/routes/console/project-[project]/overview/keys/+page.ts
new file mode 100644
index 0000000000..0394783a09
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/keys/+page.ts
@@ -0,0 +1,10 @@
+import { Dependencies } from '$lib/constants';
+import { sdkForConsole } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, depends }) => {
+    depends(Dependencies.KEYS);
+    return {
+        keys: await sdkForConsole.projects.listKeys(params.project)
+    };
+};
diff --git a/src/routes/console/project-[project]/overview/keys/[key]/+page.ts b/src/routes/console/project-[project]/overview/keys/[key]/+page.ts
new file mode 100644
index 0000000000..11847cc4a2
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/keys/[key]/+page.ts
@@ -0,0 +1,15 @@
+import Header from './header.svelte';
+import Breadcrumbs from './breadcrumbs.svelte';
+import { sdkForConsole } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, depends }) => {
+    depends(Dependencies.KEY);
+
+    return {
+        header: Header,
+        breadcrumbs: Breadcrumbs,
+        key: await sdkForConsole.projects.getKey(params.project, params.key)
+    };
+};
diff --git a/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte b/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
index ffcaa2119d..1163b49028 100644
--- a/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
+++ b/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
@@ -1,55 +1,36 @@
 <script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { invalidate } from '$app/navigation';
     import { CardGrid, Heading, Secret } from '$lib/components';
-    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
-    import InputDateTime from '$lib/elements/forms/inputDateTime.svelte';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, FormList, InputText, InputDateTime } from '$lib/elements/forms';
     import { difference } from '$lib/helpers/array';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { Container } from '$lib/layout';
-    import { updateLayout } from '$lib/stores/layout';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { project } from '../../../store';
+    import { key } from './store';
     import Scopes from '../scopes.svelte';
-    import Breadcrumbs from './breadcrumbs.svelte';
     import Delete from './delete.svelte';
-    import Header from './header.svelte';
-    import { key } from './store';
 
-    const projectId = $page.params.project;
-    const keyId = $page.params.key;
-
-    let loaded = false;
     let showDelete = false;
     let name: string = null;
     let secret: string = null;
     let expire: string = null;
-    let scopes: string[] = null;
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle() {
-        await key.load(projectId, keyId);
+    let scopes: string[] = [];
 
+    onMount(() => {
         name ??= $key.name;
         secret ??= $key.secret;
         expire ??= $key.expire;
         scopes ??= $key.scopes;
-
-        updateLayout({
-            header: Header,
-            breadcrumb: Breadcrumbs
-        });
-        loaded = true;
-    }
+    });
 
     async function updateName() {
         try {
             await sdkForConsole.projects.updateKey($project.$id, $key.$id, name, $key.scopes);
-            $key.name = name;
+            invalidate(Dependencies.KEY);
             addNotification({
                 type: 'success',
                 message: 'API Key name has been updated'
@@ -71,7 +52,7 @@
                 $key.scopes,
                 expire
             );
-            $key.expire = expire;
+            invalidate(Dependencies.KEY);
             addNotification({
                 type: 'success',
                 message: 'API Key expiration has been updated'
@@ -87,7 +68,7 @@
     async function updateScopes() {
         try {
             await sdkForConsole.projects.updateKey($project.$id, $key.$id, $key.name, scopes);
-            $key.scopes = scopes;
+            invalidate(Dependencies.KEY);
             addNotification({
                 type: 'success',
                 message: 'API Key scopes has been updated'
@@ -106,104 +87,102 @@
 </svelte:head>
 
 <Container>
-    {#if loaded}
-        {@const accessedAt = $key.accessedAt ? toLocaleDateTime($key.accessedAt) : 'never'}
+    {@const accessedAt = $key.accessedAt ? toLocaleDateTime($key.accessedAt) : 'never'}
+    <CardGrid>
+        <div>
+            <Heading tag="h6" size="7">{$key.name}</Heading>
+        </div>
+        <svelte:fragment slot="aside">
+            <p>
+                Last accessed: {accessedAt}<br />
+                Scopes granted: {$key.scopes.length}
+            </p>
+        </svelte:fragment>
+    </CardGrid>
+
+    <CardGrid>
+        <Heading tag="h6" size="7">API Key Secret</Heading>
+        <svelte:fragment slot="aside">
+            <Secret bind:value={secret} />
+        </svelte:fragment>
+    </CardGrid>
+
+    <Form on:submit={updateName}>
         <CardGrid>
-            <div>
-                <Heading tag="h6" size="7">{$key.name}</Heading>
-            </div>
+            <Heading tag="h6" size="7">Update Name</Heading>
+            <p class="text">Choose any name that will help you distinguish between API keys.</p>
             <svelte:fragment slot="aside">
-                <p>
-                    Last accessed: {accessedAt}<br />
-                    Scopes granted: {$key.scopes.length}
-                </p>
+                <FormList>
+                    <InputText
+                        id="name"
+                        label="Name"
+                        bind:value={name}
+                        required
+                        placeholder="Enter name" />
+                </FormList>
             </svelte:fragment>
-        </CardGrid>
 
+            <svelte:fragment slot="actions">
+                <Button disabled={name === $key.name} submit>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+    <Form on:submit={updateScopes}>
         <CardGrid>
-            <Heading tag="h6" size="7">API Key Secret</Heading>
+            <Heading tag="h6" size="7">Update Scopes</Heading>
+            <p class="text">
+                You can choose which permission scope to grant your application. It is a best
+                practice to allow only the permissions you need to meet your project goals.
+            </p>
             <svelte:fragment slot="aside">
-                <Secret bind:value={secret} />
+                <Scopes bind:scopes />
             </svelte:fragment>
-        </CardGrid>
 
-        <Form on:submit={updateName}>
-            <CardGrid>
-                <Heading tag="h6" size="7">Update Name</Heading>
-                <p class="text">Choose any name that will help you distinguish between API keys.</p>
-                <svelte:fragment slot="aside">
-                    <FormList>
-                        <InputText
-                            id="name"
-                            label="Name"
-                            bind:value={name}
-                            required
-                            placeholder="Enter name" />
-                    </FormList>
-                </svelte:fragment>
-
-                <svelte:fragment slot="actions">
-                    <Button disabled={name === $key.name} submit>Update</Button>
-                </svelte:fragment>
-            </CardGrid>
-        </Form>
-        <Form on:submit={updateScopes}>
-            <CardGrid>
-                <Heading tag="h6" size="7">Update Scopes</Heading>
-                <p class="text">
-                    You can choose which permission scope to grant your application. It is a best
-                    practice to allow only the permissions you need to meet your project goals.
-                </p>
-                <svelte:fragment slot="aside">
-                    <Scopes bind:scopes />
-                </svelte:fragment>
-
-                <svelte:fragment slot="actions">
-                    <Button
-                        submit
-                        disabled={!(
-                            difference(scopes, $key.scopes).length !== 0 ||
-                            difference($key.scopes, scopes).length !== 0
-                        )}>Update</Button>
-                </svelte:fragment>
-            </CardGrid>
-        </Form>
-        <Form on:submit={updateExpire}>
-            <CardGrid>
-                <Heading tag="h6" size="7">Update Expiration Date</Heading>
-                <p class="text">Choose any name that will help you distinguish between API keys.</p>
-                <svelte:fragment slot="aside">
-                    <FormList>
-                        <InputDateTime id="expire" label="Expiration Date" bind:value={expire} />
-                    </FormList>
-                </svelte:fragment>
-
-                <svelte:fragment slot="actions">
-                    <Button disabled={expire === $key.expire} submit>Update</Button>
-                </svelte:fragment>
-            </CardGrid>
-        </Form>
+            <svelte:fragment slot="actions">
+                <Button
+                    submit
+                    disabled={!(
+                        difference(scopes, $key.scopes).length !== 0 ||
+                        difference($key.scopes, scopes).length !== 0
+                    )}>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+    <Form on:submit={updateExpire}>
         <CardGrid>
-            <div>
-                <Heading tag="h6" size="7">Delete API Key</Heading>
-            </div>
-            <p>The API Key will be permanently deleted. This action is irreversible.</p>
+            <Heading tag="h6" size="7">Update Expiration Date</Heading>
+            <p class="text">Choose any name that will help you distinguish between API keys.</p>
             <svelte:fragment slot="aside">
-                <div class="box">
-                    <div class="u-flex u-gap-16">
-                        <div class="u-cross-child-center u-line-height-1-5">
-                            <h6 class="u-bold">{$key.name}</h6>
-                            <p>Last accessed: {accessedAt}</p>
-                        </div>
-                    </div>
-                </div>
+                <FormList>
+                    <InputDateTime id="expire" label="Expiration Date" bind:value={expire} />
+                </FormList>
             </svelte:fragment>
 
             <svelte:fragment slot="actions">
-                <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+                <Button disabled={expire === $key.expire} submit>Update</Button>
             </svelte:fragment>
         </CardGrid>
-    {/if}
+    </Form>
+    <CardGrid>
+        <div>
+            <Heading tag="h6" size="7">Delete API Key</Heading>
+        </div>
+        <p>The API Key will be permanently deleted. This action is irreversible.</p>
+        <svelte:fragment slot="aside">
+            <div class="box">
+                <div class="u-flex u-gap-16">
+                    <div class="u-cross-child-center u-line-height-1-5">
+                        <h6 class="u-bold">{$key.name}</h6>
+                        <p>Last accessed: {accessedAt}</p>
+                    </div>
+                </div>
+            </div>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+        </svelte:fragment>
+    </CardGrid>
 </Container>
 
 <Delete bind:showDelete />
diff --git a/src/routes/console/project-[project]/overview/keys/[key]/breadcrumbs.svelte b/src/routes/console/project-[project]/overview/keys/[key]/breadcrumbs.svelte
index c6e0726ea6..076836cece 100644
--- a/src/routes/console/project-[project]/overview/keys/[key]/breadcrumbs.svelte
+++ b/src/routes/console/project-[project]/overview/keys/[key]/breadcrumbs.svelte
@@ -6,20 +6,20 @@
 
     $: breadcrumbs = [
         {
-            href: `/console/organization-${$organization.$id}`,
-            title: $organization.name
+            href: `/console/organization-${$organization?.$id}`,
+            title: $organization?.name
         },
         {
-            href: `/console/project-${$project.$id}`,
-            title: $project.name
+            href: `/console/project-${$project?.$id}`,
+            title: $project?.name
         },
         {
-            href: `/console/project-${$project.$id}/overview/keys`,
+            href: `/console/project-${$project?.$id}/overview/keys`,
             title: 'API Keys'
         },
         {
-            href: `/console/project-${$project.$id}/overview/keys/${$key.$id}`,
-            title: $key.name
+            href: `/console/project-${$project?.$id}/overview/keys/${$key?.$id}`,
+            title: $key?.name
         }
     ];
 </script>
diff --git a/src/routes/console/project-[project]/overview/keys/[key]/delete.svelte b/src/routes/console/project-[project]/overview/keys/[key]/delete.svelte
index 333be86fb0..966b01304c 100644
--- a/src/routes/console/project-[project]/overview/keys/[key]/delete.svelte
+++ b/src/routes/console/project-[project]/overview/keys/[key]/delete.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
+    import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { project } from '../../../store';
@@ -10,7 +11,7 @@
 
     export let showDelete = false;
 
-    const handleDelete = async () => {
+    async function handleDelete() {
         try {
             await sdkForConsole.projects.deleteKey($project.$id, $key.$id);
             showDelete = false;
@@ -18,7 +19,7 @@
                 type: 'success',
                 message: `${$key.name} has been deleted`
             });
-            project.load($project.$id);
+            await invalidate(Dependencies.KEYS);
             await goto(`${base}/console/project-${$project.$id}/overview/keys`);
         } catch (error) {
             addNotification({
@@ -26,17 +27,15 @@
                 message: error.message
             });
         }
-    };
+    }
 </script>
 
-<Form on:submit={handleDelete}>
-    <Modal bind:show={showDelete} warning>
-        <svelte:fragment slot="header">Delete API Key</svelte:fragment>
-        <p>The API Key will be permanently deleted. This action is irreversible.</p>
+<Modal bind:show={showDelete} on:submit={handleDelete} warning>
+    <svelte:fragment slot="header">Delete API Key</svelte:fragment>
+    <p>The API Key will be permanently deleted. This action is irreversible.</p>
 
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/overview/keys/[key]/header.svelte b/src/routes/console/project-[project]/overview/keys/[key]/header.svelte
index 6ca38f6137..55a5872e7d 100644
--- a/src/routes/console/project-[project]/overview/keys/[key]/header.svelte
+++ b/src/routes/console/project-[project]/overview/keys/[key]/header.svelte
@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { Copy } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { Cover } from '$lib/layout';
+    import { Cover, CoverTitle } from '$lib/layout';
     import { key } from './store';
 
     const projectId = $page.params.project;
@@ -10,16 +10,10 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <a
-            class="back-button"
-            href={`/console/project-${projectId}/overview/keys`}
-            aria-label="page back">
-            <span class="icon-cheveron-left" aria-hidden="true" />
-        </a>
-        <h1 class="heading-level-4">
-            <span class="text">{$key.name}</span>
-        </h1>
-        <Copy value={$key.secret}>
+        <CoverTitle href={`/console/project-${projectId}/overview/keys`}>
+            {$key?.name}
+        </CoverTitle>
+        <Copy value={$key?.secret}>
             <Pill button>
                 <span class="icon-duplicate" aria-hidden="true" />
                 API Key Secret
diff --git a/src/routes/console/project-[project]/overview/keys/[key]/store.ts b/src/routes/console/project-[project]/overview/keys/[key]/store.ts
index 8b29e0e74d..058982d62f 100644
--- a/src/routes/console/project-[project]/overview/keys/[key]/store.ts
+++ b/src/routes/console/project-[project]/overview/keys/[key]/store.ts
@@ -1,17 +1,5 @@
-import { sdkForConsole } from '$lib/stores/sdk';
+import { derived } from 'svelte/store';
+import { page } from '$app/stores';
 import type { Models } from '@aw-labs/appwrite-console';
-import { cachedStore } from '$lib/helpers/cache';
 
-export const key = cachedStore<
-    Models.Key,
-    {
-        load: (projectId: string, keyId: string) => Promise<void>;
-    }
->('key', function ({ set }) {
-    return {
-        load: async (projectId, keyId) => {
-            const key = await sdkForConsole.projects.getKey(projectId, keyId);
-            set(key);
-        }
-    };
-});
+export const key = derived(page, ($page) => $page.data.key as Models.Key);
diff --git a/src/routes/console/project-[project]/overview/keys/create.svelte b/src/routes/console/project-[project]/overview/keys/create.svelte
index 043cae7cb7..dea215fe29 100644
--- a/src/routes/console/project-[project]/overview/keys/create.svelte
+++ b/src/routes/console/project-[project]/overview/keys/create.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
     import { Modal } from '$lib/components';
-    import { InputText, Button, Form, FormList } from '$lib/elements/forms';
+    import { Dependencies } from '$lib/constants';
+    import { InputText, Button, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { project } from '../../.../../store';
@@ -16,7 +18,7 @@
             await sdkForConsole.projects.createKey($project.$id, name, scopes);
             name = null;
             scopes = [];
-            project.load($project.$id);
+            invalidate(Dependencies.KEYS);
             show = false;
         } catch (error) {
             addNotification({
@@ -27,16 +29,14 @@
     }
 </script>
 
-<Form on:submit={create}>
-    <Modal bind:show size="big">
-        <svelte:fragment slot="header">Create API Key</svelte:fragment>
-        <FormList>
-            <InputText id="name" label="Name" bind:value={name} autofocus required />
-            <Scopes bind:scopes />
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button submit>Register</Button>
-            <Button secondary on:click={() => (show = false)}>Cancel</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal bind:show on:submit={create} size="big">
+    <svelte:fragment slot="header">Create API Key</svelte:fragment>
+    <FormList>
+        <InputText id="name" label="Name" bind:value={name} autofocus required />
+        <Scopes bind:scopes />
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button submit>Register</Button>
+        <Button secondary on:click={() => (show = false)}>Cancel</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/overview/platforms/+page.svelte b/src/routes/console/project-[project]/overview/platforms/+page.svelte
index e4e6bde22e..add972874e 100644
--- a/src/routes/console/project-[project]/overview/platforms/+page.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/+page.svelte
@@ -4,12 +4,14 @@
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { wizard } from '$lib/stores/wizard';
-    import { project } from '../../store';
     import CreateAndroid from './createAndroid.svelte';
     import CreateApple from './createApple.svelte';
     import CreateFlutter from './createFlutter.svelte';
     import CreateWeb from './createWeb.svelte';
     import { versions } from './wizard/store';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
 
     let showDropdown = false;
     const path = `/console/project-${$page.params.project}/overview/platforms`;
@@ -57,7 +59,7 @@
 </div>
 
 <div class="grid-box u-margin-block-start-32" style="--grid-gap:1.5rem; --grid-item-size:25rem;">
-    {#each $project.platforms as platform}
+    {#each data.platforms.platforms as platform}
         <GridItem1 href={`${path}/${platform.$id}`}>
             <svelte:fragment slot="title">{platform.name}</svelte:fragment>
             <div class="grid-item-1-end-start">
diff --git a/src/routes/console/project-[project]/overview/platforms/+page.ts b/src/routes/console/project-[project]/overview/platforms/+page.ts
new file mode 100644
index 0000000000..80b6a91fe5
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/+page.ts
@@ -0,0 +1,10 @@
+import { Dependencies } from '$lib/constants';
+import { sdkForConsole } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, depends }) => {
+    depends(Dependencies.PLATFORMS);
+    return {
+        platforms: await sdkForConsole.projects.listPlatforms(params.project)
+    };
+};
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/+page.ts b/src/routes/console/project-[project]/overview/platforms/[platform]/+page.ts
new file mode 100644
index 0000000000..41ce2475ff
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/+page.ts
@@ -0,0 +1,15 @@
+import Header from './header.svelte';
+import Breadcrumbs from './breadcrumbs.svelte';
+import { sdkForConsole } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, depends }) => {
+    depends(Dependencies.PROJECT);
+
+    return {
+        header: Header,
+        breadcrumb: Breadcrumbs,
+        platform: await sdkForConsole.projects.getPlatform(params.project, params.platform)
+    };
+};
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte
index b4915e26a4..9ffa44411f 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte
@@ -1,15 +1,4 @@
 <script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { page } from '$app/stores';
-    import { CardGrid, Heading } from '$lib/components';
-    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
-    import { Container } from '$lib/layout';
-    import { updateLayout } from '$lib/stores/layout';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
-    import { onMount, SvelteComponent } from 'svelte';
-    import { project } from '../../../store';
-    import { platform } from './store';
     import Delete from './delete.svelte';
     import Web from './web.svelte';
     import FlutterIos from './flutterIOS.svelte';
@@ -21,12 +10,21 @@
     import AppleMacOs from './appleMacOS.svelte';
     import AppleWatchOs from './appleWatchOS.svelte';
     import AppleTvos from './appleTvOS.svelte';
-    import Header from './header.svelte';
-    import Breadcrumbs from './breadcrumbs.svelte';
     import Android from './android.svelte';
+    import { CardGrid, Heading } from '$lib/components';
+    import { Button, Form, FormList, InputText } from '$lib/elements/forms';
+    import { Container } from '$lib/layout';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { onMount, SvelteComponent } from 'svelte';
+    import { project } from '../../../store';
+    import { platform } from './store';
+    import { Dependencies } from '$lib/constants';
+    import type { PageData } from './$types';
+    import { invalidate } from '$app/navigation';
+
+    export let data: PageData;
 
-    const projectId = $page.params.project;
-    const platformId = $page.params.platform;
     const types: Record<string, typeof SvelteComponent> = {
         web: Web,
         android: Android,
@@ -41,31 +39,17 @@
         'flutter-windows': FlutterWindows
     };
 
-    let loaded = false;
     let showDelete = false;
     let name: string = null;
 
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle() {
-        if ($platform?.$id !== platformId) {
-            await platform.load(projectId, platformId);
-        }
-
-        name ??= $platform.name;
-
-        updateLayout({
-            header: Header,
-            breadcrumb: Breadcrumbs
-        });
-        loaded = true;
-    }
+    onMount(() => {
+        name ??= data.platform.name;
+    });
 
     const updateName = async () => {
         try {
-            await sdkForConsole.projects.updatePlatform($project.$id, $platform.$id, name);
-            $platform.name = name;
+            await sdkForConsole.projects.updatePlatform($project.$id, data.platform.$id, name);
+            invalidate(Dependencies.PLATFORM);
             addNotification({
                 type: 'success',
                 message: 'Platform name has been updated'
@@ -80,53 +64,49 @@
 </script>
 
 <Container>
-    {#if loaded}
-        <Form on:submit={updateName}>
-            <CardGrid>
-                <Heading tag="h6" size="7">Update Name</Heading>
-                <p class="text">
-                    Choose any name that will help you distinguish between platforms.
-                </p>
-                <svelte:fragment slot="aside">
-                    <FormList>
-                        <InputText
-                            id="name"
-                            label="Name"
-                            bind:value={name}
-                            required
-                            placeholder="Enter name" />
-                    </FormList>
-                </svelte:fragment>
-
-                <svelte:fragment slot="actions">
-                    <Button disabled={name === $platform.name} submit>Update</Button>
-                </svelte:fragment>
-            </CardGrid>
-        </Form>
-
-        <svelte:component this={types[$platform.type]} />
-
+    <Form on:submit={updateName}>
         <CardGrid>
-            <div>
-                <Heading tag="h6" size="7">Delete Platform</Heading>
-            </div>
-            <p>The Platform will be permanently deleted. This action is irreversible.</p>
+            <Heading tag="h6" size="7">Update Name</Heading>
+            <p class="text">Choose any name that will help you distinguish between platforms.</p>
             <svelte:fragment slot="aside">
-                <div class="box">
-                    <div class="u-flex u-gap-16">
-                        <div class="u-cross-child-center u-line-height-1-5">
-                            <h6 class="u-bold">{$platform.name}</h6>
-                            <p>{$platform.hostname}</p>
-                        </div>
-                    </div>
-                </div>
+                <FormList>
+                    <InputText
+                        id="name"
+                        label="Name"
+                        bind:value={name}
+                        required
+                        placeholder="Enter name" />
+                </FormList>
             </svelte:fragment>
 
             <svelte:fragment slot="actions">
-                <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+                <Button disabled={name === $platform.name} submit>Update</Button>
             </svelte:fragment>
         </CardGrid>
-    {/if}
+    </Form>
+
+    <svelte:component this={types[$platform.type]} />
+
+    <CardGrid>
+        <div>
+            <Heading tag="h6" size="7">Delete Platform</Heading>
+        </div>
+        <p>The Platform will be permanently deleted. This action is irreversible.</p>
+        <svelte:fragment slot="aside">
+            <div class="box">
+                <div class="u-flex u-gap-16">
+                    <div class="u-cross-child-center u-line-height-1-5">
+                        <h6 class="u-bold">{$platform.name}</h6>
+                        <p>{$platform.hostname}</p>
+                    </div>
+                </div>
+            </div>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+        </svelte:fragment>
+    </CardGrid>
 </Container>
 
 <Delete bind:showDelete />
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/android.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/android.svelte
index a3b42a25cc..de95db47cb 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/android.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/android.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
     import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -23,7 +25,7 @@
                 undefined,
                 hostname
             );
-            project.load($project.$id);
+            invalidate(Dependencies.PLATFORM);
             addNotification({
                 type: 'success',
                 message: 'Platform Package Name has been updated'
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/appleIOS.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/appleIOS.svelte
index 8e75bf735f..5fb5c85b20 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/appleIOS.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/appleIOS.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
     import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -21,7 +23,7 @@
                 $platform.name,
                 key
             );
-            $platform.key = key;
+            invalidate(Dependencies.PLATFORM);
             addNotification({
                 type: 'success',
                 message: 'Platform Bundle ID has been updated'
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/appleMacOS.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/appleMacOS.svelte
index 8e75bf735f..5fb5c85b20 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/appleMacOS.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/appleMacOS.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
     import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -21,7 +23,7 @@
                 $platform.name,
                 key
             );
-            $platform.key = key;
+            invalidate(Dependencies.PLATFORM);
             addNotification({
                 type: 'success',
                 message: 'Platform Bundle ID has been updated'
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/appleTvOS.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/appleTvOS.svelte
index 8e75bf735f..5fb5c85b20 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/appleTvOS.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/appleTvOS.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
     import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -21,7 +23,7 @@
                 $platform.name,
                 key
             );
-            $platform.key = key;
+            invalidate(Dependencies.PLATFORM);
             addNotification({
                 type: 'success',
                 message: 'Platform Bundle ID has been updated'
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/appleWatchOS.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/appleWatchOS.svelte
index 8e75bf735f..5fb5c85b20 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/appleWatchOS.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/appleWatchOS.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
     import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -21,7 +23,7 @@
                 $platform.name,
                 key
             );
-            $platform.key = key;
+            invalidate(Dependencies.PLATFORM);
             addNotification({
                 type: 'success',
                 message: 'Platform Bundle ID has been updated'
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte
index 14c384dafe..3aa450e492 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
+    import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { project } from '../../../store';
@@ -18,9 +19,8 @@
                 type: 'success',
                 message: `${$platform.name} has been deleted`
             });
-            project.load($project.$id);
+            await invalidate(Dependencies.PLATFORMS);
             await goto(`${base}/console/project-${$project.$id}/overview/platforms`);
-            platform.set(null);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -30,14 +30,12 @@
     };
 </script>
 
-<Form on:submit={handleDelete}>
-    <Modal bind:show={showDelete} warning>
-        <svelte:fragment slot="header">Delete Platform</svelte:fragment>
-        <p>The Platform will be permanently deleted. This action is irreversible.</p>
+<Modal bind:show={showDelete} on:submit={handleDelete} warning>
+    <svelte:fragment slot="header">Delete Platform</svelte:fragment>
+    <p>The Platform will be permanently deleted. This action is irreversible.</p>
 
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterAndroid.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterAndroid.svelte
index d3c39bba38..119e6c20c7 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterAndroid.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterAndroid.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
     import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -21,7 +23,7 @@
                 $platform.name,
                 key
             );
-            $platform.key = key;
+            invalidate(Dependencies.PLATFORM);
             addNotification({
                 type: 'success',
                 message: 'Platform Package Name has been updated'
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterIOS.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterIOS.svelte
index 8e75bf735f..5fb5c85b20 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterIOS.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterIOS.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
     import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -21,7 +23,7 @@
                 $platform.name,
                 key
             );
-            $platform.key = key;
+            invalidate(Dependencies.PLATFORM);
             addNotification({
                 type: 'success',
                 message: 'Platform Bundle ID has been updated'
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterLinux.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterLinux.svelte
index 313722e74f..361a4c8426 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterLinux.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterLinux.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
     import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -21,7 +23,7 @@
                 $platform.name,
                 key
             );
-            $platform.key = key;
+            invalidate(Dependencies.PLATFORM);
             addNotification({
                 type: 'success',
                 message: 'Platform Package Name has been updated'
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterMacOS.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterMacOS.svelte
index 8e75bf735f..5fb5c85b20 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterMacOS.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterMacOS.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
     import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -21,7 +23,7 @@
                 $platform.name,
                 key
             );
-            $platform.key = key;
+            invalidate(Dependencies.PLATFORM);
             addNotification({
                 type: 'success',
                 message: 'Platform Bundle ID has been updated'
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterWindows.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterWindows.svelte
index 313722e74f..361a4c8426 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterWindows.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterWindows.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
     import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -21,7 +23,7 @@
                 $platform.name,
                 key
             );
-            $platform.key = key;
+            invalidate(Dependencies.PLATFORM);
             addNotification({
                 type: 'success',
                 message: 'Platform Package Name has been updated'
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/header.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/header.svelte
index cfccf8fa59..22728fd6af 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/header.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Cover } from '$lib/layout';
+    import { Cover, CoverTitle } from '$lib/layout';
     import { platform } from './store';
 
     const projectId = $page.params.project;
@@ -8,14 +8,8 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <a
-            class="back-button"
-            href={`/console/project-${projectId}/overview/platforms`}
-            aria-label="page back">
-            <span class="icon-cheveron-left" aria-hidden="true" />
-        </a>
-        <h1 class="heading-level-4">
-            <span class="text">{$platform.name}</span>
-        </h1>
+        <CoverTitle href={`/console/project-${projectId}/overview/platforms`}>
+            {$platform?.name}
+        </CoverTitle>
     </svelte:fragment>
 </Cover>
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/store.ts b/src/routes/console/project-[project]/overview/platforms/[platform]/store.ts
index cd0ea032e8..cacaef3093 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/store.ts
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/store.ts
@@ -1,17 +1,5 @@
-import { sdkForConsole } from '$lib/stores/sdk';
+import { derived } from 'svelte/store';
+import { page } from '$app/stores';
 import type { Models } from '@aw-labs/appwrite-console';
-import { cachedStore } from '$lib/helpers/cache';
 
-export const platform = cachedStore<
-    Models.Platform,
-    {
-        load: (projectId: string, platformId: string) => Promise<void>;
-    }
->('platform', function ({ set }) {
-    return {
-        load: async (projectId, platformId) => {
-            const platform = await sdkForConsole.projects.getPlatform(projectId, platformId);
-            set(platform);
-        }
-    };
-});
+export const platform = derived(page, ($page) => $page.data.platform as Models.Platform);
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/web.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/web.svelte
index 7fb0513473..bd4561f952 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/web.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/web.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
     import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -23,7 +25,7 @@
                 undefined,
                 hostname
             );
-            project.load($project.$id);
+            invalidate(Dependencies.PLATFORM);
             addNotification({
                 type: 'success',
                 message: 'Platform Hostname has been updated'
diff --git a/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte b/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
index d2bc069360..76391026c9 100644
--- a/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
@@ -1,20 +1,17 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { beforeNavigate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { beforeNavigate, invalidate } from '$app/navigation';
     import { wizard } from '$lib/stores/wizard';
-    import { project } from '../../store';
+    import { createPlatform } from './wizard/store';
     import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import Step1 from './wizard/android/step1.svelte';
     import Step2 from './wizard/android/step2.svelte';
     import Step3 from './wizard/android/step3.svelte';
     import Step4 from './wizard/step4.svelte';
-    import { createPlatform } from './wizard/store';
-
-    const projectId = $page.params.project;
+    import { Dependencies } from '$lib/constants';
 
-    async function create() {
-        project.load(projectId);
+    async function onFinish() {
+        invalidate(Dependencies.PLATFORMS);
         createPlatform.reset();
         wizard.hide();
     }
@@ -48,6 +45,6 @@
 <Wizard
     title="Add an Android Project"
     steps={stepsComponents}
-    on:finish={create}
-    on:exit={createPlatform.reset}
+    on:finish={onFinish}
+    on:exit={onFinish}
     finalAction="Take me to my Dashboard" />
diff --git a/src/routes/console/project-[project]/overview/platforms/createApple.svelte b/src/routes/console/project-[project]/overview/platforms/createApple.svelte
index 6a08eff4c9..e38ff1eeb9 100644
--- a/src/routes/console/project-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createApple.svelte
@@ -1,20 +1,17 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { beforeNavigate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { beforeNavigate, invalidate } from '$app/navigation';
     import { wizard } from '$lib/stores/wizard';
-    import { project } from '../../store';
+    import { createPlatform } from './wizard/store';
     import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import Step1 from './wizard/apple/step1.svelte';
     import Step2 from './wizard/apple/step2.svelte';
     import Step3 from './wizard/apple/step3.svelte';
     import Step4 from './wizard/step4.svelte';
-    import { createPlatform } from './wizard/store';
-
-    const projectId = $page.params.project;
+    import { Dependencies } from '$lib/constants';
 
-    async function create() {
-        project.load(projectId);
+    async function onFinish() {
+        invalidate(Dependencies.PLATFORMS);
         createPlatform.reset();
         wizard.hide();
     }
@@ -48,6 +45,6 @@
 <Wizard
     title="Add an Apple Project"
     steps={stepsComponents}
-    on:finish={create}
-    on:exit={createPlatform.reset}
+    on:finish={onFinish}
+    on:exit={onFinish}
     finalAction="Take me to my Dashboard" />
diff --git a/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte b/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
index c243b7bcde..e9a3c6e07e 100644
--- a/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
@@ -1,20 +1,17 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { beforeNavigate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { beforeNavigate, invalidate } from '$app/navigation';
     import { wizard } from '$lib/stores/wizard';
-    import { project } from '../../store';
+    import { createPlatform } from './wizard/store';
     import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import Step1 from './wizard/flutter/step1.svelte';
     import Step2 from './wizard/flutter/step2.svelte';
     import Step3 from './wizard/flutter/step3.svelte';
     import Step4 from './wizard/step4.svelte';
-    import { createPlatform } from './wizard/store';
-
-    const projectId = $page.params.project;
+    import { Dependencies } from '$lib/constants';
 
-    async function create() {
-        project.load(projectId);
+    async function onFinish() {
+        invalidate(Dependencies.PLATFORMS);
         createPlatform.reset();
         wizard.hide();
     }
@@ -48,6 +45,6 @@
 <Wizard
     title="Add a Flutter Project"
     steps={stepsComponents}
-    on:finish={create}
-    on:exit={createPlatform.reset}
+    on:finish={onFinish}
+    on:exit={onFinish}
     finalAction="Take me to my Dashboard" />
diff --git a/src/routes/console/project-[project]/overview/platforms/createWeb.svelte b/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
index 1b2aebfe54..60fc55a999 100644
--- a/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
@@ -1,20 +1,17 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { beforeNavigate } from '$app/navigation';
-    import { page } from '$app/stores';
+    import { beforeNavigate, invalidate } from '$app/navigation';
     import { wizard } from '$lib/stores/wizard';
-    import { project } from '../../store';
+    import { createPlatform } from './wizard/store';
     import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import Step1 from './wizard/web/step1.svelte';
     import Step2 from './wizard/web/step2.svelte';
     import Step3 from './wizard/web/step3.svelte';
     import Step4 from './wizard/step4.svelte';
-    import { createPlatform } from './wizard/store';
-
-    const projectId = $page.params.project;
+    import { Dependencies } from '$lib/constants';
 
-    async function create() {
-        project.load(projectId);
+    async function onFinish() {
+        invalidate(Dependencies.PLATFORMS);
         createPlatform.reset();
         wizard.hide();
     }
@@ -48,6 +45,6 @@
 <Wizard
     title="Add a Web Project"
     steps={stepsComponents}
-    on:finish={create}
-    on:exit={createPlatform.reset}
+    on:finish={onFinish}
+    on:exit={onFinish}
     finalAction="Take me to my Dashboard" />
diff --git a/src/routes/console/project-[project]/settings/+layout.svelte b/src/routes/console/project-[project]/settings/+layout.svelte
index 75161fbc64..964f360df3 100644
--- a/src/routes/console/project-[project]/settings/+layout.svelte
+++ b/src/routes/console/project-[project]/settings/+layout.svelte
@@ -1,31 +1,5 @@
-<script>
-    import { afterNavigate } from '$app/navigation';
-    import { page } from '$app/stores';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-    import Breadcrumbs from './breadcrumbs.svelte';
-    import Header from './header.svelte';
-
-    const path = 'settings';
-    const projectId = $page.params.project;
-    let loaded = false;
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    function handle(event = null) {
-        updateLayout({
-            header: Header,
-            breadcrumb: Breadcrumbs
-        });
-        loaded = true;
-    }
-</script>
-
 <svelte:head>
     <title>Settings - Appwrite</title>
 </svelte:head>
 
-{#if loaded}
-    <slot />
-{/if}
+<slot />
diff --git a/src/routes/console/project-[project]/settings/+layout.ts b/src/routes/console/project-[project]/settings/+layout.ts
new file mode 100644
index 0000000000..7db345058e
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/+layout.ts
@@ -0,0 +1,10 @@
+import Breadcrumbs from './breadcrumbs.svelte';
+import Header from './header.svelte';
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = async () => {
+    return {
+        header: Header,
+        breadcrumbs: Breadcrumbs
+    };
+};
diff --git a/src/routes/console/project-[project]/settings/+page.svelte b/src/routes/console/project-[project]/settings/+page.svelte
index c718bd66ac..dc201d5279 100644
--- a/src/routes/console/project-[project]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/settings/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { sdkForConsole } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
-    import { page } from '$app/stores';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { addNotification } from '$lib/stores/notifications';
     import { project } from '../store';
@@ -9,22 +8,22 @@
     import { CardGrid, CopyInput, Box, Heading } from '$lib/components';
     import { Button, Form, FormList, InputText, InputSwitch } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
-    import Delete from './_deleteProject.svelte';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import Delete from './deleteProject.svelte';
 
     let name: string = null;
     let showDelete = false;
     const endpoint = sdkForConsole.client.config.endpoint;
 
     onMount(async () => {
-        await project.load($page.params.project);
-
         name ??= $project.name;
     });
 
     const updateName = async () => {
         try {
             await sdkForConsole.projects.update($project.$id, name);
-            $project.name = name;
+            invalidate(Dependencies.PROJECT);
             addNotification({
                 type: 'success',
                 message: 'Project name has been updated'
@@ -44,6 +43,7 @@
                 service.method,
                 service.value
             );
+            invalidate(Dependencies.PROJECT);
             addNotification({
                 type: 'success',
                 message: `${service.label} service has been ${
diff --git a/src/routes/console/project-[project]/settings/_deleteProject.svelte b/src/routes/console/project-[project]/settings/_deleteProject.svelte
deleted file mode 100644
index c57d5bf127..0000000000
--- a/src/routes/console/project-[project]/settings/_deleteProject.svelte
+++ /dev/null
@@ -1,70 +0,0 @@
-<script lang="ts">
-    import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { Modal } from '$lib/components';
-    import { Button, Form, FormList, InputPassword, InputText } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
-    import { onMount } from 'svelte';
-    import { project } from '../store';
-
-    export let showDelete = false;
-
-    const projectId = $page.params.project;
-    let password: string = null;
-    let name: string = null;
-
-    onMount(async () => {
-        if (projectId !== $project.$id) await project.load(projectId);
-    });
-
-    const handleDelete = async () => {
-        try {
-            await sdkForConsole.projects.delete($project.$id, password);
-            showDelete = false;
-            addNotification({
-                type: 'success',
-                message: `${$project.name} has been deleted`
-            });
-            await goto(`${base}/console`);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    };
-</script>
-
-<Form on:submit={handleDelete}>
-    <Modal bind:show={showDelete} warning>
-        <svelte:fragment slot="header">Delete Project</svelte:fragment>
-        <p>
-            <b>This project will be deleted</b>, along with all of its metadata, stats, and other
-            resources. <b>This action is irreversible</b>.
-        </p>
-
-        <FormList>
-            <InputText
-                label={`Enter "${$project.name}" to continue`}
-                placeholder="Enter name"
-                id="name"
-                autofocus
-                required
-                bind:value={name} />
-            <InputPassword
-                label="To verify, enter your password"
-                placeholder="Enter password"
-                id="password"
-                required
-                showPasswordButton={true}
-                bind:value={password} />
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button disabled={!name || !password || name !== $project.name} secondary submit
-                >Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
diff --git a/src/routes/console/project-[project]/settings/breadcrumbs.svelte b/src/routes/console/project-[project]/settings/breadcrumbs.svelte
index c15a0e819c..2a4b6cb8ff 100644
--- a/src/routes/console/project-[project]/settings/breadcrumbs.svelte
+++ b/src/routes/console/project-[project]/settings/breadcrumbs.svelte
@@ -5,15 +5,15 @@
 
     $: breadcrumbs = [
         {
-            href: `/console/organization-${$organization.$id}`,
-            title: $organization.name
+            href: `/console/organization-${$organization?.$id}`,
+            title: $organization?.name
         },
         {
-            href: `/console/project-${$project.$id}`,
-            title: $project.name
+            href: `/console/project-${$project?.$id}`,
+            title: $project?.name
         },
         {
-            href: `/console/project-${$project.$id}/settings`,
+            href: `/console/project-${$project?.$id}/settings`,
             title: 'Settings'
         }
     ];
diff --git a/src/routes/console/project-[project]/settings/deleteProject.svelte b/src/routes/console/project-[project]/settings/deleteProject.svelte
new file mode 100644
index 0000000000..b2a60018d1
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/deleteProject.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { Modal } from '$lib/components';
+    import { Button, FormList, InputPassword, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { project } from '../store';
+
+    export let showDelete = false;
+
+    let password: string = null;
+    let name: string = null;
+
+    const handleDelete = async () => {
+        try {
+            await sdkForConsole.projects.delete($project.$id, password);
+            showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `${$project.name} has been deleted`
+            });
+            await goto(`${base}/console`);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Modal bind:show={showDelete} on:submit={handleDelete} warning>
+    <svelte:fragment slot="header">Delete Project</svelte:fragment>
+    <p>
+        <b>This project will be deleted</b>, along with all of its metadata, stats, and other
+        resources. <b>This action is irreversible</b>.
+    </p>
+
+    <FormList>
+        <InputText
+            label={`Enter "${$project.name}" to continue`}
+            placeholder="Enter name"
+            id="name"
+            autofocus
+            required
+            bind:value={name} />
+        <InputPassword
+            label="To verify, enter your password"
+            placeholder="Enter password"
+            id="password"
+            required
+            showPasswordButton={true}
+            bind:value={password} />
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button disabled={!name || !password || name !== $project.name} secondary submit>
+            Delete
+        </Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/settings/domains/+page.svelte b/src/routes/console/project-[project]/settings/domains/+page.svelte
deleted file mode 100644
index fe06f2d30d..0000000000
--- a/src/routes/console/project-[project]/settings/domains/+page.svelte
+++ /dev/null
@@ -1,161 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { tooltip } from '$lib/actions/tooltip';
-    import { Empty, Heading } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { Button } from '$lib/elements/forms';
-    import {
-        Table,
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow
-    } from '$lib/elements/table';
-    import { Container } from '$lib/layout';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
-    import { wizard } from '$lib/stores/wizard';
-    import Create from './_create.svelte';
-    import Delete from './_delete.svelte';
-    import { domainList } from './store';
-    import type { Models } from '@aw-labs/appwrite-console';
-
-    const projectId = $page.params.project;
-    let showDelete = false;
-    let selectedDomain: Models.Domain;
-    let isVerifying = {};
-
-    const openWizard = () => {
-        wizard.start(Create);
-    };
-
-    const refreshDomain = async (domain: Models.Domain, i: number) => {
-        const domainId = domain.$id;
-        try {
-            isVerifying[domainId] = true;
-
-            if (domain.verification) {
-                await domainList.load(projectId);
-                return;
-            }
-            const result = await sdkForConsole.projects.updateDomainVerification(
-                projectId,
-                domainId
-            );
-            $domainList.domains[i] = result;
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-        } finally {
-            isVerifying[domainId] = false;
-        }
-    };
-</script>
-
-<Container>
-    <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <Heading tag="h2" size="5">Custom Domains</Heading>
-
-        <Button on:click={openWizard}>
-            <span class="icon-plus" aria-hidden="true" /> <span class="text">Create domain</span>
-        </Button>
-    </div>
-    {#await domainList.load(projectId)}
-        <div aria-busy="true" />
-    {:then}
-        {#if $domainList.total}
-            <Table>
-                <TableHeader>
-                    <TableCellHead />
-                    <TableCellHead>Domain Name</TableCellHead>
-                    <TableCellHead>TLS</TableCellHead>
-                    <TableCellHead />
-                </TableHeader>
-                <TableBody>
-                    {#each $domainList.domains as domain, i}
-                        <TableRow>
-                            <TableCellText title="Status">
-                                <Pill warning={!domain.verification} success={domain.verification}>
-                                    {domain.verification ? 'verified' : 'unverified'}
-                                </Pill>
-                            </TableCellText>
-                            <TableCellText title="Domain">
-                                {domain.domain}
-                            </TableCellText>
-                            <TableCellText title="TLS">
-                                {#if domain.certificateId}
-                                    <Pill success>enabled</Pill>
-                                {:else}
-                                    <span
-                                        use:tooltip={{
-                                            content:
-                                                "The process might take a while, click the retry button to see if it's finished"
-                                        }}>
-                                        <Pill warning>
-                                            {!domain.verification
-                                                ? 'pending verification'
-                                                : 'in progress'}
-                                        </Pill>
-                                    </span>
-                                {/if}
-                            </TableCellText>
-                            <TableCell title="Actions">
-                                <div class="u-flex u-gap-8 u-cross-center u-main-end">
-                                    {#if isVerifying[domain.$id]}
-                                        <!-- TODO: remove inline styles -->
-                                        <div
-                                            class="loader"
-                                            style="color: hsl(var(--color-neutral-50)); inline-size: 1.25rem; block-size: 1.25rem" />
-                                    {:else if !domain.certificateId}
-                                        <!-- TODO: remove inline styles -->
-                                        <button
-                                            class="button is-text is-only-icon u-padding-inline-0"
-                                            style="--p-button-size: var(--button-size, 2.0rem);"
-                                            aria-label="Verify item"
-                                            on:click={() => {
-                                                refreshDomain(domain, i);
-                                            }}>
-                                            <span class="icon-refresh" aria-hidden="true" />
-                                        </button>
-                                    {/if}
-                                    <!-- TODO: remove inline styles -->
-                                    <button
-                                        class="button tooltip is-text is-only-icon u-padding-inline-0"
-                                        style="--p-button-size: var(--button-size, 2.0rem);"
-                                        aria-label="Delete item"
-                                        on:click={async () => {
-                                            showDelete = true;
-                                            selectedDomain = domain;
-                                        }}>
-                                        <span class="icon-trash" aria-hidden="true" />
-                                        <span class="tooltip-popup is-bottom" role="tooltip">
-                                            Delete
-                                        </span>
-                                    </button>
-                                </div>
-                            </TableCell>
-                        </TableRow>
-                    {/each}
-                </TableBody>
-            </Table>
-        {:else}
-            <Empty isButton single on:click={openWizard}>
-                <div class="common-section">
-                    <div class="u-text-center common-section">
-                        <p>Create your first Domain to get started</p>
-                    </div>
-                    <div class="u-flex u-gap-16 common-section u-main-center">
-                        <Button external href="#/" text>Documentation</Button>
-                        <Button secondary>Create domain</Button>
-                    </div>
-                </div>
-            </Empty>
-        {/if}
-    {/await}
-</Container>
-
-<Delete bind:showDelete bind:selectedDomain />
diff --git a/src/routes/console/project-[project]/settings/domains/[[page]]/+page.svelte b/src/routes/console/project-[project]/settings/domains/[[page]]/+page.svelte
new file mode 100644
index 0000000000..de3ef195ad
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/domains/[[page]]/+page.svelte
@@ -0,0 +1,156 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { tooltip } from '$lib/actions/tooltip';
+    import { Empty, Heading } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Button } from '$lib/elements/forms';
+    import {
+        Table,
+        TableBody,
+        TableCell,
+        TableCellHead,
+        TableCellText,
+        TableHeader,
+        TableRow
+    } from '$lib/elements/table';
+    import { Container } from '$lib/layout';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { wizard } from '$lib/stores/wizard';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import type { PageData } from './$types';
+    import Create from '../create.svelte';
+    import Delete from '../delete.svelte';
+
+    export let data: PageData;
+
+    const projectId = $page.params.project;
+    let showDelete = false;
+    let selectedDomain: Models.Domain;
+    let isVerifying = {};
+
+    const openWizard = () => {
+        wizard.start(Create);
+    };
+
+    const refreshDomain = async (domain: Models.Domain) => {
+        const domainId = domain.$id;
+        try {
+            isVerifying[domainId] = true;
+
+            if (domain.verification) {
+                invalidate(Dependencies.DOMAINS);
+                return;
+            }
+            await sdkForConsole.projects.updateDomainVerification(projectId, domainId);
+            invalidate(Dependencies.DOMAINS);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        } finally {
+            isVerifying[domainId] = false;
+        }
+    };
+</script>
+
+<Container>
+    <div class="u-flex u-gap-12 common-section u-main-space-between">
+        <Heading tag="h2" size="5">Custom Domains</Heading>
+
+        <Button on:click={openWizard}>
+            <span class="icon-plus" aria-hidden="true" /> <span class="text">Create domain</span>
+        </Button>
+    </div>
+    {#if data.domains.total}
+        <Table>
+            <TableHeader>
+                <TableCellHead />
+                <TableCellHead>Domain Name</TableCellHead>
+                <TableCellHead>TLS</TableCellHead>
+                <TableCellHead />
+            </TableHeader>
+            <TableBody>
+                {#each data.domains.domains as domain}
+                    <TableRow>
+                        <TableCellText title="Status">
+                            <Pill warning={!domain.verification} success={domain.verification}>
+                                {domain.verification ? 'verified' : 'unverified'}
+                            </Pill>
+                        </TableCellText>
+                        <TableCellText title="Domain">
+                            {domain.domain}
+                        </TableCellText>
+                        <TableCellText title="TLS">
+                            {#if domain.certificateId}
+                                <Pill success>enabled</Pill>
+                            {:else}
+                                <span
+                                    use:tooltip={{
+                                        content:
+                                            "The process might take a while, click the retry button to see if it's finished"
+                                    }}>
+                                    <Pill warning>
+                                        {!domain.verification
+                                            ? 'pending verification'
+                                            : 'in progress'}
+                                    </Pill>
+                                </span>
+                            {/if}
+                        </TableCellText>
+                        <TableCell title="Actions">
+                            <div class="u-flex u-gap-8 u-cross-center u-main-end">
+                                {#if isVerifying[domain.$id]}
+                                    <!-- TODO: remove inline styles -->
+                                    <div
+                                        class="loader"
+                                        style="color: hsl(var(--color-neutral-50)); inline-size: 1.25rem; block-size: 1.25rem" />
+                                {:else if !domain.certificateId}
+                                    <!-- TODO: remove inline styles -->
+                                    <button
+                                        class="button is-text is-only-icon u-padding-inline-0"
+                                        style="--p-button-size: var(--button-size, 2.0rem);"
+                                        aria-label="Verify item"
+                                        on:click={() => refreshDomain(domain)}>
+                                        <span class="icon-refresh" aria-hidden="true" />
+                                    </button>
+                                {/if}
+                                <!-- TODO: remove inline styles -->
+                                <button
+                                    class="button tooltip is-text is-only-icon u-padding-inline-0"
+                                    style="--p-button-size: var(--button-size, 2.0rem);"
+                                    aria-label="Delete item"
+                                    on:click={async () => {
+                                        showDelete = true;
+                                        selectedDomain = domain;
+                                    }}>
+                                    <span class="icon-trash" aria-hidden="true" />
+                                    <span class="tooltip-popup is-bottom" role="tooltip">
+                                        Delete
+                                    </span>
+                                </button>
+                            </div>
+                        </TableCell>
+                    </TableRow>
+                {/each}
+            </TableBody>
+        </Table>
+    {:else}
+        <Empty isButton single on:click={openWizard}>
+            <div class="common-section">
+                <div class="u-text-center common-section">
+                    <p>Create your first Domain to get started</p>
+                </div>
+                <div class="u-flex u-gap-16 common-section u-main-center">
+                    <Button external href="#/" text>Documentation</Button>
+                    <Button secondary>Create domain</Button>
+                </div>
+            </div>
+        </Empty>
+    {/if}
+</Container>
+
+<Delete bind:showDelete bind:selectedDomain />
diff --git a/src/routes/console/project-[project]/settings/domains/[[page]]/+page.ts b/src/routes/console/project-[project]/settings/domains/[[page]]/+page.ts
new file mode 100644
index 0000000000..21650e7ce1
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/domains/[[page]]/+page.ts
@@ -0,0 +1,12 @@
+import { Dependencies } from '$lib/constants';
+import { sdkForConsole } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent, depends }) => {
+    await parent();
+    depends(Dependencies.DOMAINS);
+
+    return {
+        domains: await sdkForConsole.projects.listDomains(params.project)
+    };
+};
diff --git a/src/routes/console/project-[project]/settings/domains/_create.svelte b/src/routes/console/project-[project]/settings/domains/create.svelte
similarity index 80%
rename from src/routes/console/project-[project]/settings/domains/_create.svelte
rename to src/routes/console/project-[project]/settings/domains/create.svelte
index 6a0faa7cd5..ddf0eb338b 100644
--- a/src/routes/console/project-[project]/settings/domains/_create.svelte
+++ b/src/routes/console/project-[project]/settings/domains/create.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { beforeNavigate } from '$app/navigation';
+    import { beforeNavigate, invalidate } from '$app/navigation';
     import { wizard } from '$lib/stores/wizard';
     import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import { domain } from './wizard/store';
@@ -9,6 +9,7 @@
     import Step3 from './wizard/step3.svelte';
     import Step4 from './wizard/step4.svelte';
     import { onDestroy } from 'svelte';
+    import { Dependencies } from '$lib/constants';
 
     onDestroy(() => {
         domain.set({ id: '', name: '' });
@@ -18,6 +19,11 @@
         wizard.hide();
     });
 
+    function onFinish() {
+        invalidate(Dependencies.DOMAINS);
+        wizard.hide();
+    }
+
     const stepsComponents: WizardStepsType = new Map();
     stepsComponents.set(1, {
         label: 'Add your domain',
@@ -41,4 +47,5 @@
     title="Create domain"
     steps={stepsComponents}
     finalAction="Go to console"
-    on:finish={wizard.hide} />
+    on:exit={onFinish}
+    on:finish={onFinish} />
diff --git a/src/routes/console/project-[project]/settings/domains/_delete.svelte b/src/routes/console/project-[project]/settings/domains/delete.svelte
similarity index 63%
rename from src/routes/console/project-[project]/settings/domains/_delete.svelte
rename to src/routes/console/project-[project]/settings/domains/delete.svelte
index 3c37bfe666..a12fc4d397 100644
--- a/src/routes/console/project-[project]/settings/domains/_delete.svelte
+++ b/src/routes/console/project-[project]/settings/domains/delete.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { project } from '../../store';
-    import type { Models } from '@aw-labs/appwrite-console';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
-    import { domainList } from './store';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import type { Models } from '@aw-labs/appwrite-console';
 
     export let showDelete = false;
     export let selectedDomain: Models.Domain;
@@ -13,7 +14,7 @@
     const deleteDomain = async () => {
         try {
             await sdkForConsole.projects.deleteDomain($project.$id, selectedDomain.$id);
-            domainList.load($project.$id);
+            invalidate(Dependencies.DOMAINS);
             showDelete = false;
             addNotification({
                 type: 'success',
@@ -28,15 +29,15 @@
     };
 </script>
 
-<Form on:submit={deleteDomain}>
-    <Modal bind:show={showDelete} warning>
-        <svelte:fragment slot="header">Delete Domain</svelte:fragment>
+<Modal bind:show={showDelete} on:submit={deleteDomain} warning>
+    <svelte:fragment slot="header">Delete Domain</svelte:fragment>
+    {#if selectedDomain}
         <p>
             Are you sure you want to delete <b>{selectedDomain.domain}</b> from '{$project.name}'?
         </p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+    {/if}
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/settings/domains/store.ts b/src/routes/console/project-[project]/settings/domains/store.ts
deleted file mode 100644
index 712e7c3191..0000000000
--- a/src/routes/console/project-[project]/settings/domains/store.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { sdkForConsole } from '$lib/stores/sdk';
-import type { Models } from '@aw-labs/appwrite-console';
-import { cachedStore } from '$lib/helpers/cache';
-
-export const domainList = cachedStore<
-    Models.DomainList,
-    {
-        load: (projectId: string) => Promise<void>;
-    }
->('domainList', function ({ set }) {
-    return {
-        load: async (projectId) => {
-            const response = await sdkForConsole.projects.listDomains(projectId);
-            set(response);
-        }
-    };
-});
diff --git a/src/routes/console/project-[project]/settings/domains/wizard/_cnameTable.svelte b/src/routes/console/project-[project]/settings/domains/wizard/cnameTable.svelte
similarity index 100%
rename from src/routes/console/project-[project]/settings/domains/wizard/_cnameTable.svelte
rename to src/routes/console/project-[project]/settings/domains/wizard/cnameTable.svelte
diff --git a/src/routes/console/project-[project]/settings/domains/wizard/step1.svelte b/src/routes/console/project-[project]/settings/domains/wizard/step1.svelte
index 2287f0dd6c..21ee2bbf63 100644
--- a/src/routes/console/project-[project]/settings/domains/wizard/step1.svelte
+++ b/src/routes/console/project-[project]/settings/domains/wizard/step1.svelte
@@ -4,7 +4,6 @@
     import { sdkForConsole } from '$lib/stores/sdk';
     import { project } from '../../../store';
     import { domain } from './store';
-    import { domainList } from '../store';
 
     // Handle if user goes back to this step to update
     // the domain name after creating the domain
@@ -28,9 +27,7 @@
         }
 
         if ($domain.id == '') {
-            const newDomain = await sdkForConsole.projects.createDomain(projectId, $domain.name);
-            domainList.load(projectId);
-            $domain.id = newDomain.$id;
+            await sdkForConsole.projects.createDomain(projectId, $domain.name);
         }
     };
 </script>
diff --git a/src/routes/console/project-[project]/settings/domains/wizard/step2.svelte b/src/routes/console/project-[project]/settings/domains/wizard/step2.svelte
index 581fb99236..52e4aca17e 100644
--- a/src/routes/console/project-[project]/settings/domains/wizard/step2.svelte
+++ b/src/routes/console/project-[project]/settings/domains/wizard/step2.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { WizardStep } from '$lib/layout';
-    import CnameTable from './_cnameTable.svelte';
+    import CnameTable from './cnameTable.svelte';
 </script>
 
 <WizardStep>
diff --git a/src/routes/console/project-[project]/settings/domains/wizard/step3.svelte b/src/routes/console/project-[project]/settings/domains/wizard/step3.svelte
index da6f43392b..74598ab47a 100644
--- a/src/routes/console/project-[project]/settings/domains/wizard/step3.svelte
+++ b/src/routes/console/project-[project]/settings/domains/wizard/step3.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { WizardStep } from '$lib/layout';
-    import CnameTable from './_cnameTable.svelte';
-    import VerificationBox from './_verificationBox.svelte';
+    import CnameTable from './cnameTable.svelte';
+    import VerificationBox from './verificationBox.svelte';
 
     let isVerifying = false;
     let isVerified = false;
diff --git a/src/routes/console/project-[project]/settings/domains/wizard/step4.svelte b/src/routes/console/project-[project]/settings/domains/wizard/step4.svelte
index 34ef5073f7..eed0a85acb 100644
--- a/src/routes/console/project-[project]/settings/domains/wizard/step4.svelte
+++ b/src/routes/console/project-[project]/settings/domains/wizard/step4.svelte
@@ -3,9 +3,8 @@
     import { sdkForConsole } from '$lib/stores/sdk';
     import { domain } from './store';
     import { project } from '../../../store';
-    import { domainList } from '../store';
-    import CnameTable from './_cnameTable.svelte';
-    import VerificationBox from './_verificationBox.svelte';
+    import CnameTable from './cnameTable.svelte';
+    import VerificationBox from './verificationBox.svelte';
 
     const projectId = $project.$id;
 
@@ -17,10 +16,6 @@
                 checkCertificate();
                 return;
             }
-            const i = $domainList.domains.findIndex((d) => d.$id === $domain.id);
-            if (i >= 0) {
-                $domainList.domains[i] = result;
-            }
             certificate = true;
         }, 2000);
     };
diff --git a/src/routes/console/project-[project]/settings/domains/wizard/_verificationBox.svelte b/src/routes/console/project-[project]/settings/domains/wizard/verificationBox.svelte
similarity index 100%
rename from src/routes/console/project-[project]/settings/domains/wizard/_verificationBox.svelte
rename to src/routes/console/project-[project]/settings/domains/wizard/verificationBox.svelte
diff --git a/src/routes/console/project-[project]/settings/header.svelte b/src/routes/console/project-[project]/settings/header.svelte
index f454b1ede3..12a880562a 100644
--- a/src/routes/console/project-[project]/settings/header.svelte
+++ b/src/routes/console/project-[project]/settings/header.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { Tab, Tabs } from '$lib/components';
-    import { Cover } from '$lib/layout';
+    import { isTabSelected } from '$lib/helpers/load';
+    import { Cover, CoverTitle } from '$lib/layout';
 
     const projectId = $page.params.project;
     const path = `/console/project-${projectId}/settings`;
@@ -23,14 +24,12 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <h1 class="heading-level-4">
-            <span class="text">Settings</span>
-        </h1>
+        <CoverTitle>Settings</CoverTitle>
     </svelte:fragment>
 
     <Tabs>
         {#each tabs as tab}
-            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
                 {tab.title}
             </Tab>
         {/each}
diff --git a/src/routes/console/project-[project]/settings/services/+page.svelte b/src/routes/console/project-[project]/settings/services/+page.svelte
deleted file mode 100644
index 9194bad063..0000000000
--- a/src/routes/console/project-[project]/settings/services/+page.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script lang="ts">
-    import { Card } from '$lib/components';
-    import { Container } from '$lib/layout';
-</script>
-
-<Container>
-    <h1>Services</h1>
-    <Card />
-</Container>
diff --git a/src/routes/console/project-[project]/settings/webhooks/+page.svelte b/src/routes/console/project-[project]/settings/webhooks/+page.svelte
index e5dc3756f2..9fb631f506 100644
--- a/src/routes/console/project-[project]/settings/webhooks/+page.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/+page.svelte
@@ -16,10 +16,12 @@
     } from '$lib/elements/table';
     import { Container } from '$lib/layout';
     import { wizard } from '$lib/stores/wizard';
+    import type { PageData } from './$types';
     import Create from './createWebhook.svelte';
-    import { webhookList } from './store';
     import Heading from '$lib/components/heading.svelte';
 
+    export let data: PageData;
+
     function openWizard() {
         wizard.start(Create);
     }
@@ -29,13 +31,12 @@
     });
 
     const projectId = $page.params.project;
-
-    $: webhookList.load(projectId);
 </script>
 
 <svelte:head>
     <title>Webhooks - Appwrite</title>
 </svelte:head>
+
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
         <Heading tag="h2" size="5">Webhooks</Heading>
@@ -44,7 +45,7 @@
         </Button>
     </div>
 
-    {#if $webhookList?.total}
+    {#if data.webhooks.total}
         <Table>
             <TableHeader>
                 <TableCellHead>Name</TableCellHead>
@@ -52,9 +53,9 @@
                 <TableCellHead width={80}>Events</TableCellHead>
             </TableHeader>
             <TableBody>
-                {#each $webhookList.webhooks as webhook}
+                {#each data.webhooks.webhooks as webhook}
                     <TableRowLink
-                        href={`${base}/console/project-${projectId}/settings/webhooks/webhook/${webhook.$id}`}>
+                        href={`${base}/console/project-${projectId}/settings/webhooks/${webhook.$id}`}>
                         <TableCell title="Name">
                             <div class="u-flex u-main-space-between">
                                 {webhook.name}
diff --git a/src/routes/console/project-[project]/settings/webhooks/+page.ts b/src/routes/console/project-[project]/settings/webhooks/+page.ts
new file mode 100644
index 0000000000..7cfb4a4727
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/+page.ts
@@ -0,0 +1,11 @@
+import { Dependencies } from '$lib/constants';
+import { sdkForConsole } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, depends }) => {
+    depends(Dependencies.WEBHOOKS);
+
+    return {
+        webhooks: await sdkForConsole.projects.listWebhooks(params.project)
+    };
+};
diff --git a/src/routes/console/project-[project]/settings/webhooks/[webhook]/+layout.svelte b/src/routes/console/project-[project]/settings/webhooks/[webhook]/+layout.svelte
new file mode 100644
index 0000000000..e31346b3c4
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/+layout.svelte
@@ -0,0 +1,5 @@
+<svelte:head>
+    <title>Webhook - Appwrite</title>
+</svelte:head>
+
+<slot />
diff --git a/src/routes/console/project-[project]/settings/webhooks/[webhook]/+layout.ts b/src/routes/console/project-[project]/settings/webhooks/[webhook]/+layout.ts
new file mode 100644
index 0000000000..075cecf378
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/+layout.ts
@@ -0,0 +1,20 @@
+import { Dependencies } from '$lib/constants';
+import { sdkForConsole } from '$lib/stores/sdk';
+import Breadcrumbs from './breadcrumbs.svelte';
+import Header from './header.svelte';
+import type { LayoutLoad } from './$types';
+import { error } from '@sveltejs/kit';
+
+export const load: LayoutLoad = async ({ params, depends }) => {
+    depends(Dependencies.WEBHOOK);
+
+    try {
+        return {
+            header: Header,
+            breadcrumbs: Breadcrumbs,
+            webhook: await sdkForConsole.projects.getWebhook(params.project, params.webhook)
+        };
+    } catch (e) {
+        throw error(e.code, e.message);
+    }
+};
diff --git a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/+page.svelte b/src/routes/console/project-[project]/settings/webhooks/[webhook]/+page.svelte
similarity index 96%
rename from src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/+page.svelte
rename to src/routes/console/project-[project]/settings/webhooks/[webhook]/+page.svelte
index 3d8297f3d3..a71badf95f 100644
--- a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/+page.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/+page.svelte
@@ -19,6 +19,8 @@
     import Delete from './delete.svelte';
     import Regenerate from './regenerate.svelte';
     import { difference } from '$lib/helpers/array';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
 
     const projectId = $page.params.project;
     let name: string = null;
@@ -51,7 +53,7 @@
                 $webhook.url,
                 $webhook.security
             );
-            $webhook.name = name;
+            invalidate(Dependencies.WEBHOOK);
             addNotification({
                 type: 'success',
                 message: 'Webhook name has been updated'
@@ -73,7 +75,7 @@
                 url,
                 $webhook.security
             );
-            $webhook.url = url;
+            invalidate(Dependencies.WEBHOOK);
             addNotification({
                 type: 'success',
                 message: 'Webhook url has been updated'
@@ -95,7 +97,7 @@
                 $webhook.url,
                 $webhook.security
             );
-            $webhook.events = events;
+            invalidate(Dependencies.WEBHOOK);
             areEventsDisabled = true;
             addNotification({
                 type: 'success',
@@ -120,9 +122,7 @@
                 httpUser,
                 httpPass
             );
-            $webhook.security = security;
-            $webhook.httpUser = httpUser;
-            $webhook.httpPass = httpPass;
+            invalidate(Dependencies.WEBHOOK);
             addNotification({
                 type: 'success',
                 message: 'Webhook security has been updated'
@@ -134,7 +134,7 @@
             });
         }
     }
-    $: signatureKey = $webhook?.signatureKey;
+
     $: if (difference(events, $webhook.events).length > 0) {
         areEventsDisabled = false;
     }
@@ -147,12 +147,13 @@
         <svelte:fragment slot="aside">
             <div>
                 <p>Key</p>
-                <Secret bind:value={signatureKey} />
+                <Secret bind:value={$webhook.signatureKey} />
             </div>
         </svelte:fragment>
         <svelte:fragment slot="actions">
-            <Button on:click={() => (showRegenerate = true)} secondary submit
-                >Regenerate Key</Button>
+            <Button on:click={() => (showRegenerate = true)} secondary submit>
+                Regenerate Key
+            </Button>
         </svelte:fragment>
     </CardGrid>
     <Form on:submit={updateName}>
diff --git a/src/routes/console/project-[project]/settings/webhooks/[webhook]/breadcrumbs.svelte b/src/routes/console/project-[project]/settings/webhooks/[webhook]/breadcrumbs.svelte
new file mode 100644
index 0000000000..77a2fad04f
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/breadcrumbs.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../../../store';
+    import { webhook } from './store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization?.$id}`,
+            title: $organization?.name
+        },
+        {
+            href: `/console/project-${$project?.$id}`,
+            title: $project?.name
+        },
+        {
+            href: `/console/project-${$project?.$id}/settings/webhooks`,
+            title: 'Settings'
+        },
+        {
+            href: `/console/project-${$project?.$id}/settings/webhooks/webhook/${$webhook?.$id}`,
+            title: $webhook?.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/delete.svelte b/src/routes/console/project-[project]/settings/webhooks/[webhook]/delete.svelte
similarity index 54%
rename from src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/delete.svelte
rename to src/routes/console/project-[project]/settings/webhooks/[webhook]/delete.svelte
index 16234d9d12..ef181aaa92 100644
--- a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/delete.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/delete.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
+    import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import { project } from '../../../../store';
-    import { webhookList } from '../../store';
+    import { project } from '../../../store';
     import { webhook } from './store';
 
     export let showDelete = false;
@@ -14,7 +14,7 @@
     async function handleDelete() {
         try {
             await sdkForConsole.projects.deleteWebhook($project.$id, $webhook.$id);
-            await webhookList.load($project.$id);
+            await invalidate(Dependencies.WEBHOOKS);
             showDelete = false;
             addNotification({
                 type: 'success',
@@ -30,13 +30,11 @@
     }
 </script>
 
-<Form on:submit={handleDelete}>
-    <Modal bind:show={showDelete} warning>
-        <svelte:fragment slot="header">Delete Webhook</svelte:fragment>
-        <p>Are you sure you want to delete <b>{$webhook.name}</b> from '{$project.name}'?</p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal bind:show={showDelete} on:submit={handleDelete} warning>
+    <svelte:fragment slot="header">Delete Webhook</svelte:fragment>
+    <p>Are you sure you want to delete <b>{$webhook.name}</b> from '{$project.name}'?</p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/header.svelte b/src/routes/console/project-[project]/settings/webhooks/[webhook]/header.svelte
similarity index 53%
rename from src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/header.svelte
rename to src/routes/console/project-[project]/settings/webhooks/[webhook]/header.svelte
index a7c84e13b3..f58c23e878 100644
--- a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/header.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/header.svelte
@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { Copy } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { Cover } from '$lib/layout';
+    import { Cover, CoverTitle } from '$lib/layout';
     import { webhook } from './store';
 
     const projectId = $page.params.project;
@@ -10,16 +10,10 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <a
-            class="back-button"
-            href={`/console/project-${projectId}/settings/webhooks`}
-            aria-label="page back">
-            <span class="icon-cheveron-left" aria-hidden="true" />
-        </a>
-        <h1 class="heading-level-4">
-            <span class="text">{$webhook.name}</span>
-        </h1>
-        <Copy value={$webhook.$id}>
+        <CoverTitle href={`/console/project-${projectId}/settings/webhooks`}>
+            {$webhook?.name}
+        </CoverTitle>
+        <Copy value={$webhook?.$id}>
             <Pill button>
                 <span class="icon-duplicate" aria-hidden="true" />
                 Webhook ID
diff --git a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/regenerate.svelte b/src/routes/console/project-[project]/settings/webhooks/[webhook]/regenerate.svelte
similarity index 54%
rename from src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/regenerate.svelte
rename to src/routes/console/project-[project]/settings/webhooks/[webhook]/regenerate.svelte
index 4de854269f..f7ec197623 100644
--- a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/regenerate.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/regenerate.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { webhook } from './store';
@@ -12,7 +14,7 @@
     async function regenerate() {
         try {
             await sdkForConsole.projects.updateWebhookSignature(projectId, $webhook.$id);
-            await webhook.load(projectId, $webhook.$id);
+            invalidate(Dependencies.WEBHOOK);
             show = false;
             addNotification({
                 type: 'success',
@@ -27,16 +29,14 @@
     }
 </script>
 
-<Form on:submit={regenerate}>
-    <Modal bind:show>
-        <svelte:fragment slot="header">Regenerate Key</svelte:fragment>
-        <p class="u-text">
-            Are you sure you want to generate a new Signature Key?
-            <b>You will not be able to recover your current key.</b>
-        </p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (show = false)}>Cancel</Button>
-            <Button secondary submit>Regenerate</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal bind:show on:submit={regenerate}>
+    <svelte:fragment slot="header">Regenerate Key</svelte:fragment>
+    <p class="u-text">
+        Are you sure you want to generate a new Signature Key?
+        <b>You will not be able to recover your current key.</b>
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (show = false)}>Cancel</Button>
+        <Button secondary submit>Regenerate</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/settings/webhooks/[webhook]/store.ts b/src/routes/console/project-[project]/settings/webhooks/[webhook]/store.ts
new file mode 100644
index 0000000000..4bd28c9340
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/store.ts
@@ -0,0 +1,5 @@
+import { derived } from 'svelte/store';
+import { page } from '$app/stores';
+import type { Models } from '@aw-labs/appwrite-console';
+
+export const webhook = derived(page, ($page) => $page.data.webhook as Models.Webhook);
diff --git a/src/routes/console/project-[project]/settings/webhooks/createWebhook.svelte b/src/routes/console/project-[project]/settings/webhooks/createWebhook.svelte
index 7d1e6f6ae4..e3067caa04 100644
--- a/src/routes/console/project-[project]/settings/webhooks/createWebhook.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/createWebhook.svelte
@@ -1,16 +1,17 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import Step1 from './wizard/step1.svelte';
-    import Step2 from './wizard/step2.svelte';
-    import Step3 from './wizard/step3.svelte';
     import { onDestroy } from 'svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { wizard } from '$lib/stores/wizard';
-    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import { createWebhook } from './wizard/store';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { page } from '$app/stores';
-    import { webhookList } from './store';
+    import Step1 from './wizard/step1.svelte';
+    import Step2 from './wizard/step2.svelte';
+    import Step3 from './wizard/step3.svelte';
+    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
 
     const projectId = $page.params.project;
     const create = async () => {
@@ -24,7 +25,7 @@
                 $createWebhook.httpUser,
                 $createWebhook.httpPass
             );
-            await webhookList.load(projectId);
+            invalidate(Dependencies.WEBHOOKS);
             addNotification({
                 message: 'Webhook has been created',
                 type: 'success'
diff --git a/src/routes/console/project-[project]/settings/webhooks/store.ts b/src/routes/console/project-[project]/settings/webhooks/store.ts
deleted file mode 100644
index bbca4e8bc6..0000000000
--- a/src/routes/console/project-[project]/settings/webhooks/store.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { sdkForConsole } from '$lib/stores/sdk';
-import type { Models } from '@aw-labs/appwrite-console';
-import { cachedStore } from '$lib/helpers/cache';
-
-export const webhookList = cachedStore<
-    Models.WebhookList,
-    {
-        load: (projectId: string) => Promise<void>;
-    }
->('webhookList', function ({ set }) {
-    return {
-        load: async (projectId) => {
-            const response = await sdkForConsole.projects.listWebhooks(projectId);
-            set(response);
-        }
-    };
-});
diff --git a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/+layout.svelte b/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/+layout.svelte
deleted file mode 100644
index c0f637f49e..0000000000
--- a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/+layout.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { page } from '$app/stores';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-    import Breadcrumbs from './breadcrumbs.svelte';
-    import Header from './header.svelte';
-    import { webhook } from './store';
-
-    const webhookId = $page.params.webhook;
-    const projectId = $page.params.project;
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle() {
-        const promise = webhook.load(projectId, webhookId);
-
-        if ($webhook?.$id !== webhookId) {
-            await promise;
-        }
-
-        updateLayout({
-            breadcrumb: Breadcrumbs,
-            header: Header
-        });
-    }
-</script>
-
-<svelte:head>
-    <title>Webhook - Appwrite</title>
-</svelte:head>
-
-{#if $webhook}
-    <slot />
-{/if}
diff --git a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/breadcrumbs.svelte b/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/breadcrumbs.svelte
deleted file mode 100644
index 984468cc4a..0000000000
--- a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/breadcrumbs.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-    import { Breadcrumbs } from '$lib/layout';
-    import { organization } from '$lib/stores/organization';
-    import { project } from '../../../../store';
-    import { webhook } from './store';
-
-    $: breadcrumbs = [
-        {
-            href: `/console/organization-${$organization.$id}`,
-            title: $organization.name
-        },
-        {
-            href: `/console/project-${$project.$id}`,
-            title: $project.name
-        },
-        {
-            href: `/console/project-${$project.$id}/settings/webhooks`,
-            title: 'Settings'
-        },
-        {
-            href: `/console/project-${$project.$id}/settings/webhooks/webhook/${$webhook.$id}`,
-            title: $webhook.name
-        }
-    ];
-</script>
-
-<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/store.ts b/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/store.ts
deleted file mode 100644
index fbbcb7faeb..0000000000
--- a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/store.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { sdkForConsole } from '$lib/stores/sdk';
-import type { Models } from '@aw-labs/appwrite-console';
-import { cachedStore } from '$lib/helpers/cache';
-
-export const webhook = cachedStore<
-    Models.Webhook,
-    {
-        load: (projectId: string, webhookId: string) => Promise<void>;
-    }
->('webhook', function ({ set }) {
-    return {
-        load: async (projectId, webhookId) => {
-            const response = await sdkForConsole.projects.getWebhook(projectId, webhookId);
-            set(response);
-        }
-    };
-});
diff --git a/src/routes/console/project-[project]/storage/+layout.svelte b/src/routes/console/project-[project]/storage/+layout.svelte
index 3228bdd6a3..80b3908c68 100644
--- a/src/routes/console/project-[project]/storage/+layout.svelte
+++ b/src/routes/console/project-[project]/storage/+layout.svelte
@@ -1,28 +1,5 @@
-<script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-    import Breadcrumbs from './breadcrumbs.svelte';
-    import Header from './header.svelte';
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    let loaded = false;
-
-    async function handle() {
-        updateLayout({
-            header: Header,
-            breadcrumb: Breadcrumbs
-        });
-        loaded = true;
-    }
-</script>
-
 <svelte:head>
     <title>Storage - Appwrite</title>
 </svelte:head>
 
-{#if loaded}
-    <slot />
-{/if}
+<slot />
diff --git a/src/routes/console/project-[project]/storage/+layout.ts b/src/routes/console/project-[project]/storage/+layout.ts
new file mode 100644
index 0000000000..7db345058e
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/+layout.ts
@@ -0,0 +1,10 @@
+import Breadcrumbs from './breadcrumbs.svelte';
+import Header from './header.svelte';
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = async () => {
+    return {
+        header: Header,
+        breadcrumbs: Breadcrumbs
+    };
+};
diff --git a/src/routes/console/project-[project]/storage/+page.svelte b/src/routes/console/project-[project]/storage/[[page]]/+page.svelte
similarity index 81%
rename from src/routes/console/project-[project]/storage/+page.svelte
rename to src/routes/console/project-[project]/storage/[[page]]/+page.svelte
index fae4f59301..9a4563fba4 100644
--- a/src/routes/console/project-[project]/storage/+page.svelte
+++ b/src/routes/console/project-[project]/storage/[[page]]/+page.svelte
@@ -4,30 +4,23 @@
     import { Button } from '$lib/elements/forms';
     import { Empty, Pagination, Copy, GridItem1, CardContainer, Heading } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { Query, type Models } from '@aw-labs/appwrite-console';
-    import Create from './_create.svelte';
+    import Create from '../create.svelte';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
-    import { bucketList } from './store';
     import { tooltip } from '$lib/actions/tooltip';
-    import { cardLimit } from '$lib/stores/layout';
-    import { createPersistentPagination } from '$lib/stores/pagination';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import type { PageData } from './$types';
+    import { CARD_LIMIT } from '$lib/constants';
 
+    export let data: PageData;
     let showCreate = false;
 
     const project = $page.params.project;
-    const offset = createPersistentPagination($cardLimit);
 
     async function bucketCreated(event: CustomEvent<Models.Bucket>) {
         showCreate = false;
-        await goto(`${base}/console/project-${project}/storage/bucket/${event.detail.$id}`);
+        await goto(`${base}/console/project-${project}/storage/bucket-${event.detail.$id}`);
     }
-
-    $: bucketList.load([
-        Query.limit($cardLimit),
-        Query.offset($offset),
-        Query.orderDesc('$createdAt')
-    ]);
 </script>
 
 <Container>
@@ -39,13 +32,13 @@
         </Button>
     </div>
 
-    {#if $bucketList?.total}
+    {#if data.buckets.total}
         <CardContainer
-            total={$bucketList.total}
-            offset={$offset}
+            total={data.buckets.total}
+            offset={data.offset}
             on:click={() => (showCreate = true)}>
-            {#each $bucketList.buckets as bucket}
-                <GridItem1 href={`${base}/console/project-${project}/storage/bucket/${bucket.$id}`}>
+            {#each data.buckets.buckets as bucket}
+                <GridItem1 href={`${base}/console/project-${project}/storage/bucket-${bucket.$id}`}>
                     <svelte:fragment slot="eyebrow">XX Files</svelte:fragment>
                     <svelte:fragment slot="title">{bucket.name}</svelte:fragment>
                     <svelte:fragment slot="status">
@@ -90,8 +83,12 @@
         </CardContainer>
 
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {$bucketList.total}</p>
-            <Pagination limit={$cardLimit} bind:offset={$offset} sum={$bucketList.total} />
+            <p class="text">Total results: {data.buckets.total}</p>
+            <Pagination
+                limit={CARD_LIMIT}
+                path={`/console/project-${$page.params.project}/storage`}
+                offset={data.offset}
+                sum={data.buckets.total} />
         </div>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
diff --git a/src/routes/console/project-[project]/storage/[[page]]/+page.ts b/src/routes/console/project-[project]/storage/[[page]]/+page.ts
new file mode 100644
index 0000000000..30ed7b167c
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/[[page]]/+page.ts
@@ -0,0 +1,20 @@
+import { Query } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import { pageToOffset } from '$lib/helpers/load';
+import { CARD_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent }) => {
+    await parent();
+    const page = Number(params.page);
+    const offset = pageToOffset(page, CARD_LIMIT);
+
+    return {
+        offset,
+        buckets: await sdkForProject.storage.listBuckets([
+            Query.limit(CARD_LIMIT),
+            Query.offset(offset),
+            Query.orderDesc('$createdAt')
+        ])
+    };
+};
diff --git a/src/routes/console/project-[project]/storage/_create.svelte b/src/routes/console/project-[project]/storage/_create.svelte
deleted file mode 100644
index 8ec10ab1c1..0000000000
--- a/src/routes/console/project-[project]/storage/_create.svelte
+++ /dev/null
@@ -1,65 +0,0 @@
-<script lang="ts">
-    import { Modal, CustomId } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { Button, InputText, Form, FormList } from '$lib/elements/forms';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
-
-    export let showCreate = false;
-
-    const dispatch = createEventDispatcher();
-
-    let name = '';
-    let id: string = null;
-    let showCustomId = false;
-    let error: string;
-
-    const create = async () => {
-        try {
-            const bucket = await sdkForProject.storage.createBucket(id ? id : 'unique()', name);
-            name = null;
-            showCreate = false;
-            dispatch('created', bucket);
-        } catch ({ message }) {
-            error = message;
-        }
-    };
-
-    $: if (!showCustomId) {
-        id = null;
-    }
-    $: if (!showCreate) {
-        showCustomId = false;
-        error = null;
-    }
-</script>
-
-<Form on:submit={create}>
-    <Modal {error} size="big" bind:show={showCreate}>
-        <svelte:fragment slot="header">Create Bucket</svelte:fragment>
-        <FormList>
-            <InputText
-                id="name"
-                label="Name"
-                placeholder="New Bucket"
-                bind:value={name}
-                autofocus
-                required />
-
-            {#if !showCustomId}
-                <div>
-                    <Pill button on:click={() => (showCustomId = !showCustomId)}>
-                        <span class="icon-pencil" aria-hidden="true" />
-                        <span class="text"> Bucket ID </span>
-                    </Pill>
-                </div>
-            {:else}
-                <CustomId bind:show={showCustomId} name="Bucket" bind:id />
-            {/if}
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
-            <Button submit>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/+layout.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/+layout.svelte
new file mode 100644
index 0000000000..b6f596a773
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/+layout.svelte
@@ -0,0 +1,5 @@
+<svelte:head>
+    <title>Bucket - Appwrite</title>
+</svelte:head>
+
+<slot />
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/+layout.ts b/src/routes/console/project-[project]/storage/bucket-[bucket]/+layout.ts
new file mode 100644
index 0000000000..556fea8713
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/+layout.ts
@@ -0,0 +1,21 @@
+import type { LayoutLoad } from './$types';
+import Breadcrumbs from './breadcrumbs.svelte';
+import Header from './header.svelte';
+import { sdkForProject } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import { error } from '@sveltejs/kit';
+
+export const load: LayoutLoad = async ({ params, parent, depends }) => {
+    await parent();
+    depends(Dependencies.BUCKET);
+
+    try {
+        return {
+            header: Header,
+            breadcrumbs: Breadcrumbs,
+            bucket: await sdkForProject.storage.getBucket(params.bucket)
+        };
+    } catch (e) {
+        throw error(e.code, e.message);
+    }
+};
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.svelte
similarity index 80%
rename from src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
rename to src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.svelte
index 57229e7527..8afe06ef26 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.svelte
@@ -8,13 +8,13 @@
         EmptySearch,
         Pagination,
         Avatar,
-        Search,
         DropList,
         DropListItem,
-        DropListLink
+        DropListLink,
+        SearchQuery
     } from '$lib/components';
-    import Create from './_create.svelte';
-    import Delete from './_deleteFile.svelte';
+    import Create from '../create.svelte';
+    import Delete from '../_deleteFile.svelte';
     import {
         Table,
         TableHeader,
@@ -29,45 +29,41 @@
     import { calculateSize } from '$lib/helpers/sizeConvertion';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
-    import { files } from './store';
-    import { Query, type Models } from '@aw-labs/appwrite-console';
+    import type { Models } from '@aw-labs/appwrite-console';
     import { uploader } from '$lib/stores/uploader';
     import { addNotification } from '$lib/stores/notifications';
-    import { pageLimit } from '$lib/stores/layout';
-    import { createPersistentPagination } from '$lib/stores/pagination';
+    import type { PageData } from './$types';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+
+    export let data: PageData;
 
-    let search = '';
     let showCreate = false;
     let showDelete = false;
     let showDropdown = [];
     let selectedFile: Models.File = null;
 
-    const project = $page.params.project;
-    const bucket = $page.params.bucket;
-    const offset = createPersistentPagination($pageLimit);
+    const projectId = $page.params.project;
+    const bucketId = $page.params.bucket;
     const getPreview = (fileId: string) =>
-        sdkForProject.storage.getFilePreview(bucket, fileId, 32, 32).toString() + '&mode=admin';
-
-    async function loadFiles() {
-        files.load(bucket, [Query.limit($pageLimit), Query.offset($offset)], search);
-    }
+        sdkForProject.storage.getFilePreview(bucketId, fileId, 32, 32).toString() + '&mode=admin';
 
     function fileCreated() {
         showCreate = false;
-        loadFiles();
+        invalidate(Dependencies.FILES);
     }
 
     function fileDeleted(event: CustomEvent<Models.File>) {
         showDelete = false;
         uploader.removeFile(event.detail);
-        loadFiles();
+        invalidate(Dependencies.FILES);
     }
 
     async function deleteFile(file: Models.File) {
         try {
             await sdkForProject.storage.deleteFile(file.bucketId, file.$id);
             uploader.removeFile(file);
-            loadFiles();
+            invalidate(Dependencies.FILES);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -75,22 +71,15 @@
             });
         }
     }
-
-    $: files.load(
-        bucket,
-        [Query.limit($pageLimit), Query.offset($offset), Query.orderDesc('$createdAt')],
-        search
-    );
-    $: if (search) $offset = 0;
 </script>
 
 <Container>
-    <Search bind:search placeholder="Search by filename">
+    <SearchQuery search={data.search} placeholder="Search by filename">
         <Button on:click={() => (showCreate = true)}>
             <span class="icon-plus" aria-hidden="true" /> <span class="text">Add File</span>
         </Button>
-    </Search>
-    {#if $files?.total}
+    </SearchQuery>
+    {#if data.files.total}
         <Table>
             <TableHeader>
                 <TableCellHead>Filename</TableCellHead>
@@ -100,7 +89,7 @@
                 <TableCellHead width={30} />
             </TableHeader>
             <TableBody>
-                {#each $files.files as file, index}
+                {#each data.files.files as file, index}
                     {#if file.chunksTotal / file.chunksUploaded !== 1}
                         <TableRow>
                             <TableCell title="Name">
@@ -139,7 +128,7 @@
                         </TableRow>
                     {:else}
                         <TableRowLink
-                            href={`${base}/console/project-${project}/storage/bucket/${bucket}/file/${file.$id}`}>
+                            href={`${base}/console/project-${projectId}/storage/bucket-${bucketId}/file-${file.$id}`}>
                             <TableCell title="Name">
                                 <div class="u-flex u-gap-12">
                                     <Avatar size={32} src={getPreview(file.$id)} name={file.name} />
@@ -147,10 +136,10 @@
                                 </div>
                             </TableCell>
                             <TableCellText title="Type">{file.mimeType}</TableCellText>
-                            <TableCellText title="Size"
-                                >{calculateSize(file.sizeOriginal)}</TableCellText>
-                            <TableCellText title="Date Created"
-                                >{toLocaleDate(file.$createdAt)}</TableCellText>
+                            <TableCellText title="Size">
+                                {calculateSize(file.sizeOriginal)}</TableCellText>
+                            <TableCellText title="Date Created">
+                                {toLocaleDate(file.$createdAt)}</TableCellText>
                             <TableCell showOverflow>
                                 <DropList
                                     bind:show={showDropdown[index]}
@@ -166,7 +155,7 @@
                                     </button>
                                     <svelte:fragment slot="list">
                                         <DropListLink
-                                            href={`${base}/console/project-${project}/storage/bucket/${bucket}/file/${file.$id}`}
+                                            href={`${base}/console/project-${projectId}/storage/bucket-${bucketId}/file-${file.$id}`}
                                             icon="pencil">Update</DropListLink>
                                         <DropListItem
                                             icon="trash"
@@ -183,16 +172,23 @@
             </TableBody>
         </Table>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
-            <p class="text">Total results: {$files.total}</p>
-            <Pagination limit={$pageLimit} bind:offset={$offset} sum={$files.total} />
+            <p class="text">Total results: {data.files.total}</p>
+            <Pagination
+                limit={PAGE_LIMIT}
+                path={`/console/project-${$page.params.project}/storage/bucket-${$page.params.bucket}`}
+                offset={data.offset}
+                sum={data.files.total} />
         </div>
-    {:else if search}
+    {:else if data.search}
         <EmptySearch>
             <div class="u-text-center">
-                <b>Sorry, we couldn’t find ‘{search}’</b>
+                <b>Sorry, we couldn’t find ‘{data.search}’</b>
                 <p>There are no files that match your search.</p>
             </div>
-            <Button secondary on:click={() => (search = '')}>Clear Search</Button>
+            <Button
+                secondary
+                href={`/console/project-${$page.params.project}/storage/bucket-${$page.params.bucket}`}
+                >Clear Search</Button>
         </EmptySearch>
     {:else}
         <Empty isButton single on:click={() => (showCreate = true)}>
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.ts b/src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.ts
new file mode 100644
index 0000000000..0c15a026ef
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.ts
@@ -0,0 +1,23 @@
+import { Query } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import { pageToOffset } from '$lib/helpers/load';
+import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent, depends, url }) => {
+    await parent();
+    depends(Dependencies.FILES);
+    const page = Number(params.page);
+    const offset = pageToOffset(page, PAGE_LIMIT);
+    const search = url.search.slice(1) ?? undefined;
+
+    return {
+        offset,
+        search,
+        files: await sdkForProject.storage.listFiles(
+            params.bucket,
+            [Query.limit(PAGE_LIMIT), Query.offset(offset), Query.orderDesc('$createdAt')],
+            search
+        )
+    };
+};
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/_deleteBucket.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/_deleteBucket.svelte
similarity index 61%
rename from src/routes/console/project-[project]/storage/bucket/[bucket]/_deleteBucket.svelte
rename to src/routes/console/project-[project]/storage/bucket-[bucket]/_deleteBucket.svelte
index 88c565e5b0..3952d0d5ca 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/_deleteBucket.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/_deleteBucket.svelte
@@ -3,7 +3,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { bucket } from './store';
@@ -24,13 +24,11 @@
     };
 </script>
 
-<Form on:submit={deleteUser}>
-    <Modal bind:show={showDelete} warning>
-        <svelte:fragment slot="header">Delete Bucket</svelte:fragment>
-        <p>Are you sure you want to delete <b>{$bucket.name}</b>?</p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal bind:show={showDelete} on:submit={deleteUser} warning>
+    <svelte:fragment slot="header">Delete Bucket</svelte:fragment>
+    <p>Are you sure you want to delete <b>{$bucket.name}</b>?</p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/_deleteFile.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/_deleteFile.svelte
similarity index 61%
rename from src/routes/console/project-[project]/storage/bucket/[bucket]/_deleteFile.svelte
rename to src/routes/console/project-[project]/storage/bucket-[bucket]/_deleteFile.svelte
index b21e988709..c8f9340693 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/_deleteFile.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/_deleteFile.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
@@ -25,13 +25,11 @@
     };
 </script>
 
-<Form on:submit={deleteFile}>
-    <Modal bind:show={showDelete} warning>
-        <svelte:fragment slot="header">Delete File</svelte:fragment>
-        <p>Are you sure you want to delete <b>{file.name}</b>?</p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal bind:show={showDelete} on:submit={deleteFile} warning>
+    <svelte:fragment slot="header">Delete File</svelte:fragment>
+    <p>Are you sure you want to delete <b>{file.name}</b>?</p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/breadcrumbs.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/breadcrumbs.svelte
similarity index 54%
rename from src/routes/console/project-[project]/storage/bucket/[bucket]/breadcrumbs.svelte
rename to src/routes/console/project-[project]/storage/bucket-[bucket]/breadcrumbs.svelte
index 5034fa02a7..da7f07ba41 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/breadcrumbs.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/breadcrumbs.svelte
@@ -1,25 +1,25 @@
 <script lang="ts">
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
-    import { project } from '../../../store';
+    import { project } from '../../store';
     import { bucket } from './store';
 
     $: breadcrumbs = [
         {
-            href: `/console/organization-${$organization.$id}`,
+            href: `/console/organization-${$organization?.$id}`,
             title: $organization.name
         },
         {
-            href: `/console/project-${$project.$id}`,
+            href: `/console/project-${$project?.$id}`,
             title: $project.name
         },
         {
-            href: `/console/project-${$project.$id}/storage`,
+            href: `/console/project-${$project?.$id}/storage`,
             title: 'Storage'
         },
         {
-            href: `/console/project-${$project.$id}/storage/bucket/${$bucket.$id}`,
-            title: $bucket.name
+            href: `/console/project-${$project?.$id}/storage/bucket-${$bucket?.$id}`,
+            title: $bucket?.name
         }
     ];
 </script>
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
similarity index 54%
rename from src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte
rename to src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
index 28db7bbdd8..3a1fee89b3 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Button, Form, FormList, InputFile } from '$lib/elements/forms';
+    import { Button, FormList, InputFile } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
     import { Modal, CustomId } from '$lib/components';
     import { sdkForProject } from '$lib/stores/sdk';
@@ -45,32 +45,30 @@
     }
 </script>
 
-<Form on:submit={create}>
-    <Modal size="big" {error} bind:show={showCreate}>
-        <svelte:fragment slot="header">Upload File</svelte:fragment>
-        <FormList>
+<Modal size="big" {error} bind:show={showCreate} on:submit={create}>
+    <svelte:fragment slot="header">Upload File</svelte:fragment>
+    <FormList>
+        <div>
+            <InputFile bind:files />
+            <p>Max file size: {calculateSize($bucket.maximumFileSize)}</p>
+        </div>
+
+        {#if !showCustomId}
             <div>
-                <InputFile bind:files />
-                <p>Max file size: {calculateSize($bucket.maximumFileSize)}</p>
+                <Pill button on:click={() => (showCustomId = !showCustomId)}>
+                    <span class="icon-pencil" aria-hidden="true" /><span class="text">
+                        File ID
+                    </span>
+                </Pill>
             </div>
-
-            {#if !showCustomId}
-                <div>
-                    <Pill button on:click={() => (showCustomId = !showCustomId)}>
-                        <span class="icon-pencil" aria-hidden="true" /><span class="text">
-                            File ID
-                        </span>
-                    </Pill>
-                </div>
-            {:else}
-                <CustomId bind:show={showCustomId} name="File" bind:id />
-            {/if}
-            <p class="heading-level-7">Permissions</p>
-            <Permissions bind:permissions />
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
-            <Button submit>Upload</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+        {:else}
+            <CustomId bind:show={showCustomId} name="File" bind:id />
+        {/if}
+        <p class="heading-level-7">Permissions</p>
+        <Permissions bind:permissions />
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
+        <Button submit>Upload</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/+layout.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/+layout.svelte
new file mode 100644
index 0000000000..4a2840c83b
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/+layout.svelte
@@ -0,0 +1,5 @@
+<svelte:head>
+    <title>File - Appwrite</title>
+</svelte:head>
+
+<slot />
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/+layout.ts b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/+layout.ts
new file mode 100644
index 0000000000..ec7e4b6a38
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/+layout.ts
@@ -0,0 +1,21 @@
+import Breadcrumbs from './breadcrumbs.svelte';
+import Header from './header.svelte';
+import { sdkForProject } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import type { LayoutLoad } from './$types';
+import { error } from '@sveltejs/kit';
+
+export const load: LayoutLoad = async ({ params, parent, depends }) => {
+    await parent();
+    depends(Dependencies.FILE);
+
+    try {
+        return {
+            header: Header,
+            breadcrumbs: Breadcrumbs,
+            file: await sdkForProject.storage.getFile(params.bucket, params.file)
+        };
+    } catch (e) {
+        throw error(e.code, e.message);
+    }
+};
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
similarity index 95%
rename from src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+page.svelte
rename to src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
index 0eb0d23111..b30a47db2b 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
@@ -8,16 +8,14 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
     import { calculateSize } from '$lib/helpers/sizeConvertion';
-    import Delete from './_deleteFile.svelte';
-    import { page } from '$app/stores';
     import { onMount } from 'svelte';
     import { difference } from '$lib/helpers/array';
     import { Permissions } from '$lib/components/permissions';
+    import Delete from './deleteFile.svelte';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
 
     onMount(async () => {
-        let bucketId = $page.params.bucket;
-        let fileId = $page.params.file;
-        await file.load(bucketId, fileId);
         filePermissions = $file?.$permissions;
     });
 
@@ -47,7 +45,7 @@
     async function updatePermissions() {
         try {
             await sdkForProject.storage.updateFile($file.bucketId, $file.$id, filePermissions);
-            $file.$permissions = filePermissions;
+            invalidate(Dependencies.FILE);
             arePermsDisabled = true;
             addNotification({
                 message: 'Permissions have been updated',
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/breadcrumbs.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/breadcrumbs.svelte
new file mode 100644
index 0000000000..d7814aae72
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/breadcrumbs.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { project } from '../../../store';
+    import { bucket } from '../store';
+    import { file } from './store';
+
+    $: breadcrumbs = [
+        {
+            title: '...'
+        },
+        {
+            href: `/console/project-${$project?.$id}/storage`,
+            title: 'Storage'
+        },
+        {
+            href: `/console/project-${$project?.$id}/storage/bucket-${$bucket?.$id}`,
+            title: $bucket?.name
+        },
+        {
+            href: `/console/project-${$project?.$id}/storage/bucket-${$bucket?.$id}/file-${$file?.$id}`,
+            title: $file?.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte
similarity index 60%
rename from src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte
rename to src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte
index 629cff4213..3b8286a386 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte
@@ -3,7 +3,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { file } from './store';
@@ -15,7 +15,7 @@
             await sdkForProject.storage.deleteFile($file.bucketId, $file.$id);
             showDelete = false;
             await goto(
-                `${base}/console/project-${$page.params.project}/storage/bucket/${$file.bucketId}`
+                `${base}/console/project-${$page.params.project}/storage/bucket-${$file.bucketId}`
             );
         } catch (error) {
             addNotification({
@@ -26,13 +26,11 @@
     };
 </script>
 
-<Form on:submit={deleteFile}>
-    <Modal bind:show={showDelete} warning>
-        <svelte:fragment slot="header">Delete File</svelte:fragment>
-        <p>Are you sure you want to delete <b>{$file.name}</b>?</p>
-        <svelte:fragment slot="footer">
-            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-            <Button secondary submit>Delete</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+<Modal bind:show={showDelete} on:submit={deleteFile} warning>
+    <svelte:fragment slot="header">Delete File</svelte:fragment>
+    <p>Are you sure you want to delete <b>{$file.name}</b>?</p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+        <Button secondary submit>Delete</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/header.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/header.svelte
similarity index 55%
rename from src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/header.svelte
rename to src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/header.svelte
index e9bbac489d..2fd9de7547 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/header.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/header.svelte
@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { Copy } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { Cover } from '$lib/layout';
+    import { Cover, CoverTitle } from '$lib/layout';
     import { file } from './store';
 
     const projectId = $page.params.project;
@@ -11,16 +11,10 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <a
-            class="back-button"
-            href={`/console/project-${projectId}/storage/bucket/${bucketId}`}
-            aria-label="page back">
-            <span class="icon-cheveron-left" aria-hidden="true" />
-        </a>
-        <h1 class="heading-level-4">
-            <span class="text">{$file.name}</span>
-        </h1>
-        <Copy value={$file.$id}>
+        <CoverTitle href={`/console/project-${projectId}/storage/bucket-${bucketId}`}>
+            {$file?.name}
+        </CoverTitle>
+        <Copy value={$file?.$id}>
             <Pill button>
                 <span class="icon-duplicate" aria-hidden="true" />
                 File ID
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/store.ts b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/store.ts
new file mode 100644
index 0000000000..f74e98ea76
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/store.ts
@@ -0,0 +1,5 @@
+import { derived } from 'svelte/store';
+import { page } from '$app/stores';
+import type { Models } from '@aw-labs/appwrite-console';
+
+export const file = derived(page, ($page) => $page.data.file as Models.File);
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/header.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/header.svelte
similarity index 61%
rename from src/routes/console/project-[project]/storage/bucket/[bucket]/header.svelte
rename to src/routes/console/project-[project]/storage/bucket-[bucket]/header.svelte
index 0522b5c755..23c72f8492 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/header.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/header.svelte
@@ -2,16 +2,18 @@
     import { page } from '$app/stores';
     import { Copy, Tab, Tabs } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { Cover } from '$lib/layout';
+    import { isTabSelected } from '$lib/helpers/load';
+    import { Cover, CoverTitle } from '$lib/layout';
     import { bucket } from './store';
 
     const projectId = $page.params.project;
     const bucketId = $page.params.bucket;
-    const path = `/console/project-${projectId}/storage/bucket/${bucketId}`;
+    const path = `/console/project-${projectId}/storage/bucket-${bucketId}`;
     const tabs = [
         {
             href: path,
-            title: 'Files'
+            title: 'Files',
+            hasChildren: true
         },
         {
             href: `${path}/usage`,
@@ -26,16 +28,10 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <a
-            class="back-button"
-            href={`/console/project-${projectId}/storage`}
-            aria-label="page back">
-            <span class="icon-cheveron-left" aria-hidden="true" />
-        </a>
-        <h1 class="heading-level-4">
-            <span class="text">{$bucket.name}</span>
-        </h1>
-        <Copy value={$bucket.$id}>
+        <CoverTitle href={`/console/project-${projectId}/storage`}>
+            {$bucket?.name}
+        </CoverTitle>
+        <Copy value={$bucket?.$id}>
             <Pill button>
                 <span class="icon-duplicate" aria-hidden="true" />
                 Bucket ID
@@ -45,7 +41,7 @@
 
     <Tabs>
         {#each tabs as tab}
-            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
                 {tab.title}
             </Tab>
         {/each}
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
similarity index 96%
rename from src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte
rename to src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
index a99800178f..a65a043eb3 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { Pill } from '$lib/elements';
     import { CardGrid, Box, Heading } from '$lib/components';
     import { Container } from '$lib/layout';
     import {
@@ -15,12 +16,12 @@
     import { sizeToBytes } from '$lib/helpers/sizeConvertion';
     import { sdkForProject } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
-    import Delete from '../_deleteBucket.svelte';
     import { onMount } from 'svelte';
-    import { page } from '$app/stores';
-    import Pill from '$lib/elements/pill.svelte';
     import { difference } from '$lib/helpers/array';
     import { Permissions } from '$lib/components/permissions';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import Delete from '../_deleteBucket.svelte';
 
     let showDelete = false;
 
@@ -44,7 +45,6 @@
     let isExtensionsDisabled = true;
 
     onMount(async () => {
-        await bucket.load($page.params.bucket);
         enabled ??= $bucket.enabled;
         bucketName ??= $bucket.name;
         bucketName ??= $bucket.name;
@@ -77,7 +77,7 @@
                 undefined,
                 enabled
             );
-            $bucket.enabled = enabled;
+            invalidate(Dependencies.BUCKET);
             addNotification({
                 message: `${$bucket.name} has been updated`,
                 type: 'success'
@@ -92,7 +92,7 @@
     async function updateName() {
         try {
             await sdkForProject.storage.updateBucket($bucket.$id, bucketName);
-            $bucket.name = bucketName;
+            invalidate(Dependencies.BUCKET);
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
@@ -112,8 +112,7 @@
                 bucketFileSecurity ? bucketPermissions : undefined,
                 bucketFileSecurity
             );
-            $bucket.fileSecurity = bucketFileSecurity;
-            $bucket.$permissions = bucketPermissions;
+            invalidate(Dependencies.BUCKET);
             arePermsDisabled = true;
             addNotification({
                 message: 'Permissions have been updated',
@@ -141,8 +140,7 @@
                 encryption,
                 antivirus
             );
-            $bucket.encryption = encryption;
-            $bucket.antivirus = antivirus;
+            invalidate(Dependencies.BUCKET);
             addNotification({
                 message: `${$bucket.name} has been updated`,
                 type: 'success'
@@ -165,7 +163,7 @@
                 undefined,
                 size
             );
-            $bucket.maximumFileSize = maxSize;
+            invalidate(Dependencies.BUCKET);
             addNotification({
                 message: `${$bucket.name} has been updated`,
                 type: 'success'
@@ -189,7 +187,7 @@
                 undefined,
                 extensions
             );
-            $bucket.allowedFileExtensions = extensions;
+            invalidate(Dependencies.BUCKET);
             addNotification({
                 message: `${$bucket.name} has been updated`,
                 type: 'success'
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/store.ts b/src/routes/console/project-[project]/storage/bucket-[bucket]/store.ts
new file mode 100644
index 0000000000..0b1d2ab2d6
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/store.ts
@@ -0,0 +1,4 @@
+import { derived } from 'svelte/store';
+import { page } from '$app/stores';
+
+export const bucket = derived(page, ($page) => $page.data.bucket);
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte
new file mode 100644
index 0000000000..e9111d1503
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Usage } from '$lib/layout';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
+
+    $: count = data.count;
+    $: created = data.created;
+    $: read = data.read;
+    $: updated = data.updated;
+    $: deleted = data.deleted;
+</script>
+
+<Usage
+    title="Files"
+    path={`/console/project-${$page.params.project}/storage/bucket-${$page.params.bucket}/usage`}
+    {count}
+    {created}
+    {read}
+    {updated}
+    {deleted}
+    countMetadata={{
+        legend: 'Files',
+        title: 'Total files'
+    }}
+    createdMetadata={{
+        legend: 'Create',
+        title: 'Files created'
+    }}
+    readMetadata={{
+        legend: 'Read',
+        title: 'Files read'
+    }}
+    updatedMetadata={{
+        legend: 'Update',
+        title: 'Files updated'
+    }}
+    deletedMetadata={{
+        legend: 'Delete',
+        title: 'Files deleted'
+    }} />
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.ts b/src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.ts
new file mode 100644
index 0000000000..19e5e71bc2
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.ts
@@ -0,0 +1,19 @@
+import { sdkForProject } from '$lib/stores/sdk';
+import type { Models } from '@aw-labs/appwrite-console';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent }) => {
+    await parent();
+    const response = await sdkForProject.storage.getBucketUsage(
+        params.bucket,
+        params.period ?? '30d'
+    );
+
+    return {
+        count: response.filesCount as unknown as Models.Metric[],
+        created: response.filesCreate as unknown as Models.Metric[],
+        read: response.filesRead as unknown as Models.Metric[],
+        updated: response.filesUpdate as unknown as Models.Metric[],
+        deleted: response.filesDelete as unknown as Models.Metric[]
+    };
+};
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/+layout.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/+layout.svelte
deleted file mode 100644
index 1fb3c8c325..0000000000
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/+layout.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { page } from '$app/stores';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-    import { bucket } from './store';
-    import Breadcrumbs from './breadcrumbs.svelte';
-    import Header from './header.svelte';
-
-    const bucketId = $page.params.bucket;
-
-    let loaded = false;
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle() {
-        const promise = bucket.load(bucketId);
-        if ($bucket?.$id !== bucketId) {
-            await promise;
-        }
-
-        updateLayout({
-            header: Header,
-            breadcrumb: Breadcrumbs
-        });
-
-        loaded = true;
-    }
-</script>
-
-<svelte:head>
-    <title>Bucket - Appwrite</title>
-</svelte:head>
-
-{#if $bucket && loaded}
-    <slot />
-{/if}
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+layout.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+layout.svelte
deleted file mode 100644
index e312e2d9e6..0000000000
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+layout.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { page } from '$app/stores';
-    import { file } from './store';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-    import Header from './header.svelte';
-    import Breadcrumbs from './breadcrumbs.svelte';
-
-    const bucketId = $page.params.bucket;
-    const fileId = $page.params.file;
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle() {
-        const promise = file.load(bucketId, fileId);
-        if ($file?.$id !== fileId) {
-            await promise;
-        }
-
-        updateLayout({
-            header: Header,
-            breadcrumb: Breadcrumbs
-        });
-    }
-</script>
-
-<svelte:head>
-    <title>File - Appwrite</title>
-</svelte:head>
-
-{#if $file}
-    <slot />
-{/if}
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/breadcrumbs.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/breadcrumbs.svelte
deleted file mode 100644
index 6e4121f3d8..0000000000
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/breadcrumbs.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-    import { Breadcrumbs } from '$lib/layout';
-    import { project } from '../../../../../store';
-    import { bucket } from '../../store';
-    import { file } from './store';
-
-    $: breadcrumbs = [
-        {
-            title: '...'
-        },
-        {
-            href: `/console/project-${$project.$id}/storage`,
-            title: 'Storage'
-        },
-        {
-            href: `/console/project-${$project.$id}/storage/bucket/${$bucket.$id}`,
-            title: $bucket.name
-        },
-        {
-            href: `/console/project-${$project.$id}/storage/bucket/${$bucket.$id}/file/${$file.$id}`,
-            title: $file.name
-        }
-    ];
-</script>
-
-<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/store.ts b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/store.ts
deleted file mode 100644
index 9f48e437ea..0000000000
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/store.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { sdkForProject } from '$lib/stores/sdk';
-import type { Models } from '@aw-labs/appwrite-console';
-import { cachedStore } from '$lib/helpers/cache';
-
-export const file = cachedStore<
-    Models.File,
-    {
-        load: (bucketId: string, fileId: string) => Promise<void>;
-    }
->('file', function ({ set }) {
-    return {
-        load: async (bucketId, fileId) => {
-            const response = await sdkForProject.storage.getFile(bucketId, fileId);
-            set(response);
-        }
-    };
-});
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/store.ts b/src/routes/console/project-[project]/storage/bucket/[bucket]/store.ts
deleted file mode 100644
index 8667d18d49..0000000000
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/store.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { sdkForProject } from '$lib/stores/sdk';
-import type { Models } from '@aw-labs/appwrite-console';
-import { cachedStore } from '$lib/helpers/cache';
-
-export const bucket = cachedStore<
-    Models.Bucket,
-    {
-        load: (bucketId: string) => Promise<void>;
-    }
->('bucket', function ({ set }) {
-    return {
-        load: async (bucketId) => {
-            const response = await sdkForProject.storage.getBucket(bucketId);
-            set(response);
-        }
-    };
-});
-
-export const files = cachedStore<
-    Models.FileList,
-    {
-        load: (bucketId: string, queries: string[], search: string) => Promise<void>;
-    }
->('files', function ({ set }) {
-    return {
-        load: async (bucketId, queries, search) => {
-            const response = await sdkForProject.storage.listFiles(bucketId, queries, search);
-            set(response);
-        }
-    };
-});
-
-export const bucketUsage = cachedStore<
-    Models.UsageBuckets,
-    {
-        load: (bucketId: string, range: string) => Promise<void>;
-    }
->('bucketsUsage', function ({ set }) {
-    return {
-        load: async (bucketId, range) => {
-            const response = await sdkForProject.storage.getBucketUsage(bucketId, range);
-            set(response);
-        }
-    };
-});
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/usage/+page.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/usage/+page.svelte
deleted file mode 100644
index 252c56611a..0000000000
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/usage/+page.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { Usage, type UsagePeriods } from '$lib/layout';
-    import { bucketUsage } from '../store';
-    import type { Models } from '@aw-labs/appwrite-console';
-
-    let range: UsagePeriods = '30d';
-
-    const bucketId = $page.params.bucket;
-
-    $: bucketUsage.load(bucketId, range);
-
-    // TODO: metric type is wrong
-    $: count = $bucketUsage?.filesCount as unknown as Models.Metric[];
-    $: created = $bucketUsage?.filesCreate as unknown as Models.Metric[];
-    $: read = $bucketUsage?.filesRead as unknown as Models.Metric[];
-    $: updated = $bucketUsage?.filesUpdate as unknown as Models.Metric[];
-    $: deleted = $bucketUsage?.filesDelete as unknown as Models.Metric[];
-</script>
-
-<Usage
-    title="Files"
-    bind:range
-    {count}
-    {created}
-    {read}
-    {updated}
-    {deleted}
-    countMetadata={{
-        legend: 'Files',
-        title: 'Total files'
-    }}
-    createdMetadata={{
-        legend: 'Create',
-        title: 'Files created'
-    }}
-    readMetadata={{
-        legend: 'Read',
-        title: 'Files read'
-    }}
-    updatedMetadata={{
-        legend: 'Update',
-        title: 'Files updated'
-    }}
-    deletedMetadata={{
-        legend: 'Delete',
-        title: 'Files deleted'
-    }} />
diff --git a/src/routes/console/project-[project]/storage/create.svelte b/src/routes/console/project-[project]/storage/create.svelte
new file mode 100644
index 0000000000..0dda02bba8
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/create.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+    import { Modal, CustomId } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Button, InputText, FormList } from '$lib/elements/forms';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { createEventDispatcher } from 'svelte';
+
+    export let showCreate = false;
+
+    const dispatch = createEventDispatcher();
+
+    let name = '';
+    let id: string = null;
+    let showCustomId = false;
+    let error: string;
+
+    const create = async () => {
+        try {
+            const bucket = await sdkForProject.storage.createBucket(id ? id : 'unique()', name);
+            name = null;
+            showCreate = false;
+            dispatch('created', bucket);
+        } catch ({ message }) {
+            error = message;
+        }
+    };
+
+    $: if (!showCustomId) {
+        id = null;
+    }
+    $: if (!showCreate) {
+        showCustomId = false;
+        error = null;
+    }
+</script>
+
+<Modal {error} on:submit={create} size="big" bind:show={showCreate}>
+    <svelte:fragment slot="header">Create Bucket</svelte:fragment>
+    <FormList>
+        <InputText
+            id="name"
+            label="Name"
+            placeholder="New Bucket"
+            bind:value={name}
+            autofocus
+            required />
+
+        {#if !showCustomId}
+            <div>
+                <Pill button on:click={() => (showCustomId = !showCustomId)}>
+                    <span class="icon-pencil" aria-hidden="true" />
+                    <span class="text"> Bucket ID </span>
+                </Pill>
+            </div>
+        {:else}
+            <CustomId bind:show={showCustomId} name="Bucket" bind:id />
+        {/if}
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
+        <Button submit>Create</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/storage/header.svelte b/src/routes/console/project-[project]/storage/header.svelte
index b58651102e..a2ac498df6 100644
--- a/src/routes/console/project-[project]/storage/header.svelte
+++ b/src/routes/console/project-[project]/storage/header.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { Tab, Tabs } from '$lib/components';
-    import { Cover } from '$lib/layout';
+    import { isTabSelected } from '$lib/helpers/load';
+    import { Cover, CoverTitle } from '$lib/layout';
 
     const projectId = $page.params.project;
     const path = `/console/project-${projectId}/storage`;
     const tabs = [
         {
             href: path,
-            title: 'Buckets'
+            title: 'Buckets',
+            hasChildren: true
         },
         {
             href: `${path}/usage`,
@@ -19,14 +21,11 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <h1 class="heading-level-4">
-            <span class="text">Storage</span>
-        </h1>
+        <CoverTitle>Storage</CoverTitle>
     </svelte:fragment>
-
     <Tabs>
         {#each tabs as tab}
-            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
                 {tab.title}
             </Tab>
         {/each}
diff --git a/src/routes/console/project-[project]/storage/store.ts b/src/routes/console/project-[project]/storage/store.ts
deleted file mode 100644
index 71849a52b4..0000000000
--- a/src/routes/console/project-[project]/storage/store.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { sdkForProject } from '$lib/stores/sdk';
-import type { Models } from '@aw-labs/appwrite-console';
-import { cachedStore } from '$lib/helpers/cache';
-
-export const bucketList = cachedStore<
-    Models.BucketList,
-    {
-        load: (queries: string[]) => Promise<void>;
-    }
->('bucketList', function ({ set }) {
-    return {
-        load: async (queries) => {
-            const response = await sdkForProject.storage.listBuckets(queries);
-            set(response);
-        }
-    };
-});
-
-export const storageUsage = cachedStore<
-    Models.UsageStorage,
-    {
-        load: (range: string) => Promise<void>;
-    }
->('storageUsage', function ({ set }) {
-    return {
-        load: async (range) => {
-            const response = await sdkForProject.storage.getUsage(range);
-            set(response);
-        }
-    };
-});
diff --git a/src/routes/console/project-[project]/storage/usage/+page.svelte b/src/routes/console/project-[project]/storage/usage/+page.svelte
deleted file mode 100644
index 5df44f6c4e..0000000000
--- a/src/routes/console/project-[project]/storage/usage/+page.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts">
-    import { Usage, type UsagePeriods } from '$lib/layout';
-    import { storageUsage } from '../store';
-    import type { Models } from '@aw-labs/appwrite-console';
-
-    let range: UsagePeriods = '30d';
-
-    $: storageUsage.load(range);
-
-    // TODO: metric type is wrong
-    $: count = $storageUsage?.bucketsCount as unknown as Models.Metric[];
-    $: created = $storageUsage?.bucketsCreate as unknown as Models.Metric[];
-    $: read = $storageUsage?.bucketsRead as unknown as Models.Metric[];
-    $: updated = $storageUsage?.bucketsUpdate as unknown as Models.Metric[];
-    $: deleted = $storageUsage?.bucketsDelete as unknown as Models.Metric[];
-</script>
-
-<Usage
-    title="Buckets"
-    bind:range
-    {count}
-    {created}
-    {read}
-    {updated}
-    {deleted}
-    countMetadata={{
-        legend: 'Buckets',
-        title: 'Total buckets'
-    }}
-    createdMetadata={{
-        legend: 'Create',
-        title: 'Buckets created'
-    }}
-    readMetadata={{
-        legend: 'Read',
-        title: 'Buckets read'
-    }}
-    updatedMetadata={{
-        legend: 'Update',
-        title: 'Buckets updated'
-    }}
-    deletedMetadata={{
-        legend: 'Delete',
-        title: 'Buckets deleted'
-    }} />
diff --git a/src/routes/console/project-[project]/storage/usage/[[period]]/+page.svelte b/src/routes/console/project-[project]/storage/usage/[[period]]/+page.svelte
new file mode 100644
index 0000000000..5ac40adb91
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/usage/[[period]]/+page.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Usage } from '$lib/layout';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
+
+    $: count = data.count;
+    $: created = data.created;
+    $: read = data.read;
+    $: updated = data.updated;
+    $: deleted = data.deleted;
+</script>
+
+<Usage
+    title="Buckets"
+    path={`/console/project-${$page.params.project}/storage/usage`}
+    {count}
+    {created}
+    {read}
+    {updated}
+    {deleted}
+    countMetadata={{
+        legend: 'Buckets',
+        title: 'Total buckets'
+    }}
+    createdMetadata={{
+        legend: 'Create',
+        title: 'Buckets created'
+    }}
+    readMetadata={{
+        legend: 'Read',
+        title: 'Buckets read'
+    }}
+    updatedMetadata={{
+        legend: 'Update',
+        title: 'Buckets updated'
+    }}
+    deletedMetadata={{
+        legend: 'Delete',
+        title: 'Buckets deleted'
+    }} />
diff --git a/src/routes/console/project-[project]/storage/usage/[[period]]/+page.ts b/src/routes/console/project-[project]/storage/usage/[[period]]/+page.ts
new file mode 100644
index 0000000000..245f790eab
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/usage/[[period]]/+page.ts
@@ -0,0 +1,16 @@
+import type { Models } from '@aw-labs/appwrite-console';
+import { sdkForProject } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, parent }) => {
+    await parent();
+    const response = await sdkForProject.storage.getUsage(params.period ?? '30d');
+
+    return {
+        count: response.bucketsCount as unknown as Models.Metric[],
+        created: response.bucketsCreate as unknown as Models.Metric[],
+        read: response.bucketsRead as unknown as Models.Metric[],
+        updated: response.bucketsUpdate as unknown as Models.Metric[],
+        deleted: response.bucketsDelete as unknown as Models.Metric[]
+    };
+};
diff --git a/src/routes/console/project-[project]/store.ts b/src/routes/console/project-[project]/store.ts
index 45c291faf6..c1ca42ac13 100644
--- a/src/routes/console/project-[project]/store.ts
+++ b/src/routes/console/project-[project]/store.ts
@@ -1,17 +1,5 @@
-import { sdkForConsole } from '$lib/stores/sdk';
+import { derived } from 'svelte/store';
+import { page } from '$app/stores';
 import type { Models } from '@aw-labs/appwrite-console';
-import { cachedStore } from '$lib/helpers/cache';
 
-export const project = cachedStore<
-    Models.Project,
-    {
-        load: (projectId: string) => Promise<void>;
-    }
->('project', function ({ set }) {
-    return {
-        load: async (projectId: string) => {
-            const project = await sdkForConsole.projects.get(projectId);
-            set(project);
-        }
-    };
-});
+export const project = derived(page, ($page) => $page.data.project as Models.Project);
diff --git a/src/routes/invite/+page.svelte b/src/routes/invite/+page.svelte
index 14daee57fe..f2a1a8ca8b 100644
--- a/src/routes/invite/+page.svelte
+++ b/src/routes/invite/+page.svelte
@@ -4,7 +4,6 @@
     import { Button, Form, FormList, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import { user } from '$lib/stores/user';
     import { Unauthenticated } from '$lib/layout';
     import { page } from '$app/stores';
     import { onMount } from 'svelte';
@@ -22,12 +21,11 @@
     const acceptInvite = async () => {
         try {
             await sdkForConsole.teams.updateMembershipStatus(teamId, membershipId, userId, secret);
-            await user.fetchUser();
             addNotification({
                 type: 'success',
                 message: 'Successfully logged in.'
             });
-            await goto(`${base}/console`);
+            await goto(`${base}/console/organization-${teamId}`);
         } catch (error) {
             addNotification({
                 type: 'error',
diff --git a/src/routes/_loading.svelte b/src/routes/loading.svelte
similarity index 100%
rename from src/routes/_loading.svelte
rename to src/routes/loading.svelte
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 13507ed8d2..230fe63f1e 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
+    import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import {
         Button,
@@ -11,15 +11,15 @@
     } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
-    import { user } from '$lib/stores/user';
     import { Unauthenticated } from '$lib/layout';
+    import { Dependencies } from '$lib/constants';
 
     let mail: string, pass: string;
 
     const login = async () => {
         try {
             await sdkForConsole.account.createEmailSession(mail, pass);
-            await user.fetchUser();
+            await invalidate(Dependencies.ACCOUNT);
             addNotification({
                 type: 'success',
                 message: 'Successfully logged in.'
diff --git a/src/routes/recover/+page.svelte b/src/routes/recover/+page.svelte
index 42aa2bc355..4ff01189f6 100644
--- a/src/routes/recover/+page.svelte
+++ b/src/routes/recover/+page.svelte
@@ -8,7 +8,7 @@
     let mail: string;
     const recover = async () => {
         try {
-            await sdkForConsole.account.createRecovery(mail, `${base}`);
+            await sdkForConsole.account.createRecovery(mail, base);
             addNotification({
                 type: 'success',
                 message: 'We have sent you an email with a password reset link'
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index 63319697b0..f58e12427d 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
+    import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import {
         Button,
@@ -13,6 +13,7 @@
     import { sdkForConsole } from '$lib/stores/sdk';
     import { Unauthenticated } from '$lib/layout';
     import FormList from '$lib/elements/forms/formList.svelte';
+    import { Dependencies } from '$lib/constants';
 
     let name: string, mail: string, pass: string;
 
@@ -20,6 +21,7 @@
         try {
             await sdkForConsole.account.create('unique()', mail, pass, name ?? '');
             await sdkForConsole.account.createEmailSession(mail, pass);
+            await invalidate(Dependencies.ACCOUNT);
             await goto(`${base}/console`);
         } catch (error) {
             addNotification({
diff --git a/src/routes/store.ts b/src/routes/store.ts
new file mode 100644
index 0000000000..dd2756663b
--- /dev/null
+++ b/src/routes/store.ts
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const loading = writable(true);
diff --git a/tests/unit/components/copy.test.ts b/tests/unit/components/copy.test.ts
index c534cd7968..af7792e978 100644
--- a/tests/unit/components/copy.test.ts
+++ b/tests/unit/components/copy.test.ts
@@ -6,7 +6,9 @@ import Copy from '../../../src/lib/mock/copy.test.svelte';
 const value = 'This is a test';
 
 test('copy to clipboard function called on click', async () => {
-    const { getByTestId } = render(Copy, { value });
+    const { getByTestId } = render(Copy, {
+        value
+    });
 
     Object.assign(window.navigator, {
         clipboard: {
@@ -21,8 +23,9 @@ test('copy to clipboard function called on click', async () => {
 });
 
 test('copy to clipboard function called on enter', async () => {
-    const { getByTestId } = render(Copy, { value });
-
+    const { getByTestId } = render(Copy, {
+        value
+    });
     Object.assign(window.navigator, {
         clipboard: {
             writeText: vi.fn().mockImplementation(() => Promise.resolve())
diff --git a/tests/unit/components/modal.test.ts b/tests/unit/components/modal.test.ts
index 6a7aa3cde1..b0df63c0c3 100644
--- a/tests/unit/components/modal.test.ts
+++ b/tests/unit/components/modal.test.ts
@@ -1,52 +1,12 @@
 import '@testing-library/jest-dom';
-import userEvent from '@testing-library/user-event';
-import { render, fireEvent, cleanup } from '@testing-library/svelte';
+import { render, cleanup } from '@testing-library/svelte';
 import Modal from '../../../src/lib/mock/modal.test.svelte';
 
 afterEach(() => cleanup());
 
-test('hides modal', async () => {
-    const { queryByText } = render(Modal);
-
-    expect(queryByText('Content')).not.toBeInTheDocument();
-});
-
-test('shows modal', async () => {
-    const { queryByText } = render(Modal, {
-        show: true
-    });
-
-    expect(queryByText('Content')).toBeInTheDocument();
-});
-
-test('close modal by click', async () => {
-    const { queryByText, component, getByTitle } = render(Modal, {
-        show: true
-    });
-
-    expect(queryByText('Content')).toBeInTheDocument();
-    await fireEvent.click(getByTitle('Close Modal'));
-    expect(component.show).toStrictEqual(false);
-});
-
-test('close modal by escape', async () => {
-    const { queryByText, component } = render(Modal, {
-        show: true
-    });
-
-    expect(queryByText('Content')).toBeInTheDocument();
-    await userEvent.keyboard('[Escape]');
-    expect(component.show).toStrictEqual(false);
-});
-
-test('close modal by enter key on focus', async () => {
-    const { container, queryByText, component } = render(Modal, {
-        show: true
-    });
+test('renders modal', async () => {
+    const { queryByText, container } = render(Modal);
 
     expect(queryByText('Content')).toBeInTheDocument();
-    await fireEvent.keyUp(container.querySelector('[data-curtain]'), {
-        key: 'Enter'
-    });
-    expect(component.show).toStrictEqual(false);
+    expect(container.querySelector('dialog')).toBeInTheDocument();
 });
diff --git a/tests/unit/components/pagination.test.ts b/tests/unit/components/paginationInline.test.ts
similarity index 87%
rename from tests/unit/components/pagination.test.ts
rename to tests/unit/components/paginationInline.test.ts
index 3120521939..e74fbc8377 100644
--- a/tests/unit/components/pagination.test.ts
+++ b/tests/unit/components/paginationInline.test.ts
@@ -1,9 +1,9 @@
 import '@testing-library/jest-dom';
 import { render, fireEvent } from '@testing-library/svelte';
-import { Pagination } from '../../../src/lib/components';
+import { PaginationInline } from '../../../src/lib/components';
 
 test('shows controls', () => {
-    const { getByLabelText } = render(Pagination, {
+    const { getByLabelText } = render(PaginationInline, {
         limit: 100,
         offset: 0,
         sum: 150
@@ -13,7 +13,7 @@ test('shows controls', () => {
 });
 
 test('pagination - first page', () => {
-    const { getByLabelText } = render(Pagination, {
+    const { getByLabelText } = render(PaginationInline, {
         limit: 25,
         offset: 0,
         sum: 100
@@ -24,7 +24,7 @@ test('pagination - first page', () => {
 });
 
 test('pagination - last page', () => {
-    const { getByLabelText } = render(Pagination, {
+    const { getByLabelText } = render(PaginationInline, {
         limit: 25,
         offset: 25,
         sum: 30
@@ -35,7 +35,7 @@ test('pagination - last page', () => {
 });
 
 test('pagination - forward', async () => {
-    const { getByLabelText, component } = render(Pagination, {
+    const { getByLabelText, component } = render(PaginationInline, {
         limit: 25,
         offset: 0,
         sum: 60
@@ -57,7 +57,7 @@ test('pagination - forward', async () => {
 });
 
 test('pagination - backwards', async () => {
-    const { getByLabelText, component } = render(Pagination, {
+    const { getByLabelText, component } = render(PaginationInline, {
         limit: 25,
         offset: 55,
         sum: 60
@@ -79,7 +79,7 @@ test('pagination - backwards', async () => {
 });
 
 test('pagination - number button click', async () => {
-    const { getByText, getAllByLabelText, component } = render(Pagination, {
+    const { getByText, getAllByLabelText, component } = render(PaginationInline, {
         limit: 25,
         offset: 0,
         sum: 60
@@ -110,7 +110,7 @@ test('pagination - number button click', async () => {
 });
 
 test('shows no active controls', () => {
-    const { queryByLabelText } = render(Pagination, {
+    const { queryByLabelText } = render(PaginationInline, {
         limit: 25,
         offset: 0,
         sum: 10
diff --git a/tests/unit/elements/inputFile.test.ts b/tests/unit/elements/inputFile.test.ts
deleted file mode 100644
index 82806cb766..0000000000
--- a/tests/unit/elements/inputFile.test.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import '@testing-library/jest-dom';
-import { render } from '@testing-library/svelte';
-// import { render, fireEvent, createEvent } from '@testing-library/svelte';
-import { InputFile } from '../../../src/lib/elements/forms';
-
-test('shows file input', () => {
-    const { getByText } = render(InputFile, {
-        label: 'input',
-        files: null,
-        list: ['file1', 'file2']
-    });
-    const label = getByText('input');
-    const dropzone = getByText('Drag and drop files here to upload');
-
-    expect(label).toBeInTheDocument();
-    expect(dropzone).toBeInTheDocument();
-});
-
-// test('file input - dropfile', () => {
-//     const { getByText } = render(InputFile, {
-//         label: 'input',
-//         files: null,
-//         list: null
-//     });
-//     const file = new File(['(⌐□_□)'], 'chucknorris.png', { type: 'image/png' });
-//     const dropzone = getByText('Drag and drop files here to upload');
-//     const fileDropEvent = createEvent.drop(dropzone);
-//     const fileList = [file];
-
-//     Object.defineProperty(fileDropEvent, 'dataTransfer', {
-//         value: {
-//             files: {
-//                 item: (itemIndex: string) => fileList[itemIndex],
-//                 length: fileList.length
-//             }
-//         }
-//     });
-
-//     fireEvent(dropzone, fileDropEvent);
-
-//     expect(getByText('chucknorris.png')).toBeInTheDocument();
-// });
-
-// test('file input - upload', () => {
-//     const { getByText } = render(InputFile, {
-//         label: 'input',
-//         files: null,
-//         list: ['file1', 'file2']
-//     });
-//     const file = new File(['(⌐□_□)'], 'chucknorris.png', { type: 'image/png' });
-//     const input = document.getElementsByTagName('input')[0];
-//     Object.defineProperty(input, 'files', {
-//         value: [file]
-//     });
-
-//     fireEvent.drop(input);
-
-//     expect(getByText('chucknorris.png')).toBeInTheDocument();
-// });
diff --git a/tests/unit/elements/inputSelect.test.ts b/tests/unit/elements/inputSelect.test.ts
index 0857a120de..b199e0861d 100644
--- a/tests/unit/elements/inputSelect.test.ts
+++ b/tests/unit/elements/inputSelect.test.ts
@@ -14,6 +14,7 @@ test('shows select input', () => {
     const { getByText, getByLabelText } = render(InputSelect, {
         id: 'select',
         label: 'select',
+        value: '',
         options
     });
     const select = getByLabelText('select');
@@ -26,6 +27,7 @@ test('shows options', () => {
     const { getByText } = render(InputSelect, {
         id: 'select',
         label: 'select',
+        value: '',
         options
     });
 
@@ -38,8 +40,9 @@ test('shows placeholder', () => {
     const { getByText } = render(InputSelect, {
         id: 'select',
         label: 'select',
-        options,
-        placeholder: 'placeholder'
+        value: '',
+        placeholder: 'placeholder',
+        options
     });
 
     expect(getByText('placeholder')).toBeInTheDocument();
@@ -49,8 +52,9 @@ test('shows select input - required', () => {
     const { getByLabelText } = render(InputSelect, {
         id: 'select',
         label: 'select',
-        options,
-        required: true
+        value: '',
+        required: true,
+        options
     });
 
     expect(getByLabelText('select')).toBeRequired();
@@ -60,8 +64,9 @@ test('shows select input - disabled', () => {
     const { getByLabelText } = render(InputSelect, {
         id: 'select',
         label: 'select',
-        options,
-        disabled: true
+        value: '',
+        disabled: true,
+        options
     });
 
     expect(getByLabelText('select')).toBeDisabled();
@@ -70,9 +75,10 @@ test('shows select input - disabled', () => {
 test('shows select input - hide label', () => {
     render(InputSelect, {
         id: 'select',
-        options,
+        value: '',
         label: 'label',
-        showLabel: false
+        showLabel: false,
+        options
     });
 
     const label = document.querySelector('label');
@@ -83,8 +89,8 @@ test('state', async () => {
     const { component, getByLabelText } = render(InputSelect, {
         id: 'select',
         label: 'select',
-        options,
-        value: ''
+        value: '',
+        options
     });
     const select = getByLabelText('select');
 
diff --git a/tests/unit/setup.ts b/tests/unit/setup.ts
index 8853bca562..59b173e591 100644
--- a/tests/unit/setup.ts
+++ b/tests/unit/setup.ts
@@ -2,6 +2,12 @@ import { vi } from 'vitest';
 
 beforeAll(() => {
     vi.mock('$app/environment', () => ({
-        browser: 'window' in globalThis
+        browser: true
+    }));
+    vi.mock('$app/stores', () => ({
+        page: null
+    }));
+    vi.mock('$app/navigation', () => ({
+        goto: vi.fn()
     }));
 });