diff --git a/README.md b/README.md
index 76f82ba16..16063cf7e 100644
--- a/README.md
+++ b/README.md
@@ -147,7 +147,7 @@ Adding a new dependency should have vital value on the product with minimum poss
 │       │   │   │   ├── _create.svelte  // Component to Create collections
 │       │   │   │   └── index.svelte    // Entrypoint for "/console/[PROJECT_ID]/database"
 │       │   │   ├── storage             // Storage Service "/console/[PROJECT]/storage"
-│       │   │   └── authentication      // Users Service "/console/[PROJECT]/authentication"
+│       │   │   └── auth                // Users Service "/console/[PROJECT]/auth"
 │       │   └──...
 │       ├── login.svelte                // Component for Login "/console/login"
 │       └── register.svelte             // Component for Register "/console/register"
diff --git a/package-lock.json b/package-lock.json
index c80abfc0d..40cf403ba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,30 +8,31 @@
             "name": "@appwrite/console",
             "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/appwrite-console": "^10.0.0",
+                "@aw-labs/icons": "0.0.0-74",
+                "@aw-labs/ui": "0.0.0-74",
                 "@popperjs/core": "^2.11.6",
                 "echarts": "^5.4.0",
+                "pretty-bytes": "^6.0.0",
                 "prismjs": "^1.29.0",
                 "tippy.js": "^6.3.7",
                 "web-vitals": "^3.0.3"
             },
             "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 +45,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": {
@@ -71,23 +72,23 @@
             }
         },
         "node_modules/@aw-labs/appwrite-console": {
-            "version": "6.0.0",
-            "resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-6.0.0.tgz",
-            "integrity": "sha512-g4sCMGiIptDUyKhJSfiKsG/gzqMIt3MQCdqod6bNWMunbXUqN7DeA0BT4MuTeVGdQuoOKuSmgHeExatlu0Dh9Q==",
+            "version": "10.0.0",
+            "resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-10.0.0.tgz",
+            "integrity": "sha512-YyEQ5SIhkvI/Axt/EOkAqKcMTkfEpQt7W1q91lWKQ+Hm9woMzYUcf8KThBnMvEFbphWQRaJKLtfpr8EJjCjm4w==",
             "dependencies": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"
             }
         },
         "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-74",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-74.tgz",
+            "integrity": "sha512-aWb1OV8QEvw2BgJNK3P92wmfXlHw15wKOqMndx4kGrof+FCEekplohCnO1WZYZODoE+rF8DKHUE8RodVbJzo4A=="
         },
         "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-74",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-74.tgz",
+            "integrity": "sha512-bg8j0XiB9+PwBUXVehKcxjdIS/GH9aJ1+RtdghDNBhOPc2A5zX+MmTCDsN071qlmDfW3pnufiCoQlek/qBvcdQ==",
             "dependencies": {
                 "@aw-labs/icons": "*",
                 "normalize.css": "^8.0.1",
@@ -721,38 +722,6 @@
             "dev": true,
             "peer": true
         },
-        "node_modules/@esbuild/android-arm": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.10.tgz",
-            "integrity": "sha512-FNONeQPy/ox+5NBkcSbYJxoXj9GWu8gVGJTVmUyoOCKQFDTrHVKgNSzChdNt0I8Aj/iKcsDf2r9BFwv+FSNUXg==",
-            "cpu": [
-                "arm"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "android"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/@esbuild/linux-loong64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.10.tgz",
-            "integrity": "sha512-w0Ou3Z83LOYEkwaui2M8VwIp+nLi/NA60lBLMvaJ+vXVMcsARYdEzLNE7RSm4+lSg4zq4d7fAVuzk7PNQ5JFgg==",
-            "cpu": [
-                "loong64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "linux"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
         "node_modules/@eslint/eslintrc": {
             "version": "1.3.3",
             "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.3.tgz",
@@ -777,9 +746,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 +1268,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 +1295,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 +1332,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 +1344,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 +1436,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 +1672,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 +1712,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 +1744,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 +1771,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 +1788,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 +1815,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 +1828,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 +1855,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 +1881,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": {
@@ -2906,54 +2868,6 @@
                 "esbuild-windows-arm64": "0.15.10"
             }
         },
-        "node_modules/esbuild-android-64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.15.10.tgz",
-            "integrity": "sha512-UI7krF8OYO1N7JYTgLT9ML5j4+45ra3amLZKx7LO3lmLt1Ibn8t3aZbX5Pu4BjWiqDuJ3m/hsvhPhK/5Y/YpnA==",
-            "cpu": [
-                "x64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "android"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/esbuild-android-arm64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.15.10.tgz",
-            "integrity": "sha512-EOt55D6xBk5O05AK8brXUbZmoFj4chM8u3riGflLa6ziEoVvNjRdD7Cnp82NHQGfSHgYR06XsPI8/sMuA/cUwg==",
-            "cpu": [
-                "arm64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "android"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/esbuild-darwin-64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.15.10.tgz",
-            "integrity": "sha512-hbDJugTicqIm+WKZgp208d7FcXcaK8j2c0l+fqSJ3d2AzQAfjEYDRM3Z2oMeqSJ9uFxyj/muSACLdix7oTstRA==",
-            "cpu": [
-                "x64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "darwin"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
         "node_modules/esbuild-darwin-arm64": {
             "version": "0.15.10",
             "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.10.tgz",
@@ -2970,262 +2884,6 @@
                 "node": ">=12"
             }
         },
-        "node_modules/esbuild-freebsd-64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.10.tgz",
-            "integrity": "sha512-KMBFMa7C8oc97nqDdoZwtDBX7gfpolkk6Bcmj6YFMrtCMVgoU/x2DI1p74DmYl7CSS6Ppa3xgemrLrr5IjIn0w==",
-            "cpu": [
-                "x64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "freebsd"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/esbuild-freebsd-arm64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.10.tgz",
-            "integrity": "sha512-m2KNbuCX13yQqLlbSojFMHpewbn8wW5uDS6DxRpmaZKzyq8Dbsku6hHvh2U+BcLwWY4mpgXzFUoENEf7IcioGg==",
-            "cpu": [
-                "arm64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "freebsd"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/esbuild-linux-32": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.15.10.tgz",
-            "integrity": "sha512-guXrwSYFAvNkuQ39FNeV4sNkNms1bLlA5vF1H0cazZBOLdLFIny6BhT+TUbK/hdByMQhtWQ5jI9VAmPKbVPu1w==",
-            "cpu": [
-                "ia32"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "linux"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/esbuild-linux-64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.15.10.tgz",
-            "integrity": "sha512-jd8XfaSJeucMpD63YNMO1JCrdJhckHWcMv6O233bL4l6ogQKQOxBYSRP/XLWP+6kVTu0obXovuckJDcA0DKtQA==",
-            "cpu": [
-                "x64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "linux"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/esbuild-linux-arm": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.15.10.tgz",
-            "integrity": "sha512-6N8vThLL/Lysy9y4Ex8XoLQAlbZKUyExCWyayGi2KgTBelKpPgj6RZnUaKri0dHNPGgReJriKVU6+KDGQwn10A==",
-            "cpu": [
-                "arm"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "linux"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/esbuild-linux-arm64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.10.tgz",
-            "integrity": "sha512-GByBi4fgkvZFTHFDYNftu1DQ1GzR23jws0oWyCfhnI7eMOe+wgwWrc78dbNk709Ivdr/evefm2PJiUBMiusS1A==",
-            "cpu": [
-                "arm64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "linux"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/esbuild-linux-mips64le": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.10.tgz",
-            "integrity": "sha512-BxP+LbaGVGIdQNJUNF7qpYjEGWb0YyHVSKqYKrn+pTwH/SiHUxFyJYSP3pqkku61olQiSBnSmWZ+YUpj78Tw7Q==",
-            "cpu": [
-                "mips64el"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "linux"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/esbuild-linux-ppc64le": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.10.tgz",
-            "integrity": "sha512-LoSQCd6498PmninNgqd/BR7z3Bsk/mabImBWuQ4wQgmQEeanzWd5BQU2aNi9mBURCLgyheuZS6Xhrw5luw3OkQ==",
-            "cpu": [
-                "ppc64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "linux"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/esbuild-linux-riscv64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.10.tgz",
-            "integrity": "sha512-Lrl9Cr2YROvPV4wmZ1/g48httE8z/5SCiXIyebiB5N8VT7pX3t6meI7TQVHw/wQpqP/AF4SksDuFImPTM7Z32Q==",
-            "cpu": [
-                "riscv64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "linux"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/esbuild-linux-s390x": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.10.tgz",
-            "integrity": "sha512-ReP+6q3eLVVP2lpRrvl5EodKX7EZ1bS1/z5j6hsluAlZP5aHhk6ghT6Cq3IANvvDdscMMCB4QEbI+AjtvoOFpA==",
-            "cpu": [
-                "s390x"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "linux"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/esbuild-netbsd-64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.10.tgz",
-            "integrity": "sha512-iGDYtJCMCqldMskQ4eIV+QSS/CuT7xyy9i2/FjpKvxAuCzrESZXiA1L64YNj6/afuzfBe9i8m/uDkFHy257hTw==",
-            "cpu": [
-                "x64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "netbsd"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/esbuild-openbsd-64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.10.tgz",
-            "integrity": "sha512-ftMMIwHWrnrYnvuJQRJs/Smlcb28F9ICGde/P3FUTCgDDM0N7WA0o9uOR38f5Xe2/OhNCgkjNeb7QeaE3cyWkQ==",
-            "cpu": [
-                "x64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "openbsd"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/esbuild-sunos-64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.15.10.tgz",
-            "integrity": "sha512-mf7hBL9Uo2gcy2r3rUFMjVpTaGpFJJE5QTDDqUFf1632FxteYANffDZmKbqX0PfeQ2XjUDE604IcE7OJeoHiyg==",
-            "cpu": [
-                "x64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "sunos"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/esbuild-windows-32": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.15.10.tgz",
-            "integrity": "sha512-ttFVo+Cg8b5+qHmZHbEc8Vl17kCleHhLzgT8X04y8zudEApo0PxPg9Mz8Z2cKH1bCYlve1XL8LkyXGFjtUYeGg==",
-            "cpu": [
-                "ia32"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "win32"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/esbuild-windows-64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.15.10.tgz",
-            "integrity": "sha512-2H0gdsyHi5x+8lbng3hLbxDWR7mKHWh5BXZGKVG830KUmXOOWFE2YKJ4tHRkejRduOGDrBvHBriYsGtmTv3ntA==",
-            "cpu": [
-                "x64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "win32"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/esbuild-windows-arm64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.10.tgz",
-            "integrity": "sha512-S+th4F+F8VLsHLR0zrUcG+Et4hx0RKgK1eyHc08kztmLOES8BWwMiaGdoW9hiXuzznXQ0I/Fg904MNbr11Nktw==",
-            "cpu": [
-                "arm64"
-            ],
-            "dev": true,
-            "optional": true,
-            "os": [
-                "win32"
-            ],
-            "engines": {
-                "node": ">=12"
-            }
-        },
         "node_modules/escalade": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -3343,14 +3001,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 +3025,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 +3292,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 +3932,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 +5814,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": [
                 {
@@ -6281,6 +5943,17 @@
                 "svelte": "^3.2.0"
             }
         },
+        "node_modules/pretty-bytes": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.0.0.tgz",
+            "integrity": "sha512-6UqkYefdogmzqAZWzJ7laYeJnaXDy2/J+ZqiiMtS7t7OfpXWTlaeGMwX8U6EFvPV/YWWEKRkS8hKS4k60WHTOg==",
+            "engines": {
+                "node": "^14.13.1 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/pretty-format": {
             "version": "27.5.1",
             "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
@@ -6547,9 +6220,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 +7025,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 +7078,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 +7101,7 @@
                 "less": "*",
                 "sass": "*",
                 "stylus": "*",
+                "sugarss": "*",
                 "terser": "^5.4.0"
             },
             "peerDependenciesMeta": {
@@ -7440,6 +7114,9 @@
                 "stylus": {
                     "optional": true
                 },
+                "sugarss": {
+                    "optional": true
+                },
                 "terser": {
                     "optional": true
                 }
@@ -7781,23 +7458,23 @@
             }
         },
         "@aw-labs/appwrite-console": {
-            "version": "6.0.0",
-            "resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-6.0.0.tgz",
-            "integrity": "sha512-g4sCMGiIptDUyKhJSfiKsG/gzqMIt3MQCdqod6bNWMunbXUqN7DeA0BT4MuTeVGdQuoOKuSmgHeExatlu0Dh9Q==",
+            "version": "10.0.0",
+            "resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-10.0.0.tgz",
+            "integrity": "sha512-YyEQ5SIhkvI/Axt/EOkAqKcMTkfEpQt7W1q91lWKQ+Hm9woMzYUcf8KThBnMvEFbphWQRaJKLtfpr8EJjCjm4w==",
             "requires": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"
             }
         },
         "@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-74",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-74.tgz",
+            "integrity": "sha512-aWb1OV8QEvw2BgJNK3P92wmfXlHw15wKOqMndx4kGrof+FCEekplohCnO1WZYZODoE+rF8DKHUE8RodVbJzo4A=="
         },
         "@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-74",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-74.tgz",
+            "integrity": "sha512-bg8j0XiB9+PwBUXVehKcxjdIS/GH9aJ1+RtdghDNBhOPc2A5zX+MmTCDsN071qlmDfW3pnufiCoQlek/qBvcdQ==",
             "requires": {
                 "@aw-labs/icons": "*",
                 "normalize.css": "^8.0.1",
@@ -8290,20 +7967,6 @@
             "dev": true,
             "peer": true
         },
-        "@esbuild/android-arm": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.10.tgz",
-            "integrity": "sha512-FNONeQPy/ox+5NBkcSbYJxoXj9GWu8gVGJTVmUyoOCKQFDTrHVKgNSzChdNt0I8Aj/iKcsDf2r9BFwv+FSNUXg==",
-            "dev": true,
-            "optional": true
-        },
-        "@esbuild/linux-loong64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.10.tgz",
-            "integrity": "sha512-w0Ou3Z83LOYEkwaui2M8VwIp+nLi/NA60lBLMvaJ+vXVMcsARYdEzLNE7RSm4+lSg4zq4d7fAVuzk7PNQ5JFgg==",
-            "dev": true,
-            "optional": true
-        },
         "@eslint/eslintrc": {
             "version": "1.3.3",
             "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.3.tgz",
@@ -8322,9 +7985,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 +8399,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 +8426,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 +8452,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 +8463,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 +8532,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 +8746,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 +8786,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 +8802,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 +8857,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"
             }
         },
@@ -9994,27 +9653,6 @@
                 "esbuild-windows-arm64": "0.15.10"
             }
         },
-        "esbuild-android-64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.15.10.tgz",
-            "integrity": "sha512-UI7krF8OYO1N7JYTgLT9ML5j4+45ra3amLZKx7LO3lmLt1Ibn8t3aZbX5Pu4BjWiqDuJ3m/hsvhPhK/5Y/YpnA==",
-            "dev": true,
-            "optional": true
-        },
-        "esbuild-android-arm64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.15.10.tgz",
-            "integrity": "sha512-EOt55D6xBk5O05AK8brXUbZmoFj4chM8u3riGflLa6ziEoVvNjRdD7Cnp82NHQGfSHgYR06XsPI8/sMuA/cUwg==",
-            "dev": true,
-            "optional": true
-        },
-        "esbuild-darwin-64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.15.10.tgz",
-            "integrity": "sha512-hbDJugTicqIm+WKZgp208d7FcXcaK8j2c0l+fqSJ3d2AzQAfjEYDRM3Z2oMeqSJ9uFxyj/muSACLdix7oTstRA==",
-            "dev": true,
-            "optional": true
-        },
         "esbuild-darwin-arm64": {
             "version": "0.15.10",
             "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.10.tgz",
@@ -10022,118 +9660,6 @@
             "dev": true,
             "optional": true
         },
-        "esbuild-freebsd-64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.10.tgz",
-            "integrity": "sha512-KMBFMa7C8oc97nqDdoZwtDBX7gfpolkk6Bcmj6YFMrtCMVgoU/x2DI1p74DmYl7CSS6Ppa3xgemrLrr5IjIn0w==",
-            "dev": true,
-            "optional": true
-        },
-        "esbuild-freebsd-arm64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.10.tgz",
-            "integrity": "sha512-m2KNbuCX13yQqLlbSojFMHpewbn8wW5uDS6DxRpmaZKzyq8Dbsku6hHvh2U+BcLwWY4mpgXzFUoENEf7IcioGg==",
-            "dev": true,
-            "optional": true
-        },
-        "esbuild-linux-32": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.15.10.tgz",
-            "integrity": "sha512-guXrwSYFAvNkuQ39FNeV4sNkNms1bLlA5vF1H0cazZBOLdLFIny6BhT+TUbK/hdByMQhtWQ5jI9VAmPKbVPu1w==",
-            "dev": true,
-            "optional": true
-        },
-        "esbuild-linux-64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.15.10.tgz",
-            "integrity": "sha512-jd8XfaSJeucMpD63YNMO1JCrdJhckHWcMv6O233bL4l6ogQKQOxBYSRP/XLWP+6kVTu0obXovuckJDcA0DKtQA==",
-            "dev": true,
-            "optional": true
-        },
-        "esbuild-linux-arm": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.15.10.tgz",
-            "integrity": "sha512-6N8vThLL/Lysy9y4Ex8XoLQAlbZKUyExCWyayGi2KgTBelKpPgj6RZnUaKri0dHNPGgReJriKVU6+KDGQwn10A==",
-            "dev": true,
-            "optional": true
-        },
-        "esbuild-linux-arm64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.10.tgz",
-            "integrity": "sha512-GByBi4fgkvZFTHFDYNftu1DQ1GzR23jws0oWyCfhnI7eMOe+wgwWrc78dbNk709Ivdr/evefm2PJiUBMiusS1A==",
-            "dev": true,
-            "optional": true
-        },
-        "esbuild-linux-mips64le": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.10.tgz",
-            "integrity": "sha512-BxP+LbaGVGIdQNJUNF7qpYjEGWb0YyHVSKqYKrn+pTwH/SiHUxFyJYSP3pqkku61olQiSBnSmWZ+YUpj78Tw7Q==",
-            "dev": true,
-            "optional": true
-        },
-        "esbuild-linux-ppc64le": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.10.tgz",
-            "integrity": "sha512-LoSQCd6498PmninNgqd/BR7z3Bsk/mabImBWuQ4wQgmQEeanzWd5BQU2aNi9mBURCLgyheuZS6Xhrw5luw3OkQ==",
-            "dev": true,
-            "optional": true
-        },
-        "esbuild-linux-riscv64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.10.tgz",
-            "integrity": "sha512-Lrl9Cr2YROvPV4wmZ1/g48httE8z/5SCiXIyebiB5N8VT7pX3t6meI7TQVHw/wQpqP/AF4SksDuFImPTM7Z32Q==",
-            "dev": true,
-            "optional": true
-        },
-        "esbuild-linux-s390x": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.10.tgz",
-            "integrity": "sha512-ReP+6q3eLVVP2lpRrvl5EodKX7EZ1bS1/z5j6hsluAlZP5aHhk6ghT6Cq3IANvvDdscMMCB4QEbI+AjtvoOFpA==",
-            "dev": true,
-            "optional": true
-        },
-        "esbuild-netbsd-64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.10.tgz",
-            "integrity": "sha512-iGDYtJCMCqldMskQ4eIV+QSS/CuT7xyy9i2/FjpKvxAuCzrESZXiA1L64YNj6/afuzfBe9i8m/uDkFHy257hTw==",
-            "dev": true,
-            "optional": true
-        },
-        "esbuild-openbsd-64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.10.tgz",
-            "integrity": "sha512-ftMMIwHWrnrYnvuJQRJs/Smlcb28F9ICGde/P3FUTCgDDM0N7WA0o9uOR38f5Xe2/OhNCgkjNeb7QeaE3cyWkQ==",
-            "dev": true,
-            "optional": true
-        },
-        "esbuild-sunos-64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.15.10.tgz",
-            "integrity": "sha512-mf7hBL9Uo2gcy2r3rUFMjVpTaGpFJJE5QTDDqUFf1632FxteYANffDZmKbqX0PfeQ2XjUDE604IcE7OJeoHiyg==",
-            "dev": true,
-            "optional": true
-        },
-        "esbuild-windows-32": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.15.10.tgz",
-            "integrity": "sha512-ttFVo+Cg8b5+qHmZHbEc8Vl17kCleHhLzgT8X04y8zudEApo0PxPg9Mz8Z2cKH1bCYlve1XL8LkyXGFjtUYeGg==",
-            "dev": true,
-            "optional": true
-        },
-        "esbuild-windows-64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.15.10.tgz",
-            "integrity": "sha512-2H0gdsyHi5x+8lbng3hLbxDWR7mKHWh5BXZGKVG830KUmXOOWFE2YKJ4tHRkejRduOGDrBvHBriYsGtmTv3ntA==",
-            "dev": true,
-            "optional": true
-        },
-        "esbuild-windows-arm64": {
-            "version": "0.15.10",
-            "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.10.tgz",
-            "integrity": "sha512-S+th4F+F8VLsHLR0zrUcG+Et4hx0RKgK1eyHc08kztmLOES8BWwMiaGdoW9hiXuzznXQ0I/Fg904MNbr11Nktw==",
-            "dev": true,
-            "optional": true
-        },
         "escalade": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -10220,14 +9746,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 +9770,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 +9952,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 +10445,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 +11896,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",
@@ -12462,6 +11989,11 @@
             "dev": true,
             "requires": {}
         },
+        "pretty-bytes": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.0.0.tgz",
+            "integrity": "sha512-6UqkYefdogmzqAZWzJ7laYeJnaXDy2/J+ZqiiMtS7t7OfpXWTlaeGMwX8U6EFvPV/YWWEKRkS8hKS4k60WHTOg=="
+        },
         "pretty-format": {
             "version": "27.5.1",
             "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
@@ -12656,9 +12188,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 +12761,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 +12805,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 2ddcfe3cf..fed4a0d11 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 .",
@@ -18,30 +19,31 @@
         "e2e": "playwright test tests/e2e"
     },
     "dependencies": {
-        "@aw-labs/appwrite-console": "^6.0.0",
-        "@aw-labs/icons": "0.0.0-64",
-        "@aw-labs/ui": "0.0.0-64",
+        "@aw-labs/appwrite-console": "^10.0.0",
+        "@aw-labs/icons": "0.0.0-74",
+        "@aw-labs/ui": "0.0.0-74",
         "@popperjs/core": "^2.11.6",
         "echarts": "^5.4.0",
+        "pretty-bytes": "^6.0.0",
         "prismjs": "^1.29.0",
         "tippy.js": "^6.3.7",
         "web-vitals": "^3.0.3"
     },
     "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 +56,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 92b3b3e0e..5ba64ae04 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/charts/bar.svelte b/src/lib/charts/bar.svelte
index 71377d401..d7658dfa6 100644
--- a/src/lib/charts/bar.svelte
+++ b/src/lib/charts/bar.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
+    import type { EChartsOption } from 'echarts';
     import type { BarSeriesOption } from 'echarts/charts';
     import Base from './base.svelte';
 
     export let series: BarSeriesOption[];
+    export let options: EChartsOption = null;
 </script>
 
 <Base
+    {options}
     series={series.map((s) => {
         s.type = 'bar';
         s.stack = 'total';
diff --git a/src/lib/charts/base.json b/src/lib/charts/base.json
index 29d166045..0cbfc0897 100644
--- a/src/lib/charts/base.json
+++ b/src/lib/charts/base.json
@@ -6,7 +6,7 @@
             "borderWidth": 1
         },
         "lineStyle": {
-            "width": 2
+            "width": 1
         },
         "symbolSize": 4,
         "symbol": "emptyCircle",
diff --git a/src/lib/charts/base.svelte b/src/lib/charts/base.svelte
index 54d8e2907..09f5b5ee2 100644
--- a/src/lib/charts/base.svelte
+++ b/src/lib/charts/base.svelte
@@ -8,10 +8,12 @@
     import dark from './dark.json';
     import type { ECharts } from 'echarts/core';
     import type { BarSeriesOption, LineSeriesOption } from 'echarts/charts';
+    import type { EChartsOption } from 'echarts';
 
     registerTheme('light', { ...base, ...light });
     registerTheme('dark', { ...base, ...dark });
 
+    export let options: EChartsOption;
     export let series: (BarSeriesOption | LineSeriesOption)[];
 
     let chart: ECharts;
@@ -19,6 +21,7 @@
 
     $: option = {
         ...defaultConfig,
+        ...options,
         series
     };
 
@@ -39,7 +42,7 @@
             (await import('echarts/components')).TransformComponent,
             (await import('echarts/components')).LegendComponent,
             (await import('echarts/features')).LabelLayout,
-            (await import('echarts/renderers')).CanvasRenderer
+            (await import('echarts/renderers')).SVGRenderer
         ]);
         makeChart();
     });
@@ -85,6 +88,7 @@
 <style>
     .echart {
         width: 100%;
-        min-height: 12rem;
+        min-height: 10rem;
+        height: 100%;
     }
 </style>
diff --git a/src/lib/charts/config.ts b/src/lib/charts/config.ts
index 541b51e30..c43f04c63 100644
--- a/src/lib/charts/config.ts
+++ b/src/lib/charts/config.ts
@@ -17,8 +17,8 @@ export const defaultConfig: EChartsOption = {
         containLabel: true,
         left: 0,
         right: 0,
-        bottom: 15,
-        top: 15
+        bottom: 0,
+        top: 45
     },
     xAxis: {
         type: 'time',
@@ -27,6 +27,11 @@ export const defaultConfig: EChartsOption = {
     yAxis: {
         type: 'value',
         splitNumber: 3,
-        minInterval: 1
+        minInterval: 1,
+        splitLine: {
+            lineStyle: {
+                width: 1
+            }
+        }
     }
 };
diff --git a/src/lib/charts/dark.json b/src/lib/charts/dark.json
index 0bc23c3cf..94a660131 100644
--- a/src/lib/charts/dark.json
+++ b/src/lib/charts/dark.json
@@ -45,11 +45,11 @@
             }
         },
         "axisLabel": {
-            "color": "#666666"
+            "color": "#868EA3"
         },
         "splitLine": {
             "lineStyle": {
-                "color": ["#333333"]
+                "color": ["#4F5769"]
             }
         },
         "splitArea": {
diff --git a/src/lib/charts/light.json b/src/lib/charts/light.json
index d94378d63..e6ddb057a 100644
--- a/src/lib/charts/light.json
+++ b/src/lib/charts/light.json
@@ -34,7 +34,7 @@
         },
         "splitLine": {
             "lineStyle": {
-                "color": ["#E0E6F1"]
+                "color": ["#E8E9F0"]
             }
         }
     },
diff --git a/src/lib/charts/line.svelte b/src/lib/charts/line.svelte
index 4cebee6f9..3879c07dc 100644
--- a/src/lib/charts/line.svelte
+++ b/src/lib/charts/line.svelte
@@ -1,14 +1,24 @@
 <script lang="ts">
     import type { LineSeriesOption } from 'echarts/charts';
+    import type { EChartsOption } from 'echarts';
+    import { Colors } from './config';
     import Base from './base.svelte';
 
     export let series: LineSeriesOption[];
+    export let options: EChartsOption = null;
 </script>
 
 <Base
+    {options}
     series={series.map((s) => {
         s.type = 'line';
         s.stack = 'total';
+        s.lineStyle = {
+            shadowBlur: 38,
+            shadowColor: Colors.Primary,
+            shadowOffsetY: 15,
+            shadowOffsetX: 0
+        };
         s.showSymbol = false;
 
         return s;
diff --git a/src/lib/components/back.svelte b/src/lib/components/back.svelte
deleted file mode 100644
index 18980a511..000000000
--- 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/card.svelte b/src/lib/components/card.svelte
index a9d12f9bc..2bf48db4d 100644
--- a/src/lib/components/card.svelte
+++ b/src/lib/components/card.svelte
@@ -1,7 +1,32 @@
 <script lang="ts">
+    import { clickOnEnter } from '$lib/helpers/a11y';
+
     export let isTile = false;
+    export let isDashed = false;
+    export let isButton = false;
+    export let danger = false;
+    export let href: string = null;
+
+    function getElement(): string {
+        switch (true) {
+            case !!href:
+                return 'a';
+            case isButton:
+                return 'button';
+            default:
+                return 'article';
+        }
+    }
 </script>
 
-<article class="card" class:common-section={!isTile}>
+<svelte:element
+    this={getElement()}
+    class="card"
+    class:common-section={!isTile}
+    class:is-border-dashed={isDashed}
+    class:is-danger={danger}
+    on:click
+    on:keyup={clickOnEnter}
+    {href}>
     <slot />
-</article>
+</svelte:element>
diff --git a/src/lib/components/cardContainer.svelte b/src/lib/components/cardContainer.svelte
index 5ba3ee68b..126e61c97 100644
--- a/src/lib/components/cardContainer.svelte
+++ b/src/lib/components/cardContainer.svelte
@@ -12,8 +12,8 @@
     style={`--grid-gap:1.5rem; --grid-item-size:${total > 3 ? '22rem' : '25rem'};`}>
     <slot />
 
-    {#if limit + offset > total && (total % 2 !== 0 || total % 4 === 0)}
-        <Empty isButton on:click>
+    {#if total > 3 ? total < limit + offset : total % 2 !== 0}
+        <Empty on:click>
             <slot name="empty" />
         </Empty>
     {/if}
diff --git a/src/lib/components/cardGrid.svelte b/src/lib/components/cardGrid.svelte
index 665e642b6..2215cc6dc 100644
--- a/src/lib/components/cardGrid.svelte
+++ b/src/lib/components/cardGrid.svelte
@@ -1,8 +1,10 @@
 <script>
     import { Card } from './';
+
+    export let danger = false;
 </script>
 
-<Card>
+<Card {danger}>
     <div class="common-section grid-1-2">
         <div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16">
             <slot />
diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index f8ac3d894..24debe415 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -10,7 +10,6 @@
     import 'prismjs/plugins/autoloader/prism-autoloader';
     import 'prismjs/plugins/custom-class/prism-custom-class';
     import 'prismjs/plugins/line-numbers/prism-line-numbers';
-    import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
     import { afterUpdate } from 'svelte';
     import { Copy } from '.';
 
@@ -49,16 +48,16 @@
         {/if}
     </div>
 
-    <pre class={`language-${language}`} class:line-numbers={withLineNumbers}>
-        <code>{code}</code>
-    </pre>
+    <pre class={`language-${language}`} class:line-numbers={withLineNumbers}><code
+            >{code}</code></pre>
 </section>
 
 <style lang="scss" global>
     @import 'prismjs/themes/prism.css';
+    @import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
 
     .box {
-        --p-box-background-color: var(--color-neutral-300) !important;
+        --p-box-background-color: var(--color-neutral-400) !important;
 
         body.theme-light & {
             --p-box-background-color: var(--color-neutral-5) !important;
diff --git a/src/lib/components/collapsibleItem.svelte b/src/lib/components/collapsibleItem.svelte
index 5caa6caf3..ed93c1f49 100644
--- a/src/lib/components/collapsibleItem.svelte
+++ b/src/lib/components/collapsibleItem.svelte
@@ -1,13 +1,23 @@
+<script lang="ts">
+    export let withIndentation = false;
+</script>
+
 <li class="collapsible-item">
     <details class="collapsible-wrapper">
         <summary class="collapsible-button">
-            <span class="text"><slot name="title" /></span>
-            <span class="collapsible-button-optional"><slot name="subtitle" /></span>
+            <slot name="beforetitle" />
+            <div>
+                <span class="text"><slot name="title" /></span>
+                <span class="collapsible-button-optional"><slot name="subtitle" /></span>
+            </div>
             <div class="icon">
                 <span class="icon-cheveron-down" aria-hidden="true" />
             </div>
         </summary>
-        <div class="collapsible-content">
+        <div
+            class="collapsible-content"
+            class:u-margin-block-start-8={withIndentation}
+            class:u-padding-inline-32={withIndentation}>
             <slot />
         </div>
     </details>
diff --git a/src/lib/components/copyInput.svelte b/src/lib/components/copyInput.svelte
index 782e89c80..65bd6bb81 100644
--- a/src/lib/components/copyInput.svelte
+++ b/src/lib/components/copyInput.svelte
@@ -22,21 +22,23 @@
     };
 </script>
 
-<div class="input-text-wrapper is-with-end-button">
+<div>
     <label class:u-hide={!showLabel} class="label" for={label}>{label}</label>
-    <div class="input-text-wrapper">
+    <div class="input-text-wrapper" style="--amount-of-buttons:1">
         <input {value} id={label} type="text" class="input-text" readonly />
-        <button
-            type="button"
-            class="input-button"
-            aria-label="Click to copy."
-            on:click={copy}
-            on:mouseenter={() => setTimeout(() => (content = 'Click to copy'))}
-            use:tooltip={{
-                content,
-                hideOnClick: false
-            }}>
-            <span class="icon-duplicate" aria-hidden="true" />
-        </button>
+        <div class="options-list">
+            <button
+                type="button"
+                class="input-button"
+                aria-label="Click to copy."
+                on:click={copy}
+                on:mouseenter={() => setTimeout(() => (content = 'Click to copy'))}
+                use:tooltip={{
+                    content,
+                    hideOnClick: false
+                }}>
+                <span class="icon-duplicate" aria-hidden="true" />
+            </button>
+        </div>
     </div>
 </div>
diff --git a/src/lib/components/dropList.svelte b/src/lib/components/dropList.svelte
index 2cf75c7da..4098110b1 100644
--- a/src/lib/components/dropList.svelte
+++ b/src/lib/components/dropList.svelte
@@ -11,39 +11,23 @@
     type Placement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
     let element: HTMLDivElement;
     let tooltip: HTMLDivElement;
+    let arrow: HTMLDivElement;
     let instance: Instance;
-    let currentArrow: Placement;
-
-    $: [arrowHorizontal, arrowPosition] = applyArrow(currentArrow);
-
-    function applyArrow(value: Placement): [string: 'start' | 'end', string: 'top' | 'bottom'] {
-        switch (value) {
-            case 'bottom-start':
-                return ['start', 'bottom'];
-            case 'bottom-end':
-                return ['end', 'bottom'];
-            case 'top-start':
-                return ['start', 'top'];
-            case 'top-end':
-                return ['end', 'top'];
-            default:
-                return ['start', 'bottom'];
-        }
-    }
 
     onMount(() => {
         instance = createPopper(element, tooltip, {
             placement,
-            onFirstUpdate(state) {
-                if (currentArrow !== state.placement) {
-                    currentArrow = state.placement as Placement;
-                }
-            },
             modifiers: [
+                {
+                    name: 'arrow',
+                    options: {
+                        element: arrow
+                    }
+                },
                 {
                     name: 'offset',
                     options: {
-                        offset: [0, noArrow ? 0 : 12]
+                        offset: [0, noArrow ? 0 : 6]
                     }
                 },
                 {
@@ -51,16 +35,6 @@
                     options: {
                         fallbackPlacements: ['top-start', 'top-end', 'bottom-start', 'bottom-end']
                     }
-                },
-                {
-                    name: 'placementLogger',
-                    enabled: true,
-                    phase: 'main',
-                    fn({ state }) {
-                        if (currentArrow !== state.placement) {
-                            currentArrow = state.placement as Placement;
-                        }
-                    }
                 }
             ]
         });
@@ -87,16 +61,10 @@
     <slot />
 </div>
 
-<div bind:this={tooltip} style="z-index: 10">
+<div class="drop-tooltip" bind:this={tooltip} style="z-index: 10">
+    <div class="drop-arrow" class:u-hide={!show} bind:this={arrow} />
     {#if show}
-        <div
-            class="drop"
-            style="position: revert"
-            class:is-no-arrow={noArrow}
-            class:is-arrow-start={arrowHorizontal === 'start'}
-            class:is-arrow-end={arrowHorizontal === 'end'}
-            class:is-block-start={arrowPosition === 'top'}
-            class:is-block-end={arrowPosition === 'bottom'}>
+        <div class="drop is-no-arrow" style="position: revert">
             <section
                 class:u-overflow-y-auto={scrollable}
                 class:u-max-height-200={scrollable}
@@ -109,3 +77,38 @@
         </div>
     {/if}
 </div>
+
+<style global lang="scss">
+    .drop-tooltip[data-popper-placement^='top'] > .drop-arrow {
+        bottom: -4px;
+    }
+
+    .drop-tooltip[data-popper-placement^='bottom'] > .drop-arrow {
+        top: -4px;
+    }
+
+    .drop-tooltip[data-popper-placement^='left'] > .drop-arrow {
+        right: -4px;
+    }
+
+    .drop-tooltip[data-popper-placement^='right'] > .drop-arrow {
+        left: -4px;
+    }
+    .drop-arrow,
+    .drop-arrow::before {
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        z-index: -1;
+    }
+
+    .drop-arrow::before {
+        content: '';
+        transform: rotate(45deg);
+        background: hsl(var(--color-neutral-200));
+
+        body.theme-light & {
+            background: hsl(var(--color-neutral-10));
+        }
+    }
+</style>
diff --git a/src/lib/components/dropListLink.svelte b/src/lib/components/dropListLink.svelte
index 738a51134..977a6bce1 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 000000000..1b5ca8253
--- /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}
+        <button class="drop-tabs-button" disabled>
+            <span class="text"><slot /></span>
+        </button>
+    {:else}
+        <a class="drop-tabs-button" {href}>
+            <span class="text"><slot /></span>
+        </a>
+    {/if}
+</li>
diff --git a/src/lib/components/empty.svelte b/src/lib/components/empty.svelte
index ca0407035..37bf41dce 100644
--- a/src/lib/components/empty.svelte
+++ b/src/lib/components/empty.svelte
@@ -3,52 +3,44 @@
     import { Button } from '$lib/elements/forms';
     import EmptyLight from '$lib/images/empty-light.svg';
     import EmptyDark from '$lib/images/empty-dark.svg';
+    import { Heading } from '.';
 
-    export let isButton = false;
     export let single = false;
+    export let target: string = null;
+    export let href: string = null;
 </script>
 
-{#if isButton}
+{#if single}
+    <article class="card u-grid u-cross-center u-width-full-line common-section">
+        <div class="u-flex u-flex-vertical u-cross-center u-gap-24">
+            <button type="button" on:click|preventDefault>
+                {#if $app.themeInUse === 'dark'}
+                    <img src={EmptyDark} alt="create" aria-hidden="true" />
+                {:else}
+                    <img src={EmptyLight} alt="create" aria-hidden="true" />
+                {/if}
+            </button>
+            <slot>
+                <div class="u-text-center">
+                    <Heading size="7" tag="h4">Create your first {target} to get started.</Heading>
+                    <p class="body-text-2 u-margin-block-start-4">
+                        Need a hand? Check out our documentation.
+                    </p>
+                </div>
+                <div class="u-flex u-gap-16 u-main-center">
+                    <Button external {href} text>Documentation</Button>
+                    <Button secondary on:click>Create {target}</Button>
+                </div>
+            </slot>
+        </div>
+    </article>
+{:else}
     <button
         on:click|preventDefault
         type="button"
-        class="card u-grid u-cross-center u-width-full-line dashed"
-        class:common-section={single}>
-        {#if single}
-            <div class="u-flex u-flex-vertical u-cross-center u-gap-24">
-                {#if $app.themeInUse === 'dark'}
-                    <img src={EmptyDark} alt="create" aria-hidden="true" />
-                {:else}
-                    <img src={EmptyLight} alt="create" aria-hidden="true" />
-                {/if}
-                <slot />
-            </div>
-        {:else}
-            <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
-                <div class="common-section">
-                    <Button secondary round>
-                        <i class="icon-plus" />
-                    </Button>
-                </div>
-                <div class="common-section">
-                    <slot />
-                </div>
-            </div>
-        {/if}
-    </button>
-{:else}
-    <article class="card u-grid u-cross-center u-width-full-line" class:common-section={single}>
-        {#if single}
-            <div class="u-flex u-flex-vertical u-cross-center u-gap-24">
-                {#if $app.themeInUse === 'dark'}
-                    <img src={EmptyDark} alt="create" aria-hidden="true" />
-                {:else}
-                    <img src={EmptyLight} alt="create" aria-hidden="true" />
-                {/if}
-                <slot />
-            </div>
-        {:else}
-            <div class="common-section u-main-center u-flex">
+        class="card u-grid u-cross-center u-width-full-line dashed">
+        <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
+            <div class="common-section">
                 <Button secondary round>
                     <i class="icon-plus" />
                 </Button>
@@ -56,6 +48,6 @@
             <div class="common-section">
                 <slot />
             </div>
-        {/if}
-    </article>
+        </div>
+    </button>
 {/if}
diff --git a/src/lib/components/emptySearch.svelte b/src/lib/components/emptySearch.svelte
index 15f1d52b9..b0c54e647 100644
--- a/src/lib/components/emptySearch.svelte
+++ b/src/lib/components/emptySearch.svelte
@@ -2,7 +2,9 @@
     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';
+
+    export let hidePages = false;
 </script>
 
 <article class="card u-grid u-cross-center u-width-full-line common-section">
@@ -18,5 +20,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} {hidePages} />
 </div>
diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index 2ab43504f..f812d7ceb 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>
-            <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 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={() => {
+        <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;
-                            showInput = false;
-                        }}
-                        class="options-list-button"
-                        aria-label="cancel">
-                        <span class="icon-x" aria-hidden="true" />
-                    </button>
-                </div>
+                        }}>{event}</Pill>
+                {/each}
             </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 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 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}
+    {/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>
+        </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>
+    {/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/heading.svelte b/src/lib/components/heading.svelte
index 2fe797c81..29ca3d26a 100644
--- a/src/lib/components/heading.svelte
+++ b/src/lib/components/heading.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
     export let tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     export let size: '1' | '2' | '3' | '4' | '5' | '6' | '7';
+    export let trimmed = true;
 </script>
 
-<svelte:element this={tag} class={`heading-level-${size}`}>
+<svelte:element this={tag} class={`heading-level-${size}`} class:u-trim-1={trimmed}>
     <slot />
 </svelte:element>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 56df97ac0..c07033361 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';
@@ -40,3 +42,4 @@ export { default as Tab } from './tab.svelte';
 export { default as EventModal } from './eventModal.svelte';
 export { default as Status } from './status.svelte';
 export { default as Heading } from './heading.svelte';
+export { default as Output } from './output.svelte';
diff --git a/src/lib/components/innerModal.svelte b/src/lib/components/innerModal.svelte
index 384880389..b2d488dce 100644
--- a/src/lib/components/innerModal.svelte
+++ b/src/lib/components/innerModal.svelte
@@ -1,27 +1,33 @@
 <script>
+    import { FormItem } from '$lib/elements/forms';
+
     export let show = false;
 </script>
 
 {#if show}
-    <section class="modal is-inner-modal">
-        <header class="modal-header u-flex-wrap">
-            <h4 class="modal-title body-text-1">
-                <slot name="title" />
-            </h4>
-            <button
-                type="button"
-                class="x-button"
-                aria-label="Close"
-                title="Close"
-                on:click={() => (show = false)}>
-                <span class="icon-x" aria-hidden="true" />
-            </button>
-            <p class="u-flex-basis-100-percent">
-                <slot name="subtitle" />
-            </p>
-        </header>
-        <div class="modal-content">
-            <slot name="content" />
-        </div>
-    </section>
+    <FormItem>
+        <section class="modal is-inner-modal">
+            <div class="modal-form">
+                <header class="modal-header u-flex-wrap">
+                    <h4 class="modal-title body-text-1">
+                        <slot name="title" />
+                    </h4>
+                    <button
+                        type="button"
+                        class="x-button"
+                        aria-label="Close"
+                        title="Close"
+                        on:click={() => (show = false)}>
+                        <span class="icon-x" aria-hidden="true" />
+                    </button>
+                    <p class="u-flex-basis-100-percent">
+                        <slot name="subtitle" />
+                    </p>
+                </header>
+                <div class="modal-content">
+                    <slot name="content" />
+                </div>
+            </div>
+        </section>
+    </FormItem>
 {/if}
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 4a42b7533..b0a1caf3b 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 { createEventDispatcher, onDestroy, onMount } from 'svelte';
+    import { Alert } from '$lib/components';
 
     export let show = false;
     export let size: 'small' | 'big' = null;
@@ -11,44 +8,53 @@
     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) => {
+    const dispatch = createEventDispatcher();
+
+    onMount(() => {
+        if (show) openModal();
+    });
+
+    onDestroy(() => {
+        if (show) closeModal();
+    });
+
+    function handleBLur(event: MouseEvent) {
+        if (event.target === dialog) {
+            closeModal();
+        }
+    }
+    function openModal() {
+        if (dialog && !dialog.open) {
+            dialog.showModal();
+            document.documentElement.classList.add('u-overflow-hidden');
+        }
+    }
+
+    function closeModal() {
+        if (closable) {
+            if (dialog && dialog.open) {
+                dispatch('close');
+                dialog.close();
+                show = false;
+                document.documentElement.classList.remove('u-overflow-hidden');
+            }
+        }
+    }
+
+    function handleKeydown(event: KeyboardEvent) {
         if (event.key === 'Escape') {
             event.preventDefault();
             closeModal();
         }
-    };
-    const handleBLur = (event: MouseEvent) => {
-        const target: Partial<HTMLElement> = event.target;
-        if (target.hasAttribute('data-curtain')) {
-            closeModal();
-        }
-    };
-    const closeModal = () => {
-        if (closable) {
-            dispatch('close');
-            show = false;
-        }
-    };
+    }
 
-    /**
-     * 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');
-        }
+    $: if (show) {
+        openModal();
+    } else {
+        closeModal();
     }
 
     $: if (error) {
@@ -56,29 +62,25 @@
     }
 </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}>
+<dialog
+    class="modal"
+    class:is-small={size === 'small'}
+    class:is-big={size === 'big'}
+    bind:this={dialog}>
+    {#if show}
+        <!-- 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}
-                <Heading tag="h4" size="5">
+                <h4 class="modal-title heading-level-5">
                     <slot name="header" />
-                </Heading>
+                </h4>
                 {#if closable}
                     <button
                         type="button"
@@ -105,13 +107,14 @@
                 {/if}
                 <slot />
             </div>
+
             {#if $$slots.footer}
                 <div class="modal-footer">
-                    <div class="u-flex u-main-end u-gap-12">
+                    <div class="u-flex u-main-end u-gap-16">
                         <slot name="footer" />
                     </div>
                 </div>
             {/if}
-        </section>
-    </div>
-{/if}
+        </form>
+    {/if}
+</dialog>
diff --git a/src/lib/components/output.svelte b/src/lib/components/output.svelte
new file mode 100644
index 000000000..1430ef409
--- /dev/null
+++ b/src/lib/components/output.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import Copy from './copy.svelte';
+
+    export let value: string;
+</script>
+
+<Copy {value}>
+    <div class="interactive-text-output is-textarea">
+        <span class="text u-line-height-1-5 u-break-word"><slot /></span>
+
+        <div class="u-flex u-cross-child-start u-gap-8">
+            <button class="interactive-text-output-button" aria-label="copy text">
+                <span class="icon-duplicate" aria-hidden="true" />
+            </button>
+        </div>
+    </div>
+</Copy>
diff --git a/src/lib/components/pagination.svelte b/src/lib/components/pagination.svelte
index 12d48afb3..f82250018 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 000000000..12d48afb3
--- /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/actions.svelte b/src/lib/components/permissions/actions.svelte
index 9f2022e80..d97edeffd 100644
--- a/src/lib/components/permissions/actions.svelte
+++ b/src/lib/components/permissions/actions.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
-    import { Button } from '$lib/elements/forms';
     import { DropList, DropListItem } from '..';
     import Custom from './custom.svelte';
     import Team from './team.svelte';
@@ -22,10 +21,7 @@
 </script>
 
 <DropList bind:show={showDropdown} placement="bottom-end">
-    <Button text noMargin on:click={() => (showDropdown = !showDropdown)}>
-        <span class="icon-plus" aria-hidden="true" />
-        <span class="text">Add role</span>
-    </Button>
+    <slot />
     <svelte:fragment slot="list">
         <DropListItem disabled={$groups.has('any')} on:click={() => dispatch('create', ['any'])}>
             Any
diff --git a/src/lib/components/permissions/custom.svelte b/src/lib/components/permissions/custom.svelte
index edda2b7f7..617a63590 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>
+<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>
+    <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}
+    <svelte:fragment slot="footer">
+        <Button submit {disabled}>Create</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/lib/components/permissions/index.ts b/src/lib/components/permissions/index.ts
index 01de280d9..cd32ba0ea 100644
--- a/src/lib/components/permissions/index.ts
+++ b/src/lib/components/permissions/index.ts
@@ -1,3 +1,4 @@
 export { default as Permissions } from './permissions.svelte';
+export { default as Roles } from './roles.svelte';
 export { default as Team } from './team.svelte';
 export { default as User } from './user.svelte';
diff --git a/src/lib/components/permissions/permissions.svelte b/src/lib/components/permissions/permissions.svelte
index 67d7c7c63..35a3bdb6e 100644
--- a/src/lib/components/permissions/permissions.svelte
+++ b/src/lib/components/permissions/permissions.svelte
@@ -10,26 +10,23 @@
 </script>
 
 <script lang="ts">
+    import { Button } from '$lib/elements/forms';
     import {
         Table,
         TableBody,
         TableCell,
         TableCellHead,
-        TableCellText,
         TableHeader,
         TableRow
     } from '$lib/elements/table';
-    import { difference } from '$lib/helpers/array';
+    import { symmetricDifference } from '$lib/helpers/array';
     import { onDestroy, onMount } from 'svelte';
     import { writable, type Unsubscriber } from 'svelte/store';
-    import { Empty } from '../';
     import Actions from './actions.svelte';
     import Row from './row.svelte';
 
     export let withCreate = false;
-    export let withCrud = true;
     export let permissions: string[] = [];
-    export let executeAccess: string[] = [];
 
     let showUser = false;
     let showTeam = false;
@@ -43,10 +40,7 @@
         permissions.forEach(fromPermissionString);
         unsubscribe = groups.subscribe(() => {
             const current = exportRoles();
-            if (
-                difference(current, permissions).length ||
-                difference(permissions, current).length
-            ) {
+            if (symmetricDifference(current, permissions).length) {
                 permissions = current;
             }
         });
@@ -145,76 +139,61 @@
 
         return a.localeCompare(b);
     }
-
-    $: if (executeAccess.length && !permissions.length) {
-        executeAccess.forEach((permission) => {
-            addRole(permission);
-        });
-    }
-    $: if ([...$groups]?.length && !permissions.length) {
-        executeAccess = [...$groups].sort(sortRoles).map(([role]) => role);
-    }
-
-    //TODO: click on Empty components opens the dropdown
 </script>
 
 {#if [...$groups]?.length}
     <Table noMargin noStyles noMobile>
         <TableHeader>
             <TableCellHead>Role</TableCellHead>
-            {#if withCrud}
-                {#if withCreate}
-                    <TableCellHead width={70}>Create</TableCellHead>
-                {/if}
-                <TableCellHead width={70}>Read</TableCellHead>
-                <TableCellHead width={70}>Update</TableCellHead>
-                <TableCellHead width={70}>Delete</TableCellHead>
+            {#if withCreate}
+                <TableCellHead width={70}>Create</TableCellHead>
             {/if}
+            <TableCellHead width={70}>Read</TableCellHead>
+            <TableCellHead width={70}>Update</TableCellHead>
+            <TableCellHead width={70}>Delete</TableCellHead>
             <TableCellHead width={40} />
         </TableHeader>
         <TableBody>
             {#each [...$groups].sort(sortRoles) as [role, permission]}
                 <TableRow>
-                    <TableCellText title="Role">
+                    <TableCell title="Role">
                         <Row {role} />
-                    </TableCellText>
+                    </TableCell>
 
-                    {#if withCrud}
-                        {#if withCreate}
-                            <TableCell title="Create">
-                                <input
-                                    type="checkbox"
-                                    class="icon-check"
-                                    aria-label="Create"
-                                    checked={permission.create}
-                                    on:change={() => togglePermission(role, 'create')} />
-                            </TableCell>
-                        {/if}
-                        <TableCell title="Read">
+                    {#if withCreate}
+                        <TableCell title="Create">
                             <input
                                 type="checkbox"
                                 class="icon-check"
-                                aria-label="Read"
-                                checked={permission.read}
-                                on:change={() => togglePermission(role, 'read')} />
-                        </TableCell>
-                        <TableCell title="Update">
-                            <input
-                                type="checkbox"
-                                class="icon-check"
-                                aria-label="Update"
-                                checked={permission.update}
-                                on:change={() => togglePermission(role, 'update')} />
-                        </TableCell>
-                        <TableCell title="Delete">
-                            <input
-                                type="checkbox"
-                                class="icon-check"
-                                aria-label="Delete"
-                                checked={permission.delete}
-                                on:change={() => togglePermission(role, 'delete')} />
+                                aria-label="Create"
+                                checked={permission.create}
+                                on:change={() => togglePermission(role, 'create')} />
                         </TableCell>
                     {/if}
+                    <TableCell title="Read">
+                        <input
+                            type="checkbox"
+                            class="icon-check"
+                            aria-label="Read"
+                            checked={permission.read}
+                            on:change={() => togglePermission(role, 'read')} />
+                    </TableCell>
+                    <TableCell title="Update">
+                        <input
+                            type="checkbox"
+                            class="icon-check"
+                            aria-label="Update"
+                            checked={permission.update}
+                            on:change={() => togglePermission(role, 'update')} />
+                    </TableCell>
+                    <TableCell title="Delete">
+                        <input
+                            type="checkbox"
+                            class="icon-check"
+                            aria-label="Delete"
+                            checked={permission.delete}
+                            on:change={() => togglePermission(role, 'delete')} />
+                    </TableCell>
 
                     <TableCell title="Remove" width={40}>
                         <div class="u-flex">
@@ -231,18 +210,38 @@
             {/each}
         </TableBody>
     </Table>
+
+    <Actions
+        bind:showCustom
+        bind:showDropdown
+        bind:showTeam
+        bind:showUser
+        {groups}
+        on:create={create}>
+        <Button text noMargin on:click={() => (showDropdown = !showDropdown)}>
+            <span class="icon-plus" aria-hidden="true" />
+            <span class="text">Add role</span>
+        </Button>
+    </Actions>
 {:else}
-    <span class="eyebrow-heading-3 u-sep-block-end">ROLE</span>
-
-    <Empty isButton on:click={() => (showDropdown = !showDropdown)}>
-        Add a role to get started
-    </Empty>
+    <article class="card u-grid u-cross-center u-width-full-line dashed">
+        <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
+            <div class="common-section">
+                <Actions
+                    bind:showCustom
+                    bind:showDropdown
+                    bind:showTeam
+                    bind:showUser
+                    {groups}
+                    on:create={create}>
+                    <Button secondary round on:click={() => (showDropdown = !showDropdown)}>
+                        <i class="icon-plus" />
+                    </Button>
+                </Actions>
+            </div>
+            <div class="common-section">
+                <span class="text"> Add a role to get started </span>
+            </div>
+        </div>
+    </article>
 {/if}
-
-<Actions
-    bind:showCustom
-    bind:showDropdown
-    bind:showTeam
-    bind:showUser
-    {groups}
-    on:create={create} />
diff --git a/src/lib/components/permissions/roles.svelte b/src/lib/components/permissions/roles.svelte
index 81fe38ced..39c39bef1 100644
--- a/src/lib/components/permissions/roles.svelte
+++ b/src/lib/components/permissions/roles.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
+    import { Button } from '$lib/elements/forms';
     import {
         Table,
         TableBody,
+        TableCell,
         TableCellHead,
         TableCellText,
         TableHeader,
         TableRow
     } from '$lib/elements/table';
-    import { difference } from '$lib/helpers/array';
+    import { symmetricDifference } from '$lib/helpers/array';
     import { onDestroy, onMount } from 'svelte';
     import { writable, type Unsubscriber } from 'svelte/store';
     import Actions from './actions.svelte';
@@ -28,7 +30,7 @@
         roles.forEach(addRole);
         unsubscribe = groups.subscribe((n) => {
             const current = Array.from(n.keys());
-            if (difference(current, roles).length || difference(roles, current).length) {
+            if (symmetricDifference(current, roles).length) {
                 roles = current;
             }
         });
@@ -69,39 +71,84 @@
             return n;
         });
     }
+
+    function sortRoles(a: string, b: string) {
+        if ((a === 'any') !== (b === 'any')) {
+            return a === 'any' ? -1 : 1;
+        }
+        if ((a === 'users') !== (b === 'users')) {
+            return a === 'users' ? -1 : 1;
+        }
+        if ((a === 'guests') !== (b === 'guests')) {
+            return a === 'guests' ? -1 : 1;
+        }
+
+        return a.localeCompare(b);
+    }
+
+    $: if (roles) {
+        roles.forEach(addRole);
+    }
 </script>
 
-<Table noMargin noStyles noMobile>
-    <TableHeader>
-        <TableCellHead>Role</TableCellHead>
-        <TableCellHead width={40} />
-    </TableHeader>
-    <TableBody>
-        {#each [...$groups.keys()] as role}
-            <TableRow>
-                <TableCellText title="Role">
-                    <Row {role} />
-                </TableCellText>
-                <TableCellText title="Remove">
-                    <div class="u-flex">
-                        <button
-                            class="button is-text is-only-icon"
-                            type="button"
-                            aria-label="delete"
-                            on:click={() => deleteRole(role)}>
-                            <span class="icon-x" aria-hidden="true" />
-                        </button>
-                    </div>
-                </TableCellText>
-            </TableRow>
-        {/each}
-    </TableBody>
-</Table>
-
-<Actions
-    bind:showCustom
-    bind:showDropdown
-    bind:showTeam
-    bind:showUser
-    {groups}
-    on:create={create} />
+{#if [...$groups.keys()]?.length}
+    <Table noMargin noStyles noMobile>
+        <TableHeader>
+            <TableCellHead>Role</TableCellHead>
+            <TableCellHead width={40} />
+        </TableHeader>
+        <TableBody>
+            {#each [...$groups.keys()].sort(sortRoles) as role}
+                <TableRow>
+                    <TableCell title="Role">
+                        <Row {role} />
+                    </TableCell>
+                    <TableCellText title="Remove">
+                        <div class="u-flex">
+                            <button
+                                class="button is-text is-only-icon"
+                                type="button"
+                                aria-label="delete"
+                                on:click={() => deleteRole(role)}>
+                                <span class="icon-x" aria-hidden="true" />
+                            </button>
+                        </div>
+                    </TableCellText>
+                </TableRow>
+            {/each}
+        </TableBody>
+    </Table>
+    <Actions
+        bind:showCustom
+        bind:showDropdown
+        bind:showTeam
+        bind:showUser
+        {groups}
+        on:create={create}>
+        <Button text noMargin on:click={() => (showDropdown = !showDropdown)}>
+            <span class="icon-plus" aria-hidden="true" />
+            <span class="text">Add role</span>
+        </Button>
+    </Actions>
+{:else}
+    <article class="card u-grid u-cross-center u-width-full-line dashed">
+        <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
+            <div class="common-section">
+                <Actions
+                    bind:showCustom
+                    bind:showDropdown
+                    bind:showTeam
+                    bind:showUser
+                    {groups}
+                    on:create={create}>
+                    <Button secondary round on:click={() => (showDropdown = !showDropdown)}>
+                        <i class="icon-plus" />
+                    </Button>
+                </Actions>
+            </div>
+            <div class="common-section">
+                <span class="text"> Add a role to get started </span>
+            </div>
+        </div>
+    </article>
+{/if}
diff --git a/src/lib/components/permissions/row.svelte b/src/lib/components/permissions/row.svelte
index 2f23de52b..85f95fe58 100644
--- a/src/lib/components/permissions/row.svelte
+++ b/src/lib/components/permissions/row.svelte
@@ -11,7 +11,7 @@
         {:else if role === 'any'}
             <div>Any</div>
         {:else}
-            <div>{role}</div>
+            <div class="u-trim-1">{role}</div>
         {/if}
     </div>
 </div>
diff --git a/src/lib/components/permissions/team.svelte b/src/lib/components/permissions/team.svelte
index 8ea527e80..3451522cf 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, EmptySearch, Modal, PaginationInline } from '..';
     import type { Writable } from 'svelte/store';
     import type { Permission } from './permissions.svelte';
 
@@ -58,54 +58,80 @@
     }
 </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>
+<Modal bind:show on:submit={create} on:close={reset} size="big">
+    <svelte:fragment slot="header">Select teams</svelte:fragment>
+    <InputSearch autofocus disabled={!results?.teams?.length && !search} bind:value={search} />
+    {#if results?.teams?.length}
+        <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>
+        <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>
+    {:else if search}
+        <EmptySearch hidePages>
+            <div class="common-section">
+                <div class="u-text-center common-section">
+                    <b class="body-text-2">Sorry we couldn't find "{search}"</b>
+                    <p>There are no teams that match your search.</p>
+                </div>
+                <div class="u-flex u-gap-16 common-section u-main-center">
+                    <Button external href="https://appwrite.io/docs/client/teams" text
+                        >Documentation</Button>
+                    <Button secondary on:click={() => (search = '')}>Clear search</Button>
                 </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}
+        </EmptySearch>
+    {:else}
+        <EmptySearch hidePages>
+            <div class="common-section">
+                <div class="u-text-center common-section">
+                    <p class="text u-line-height-1-5">
+                        You have no teams. Create a team to see them here.
+                    </p>
+                    <p class="text u-line-height-1-5">
+                        Need a hand? Check out our <a
+                            href="https://appwrite.io/docs/client/teams"
+                            target="_blank"
+                            rel="noopener noreferrer">
+                            documentation</a
+                        >.
+                    </p>
+                </div>
+            </div>
+        </EmptySearch>
+    {/if}
+
+    <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 862343d00..9b068db51 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, EmptySearch, 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,106 @@
     }
 </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} />
+<Modal bind:show on:submit={create} on:close={reset} size="big">
+    <svelte:fragment slot="header">Select users</svelte:fragment>
+    <InputSearch autofocus disabled={!results?.users?.length && !search} bind:value={search} />
+    {#if results?.users?.length}
+        <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}>
+                                    {#if user.email || user.phone}
+                                        {#if user.name}
+                                            <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>
+                                        {:else}
+                                            <div class="avatar is-size-small ">
+                                                <span class="icon-minus-sm" aria-hidden="true" />
+                                            </div>
+                                            <div class="u-line-height-1-5">
+                                                <div class="body-text-2">
+                                                    {user.email ? user.email : user.phone}
+                                                </div>
+                                                <div class="u-x-small">{user.$id}</div>
+                                            </div>
+                                        {/if}
+                                    {:else}
+                                        <div class="avatar is-size-small ">
+                                            <span class="icon-anonymous" aria-hidden="true" />
+                                        </div>
                                         <div class="u-line-height-1-5">
-                                            <div class="body-text-2">{user.name}</div>
+                                            <div class="body-text-2">
+                                                {user.name ? user.name : '-'}
+                                            </div>
                                             <div class="u-x-small">{user.$id}</div>
                                         </div>
-                                    </label>
-                                </td>
-                            </tr>
-                        {/each}
-                    </tbody>
-                </table>
-            </div>
-        {/if}
+                                    {/if}
+                                </label>
+                            </td>
+                        </tr>
+                    {/each}
+                </tbody>
+            </table>
+        </div>
         <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 />
+            <PaginationInline limit={5} bind:offset sum={results?.total} hidePages />
         </div>
-        <svelte:fragment slot="footer">
-            <Button submit disabled={!hasSelection}>Create</Button>
-        </svelte:fragment>
-    </Modal>
-</Form>
+    {:else if search}
+        <EmptySearch hidePages>
+            <div class="common-section">
+                <div class="u-text-center common-section">
+                    <b class="body-text-2">Sorry we couldn't find "{search}"</b>
+                    <p>There are no Users that match your search.</p>
+                </div>
+                <div class="u-flex u-gap-16 common-section u-main-center">
+                    <Button external href="https://appwrite.io/docs/server/users" text
+                        >Documentation</Button>
+                    <Button secondary on:click={() => (search = '')}>Clear search</Button>
+                </div>
+            </div>
+        </EmptySearch>
+    {:else}
+        <EmptySearch hidePages>
+            <div class="common-section">
+                <div class="u-text-center common-section">
+                    <p class="text u-line-height-1-5">
+                        You have no users. Create a user to see them here.
+                    </p>
+                    <p class="text u-line-height-1-5">
+                        Need a hand? Check out our <a
+                            href="https://appwrite.io/docs/server/users"
+                            target="_blank"
+                            rel="noopener noreferrer">
+                            documentation</a
+                        >.
+                    </p>
+                </div>
+            </div>
+        </EmptySearch>
+    {/if}
+
+    <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 000000000..c12bf4f38
--- /dev/null
+++ b/src/lib/components/searchQuery.svelte
@@ -0,0 +1,73 @@
+<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);
+            if (url.search === value) {
+                return;
+            }
+            /**
+             * Reset to first page if search changes.
+             */
+            if ($page.data.page > 1) {
+                url.pathname = url.pathname.replace(new RegExp(`/${$page.data.page}*$`), '/');
+            }
+
+            url.search = value;
+
+            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 08fad97b4..54dafb875 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -1,23 +1,62 @@
-export const scopes = [
+export const PAGE_LIMIT = 12; // default page limit
+export const CARD_LIMIT = 6; // default card limit
+export enum Dependencies {
+    ORGANIZATION = 'dependency:organization',
+    PROJECT = 'dependency:project',
+    PROJECTS = 'dependency:projects',
+    ACCOUNT = 'dependency:account',
+    ACCOUNT_SESSIONS = 'dependency:account_sessions',
+    USER = 'dependency:user',
+    USERS = 'dependency:users',
+    SESSIONS = 'dependency:sessions',
+    TEAM = 'dependency:team',
+    TEAMS = 'dependency:teams',
+    MEMBERSHIPS = 'dependency:memberships',
+    DATABASE = 'dependency:database',
+    COLLECTION = 'dependency:collection',
+    DOCUMENT = 'dependency:document',
+    DOCUMENTS = 'dependency:documents',
+    BUCKET = 'dependency:bucket',
+    FILE = 'dependency:file',
+    FILES = 'dependency:files',
+    FUNCTION = 'dependency:function',
+    FUNCTIONS = 'dependency:functions',
+    VARIABLES = 'dependency:variables',
+    DEPLOYMENTS = 'dependency:deployments',
+    EXECUTIONS = 'dependency:executions',
+    PLATFORM = 'dependency:platform',
+    PLATFORMS = 'dependency:platforms',
+    KEY = 'dependency:key',
+    KEYS = 'dependency:keys',
+    DOMAINS = 'dependency:domains',
+    WEBHOOK = 'dependency:webhook',
+    WEBHOOKS = 'dependency:webhooks'
+}
+
+export const scopes: {
+    scope: string;
+    description: string;
+    category: string;
+}[] = [
     {
         scope: 'users.read',
         description: "Access to read your project's users",
-        category: 'Authentication'
+        category: 'Auth'
     },
     {
         scope: 'users.write',
         description: "Access to create, update, and delete your project's users",
-        category: 'Authentication'
+        category: 'Auth'
     },
     {
         scope: 'teams.read',
         description: "Access to read your project's teams",
-        category: 'Authentication'
+        category: 'Auth'
     },
     {
         scope: 'teams.write',
         description: "Access to create, update, and delete your project's teams",
-        category: 'Authentication'
+        category: 'Auth'
     },
     {
         scope: 'databases.read',
diff --git a/src/lib/elements/forms/button.svelte b/src/lib/elements/forms/button.svelte
index 66d417a30..f2279fa4e 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/inputCron.svelte b/src/lib/elements/forms/inputCron.svelte
index b7a2e7c1d..d11e07c0b 100644
--- a/src/lib/elements/forms/inputCron.svelte
+++ b/src/lib/elements/forms/inputCron.svelte
@@ -18,6 +18,8 @@
     let element: HTMLInputElement;
     let error: string;
 
+    const pattern = String.raw`^[^]+\s+[^]+\s+[^]+\s+[^]+\s+[^]`;
+
     onMount(() => {
         if (element && autofocus) {
             element.focus();
@@ -57,6 +59,7 @@
             {maxlength}
             {readonly}
             {step}
+            {pattern}
             type="text"
             class="input-text"
             bind:value
diff --git a/src/lib/elements/forms/inputDateTime.svelte b/src/lib/elements/forms/inputDateTime.svelte
index 3869f498b..b15eac42d 100644
--- a/src/lib/elements/forms/inputDateTime.svelte
+++ b/src/lib/elements/forms/inputDateTime.svelte
@@ -21,7 +21,7 @@
         }
     });
 
-    const handleInvalid = (event: Event) => {
+    function handleInvalid(event: Event) {
         event.preventDefault();
 
         if (element.validity.valueMissing) {
@@ -30,7 +30,7 @@
         }
 
         error = element.validationMessage;
-    };
+    }
 
     $: if (value) {
         error = null;
@@ -45,6 +45,7 @@
             {disabled}
             {readonly}
             {required}
+            step=".001"
             autocomplete={autocomplete ? 'on' : 'off'}
             type="datetime-local"
             class="input-text"
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index 3f4e13f78..c94751329 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/elements/forms/inputTags.svelte b/src/lib/elements/forms/inputTags.svelte
index 89edfc59e..93d31f8ac 100644
--- a/src/lib/elements/forms/inputTags.svelte
+++ b/src/lib/elements/forms/inputTags.svelte
@@ -90,7 +90,7 @@
             </div>
             <input
                 {id}
-                placeholder={!tags.length ? placeholder : ''}
+                {placeholder}
                 {disabled}
                 {readonly}
                 type="text"
diff --git a/src/lib/elements/table/rowButton.svelte b/src/lib/elements/table/rowButton.svelte
index f7b75a96a..63617b5aa 100644
--- a/src/lib/elements/table/rowButton.svelte
+++ b/src/lib/elements/table/rowButton.svelte
@@ -2,6 +2,12 @@
     import { clickOnEnter } from '$lib/helpers/a11y';
 </script>
 
-<div class="table-row" role="row" on:keyup={clickOnEnter} on:click|preventDefault>
+<!-- svelte-ignore a11y-unknown-role -->
+<tr
+    class="table-row"
+    role="row button"
+    tabindex="0"
+    on:keyup={clickOnEnter}
+    on:click|preventDefault>
     <slot />
-</div>
+</tr>
diff --git a/src/lib/helpers/array.ts b/src/lib/helpers/array.ts
index 602c886ad..cd7a923fb 100644
--- a/src/lib/helpers/array.ts
+++ b/src/lib/helpers/array.ts
@@ -8,3 +8,7 @@ export function difference(arr1: unknown[], arr2: unknown[]) {
     const intersection = new Set(arr1.filter((elem) => !set.has(elem)));
     return Array.from(intersection);
 }
+
+export function symmetricDifference(arr1: unknown[], arr2: unknown[]) {
+    return difference(arr1, arr2).concat(difference(arr2, arr1));
+}
diff --git a/src/lib/helpers/load.ts b/src/lib/helpers/load.ts
new file mode 100644
index 000000000..dc7b0c9e7
--- /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/helpers/sizeConvertion.ts b/src/lib/helpers/sizeConvertion.ts
index 989cf91b2..f5786b1eb 100644
--- a/src/lib/helpers/sizeConvertion.ts
+++ b/src/lib/helpers/sizeConvertion.ts
@@ -1,3 +1,5 @@
+import prettyBytes from 'pretty-bytes';
+
 const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
 
 export function calculateSize(bytes: number, decimals = 1) {
@@ -20,55 +22,16 @@ export function bytesToSize(value: number, unit: string) {
     return value / Math.pow(1024, index);
 }
 
-export function humanFileSize(value: number): {
+export function humanFileSize(bytes: number): {
     value: string;
     unit: string;
 } {
-    if (!value) return { value: 'No', unit: 'Bytes' };
-    const length = value.toString().length;
-    const unit =
-        length < 7
-            ? 'kilobyte'
-            : length < 11
-            ? 'megabyte'
-            : length < 15
-            ? 'gigabyte'
-            : length < 19
-            ? 'terabyte'
-            : 'petabyte';
-
-    const formatter = Intl.NumberFormat('en', {
-        style: 'unit',
-        maximumSignificantDigits: 3,
-        maximumFractionDigits: 2,
-        unit
-    });
-
-    while (value > 1000) {
-        value /= 1000;
-    }
-
-    const parts: {
-        integer: string;
-        unit: string;
-        fraction?: string;
-        decimal?: string;
-    } = formatter.formatToParts(value).reduce(
-        (prev, curr) => {
-            prev[curr.type] = curr.value;
-
-            return prev;
-        },
-        {
-            integer: '',
-            unit: '',
-            decimal: '',
-            fraction: ''
-        }
-    );
+    const value = prettyBytes(bytes, {
+        locale: 'en'
+    }).split(' ');
 
     return {
-        value: `${parts.integer}${parts.decimal}${parts.fraction}`,
-        unit: parts.unit
+        value: value[0],
+        unit: value[1]
     };
 }
diff --git a/src/routes/console/account/activity/+page.svelte b/src/lib/layout/activity.svelte
similarity index 63%
rename from src/routes/console/account/activity/+page.svelte
rename to src/lib/layout/activity.svelte
index c3ae5f00d..a74108a63 100644
--- a/src/routes/console/account/activity/+page.svelte
+++ b/src/lib/layout/activity.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-    import { Empty, Pagination } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
+    import { EmptySearch, Pagination, Trim } from '$lib/components';
     import {
         Table,
         TableBody,
@@ -13,19 +12,12 @@
     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 { PAGE_LIMIT } from '$lib/constants';
+    import type { Models } from '@aw-labs/appwrite-console';
 
-    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 logs: Models.LogList;
+    export let path: string;
+    export let offset = 0;
 
     const getBrowser = (clientCode: string) => {
         return sdkForConsole.avatars.getBrowser(clientCode, 40, 40);
@@ -33,21 +25,18 @@
 </script>
 
 <Container>
-    {#if $accountActivity?.total}
+    {#if logs.total}
         <Table>
             <TableHeader>
-                <TableCellHead>Date</TableCellHead>
-                <TableCellHead>Event</TableCellHead>
                 <TableCellHead>Client</TableCellHead>
+                <TableCellHead>Event</TableCellHead>
                 <TableCellHead>Location</TableCellHead>
                 <TableCellHead>IP</TableCellHead>
+                <TableCellHead>Date</TableCellHead>
             </TableHeader>
             <TableBody>
-                {#each $accountActivity.logs as log}
+                {#each logs.logs as log}
                     <TableRow>
-                        <TableCellText title="Date">{toLocaleDateTime(log.time)}</TableCellText>
-                        <TableCellText title="Event">{log.event}</TableCellText>
-
                         <TableCell title="Client">
                             {#if log.clientName}
                                 <div class="u-flex u-cross-center u-gap-12">
@@ -58,14 +47,12 @@
                                             src={getBrowser(log.clientCode).toString()}
                                             alt={log.clientName} />
                                     </div>
-                                    <p
-                                        class="text u-trim"
-                                        title={`${log.clientName} ${log.clientVersion} on ${log.osName} ${log.osVersion}`}>
+                                    <Trim>
                                         {log.clientName}
                                         {log.clientVersion}
                                         on {log.osName}
                                         {log.osVersion}
-                                    </p>
+                                    </Trim>
                                 </div>
                             {:else}
                                 <div class="u-flex u-cross-center u-gap-12">
@@ -74,6 +61,7 @@
                                 </div>
                             {/if}
                         </TableCell>
+                        <TableCellText title="Event">{log.event}</TableCellText>
 
                         <TableCellText title="Location">
                             {#if log.countryCode !== '--'}
@@ -83,28 +71,25 @@
                             {/if}
                         </TableCellText>
                         <TableCellText title="IP">{log.ip}</TableCellText>
+                        <TableCellText title="Date">{toLocaleDateTime(log.time)}</TableCellText>
                     </TableRow>
                 {/each}
             </TableBody>
         </Table>
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <p class="text">Total results: {logs.total}</p>
+            <Pagination limit={PAGE_LIMIT} {path} {offset} sum={logs.total} />
+        </div>
     {:else}
-        <Empty>
+        <EmptySearch>
             <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/authentication?sdk=nodejs-default#usersGetLogs"
-                        >Documentation</Button>
+                <div class="u-text-center">
+                    <p class="text u-line-height-1-5">
+                        You have no activity. Once your users start interacting with your app you'll
+                        see their activity here.
+                    </p>
                 </div>
             </div>
-        </Empty>
+        </EmptySearch>
     {/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} />
-    </div>
 </Container>
diff --git a/src/lib/layout/breadcrumbs.svelte b/src/lib/layout/breadcrumbs.svelte
index b1845a831..63b6c801b 100644
--- a/src/lib/layout/breadcrumbs.svelte
+++ b/src/lib/layout/breadcrumbs.svelte
@@ -1,53 +1,24 @@
+<script lang="ts" context="module">
+    export type Breadcrumb = {
+        title: string;
+        href?: string;
+    };
+</script>
+
 <script lang="ts">
-    import { breadcrumbs as breadcrumbsStore, level, type Breadcrumb } from '$lib/stores/layout';
-
-    $: breadcrumbs = [...$breadcrumbsStore]
-        .map(([level, value]) => ({ level, value }))
-        .sort((a, b) => (a.level > b.level ? 1 : -1))
-        .filter((n) => n.level <= $level);
-
-    function truncate(
-        breadcrumbs: {
-            value: Breadcrumb;
-        }[]
-    ) {
-        /**
-         *  Maximum of 4 Breadcrumbs, truncated from the left.
-         */
-        if ($level > 4) {
-            breadcrumbs = [
-                {
-                    value: {
-                        href: null,
-                        title: '...'
-                    }
-                },
-                ...breadcrumbs.slice(-3)
-            ];
-        }
-
-        return breadcrumbs;
-    }
-
-    function buildHref(index: number) {
-        return breadcrumbs
-            .slice(0, index + 1)
-            .reduce((prev, next) => `${prev}/${next.value.href}`, '');
-    }
+    export let breadcrumbs: Breadcrumb[];
 </script>
 
 <nav class="breadcrumbs is-only-desktop" aria-label="breadcrumb">
     <ol class="breadcrumbs-list">
-        {#each truncate(breadcrumbs) as breadcrumb, i}
+        {#each breadcrumbs as breadcrumb}
             <li class="breadcrumbs-item">
-                {#if breadcrumb.value.href}
-                    <a
-                        href={buildHref(breadcrumbs.length > 4 ? i + breadcrumbs.length - 4 : i)}
-                        title={breadcrumb.value.title}>
-                        {breadcrumb.value.title}
+                {#if breadcrumb.href}
+                    <a href={breadcrumb.href} title={breadcrumb.title}>
+                        {breadcrumb.title}
                     </a>
                 {:else}
-                    <span>{breadcrumb.value.title}</span>
+                    <span>{breadcrumb.title}</span>
                 {/if}
             </li>
         {/each}
diff --git a/src/lib/layout/container.svelte b/src/lib/layout/container.svelte
index 53b395d12..fb9ec29dd 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 a4bd080fb..bc13b13d0 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 000000000..5995570e1
--- /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" trimmed={false}>
+    {#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 u-trim-1">
+        <slot />
+    </span>
+</Heading>
diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index c6b6481e8..81accafc2 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 { Breadcrumbs } from '.';
     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 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 { organizationList, organization, newOrgModal } from '$lib/stores/organization';
     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,7 +32,9 @@
     <img src={AppwriteLogo} width="132" height="34" alt="Appwrite" />
 </a>
 
-<Breadcrumbs />
+{#if $page.data.breadcrumbs}
+    <svelte:component this={$page.data.breadcrumbs} />
+{/if}
 
 <div class="main-header-end">
     <nav class="u-flex is-only-desktop">
@@ -53,7 +47,7 @@
             <span class="text">Support</span>
         </a>
     </nav>
-    <nav class="user-profile">
+    <nav class="u-flex u-height-100-percents u-sep-inline-start">
         {#if $user}
             <div class="drop-wrapper" class:is-open={showDropdown} bind:this={droplistElement}>
                 <button class="user-profile-button" on:click={() => (showDropdown = !showDropdown)}>
diff --git a/src/lib/layout/index.ts b/src/lib/layout/index.ts
index c2bef3379..71d340ea2 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';
@@ -12,3 +13,5 @@ export { default as WizardStep } from './wizardStep.svelte';
 export { default as Breadcrumbs } from './breadcrumbs.svelte';
 export { default as Unauthenticated } from './unauthenticated.svelte';
 export { default as Usage, type UsagePeriods } from './usage.svelte';
+export { default as Activity } from './activity.svelte';
+export { default as Progress } from './progress.svelte';
diff --git a/src/lib/layout/logs.svelte b/src/lib/layout/logs.svelte
index 70a71c273..6ec59687d 100644
--- a/src/lib/layout/logs.svelte
+++ b/src/lib/layout/logs.svelte
@@ -2,7 +2,7 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
     import { log } from '$lib/stores/logs';
-    import { Status, Tab, Tabs } from '../components';
+    import { Output, Status, Tab, Tabs } from '../components';
     import { Button } from '$lib/elements/forms';
     import { base } from '$app/paths';
     import { app } from '$lib/stores/app';
@@ -35,8 +35,17 @@
             .getElementsByClassName('code-panel-content')[0]
             .scrollTo({ top: 0, left: 0, behavior: 'smooth' });
     }
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            $log.show = false;
+        }
+    }
 </script>
 
+<svelte:window on:keydown={handleKeydown} />
+
 {#if $log.data}
     <section class="cover-frame">
         <header class="cover-frame-header u-flex u-gap-16 u-main-space-between u-cross-center">
@@ -59,7 +68,12 @@
                             alt="technology" />
                     </div>
                     <div>
-                        <h2 class="body-text-2">Deployment ID: {$log.data.$id}</h2>
+                        <div class="u-flex u-gap-12 u-cross-center">
+                            <h2 class="body-text-2">Deployment ID:</h2>
+                            <Output value={$log.data.$id}>
+                                {$log.data.$id}
+                            </Output>
+                        </div>
                         <time class="u-block"
                             >Created at: {toLocaleDateTime($log.data.$createdAt)}</time>
                         <div>Size: {size.value} {size.unit}</div>
@@ -122,7 +136,12 @@
                             alt="technology" />
                     </div>
                     <div>
-                        <h2 class="body-text-2">Execution ID: {$log.data.$id}</h2>
+                        <div class="u-flex u-gap-12 u-cross-center">
+                            <h2 class="body-text-2">Execution ID:</h2>
+                            <Output value={$log.data.$id}>
+                                {$log.data.$id}
+                            </Output>
+                        </div>
                         <time class="u-block">
                             Created at: {toLocaleDateTime($log.data.$createdAt)}</time>
                     </div>
diff --git a/src/lib/layout/navigation.svelte b/src/lib/layout/navigation.svelte
index 056017792..ccb13b282 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,11 +22,24 @@
                         <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>
                     </li>
+                    <li class="drop-list-item">
+                        <a
+                            class="drop-button"
+                            class:is-selected={$page.url.pathname.startsWith(`${path}/auth`)}
+                            href={`${path}/auth`}>
+                            <span class="icon-user-group" aria-hidden="true" />
+                            <span class="text">Auth</span>
+                        </a>
+                    </li>
                     <li class="drop-list-item">
                         <a
                             class="drop-button"
@@ -29,26 +49,6 @@
                             <span class="text">Databases</span>
                         </a>
                     </li>
-                    <li class="drop-list-item">
-                        <a
-                            class="drop-button"
-                            class:is-selected={$page.url.pathname.startsWith(`${path}/storage`)}
-                            href={`${path}/storage`}>
-                            <span class="icon-folder" aria-hidden="true" />
-                            <span class="text">Storage</span>
-                        </a>
-                    </li>
-                    <li class="drop-list-item">
-                        <a
-                            class="drop-button"
-                            class:is-selected={$page.url.pathname.startsWith(
-                                `${path}/authentication`
-                            )}
-                            href={`${path}/authentication`}>
-                            <span class="icon-user-group" aria-hidden="true" />
-                            <span class="text">Authentication</span>
-                        </a>
-                    </li>
                     <li class="drop-list-item">
                         <a
                             class="drop-button"
@@ -58,6 +58,15 @@
                             <span class="text">Functions</span>
                         </a>
                     </li>
+                    <li class="drop-list-item">
+                        <a
+                            class="drop-button"
+                            class:is-selected={$page.url.pathname.startsWith(`${path}/storage`)}
+                            href={`${path}/storage`}>
+                            <span class="icon-folder" aria-hidden="true" />
+                            <span class="text">Storage</span>
+                        </a>
+                    </li>
                 </ul>
             </section>
         </div>
diff --git a/src/lib/layout/progress.svelte b/src/lib/layout/progress.svelte
new file mode 100644
index 000000000..c573706bd
--- /dev/null
+++ b/src/lib/layout/progress.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+    import { navigating } from '$app/stores';
+
+    let width: number;
+    let updater: ReturnType<typeof setTimeout>;
+    let completed = false;
+
+    const minimum = 0.08;
+    const maximum = 0.994;
+    const settleTime = 700;
+    const intervalTime = 800;
+    const stepSizes = [0, 0.005, 0.01, 0.02];
+
+    function animate(): void {
+        if (updater) {
+            clearInterval(updater);
+        }
+        updater = setInterval(() => {
+            const randomStep = stepSizes[Math.floor(Math.random() * stepSizes.length)];
+            const step = getIncrement(width) + randomStep;
+            if (width < maximum) {
+                width = width + step;
+            }
+            if (width > maximum) {
+                width = maximum;
+                stop();
+            }
+        }, intervalTime);
+    }
+
+    function start(): void {
+        width = minimum;
+        animate();
+    }
+
+    function complete(): void {
+        clearInterval(updater);
+        width = 1;
+        setTimeout(() => {
+            completed = true;
+            setTimeout(() => {
+                completed = false;
+                width = 0;
+            }, settleTime);
+        }, settleTime);
+    }
+
+    function getIncrement(number: number): number {
+        if (number >= 0 && number < 0.2) return 0.1;
+        else if (number >= 0.2 && number < 0.5) return 0.04;
+        else if (number >= 0.5 && number < 0.8) return 0.02;
+        else if (number >= 0.8 && number < 0.99) return 0.005;
+        return 0;
+    }
+
+    $: if ($navigating) {
+        start();
+    } else {
+        complete();
+    }
+
+    $: barStyle = (width && width * 100 && `width: ${width * 100}%;`) || '';
+</script>
+
+{#if width}
+    <div class="progress-bar" class:progress-bar-hiding={completed} style={barStyle} />
+{/if}
+
+<style>
+    .progress-bar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 2px;
+        transition: width 0.2s ease-in-out;
+        z-index: 5;
+        background: hsl(var(--color-primary-200));
+    }
+
+    .progress-bar-hiding {
+        transition: top 0.8s ease;
+        top: -8px;
+    }
+</style>
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index d57c4c663..1855cd210 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -1,57 +1,19 @@
 <script lang="ts">
     import { navigating, page } from '$app/stores';
-    import { tabs, title, backButton, copyData, titleDropdown } from '$lib/stores/layout';
-    import { Cover } from '.';
-    import {
-        Copy,
-        DropList,
-        DropListItem,
-        DropListLink,
-        AvatarGroup,
-        Tabs,
-        Tab,
-        Heading
-    } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { Button } from '$lib/elements/forms';
-    import {
-        organization,
-        memberList,
-        newOrgModal,
-        newMemberModal
-    } from '$lib/stores/organization';
-    import { base } from '$app/paths';
-    import { user } from '$lib/stores/user';
-    import { goto } from '$app/navigation';
     import { browser } from '$app/environment';
     import { wizard } from '$lib/stores/wizard';
     import { log } from '$lib/stores/logs';
+    import { beforeNavigate } from '$app/navigation';
 
     export let isOpen = false;
     export let showSideNavigation = false;
 
     let y: number;
-    let showDropdown = false;
 
     navigating.subscribe(() => {
         if (isOpen) isOpen = false;
     });
 
-    let avatars = [];
-    let avatarsTotal = 0;
-
-    memberList.subscribe((value) => {
-        if (value?.total > 0) {
-            avatarsTotal = value.total;
-            avatars = value.memberships.map((team) => team.userName);
-        }
-    });
-
-    const logout = async () => {
-        await user.logout();
-        await goto(`${base}/login`);
-    };
-
     const toggleMenu = () => {
         y = 0;
         isOpen = !isOpen;
@@ -63,6 +25,16 @@
             }
         }
     };
+
+    beforeNavigate((n) => {
+        /**
+         * Hide wizard when navigation is triggered by popstate.
+         */
+        if (n.type === 'popstate' && $wizard.show) {
+            wizard.hide();
+            n.cancel();
+        }
+    });
 </script>
 
 <svelte:window bind:scrollY={y} />
@@ -86,89 +58,10 @@
         <slot name="side" />
     </nav>
     <section class="main-content">
-        <Cover>
-            <svelte:fragment slot="header">
-                {#if $backButton}
-                    <a class="back-button" href={$backButton} aria-label="page back">
-                        <span class="icon-cheveron-left" aria-hidden="true" />
-                    </a>
-                {/if}
-                {#if $titleDropdown?.length && $organization}
-                    <DropList bind:show={showDropdown} scrollable={true} noArrow>
-                        <button
-                            class="button is-text u-padding-inline-0"
-                            on:click={() => (showDropdown = !showDropdown)}>
-                            <Heading tag="h1" size="4">
-                                <span class="text"> {$organization.name}</span>
+        {#if $page.data?.header}
+            <svelte:component this={$page.data.header} />
+        {/if}
 
-                                <span
-                                    class={`icon-cheveron-${showDropdown ? 'up' : 'down'}`}
-                                    aria-hidden="true" />
-                            </Heading>
-                        </button>
-                        <svelte:fragment slot="list">
-                            {#each $titleDropdown as org}
-                                <DropListLink
-                                    href={`${base}/console/organization-${org.$id}`}
-                                    on:click={() => {
-                                        showDropdown = false;
-                                    }}>
-                                    {org.name}
-                                </DropListLink>
-                            {/each}
-                        </svelte:fragment>
-                        <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>
-                                </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} />
-                            <Button secondary on:click={() => newMemberModal.set(true)}>
-                                <span class="icon-plus" aria-hidden="true" />
-                                <span class="text">Invite</span>
-                            </Button>
-                        </div>
-                    </div>
-                {:else}
-                    <Heading tag="h1" size="4">
-                        <span class="text">{$title ? $title : '-'}</span>
-                    </Heading>
-                {/if}
-                {#if $page.url.pathname.includes('/console/account')}
-                    <div class="u-margin-inline-start-auto">
-                        <Button secondary on:click={logout}>Logout</Button>
-                    </div>
-                {/if}
-
-                {#if $copyData?.value}
-                    <Copy value={$copyData.value}>
-                        <Pill button>
-                            <span class="icon-duplicate" aria-hidden="true" />
-                            {$copyData.text}
-                        </Pill>
-                    </Copy>
-                {/if}
-            </svelte:fragment>
-
-            {#if $tabs.length}
-                <Tabs>
-                    {#each $tabs as tab}
-                        <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
-                            {tab.title}
-                        </Tab>
-                    {/each}
-                </Tabs>
-            {/if}
-        </Cover>
         <slot />
     </section>
 </main>
diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index be86d9b83..62d9e923b 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -82,7 +82,7 @@
 
             <div class="u-margin-block-start-auto" />
             <p class="u-max-width-500 u-width-full-line u-margin-block-start-24">
-                version 0.15.2.402
+                <!-- version 0.15.2.402 -->
             </p>
             <div class="u-margin-block-start-20" />
         </div>
diff --git a/src/lib/layout/usage.svelte b/src/lib/layout/usage.svelte
index 4ea566df1..5c4dd8125 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,24 @@
     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'}>
+            <DropTabsLink href={`${path}/24h`} disabled={$page.params.period === '24h'}>
                 24h
-            </DropTabsItem>
-            <DropTabsItem on:click={() => (range = '30d')} disabled={range === '30d'}>
+            </DropTabsLink>
+            <DropTabsLink
+                href={`${path}/30d`}
+                disabled={!$page.params.period || $page.params.period === '30d'}>
                 30d
-            </DropTabsItem>
-            <DropTabsItem on:click={() => (range = '90d')} disabled={range === '90d'}>
+            </DropTabsLink>
+            <DropTabsLink href={`${path}/90d`} disabled={$page.params.period === '90d'}>
                 90d
-            </DropTabsItem>
+            </DropTabsLink>
         </DropTabs>
     </div>
     <Card>
@@ -57,13 +60,15 @@
             <Heading tag="h6" size="6">{last(count).value}</Heading>
             <p>{countMetadata.title}</p>
             <div class="u-margin-block-start-16" />
-            <BarChart
-                series={[
-                    {
-                        name: countMetadata.legend,
-                        data: [...count.map((e) => [e.date, e.value])]
-                    }
-                ]} />
+            <div style="height: 12rem;">
+                <BarChart
+                    series={[
+                        {
+                            name: countMetadata.legend,
+                            data: [...count.map((e) => [e.date, e.value])]
+                        }
+                    ]} />
+            </div>
         {/if}
     </Card>
     <Tiles>
@@ -72,14 +77,16 @@
                 <Heading tag="h6" size="6">{total(created)}</Heading>
                 <p>{createdMetadata.title}</p>
                 <div class="u-margin-block-start-16" />
-                <LineChart
-                    series={[
-                        {
-                            name: createdMetadata.legend,
-                            data: [...created.map((e) => [e.date, e.value])],
-                            color: Colors.Secondary
-                        }
-                    ]} />
+                <div style="height: 12rem;">
+                    <LineChart
+                        series={[
+                            {
+                                name: createdMetadata.legend,
+                                data: [...created.map((e) => [e.date, e.value])],
+                                color: Colors.Secondary
+                            }
+                        ]} />
+                </div>
             {/if}
         </Card>
         <Card isTile>
@@ -87,14 +94,16 @@
                 <Heading tag="h6" size="6">{total(read)}</Heading>
                 <p>{readMetadata.title}</p>
                 <div class="u-margin-block-start-16" />
-                <LineChart
-                    series={[
-                        {
-                            name: readMetadata.legend,
-                            data: [...read.map((e) => [e.date, e.value])],
-                            color: Colors.Tertiary
-                        }
-                    ]} />
+                <div style="height: 12rem;">
+                    <LineChart
+                        series={[
+                            {
+                                name: readMetadata.legend,
+                                data: [...read.map((e) => [e.date, e.value])],
+                                color: Colors.Tertiary
+                            }
+                        ]} />
+                </div>
             {/if}
         </Card>
         <Card isTile>
@@ -102,14 +111,16 @@
                 <Heading tag="h6" size="6">{total(updated)}</Heading>
                 <p>{updatedMetadata.title}</p>
                 <div class="u-margin-block-start-16" />
-                <LineChart
-                    series={[
-                        {
-                            name: updatedMetadata.legend,
-                            data: [...updated.map((e) => [e.date, e.value])],
-                            color: Colors.Quaternary
-                        }
-                    ]} />
+                <div style="height: 12rem;">
+                    <LineChart
+                        series={[
+                            {
+                                name: updatedMetadata.legend,
+                                data: [...updated.map((e) => [e.date, e.value])],
+                                color: Colors.Quaternary
+                            }
+                        ]} />
+                </div>
             {/if}
         </Card>
         <Card isTile>
@@ -117,14 +128,16 @@
                 <Heading tag="h6" size="6">{total(deleted)}</Heading>
                 <p>{deletedMetadata.title}</p>
                 <div class="u-margin-block-start-16" />
-                <LineChart
-                    series={[
-                        {
-                            name: deletedMetadata.legend,
-                            data: [...deleted.map((e) => [e.date, e.value])],
-                            color: Colors.Quinary
-                        }
-                    ]} />
+                <div style="height: 12rem;">
+                    <LineChart
+                        series={[
+                            {
+                                name: deletedMetadata.legend,
+                                data: [...deleted.map((e) => [e.date, e.value])],
+                                color: Colors.Quinary
+                            }
+                        ]} />
+                </div>
             {/if}
         </Card>
     </Tiles>
diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index 40b8e2f23..180f0ebcb 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -28,7 +28,8 @@
     let showExitModal = false;
 
     function handleKeydown(event: KeyboardEvent) {
-        if (event.key === 'Escape' && !showExitModal) {
+        const openDialog = document.querySelectorAll('dialog[open]');
+        if (event.key === 'Escape' && !showExitModal && !openDialog?.length) {
             event.preventDefault();
             dispatch('exit');
             wizard.hide();
@@ -102,7 +103,9 @@
             {currentStep} />
     </aside>
     <div class="wizard-media">
-        <slot name="media" />
+        {#if $wizard.media}
+            <img src={$wizard.media} alt="wizard media" loading="lazy" />
+        {/if}
     </div>
     <div class="wizard-main">
         <Form noStyle on:submit={submit}>
@@ -114,11 +117,12 @@
             <div class="form-footer">
                 <div class="u-flex u-main-end u-gap-12">
                     {#if !isLastStep && sortedSteps[currentStep - 1][1].optional}
-                        <Button text on:click={() => dispatch('finish')}
-                            >Skip optional steps</Button>
+                        <Button text on:click={() => dispatch('finish')}>
+                            Skip optional steps
+                        </Button>
                     {/if}
                     {#if currentStep === 1}
-                        <Button secondary on:click={wizard.hide}>Cancel</Button>
+                        <Button secondary on:click={handleExit}>Cancel</Button>
                         <Button submit>Next</Button>
                     {:else if isLastStep}
                         <Button secondary on:click={() => currentStep--}>Back</Button>
diff --git a/src/lib/layout/wizardExitModal.svelte b/src/lib/layout/wizardExitModal.svelte
index d9ab70bd7..8f29e59d9 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 e0fb297c1..ec7911834 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 86afc65f0..570da1741 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/layout.ts b/src/lib/stores/layout.ts
index 87cb2c946..44f46a608 100644
--- a/src/lib/stores/layout.ts
+++ b/src/lib/stores/layout.ts
@@ -1,7 +1,5 @@
-import { project } from '../../routes/console/project-[project]/store';
-import { get, writable, readable } from 'svelte/store';
-import type { Models } from '@aw-labs/appwrite-console';
-import type { Navigation } from '@sveltejs/kit';
+import { writable, readable } from 'svelte/store';
+import type { SvelteComponent } from 'svelte';
 
 export type Tab = {
     href: string;
@@ -11,68 +9,20 @@ export type Tab = {
 export type Breadcrumb = {
     href: string;
     title: string;
-    level?: number;
 };
 
 export type updateLayoutArguments = {
-    title: string;
-    titleDropdown?: Models.Team[];
-    level?: number;
-    tabs?: Tab[];
-    back?: string;
-    breadcrumbs?: Breadcrumb[] | Breadcrumb;
-    copy?: {
-        text: string;
-        value: string;
-    };
-    customBase?: string;
-    navigate?: Navigation;
+    header?: typeof SvelteComponent;
+    breadcrumb?: typeof SvelteComponent;
 };
 
-export const level = writable<number>();
-export const title = writable<string>('');
-export const titleDropdown = writable<Models.Team[]>([]);
-export const backButton = writable<string>('');
-export const tabs = writable<Tab[]>([]);
-export const breadcrumbs = writable<Map<number, Breadcrumb>>(new Map());
-export const copyData = writable({
-    text: '',
-    value: ''
-});
+export const header = writable<typeof SvelteComponent>();
+export const breadcrumb = writable<typeof SvelteComponent>();
 
 export function updateLayout(args: updateLayoutArguments) {
-    const projectId = get(project)?.$id;
-    const base = args?.customBase ?? projectId ? `/console/project-${projectId}` : ``;
-
-    if (args?.tabs) {
-        args.tabs.map((tab) => {
-            tab.href = `${base}/${tab.href}`;
-        });
-    }
-
-    if (args?.navigate?.to) {
-        const previousTabs = get(tabs);
-        if (previousTabs.some((t) => `${base}/${t.href}` === args.navigate.to.url.pathname)) {
-            return;
-        }
-    }
-
-    title.set(args.title);
-    titleDropdown.set(args.titleDropdown ?? []);
-    backButton.set(args.back ?? null);
-    copyData.set(args.copy ?? null);
-    level.set(args.level ?? null);
-    tabs.set(args.tabs ?? []);
-
-    if (args.breadcrumbs) {
-        if (!Array.isArray(args.breadcrumbs)) {
-            args.breadcrumbs = [args.breadcrumbs];
-        }
-        for (const breadcrumb of args.breadcrumbs) {
-            breadcrumbs.update((n) => n.set(breadcrumb.level ?? args.level, breadcrumb));
-        }
-    }
+    header.set(args.header ?? null);
+    breadcrumb.set(args.breadcrumb ?? null);
 }
 
 export const pageLimit = readable(12); // default page limit
-export const cardLimit = readable(6); // default page limit
+export const cardLimit = readable(6); // default card limit
diff --git a/src/lib/stores/oauth-providers.ts b/src/lib/stores/oauth-providers.ts
index 7b3f87d5f..997641024 100644
--- a/src/lib/stores/oauth-providers.ts
+++ b/src/lib/stores/oauth-providers.ts
@@ -1,18 +1,14 @@
 import { writable } from 'svelte/store';
 import type { Models } from '@aw-labs/appwrite-console';
 import type { SvelteComponent } from 'svelte';
-import Apple from '../../routes/console/project-[project]/authentication/_appleOAuth.svelte';
-import Microsoft from '../../routes/console/project-[project]/authentication/_microsoftOAuth.svelte';
-import Okta from '../../routes/console/project-[project]/authentication/_oktaOAuth.svelte';
-import Auth0 from '../../routes/console/project-[project]/authentication/_auth0OAuth.svelte';
-import Main from '../../routes/console/project-[project]/authentication/_mainOAuth.svelte';
+import Apple from '../../routes/console/project-[project]/auth/_appleOAuth.svelte';
+import Microsoft from '../../routes/console/project-[project]/auth/_microsoftOAuth.svelte';
+import Okta from '../../routes/console/project-[project]/auth/_oktaOAuth.svelte';
+import Auth0 from '../../routes/console/project-[project]/auth/_auth0OAuth.svelte';
+import Main from '../../routes/console/project-[project]/auth/_mainOAuth.svelte';
 
-export type Provider = {
-    name: string;
+export type Provider = Models.Provider & {
     icon: string;
-    active: boolean;
-    id: string | null;
-    secret: string | null;
     docs?: string;
     component?: typeof SvelteComponent;
 };
@@ -22,279 +18,122 @@ export type Providers = {
 };
 
 const setProviders = (project: Models.Project): Provider[] => {
-    return [
-        {
-            name: 'Amazon',
-            icon: 'amazon',
-            active: false,
-            id: project?.providerAmazonAppid,
-            secret: project?.providerAmazonSecret,
-            docs: 'https://developer.amazon.com/apps-and-games/services-and-apis',
-            component: Main
-        },
-        {
-            name: 'Apple',
-            icon: 'apple',
-            active: false,
-            id: project?.providerAppleAppid,
-            secret: project?.providerAppleSecret,
-            docs: 'https://developer.apple.com/',
-            component: Apple
-        },
-        {
-            name: 'Auth0',
-            icon: 'auth0',
-            active: false,
-            id: project?.providerAuth0Appid,
-            secret: project?.providerAuth0Secret,
-            docs: 'https://auth0.com/developers',
-            component: Auth0
-        },
-        {
-            name: 'Bitbucket',
-            icon: 'bitBucket',
-            active: false,
-            id: project?.providerBitbucketAppid,
-            secret: project?.providerBitbucketSecret,
-            docs: 'https://developer.atlassian.com/bitbucket',
-            component: Main
-        },
-        {
-            name: 'Bitly',
-            icon: 'bitly',
-            active: false,
-            id: project?.providerBitlyAppid,
-            secret: project?.providerBitlySecret,
-            docs: 'https://dev.bitly.com/v4_documentation.html',
-            component: Main
-        },
-        {
-            name: 'Box',
-            icon: 'box',
-            active: false,
-            id: project?.providerBoxAppid,
-            secret: project?.providerBoxSecret,
-            docs: 'https://developer.box.com/reference/',
-            component: Main
-        },
-        {
-            name: 'Discord',
-            icon: 'discord',
-            active: false,
-            id: project?.providerDiscordAppid,
-            secret: project?.providerDiscordSecret,
-            docs: 'https://discordapp.com/developers/docs/topics/oauth2',
-            component: Main
-        },
-        {
-            name: 'Dropbox',
-            icon: 'dropbox',
-            active: false,
-            id: project?.providerDropboxAppid,
-            secret: project?.providerDropboxSecret,
-            docs: 'https://www.dropbox.com/developers/documentation',
-            component: Main
-        },
-        {
-            name: 'Facebook',
-            icon: 'facebook',
-            active: false,
-            id: project?.providerFacebookAppid,
-            secret: project?.providerFacebookSecret,
-            docs: 'https://developers.facebook.com/',
-            component: Main
-        },
-        {
-            name: 'Github',
-            icon: 'github',
-            active: false,
-            id: project?.providerGithubAppid,
-            secret: project?.providerGithubSecret,
-            docs: 'https://developer.github.com/',
-            component: Main
-        },
-        {
-            name: 'Gitlab',
-            icon: 'gitlab',
-            active: false,
-            id: project?.providerGitlabAppid,
-            secret: project?.providerGitlabSecret,
-            docs: 'https://docs.gitlab.com/ee/api/',
-            component: Main
-        },
-        {
-            name: 'Google',
-            icon: 'google',
-            active: false,
-            id: project?.providerGoogleAppid,
-            secret: project?.providerGoogleSecret,
-            docs: 'https://support.google.com/googleapi/answer/6158849',
-            component: Main
-        },
-        {
-            name: 'Linkedin',
-            icon: 'linkedin',
-            active: false,
-            id: project?.providerLinkedinAppid,
-            secret: project?.providerLinkedinSecret,
-            docs: 'https://developer.linkedin.com/',
-            component: Main
-        },
-        {
-            name: 'Microsoft',
-            icon: 'microsoft',
-            active: false,
-            id: project?.providerMicrosoftAppid,
-            secret: project?.providerMicrosoftSecret,
-            docs: 'https://developer.microsoft.com/en-us/',
-            component: Microsoft
-        },
-        {
-            name: 'Notion',
-            icon: 'notion',
-            active: false,
-            id: project?.providerNotionAppid,
-            secret: project?.providerNotionSecret,
-            docs: 'https://developers.notion.com/docs',
-            component: Main
-        },
-        {
-            name: 'Okta',
-            icon: 'okta',
-            active: false,
-            id: project?.providerOktaAppid,
-            secret: project?.providerOktaSecret,
-            docs: 'https://developer.okta.com/',
-            component: Okta
-        },
-        {
-            name: 'Paypal',
-            icon: 'paypal',
-            active: false,
-            id: project?.providerPaypalAppid,
-            secret: project?.providerPaypalSecret,
-            docs: 'https://developer.paypal.com/docs/api/overview/',
-            component: Main
-        },
-        {
-            name: 'Paypal (sandbox)',
-            icon: 'paypal',
-            active: false,
-            id: project?.providerPaypalSandboxAppid,
-            secret: project?.providerPaypalSandboxSecret,
-            docs: 'https://developer.paypal.com/docs/api/overview/',
-            component: Main
-        },
-        {
-            name: 'Salesforce',
-            icon: 'salesforce',
-            active: false,
-            id: project?.providerSalesforceAppid,
-            secret: project?.providerSalesforceSecret,
-            docs: 'https://developer.salesforce.com/docs/',
-            component: Main
-        },
-        {
-            name: 'Slack',
-            icon: 'slack',
-            active: false,
-            id: project?.providerSlackAppid,
-            secret: project?.providerSlackSecret,
-            docs: 'https://api.slack.com/',
-            component: Main
-        },
-        {
-            name: 'Spotify',
-            icon: 'spotify',
-            active: false,
-            id: project?.providerSpotifyAppid,
-            secret: project?.providerSpotifySecret,
-            docs: 'https://developer.spotify.com/documentation/general/guides/authorization-guide/',
-            component: Main
-        },
-        {
-            name: 'Stripe',
-            icon: 'stripe',
-            active: false,
-            id: project?.providerStripeAppid,
-            secret: project?.providerStripeSecret,
-            docs: 'https://stripe.com/docs/api',
-            component: Main
-        },
-        {
-            name: 'Tradeshift',
-            icon: 'tradeshift',
-            active: false,
-            id: project?.providerTradeshiftAppid,
-            secret: project?.providerTradeshiftSecret,
-            docs: 'https://developers.tradeshift.com/docs/api',
-            component: Main
-        },
-        {
-            name: 'Tradeshift(sandbox)',
-            icon: 'tradeshift',
-            active: false,
-            id: project?.providerTradeshiftBoxAppid,
-            secret: project?.providerTradeshiftBoxSecret,
-            docs: 'https://developers.tradeshift.com/docs/api',
-            component: Main
-        },
-        {
-            name: 'Twitch',
-            icon: 'twitch',
-            active: false,
-            id: project?.providerTwitchAppid,
-            secret: project?.providerTwitchSecret,
-            docs: 'https://dev.twitch.tv/docs/authentication',
-            component: Main
-        },
+    return (
+        project?.providers.map((n) => {
+            let docs: Provider['docs'];
+            let icon: Provider['icon'] = n.name.toLowerCase();
+            let component: Provider['component'] = Main;
 
-        {
-            name: 'Wordpress',
-            icon: 'wordpress',
-            active: false,
-            id: project?.providerWordpressAppid,
-            secret: project?.providerWordpressSecret,
-            docs: 'https://developer.wordpress.com/docs/oauth2/',
-            component: Main
-        },
-        {
-            name: 'Yahoo',
-            icon: 'yahoo',
-            active: false,
-            id: project?.providerYahooAppid,
-            secret: project?.providerYahooSecret,
-            docs: 'https://developer.yahoo.com/oauth2/guide/flows_authcode/',
-            component: Main
-        },
-        {
-            name: 'Yammer',
-            icon: 'ms_yammer',
-            active: false,
-            id: project?.providerYammerAppid,
-            secret: project?.providerYammerSecret,
-            docs: 'https://developer.yammer.com/docs/oauth-2',
-            component: Main
-        },
-        {
-            name: 'Yandex',
-            icon: 'yandex',
-            active: false,
-            id: project?.providerYandexAppid,
-            secret: project?.providerYandexSecret,
-            docs: 'https://tech.yandex.com/oauth/',
-            component: Main
-        },
-        {
-            name: 'Zoom',
-            icon: 'zoom',
-            active: false,
-            id: project?.providerZoomAppid,
-            secret: project?.providerZoomSecret,
-            docs: 'https://marketplace.zoom.us/docs/guides/auth/oauth/',
-            component: Main
-        }
-    ];
+            switch (n.name.toLowerCase()) {
+                case 'amazon':
+                    docs = 'https://developer.amazon.com/apps-and-games/services-and-apis';
+                    break;
+                case 'apple':
+                    docs = 'https://developer.apple.com/';
+                    component = Apple;
+                    break;
+                case 'auth0':
+                    docs = 'https://auth0.com/developers';
+                    component = Auth0;
+                    break;
+                case 'bitbucket':
+                    docs = 'https://developer.atlassian.com/bitbucket';
+                    break;
+                case 'bitly':
+                    docs = 'https://dev.bitly.com/v4_documentation.html';
+                    break;
+                case 'box':
+                    docs = 'https://developer.box.com/reference/';
+                    break;
+                case 'discord':
+                    docs = 'https://discordapp.com/developers/docs/topics/oauth2';
+                    break;
+                case 'dropbox':
+                    docs = 'https://www.dropbox.com/developers/documentation';
+                    break;
+                case 'facebook':
+                    docs = 'https://developers.facebook.com/';
+                    break;
+                case 'github':
+                    docs = 'https://developer.github.com';
+                    break;
+                case 'gitlab':
+                    docs = 'https://docs.gitlab.com/ee/api/';
+                    break;
+                case 'google':
+                    docs = 'https://support.google.com/googleapi/answer/6158849';
+                    break;
+                case 'linkedin':
+                    docs = 'https://developer.linkedin.com/';
+                    break;
+                case 'microsoft':
+                    docs = 'https://developer.microsoft.com/en-us/';
+                    component = Microsoft;
+                    break;
+                case 'notion':
+                    docs = 'https://developers.notion.com/docs';
+                    break;
+                case 'okta':
+                    docs = 'https://developer.okta.com';
+                    component = Okta;
+                    break;
+                case 'paypal':
+                    docs = 'https://developer.paypal.com/docs/api/overview/';
+                    break;
+                case 'paypalsandbox':
+                    icon = 'paypal';
+                    docs = 'https://developer.paypal.com/docs/api/overview/';
+                    break;
+                case 'salesforce':
+                    docs = 'https://developer.salesforce.com/docs/';
+                    break;
+                case 'slack':
+                    docs = 'https://api.slack.com/';
+                    break;
+                case 'spotify':
+                    docs =
+                        'https://developer.spotify.com/documentation/general/guides/authorization-guide/';
+                    break;
+                case 'stripe':
+                    docs = 'https://stripe.com/docs/api';
+                    break;
+                case 'tradeshift':
+                    docs = 'https://developers.tradeshift.com/docs/api';
+                    break;
+                case 'tradeshiftbox':
+                    icon = 'tradeshift';
+                    docs = 'https://developers.tradeshift.com/docs/api';
+                    break;
+                case 'twitch':
+                    docs = 'https://dev.twitch.tv/docs/auth';
+                    break;
+                case 'wordpress':
+                    docs = 'https://developer.wordpress.com/docs/oauth2/';
+                    break;
+                case 'yahoo':
+                    docs = 'https://developer.yahoo.com/oauth2/guide/flows_authcode/';
+                    break;
+                case 'yammer':
+                    docs = 'https://developer.yammer.com/docs/oauth-2';
+                    break;
+                case 'yandex':
+                    docs = 'https://tech.yandex.com/oauth/';
+                    break;
+                case 'zoom':
+                    docs = 'https://marketplace.zoom.us/docs/guides/auth/oauth/';
+                    break;
+                default:
+                    break;
+            }
+
+            return {
+                ...n,
+                icon,
+                docs,
+                component
+            };
+        }) ?? []
+    );
 };
 
 function createOAuthProviders() {
diff --git a/src/lib/stores/organization.ts b/src/lib/stores/organization.ts
index 66cdabbae..0c780f1d8 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 b387a6d44..7167b5319 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 0e9f1ffa1..07b5c404b 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/lib/stores/wizard.ts b/src/lib/stores/wizard.ts
index 76602df78..c99d067ba 100644
--- a/src/lib/stores/wizard.ts
+++ b/src/lib/stores/wizard.ts
@@ -3,23 +3,27 @@ import { writable } from 'svelte/store';
 
 export type WizardStore = {
     show: boolean;
+    media?: string;
     component?: typeof SvelteComponent;
     interceptor?: () => Promise<void>;
 };
 
 function createWizardStore() {
-    const { subscribe, update } = writable<WizardStore>({
+    const { subscribe, update, set } = writable<WizardStore>({
         show: false,
         component: null,
-        interceptor: null
+        interceptor: null,
+        media: null
     });
 
     return {
         subscribe,
-        start: (component: typeof SvelteComponent) =>
+        set,
+        start: (component: typeof SvelteComponent, media: string = null) =>
             update((n) => {
                 n.show = true;
                 n.component = component;
+                n.media = media;
 
                 return n;
             }),
@@ -34,6 +38,7 @@ function createWizardStore() {
             update((n) => {
                 n.show = false;
                 n.component = null;
+                n.media = null;
 
                 return n;
             })
diff --git a/src/routes/+layout.js b/src/routes/+layout.js
deleted file mode 100644
index a481105bc..000000000
--- 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 f533f57c8..790b7efa1 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,25 +2,21 @@
     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';
     import { base } from '$app/paths';
     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 { Progress, Notifications } from '$lib/layout';
+    import { loading } from './store';
+    import Loading from './loading.svelte';
 
     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.
@@ -34,28 +30,25 @@
             onTTFB(reportWebVitals);
         }
 
-        try {
-            if (!$user) {
-                await user.fetchUser();
-            } else {
-                user.fetchUser();
-            }
-
+        /**
+         * Handle initial load.
+         */
+        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,12 +89,14 @@
 
 <Notifications />
 
-{#if loaded}
-    <slot />
-{:else}
+<slot />
+
+{#if $loading}
     <Loading />
 {/if}
 
+<Progress />
+
 <style lang="scss" global>
     .tippy-box {
         --p-tooltip-text-color: var(--color-neutral-10);
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
new file mode 100644
index 000000000..b568c0209
--- /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 8735e8027..81ad25d98 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 89254dd5c..0a74063a9 100644
--- a/src/routes/console/+layout.svelte
+++ b/src/routes/console/+layout.svelte
@@ -2,36 +2,18 @@
     import Shell from '$lib/layout/shell.svelte';
     import SideNavigation from '$lib/layout/navigation.svelte';
     import Header from '$lib/layout/header.svelte';
-    import { updateLayout } from '$lib/stores/layout';
-    import {
-        organization,
-        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';
 
-    updateLayout({
-        title: $organization?.name ?? '',
-        level: 0
-    });
-
-    onMount(async () => {
-        if ($page.url.pathname === '/console' && !$newOrgModal) {
-            await redirectTo();
-        }
-    });
-
-    afterNavigate(async () => {
-        if ($page.url.pathname === '/console' && !$newOrgModal) {
-            await redirectTo();
-        }
+    onMount(() => {
+        loading.set(false);
     });
 
     beforeNavigate(() => {
@@ -44,14 +26,11 @@
     }
 </script>
 
-<svelte:head>
-    <title>Console - Appwrite</title>
-</svelte:head>
-
 <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>
@@ -66,9 +45,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 e69de29bb..000000000
diff --git a/src/routes/console/+page.ts b/src/routes/console/+page.ts
new file mode 100644
index 000000000..d3738605b
--- /dev/null
+++ b/src/routes/console/+page.ts
@@ -0,0 +1,13 @@
+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) {
+        const teamId = localStorage.getItem('organization') ?? organizations.teams[0].$id;
+        throw redirect(303, `${base}/console/organization-${teamId}`);
+    } 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 8024dff5b..000000000
--- a/src/routes/console/_createOrganization.svelte
+++ /dev/null
@@ -1,70 +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 { titleDropdown } from '$lib/stores/layout';
-    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();
-            titleDropdown.set($organizationList.teams);
-            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 13a5195ae..af7ca922b 100644
--- a/src/routes/console/account/+layout.svelte
+++ b/src/routes/console/account/+layout.svelte
@@ -1,46 +1,3 @@
-<script lang="ts">
-    import { updateLayout } from '$lib/stores/layout';
-    import { user } from '$lib/stores/user';
-    import { afterNavigate } from '$app/navigation';
-    import { onMount } from 'svelte';
-
-    const path = 'console/account';
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle(event = null) {
-        updateLayout({
-            navigate: event,
-            title: $user?.name,
-            level: 0,
-            customBase: '',
-            breadcrumbs: {
-                title: `${$user.name}`,
-                href: path
-            },
-            tabs: [
-                {
-                    href: path,
-                    title: 'Overview'
-                },
-                {
-                    href: `${path}/sessions`,
-                    title: 'Sessions'
-                },
-                {
-                    href: `${path}/activity`,
-                    title: 'Activity'
-                },
-                {
-                    href: `${path}/organizations`,
-                    title: 'Organizations'
-                }
-            ]
-        });
-    }
-</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 000000000..cd42223bd
--- /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,
+        breadcrumbs: Breadcrumbs
+    };
+};
diff --git a/src/routes/console/account/+page.svelte b/src/routes/console/account/+page.svelte
index 6a580fa46..461c6f968 100644
--- a/src/routes/console/account/+page.svelte
+++ b/src/routes/console/account/+page.svelte
@@ -6,9 +6,10 @@
     import { user } from '$lib/stores/user';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
-    import { title, breadcrumbs } from '$lib/stores/layout';
     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,
@@ -25,11 +26,7 @@
     async function updateName() {
         try {
             await sdkForConsole.account.updateName(name);
-            $user.name = name;
-            title.set(name);
-            const breadcrumb = $breadcrumbs.get(0);
-            breadcrumb.title = name;
-            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size, breadcrumb);
+            invalidate(Dependencies.ACCOUNT);
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
@@ -44,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'
@@ -158,7 +155,7 @@
             </svelte:fragment>
         </CardGrid>
     </Form>
-    <CardGrid>
+    <CardGrid danger>
         <div>
             <Heading tag="h6" size="7">Delete Account</Heading>
         </div>
@@ -172,7 +169,7 @@
                     <AvatarInitials size={48} name={$user.name} />
                 </svelte:fragment>
                 <svelte:fragment slot="title">
-                    <h6 class="u-bold">{$user.name}</h6>
+                    <h6 class="u-bold u-trim-1">{$user.name}</h6>
                 </svelte:fragment>
             </Box>
         </svelte:fragment>
diff --git a/src/routes/console/account/activity/[[page]]/+page.svelte b/src/routes/console/account/activity/[[page]]/+page.svelte
new file mode 100644
index 000000000..c7f2c38da
--- /dev/null
+++ b/src/routes/console/account/activity/[[page]]/+page.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    import { Activity } from '$lib/layout';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
+    const path = '/console/account/activity';
+</script>
+
+<Activity {path} logs={data.logs} offset={data.offset} />
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 000000000..6ac71de8d
--- /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
new file mode 100644
index 000000000..5fb181330
--- /dev/null
+++ b/src/routes/console/account/breadcrumbs.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { user } from '$lib/stores/user';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/account`,
+            title: $user?.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
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 f64b36636..0e6a1e46e 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
new file mode 100644
index 000000000..94989eee7
--- /dev/null
+++ b/src/routes/console/account/header.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Tab, Tabs } from '$lib/components';
+    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`;
+
+    $: tabs = [
+        {
+            href: path,
+            title: 'Overview'
+        },
+        {
+            href: `${path}/sessions`,
+            title: 'Sessions'
+        },
+        {
+            href: `${path}/activity`,
+            title: 'Activity',
+            hasChildren: true
+        },
+        {
+            href: `${path}/organizations`,
+            title: 'Organizations',
+            hasChildren: true
+        }
+    ];
+
+    async function logout() {
+        await sdkForConsole.account.deleteSession('current');
+        await goto(`${base}/login`);
+    }
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <CoverTitle>
+            {$user.name}
+        </CoverTitle>
+        <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={isTabSelected(tab, $page.url.pathname, path, tabs)}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
diff --git a/src/routes/console/account/organizations/+page.svelte b/src/routes/console/account/organizations/[[page]]/+page.svelte
similarity index 66%
rename from src/routes/console/account/organizations/+page.svelte
rename to src/routes/console/account/organizations/[[page]]/+page.svelte
index 2dc314db2..678a222e5 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>
@@ -70,13 +66,17 @@
             </svelte:fragment>
         </CardContainer>
     {:else}
-        <Empty isButton single on:click={() => (addOrganization = true)}>
+        <Empty single on:click={() => (addOrganization = true)}>
             <p>Create a new organization</p>
         </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 000000000..7e1b84418
--- /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 83%
rename from src/routes/console/account/sessions/+page.svelte
rename to src/routes/console/account/sessions/[[page]]/+page.svelte
index cf10b0fac..a810362a8 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,10 +52,10 @@
                 <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">
+                            <div class="u-flex u-gap-12 u-cross-center">
                                 <div class="u-flex u-cross-center u-gap-12">
                                     {#if session.clientName}
                                         <div class="avatar is-small">
@@ -113,7 +108,7 @@
                     <Button
                         external
                         secondary
-                        href="https://appwrite.io/docs/server/authentication?sdk=nodejs-default#usersGetsessions">
+                        href="https://appwrite.io/docs/server/auth?sdk=nodejs-default#usersGetsessions">
                         Documentation
                     </Button>
                 </div>
@@ -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 000000000..ed1eaba0f
--- /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 42eafb6ba..000000000
--- 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 000000000..f1f632ffa
--- /dev/null
+++ b/src/routes/console/createOrganization.svelte
@@ -0,0 +1,65 @@
+<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;
+
+    let name: string;
+    let id: string;
+    let showCustomId = false;
+    let error: string;
+
+    const dispatch = createEventDispatcher();
+
+    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 000000000..3fad2e9ed
--- /dev/null
+++ b/src/routes/console/onboarding/+layout.svelte
@@ -0,0 +1,5 @@
+<svelte:head>
+    <title>Onboarding - Appwrite</title>
+</svelte:head>
+
+<slot />
diff --git a/src/routes/console/onboarding/+layout.ts b/src/routes/console/onboarding/+layout.ts
new file mode 100644
index 000000000..e0a2cb5e5
--- /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 000000000..bd2ee0a67
--- /dev/null
+++ b/src/routes/console/onboarding/+page.svelte
@@ -0,0 +1,70 @@
+<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,
+                'default'
+            );
+            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 000000000..51f7314c6
--- /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 90b2d6c63..ae86b8037 100644
--- a/src/routes/console/organization-[organization]/+layout.svelte
+++ b/src/routes/console/organization-[organization]/+layout.svelte
@@ -1,70 +1,14 @@
 <script lang="ts">
-    import { pageLimit, updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-    import { afterNavigate } from '$app/navigation';
-    import {
-        organizationList,
-        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';
-
-    $: organizationId = $page.params.organization;
-    $: path = `console/organization-${organizationId}`;
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle(event = null) {
-        const promises = Promise.all([
-            organization.load(organizationId),
-            memberList.load(organizationId, [Query.limit($pageLimit)])
-        ]);
-
-        if ($organization?.$id !== organizationId) {
-            await promises;
-        }
-
-        updateLayout({
-            navigate: event,
-            title: $organization?.name,
-            titleDropdown: $organizationList.teams,
-            level: 0,
-            customBase: '',
-            breadcrumbs: {
-                title: `${$organization.name}`,
-                href: path
-            },
-            tabs: [
-                {
-                    href: path,
-                    title: 'Projects'
-                },
-                {
-                    href: `${path}/members`,
-                    title: 'Members'
-                },
-                {
-                    href: `${path}/settings`,
-                    title: 'Settings'
-                }
-            ]
-        });
-    }
+    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 000000000..73e344c0c
--- /dev/null
+++ b/src/routes/console/organization-[organization]/+layout.ts
@@ -0,0 +1,22 @@
+import Header from './header.svelte';
+import Breadcrumbs from './breadcrumbs.svelte';
+import { sdkForConsole } from '$lib/stores/sdk';
+import type { LayoutLoad } from './$types';
+import { error } from '@sveltejs/kit';
+import { Dependencies } from '$lib/constants';
+
+export const load: LayoutLoad = async ({ params, parent, depends }) => {
+    await parent();
+    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 54%
rename from src/routes/console/organization-[organization]/+page.svelte
rename to src/routes/console/organization-[organization]/[[page]]/+page.svelte
index 2fb86f259..88617bea3 100644
--- a/src/routes/console/organization-[organization]/+page.svelte
+++ b/src/routes/console/organization-[organization]/[[page]]/+page.svelte
@@ -1,42 +1,19 @@
 <script lang="ts">
-    import { afterNavigate, 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 { 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}`);
-    };
 
     const getPlatformInfo = (platform: string) => {
         let name: string, icon: string;
@@ -62,8 +39,11 @@
         return { name, icon };
     };
 
-    // $: projectList.load('', limit, offset);
-    // $: projects = $projectList?.projects?.filter((a) => a.teamId === organizationId);
+    function filterPlatforms(platforms: { name: string; icon: string }[]) {
+        return platforms.filter(
+            (value, index, self) => index === self.findIndex((t) => t.name === value.name)
+        );
+    }
 </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
@@ -91,15 +71,14 @@
                         <svelte:fragment slot="title">
                             {project.name}
                         </svelte:fragment>
-                        {@const platformList = project.platforms.map((platform) => platform.type)}
-                        {@const platforms = Array.from(new Set(platformList))}
+                        {@const platforms = filterPlatforms(
+                            project.platforms.map((platform) => getPlatformInfo(platform.type))
+                        )}
                         {#each platforms as platform, i}
                             {#if i < 3}
                                 <Pill>
-                                    <span
-                                        class={`icon-${getPlatformInfo(platform).icon}`}
-                                        aria-hidden="true" />
-                                    {getPlatformInfo(platform).name}
+                                    <span class={`icon-${platform.icon}`} aria-hidden="true" />
+                                    {platform.name}
                                 </Pill>
                             {/if}
                         {/each}
@@ -116,16 +95,20 @@
             </svelte:fragment>
         </CardContainer>
     {:else}
-        <Empty isButton single on:click={() => (showCreate = true)}>
+        <Empty single on:click={() => (showCreate = true)}>
             <p>Create a new project</p>
         </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} />
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 000000000..c4a81164d
--- /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 b63888293..000000000
--- 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]/_createProject.svelte b/src/routes/console/organization-[organization]/_createProject.svelte
deleted file mode 100644
index 92160bd86..000000000
--- a/src/routes/console/organization-[organization]/_createProject.svelte
+++ /dev/null
@@ -1,58 +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';
-
-    export let show = false;
-    export let teamId: string;
-
-    const dispatch = createEventDispatcher();
-
-    let id: string;
-    let name: string;
-    let showCustomId = false;
-    let error: string;
-
-    const create = async () => {
-        try {
-            const project = await sdkForConsole.projects.create(id ?? 'unique()', name, teamId);
-            dispatch('created', project);
-            addNotification({
-                type: 'success',
-                message: `${name} has been created`
-            });
-            id = name = null;
-            showCustomId = false;
-            show = false;
-        } catch ({ message }) {
-            error = message;
-        }
-    };
-</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>
diff --git a/src/routes/console/organization-[organization]/_deleteOrganization.svelte b/src/routes/console/organization-[organization]/_deleteOrganization.svelte
deleted file mode 100644
index 8efe40619..000000000
--- 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]/breadcrumbs.svelte b/src/routes/console/organization-[organization]/breadcrumbs.svelte
new file mode 100644
index 000000000..62b3a6f20
--- /dev/null
+++ b/src/routes/console/organization-[organization]/breadcrumbs.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization.$id}`,
+            title: $organization.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/organization-[organization]/createMember.svelte b/src/routes/console/organization-[organization]/createMember.svelte
new file mode 100644
index 000000000..9bd58e34e
--- /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.ACCOUNT);
+            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
new file mode 100644
index 000000000..97afc677c
--- /dev/null
+++ b/src/routes/console/organization-[organization]/createProject.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    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';
+
+    export let show = false;
+    export let teamId: string;
+
+    const dispatch = createEventDispatcher();
+
+    let id: string;
+    let name: string;
+    let showCustomId = false;
+    let error: string;
+    let isCreating = false;
+
+    const create = async () => {
+        try {
+            isCreating = true;
+            const project = await sdkForConsole.projects.create(
+                id ?? 'unique()',
+                name,
+                teamId,
+                'default'
+            );
+            dispatch('created', project);
+            addNotification({
+                type: 'success',
+                message: `${name} has been created`
+            });
+            await goto(`/console/project-${project.$id}`);
+        } catch ({ message }) {
+            error = message;
+        } finally {
+            isCreating = false;
+        }
+    };
+</script>
+
+<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}
+            disabled={isCreating} />
+        {#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 disabled={isCreating}>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 59%
rename from src/routes/console/organization-[organization]/_deleteMember.svelte
rename to src/routes/console/organization-[organization]/deleteMember.svelte
index 8a7ba31f5..923eb947e 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');
@@ -37,22 +37,20 @@
         }
     };
 
-    $: isUser = selectedMember.userId === $user.$id;
+    $: 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 000000000..37a5adda4
--- /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
new file mode 100644
index 000000000..e946f15f6
--- /dev/null
+++ b/src/routes/console/organization-[organization]/header.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    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 {
+        members,
+        newMemberModal,
+        newOrgModal,
+        organization,
+        organizationList
+    } from '$lib/stores/organization';
+
+    let showDropdown = false;
+
+    $: avatars = $members.memberships?.map((m) => m.userName) ?? [];
+    $: organizationId = $page.params.organization;
+    $: path = `/console/organization-${organizationId}`;
+    $: tabs = [
+        {
+            href: path,
+            title: 'Projects',
+            hasChildren: true
+        },
+        {
+            href: `${path}/members`,
+            title: 'Members',
+            hasChildren: true
+        },
+        {
+            href: `${path}/settings`,
+            title: 'Settings'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <DropList bind:show={showDropdown} placement="bottom-start" noArrow scrollable>
+            <button
+                class="button is-text u-padding-inline-0"
+                on:click={() => (showDropdown = !showDropdown)}>
+                <h1 class="heading-level-4">
+                    <span class="text"> {$organization.name}</span>
+
+                    <span
+                        class={`icon-cheveron-${showDropdown ? 'up' : 'down'}`}
+                        aria-hidden="true" />
+                </h1>
+            </button>
+            <svelte:fragment slot="list">
+                {#each $organizationList.teams as org}
+                    <DropListLink href={`${base}/console/organization-${org.$id}`}>
+                        {org.name}
+                    </DropListLink>
+                {/each}
+            </svelte:fragment>
+            <svelte:fragment slot="other">
+                <section class="drop-section">
+                    <ul class="drop-list">
+                        <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={$members?.total ?? 0} />
+                <Button secondary on:click={() => newMemberModal.set(true)}>
+                    <span class="icon-plus" aria-hidden="true" />
+                    <span class="text">Invite</span>
+                </Button>
+            </div>
+        </div>
+    </svelte:fragment>
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
diff --git a/src/routes/console/organization-[organization]/members/+page.svelte b/src/routes/console/organization-[organization]/members/[[page]]/+page.svelte
similarity index 77%
rename from src/routes/console/organization-[organization]/members/+page.svelte
rename to src/routes/console/organization-[organization]/members/[[page]]/+page.svelte
index 02dd5826c..933317b29 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.ACCOUNT);
     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,12 +109,14 @@
             </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>
 
-{#if selectedMember}
-    <Delete {selectedMember} bind:showDelete on:deleted={() => deleted()} />
-{/if}
+<Delete {selectedMember} bind:showDelete on:deleted={() => deleted()} />
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 000000000..b827b1811
--- /dev/null
+++ b/src/routes/console/organization-[organization]/members/[[page]]/+page.ts
@@ -0,0 +1,19 @@
+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, parent }) => {
+    await parent();
+    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 8e236c804..d2fc50b8f 100644
--- a/src/routes/console/organization-[organization]/settings/+page.svelte
+++ b/src/routes/console/organization-[organization]/settings/+page.svelte
@@ -4,21 +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 { title, breadcrumbs } from '$lib/stores/layout';
-    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;
-            title.set(name);
-            const breadcrumb = $breadcrumbs.get(0);
-            breadcrumb.title = name;
-            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size, breadcrumb);
+            await invalidate(Dependencies.ORGANIZATION);
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
@@ -31,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>
@@ -69,7 +59,7 @@
             </CardGrid>
         </Form>
 
-        <CardGrid>
+        <CardGrid danger>
             <div>
                 <Heading tag="h6" size="7">Delete Organization</Heading>
             </div>
@@ -80,10 +70,10 @@
             <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>
+                        <h6 class="u-bold u-trim-1">{$organization.name}</h6>
                     </svelte:fragment>
                     <p>{$organization.total} projects</p>
                 </Box>
diff --git a/src/routes/console/project-[project]/+error.svelte b/src/routes/console/project-[project]/+error.svelte
new file mode 100644
index 000000000..eaba0eba1
--- /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 23b445c4e..004daed0f 100644
--- a/src/routes/console/project-[project]/+layout.svelte
+++ b/src/routes/console/project-[project]/+layout.svelte
@@ -1,92 +1,28 @@
 <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 { updateLayout } from '$lib/stores/layout';
-    import type { Models } from '@aw-labs/appwrite-console';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { onDestroy, onMount } from 'svelte';
+    import { stats } from './store';
 
-    type Attributes =
-        | Models.AttributeBoolean
-        | Models.AttributeEmail
-        | Models.AttributeEnum
-        | Models.AttributeFloat
-        | Models.AttributeInteger
-        | Models.AttributeIp
-        | Models.AttributeString
-        | Models.AttributeUrl;
+    let unsubscribe: { (): void };
 
-    $: projectId = $page.params.project;
-
-    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(event = null) {
-        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;
-            }
-        }
-
-        updateLayout({
-            navigate: event,
-            title: $project.name,
-            level: 1,
-            breadcrumbs: [
-                {
-                    href: 'console',
-                    title: $organization.name,
-                    level: 0
-                },
-                {
-                    href: `project-${$project.$id}`,
-                    title: $project.name
+    onMount(() => {
+        unsubscribe = sdkForConsole.client.subscribe(['project', 'console'], (response) => {
+            if (response.events.includes('stats.connections')) {
+                for (const [projectId, value] of Object.entries(response.payload)) {
+                    stats.add(projectId, [new Date(response.timestamp).toISOString(), value]);
                 }
-            ]
+            }
         });
-        loaded = true;
-    }
+    });
+
+    onDestroy(() => {
+        if (unsubscribe) {
+            unsubscribe();
+        }
+    });
 </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 000000000..37da86a17
--- /dev/null
+++ b/src/routes/console/project-[project]/+layout.ts
@@ -0,0 +1,25 @@
+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);
+        globalThis.localStorage.setItem('project', project.$id);
+        globalThis.localStorage.setItem('organization', project.teamId);
+
+        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]/auth/+layout.svelte b/src/routes/console/project-[project]/auth/+layout.svelte
new file mode 100644
index 000000000..f900d7734
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/+layout.svelte
@@ -0,0 +1,5 @@
+<svelte:head>
+    <title>Auth - Appwrite</title>
+</svelte:head>
+
+<slot />
diff --git a/src/routes/console/project-[project]/auth/+layout.ts b/src/routes/console/project-[project]/auth/+layout.ts
new file mode 100644
index 000000000..12cc3f795
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/+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]/auth/[[page]]/+page.svelte
similarity index 67%
rename from src/routes/console/project-[project]/authentication/+page.svelte
rename to src/routes/console/project-[project]/auth/[[page]]/+page.svelte
index a0c6142a9..23c408b91 100644
--- a/src/routes/console/project-[project]/authentication/+page.svelte
+++ b/src/routes/console/project-[project]/auth/[[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';
+
+    export let data: PageData;
 
     let showCreate = false;
-    let search = '';
-    const offset = createPersistentPagination($pageLimit);
-
-    const project = $page.params.project;
+    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}/auth/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, phone, 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}/auth/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,38 +121,27 @@
             </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}/auth`} />
         </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}/auth`} secondary>Clear Search</Button>
         </EmptySearch>
     {:else}
-        <Empty isButton single on:click={() => (showCreate = true)}>
-            <div
-                class="common-section"
-                use:event={{
-                    name: 'console_users',
-                    action: 'click_create',
-                    parameters: {
-                        type: 'user'
-                    }
-                }}>
-                <div class="u-text-center common-section">
-                    <p>Create your first User to get started.</p>
-                    <p>Need a hand? Check out our documentation.</p>
-                </div>
-                <div class="u-flex u-gap-16 common-section u-main-center">
-                    <Button external href="#/" text>Documentation</Button>
-                    <Button secondary>Create User</Button>
-                </div>
-            </div>
-        </Empty>
+        <Empty
+            single
+            href="https://appwrite.io/docs/server/users"
+            target="user"
+            on:click={() => (showCreate = true)} />
     {/if}
 </Container>
 
diff --git a/src/routes/console/project-[project]/auth/[[page]]/+page.ts b/src/routes/console/project-[project]/auth/[[page]]/+page.ts
new file mode 100644
index 000000000..132a73b2e
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/[[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]/auth/_appleOAuth.svelte b/src/routes/console/project-[project]/auth/_appleOAuth.svelte
new file mode 100644
index 000000000..aa176bfd8
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/_appleOAuth.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Modal, CopyInput, Alert } from '$lib/components';
+    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';
+    import { onMount } from 'svelte';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+
+    export let provider: Provider;
+
+    let appId: string = null;
+    let enabled: boolean = null;
+    let keyID: string = null;
+    let teamID: string = null;
+    let p8: string = null;
+
+    onMount(() => {
+        appId ??= provider.appId;
+        enabled ??= provider.enabled;
+        if (provider.secret) ({ keyID, teamID, p8 } = JSON.parse(provider.secret));
+    });
+
+    let error: string;
+
+    const projectId = $page.params.project;
+    const update = async () => {
+        try {
+            await sdkForConsole.projects.updateOAuth2(
+                projectId,
+                provider.name.toLowerCase(),
+                appId,
+                secret,
+                enabled
+            );
+            addNotification({
+                type: 'success',
+                message: `${provider.name} authentication has been ${
+                    provider.enabled ? 'enabled' : 'disabled'
+                }`
+            });
+            provider = null;
+            invalidate(Dependencies.PROJECT);
+        } catch ({ message }) {
+            error = message;
+        }
+    };
+
+    $: secret = keyID && teamID && p8 ? JSON.stringify({ keyID, teamID, p8 }) : provider.secret;
+</script>
+
+<Modal {error} on:submit={update} size="big" show on:close>
+    <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={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
+        <InputText
+            id="bundleID"
+            label="Bundle ID"
+            autofocus={true}
+            placeholder="com.company.appname"
+            bind:value={appId} />
+        <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={() => (provider = null)}>Cancel</Button>
+        <Button
+            disabled={(secret === provider.secret &&
+                enabled === provider.enabled &&
+                appId === provider.appId) ||
+                !(appId && keyID && teamID && p8)}
+            submit>Update</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/auth/_auth0OAuth.svelte b/src/routes/console/project-[project]/auth/_auth0OAuth.svelte
new file mode 100644
index 000000000..129bf4903
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/_auth0OAuth.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Modal, CopyInput, Alert } from '$lib/components';
+    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';
+    import { onMount } from 'svelte';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+
+    export let provider: Provider;
+
+    let appId: string = null;
+    let enabled: boolean = null;
+    let clientSecret: string = null;
+    let auth0Domain: string = null;
+    let error: string;
+
+    onMount(() => {
+        appId ??= provider.appId;
+        enabled ??= provider.enabled;
+        if (provider.secret) ({ clientSecret, auth0Domain } = JSON.parse(provider.secret));
+    });
+
+    const projectId = $page.params.project;
+    const update = async () => {
+        try {
+            await sdkForConsole.projects.updateOAuth2(
+                projectId,
+                provider.name.toLowerCase(),
+                appId,
+                secret,
+                enabled
+            );
+            addNotification({
+                type: 'success',
+                message: `${provider.name} authentication has been ${
+                    provider.enabled ? 'enabled' : 'disabled'
+                }`
+            });
+            provider = null;
+            invalidate(Dependencies.PROJECT);
+        } catch ({ message }) {
+            error = message;
+        }
+    };
+
+    $: secret =
+        clientSecret && auth0Domain
+            ? JSON.stringify({ clientSecret, auth0Domain })
+            : provider.secret;
+</script>
+
+<Modal {error} size="big" show on:submit={update} on:close>
+    <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={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
+        <InputText
+            id="clientID"
+            label="Client ID"
+            autofocus={true}
+            placeholder="Enter ID"
+            bind:value={appId} />
+        <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={() => (provider = null)}>Cancel</Button>
+        <Button
+            disabled={(secret === provider.secret &&
+                enabled === provider.enabled &&
+                appId === provider.appId) ||
+                !(appId && clientSecret && auth0Domain)}
+            submit>Update</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/auth/_createTeam.svelte b/src/routes/console/project-[project]/auth/_createTeam.svelte
new file mode 100644
index 000000000..d91118fe5
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/_createTeam.svelte
@@ -0,0 +1,63 @@
+<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 { sdkForProject } from '$lib/stores/sdk';
+    import { createEventDispatcher } from 'svelte';
+
+    export let showCreate = false;
+
+    const dispatch = createEventDispatcher();
+
+    let name: string, id: string, error: string;
+    let showCustomId = false;
+
+    const create = async () => {
+        try {
+            const team = await sdkForProject.teams.create(id ?? 'unique()', name);
+            name = '';
+            showCreate = false;
+            showCustomId = false;
+            addNotification({
+                type: 'success',
+                message: `${team.name} has been created`
+            });
+            dispatch('created', team);
+        } catch ({ message }) {
+            error = message;
+        }
+    };
+
+    $: if (!showCreate) {
+        showCustomId = false;
+        error = null;
+    }
+</script>
+
+<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]/auth/_createUser.svelte b/src/routes/console/project-[project]/auth/_createUser.svelte
new file mode 100644
index 000000000..eba9fba72
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/_createUser.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+    import { Modal, CustomId } from '$lib/components';
+    import { Pill } from '$lib/elements/';
+    import {
+        Button,
+        InputPassword,
+        InputEmail,
+        InputText,
+        InputPhone,
+        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;
+
+    const dispatch = createEventDispatcher();
+
+    let showDropdown = false;
+    let name: string, mail: string, pass: string, id: string, phone: string;
+    let error: string;
+
+    const create = async () => {
+        try {
+            const user = await sdkForProject.users.create(
+                id ?? 'unique()',
+                mail,
+                phone,
+                pass,
+                name
+            );
+            mail = pass = name = '';
+            showCreate = false;
+            showDropdown = false;
+            addNotification({
+                type: 'success',
+                message: `${user.name ? user.name : 'User'} has been created`
+            });
+            dispatch('created', user);
+        } catch ({ message }) {
+            error = message;
+        }
+    };
+
+    $: if (!showDropdown) {
+        id = null;
+    }
+    $: if (!showCreate) {
+        showDropdown = false;
+        error = null;
+    }
+</script>
+
+<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>
diff --git a/src/routes/console/project-[project]/auth/_mainOAuth.svelte b/src/routes/console/project-[project]/auth/_mainOAuth.svelte
new file mode 100644
index 000000000..721a7d486
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/_mainOAuth.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Modal, CopyInput, Alert } from '$lib/components';
+    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';
+    import { onMount } from 'svelte';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+
+    export let provider: Provider;
+
+    const projectId = $page.params.project;
+
+    let enabled: boolean = null;
+    let appId: string = null;
+    let secret: string = null;
+
+    onMount(() => {
+        enabled ??= provider.enabled;
+        appId ??= provider.appId;
+        secret ??= provider.secret;
+    });
+
+    let error: string;
+
+    const update = async () => {
+        try {
+            await sdkForConsole.projects.updateOAuth2(
+                projectId,
+                provider.name.toLowerCase(),
+                appId,
+                secret,
+                enabled
+            );
+            addNotification({
+                type: 'success',
+                message: `${provider.name} authentication has been ${
+                    provider.enabled ? 'enabled' : 'disabled'
+                }`
+            });
+            provider = null;
+            invalidate(Dependencies.PROJECT);
+        } catch ({ message }) {
+            error = message;
+        }
+    };
+</script>
+
+<Modal {error} size="big" show on:submit={update} on:close>
+    <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={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
+        <InputText
+            id="appID"
+            label="App ID"
+            autofocus={true}
+            placeholder="Enter ID"
+            bind:value={appId} />
+        <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={() => (provider = null)}>Cancel</Button>
+        <Button
+            disabled={!appId ||
+                !secret ||
+                (appId === provider.appId &&
+                    secret === provider.secret &&
+                    enabled === provider.enabled)}
+            submit>Update</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/auth/_microsoftOAuth.svelte b/src/routes/console/project-[project]/auth/_microsoftOAuth.svelte
new file mode 100644
index 000000000..4466ae493
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/_microsoftOAuth.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Modal, CopyInput, Alert } from '$lib/components';
+    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';
+    import { onMount } from 'svelte';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+
+    export let provider: Provider;
+
+    let appId: string = null;
+    let enabled: boolean = null;
+    let clientSecret: string = null;
+    let tenantID: string = null;
+    let error: string;
+
+    onMount(() => {
+        appId ??= provider.appId;
+        enabled ??= provider.enabled;
+        if (provider.secret) ({ clientSecret, tenantID } = JSON.parse(provider.secret));
+    });
+
+    const projectId = $page.params.project;
+
+    const update = async () => {
+        try {
+            await sdkForConsole.projects.updateOAuth2(
+                projectId,
+                provider.name.toLowerCase(),
+                appId,
+                secret,
+                enabled
+            );
+            addNotification({
+                type: 'success',
+                message: `${provider.name} authentication has been ${
+                    provider.enabled ? 'enabled' : 'disabled'
+                }`
+            });
+            provider = null;
+            invalidate(Dependencies.PROJECT);
+        } catch ({ message }) {
+            error = message;
+        }
+    };
+
+    $: secret =
+        clientSecret && tenantID ? JSON.stringify({ clientSecret, tenantID }) : provider.secret;
+</script>
+
+<Modal {error} on:submit={update} size="big" show on:close>
+    <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={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
+        <InputText
+            id="appID"
+            label="Application (client) ID"
+            autofocus={true}
+            placeholder="Enter ID"
+            bind:value={appId} />
+        <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={() => (provider = null)}>Cancel</Button>
+        <Button
+            disabled={(secret === provider.secret &&
+                enabled === provider.enabled &&
+                appId === provider.appId) ||
+                !(appId && clientSecret && tenantID)}
+            submit>Update</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/auth/_oktaOAuth.svelte b/src/routes/console/project-[project]/auth/_oktaOAuth.svelte
new file mode 100644
index 000000000..bb4ff54c0
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/_oktaOAuth.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Modal, CopyInput, Alert } from '$lib/components';
+    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';
+    import { onMount } from 'svelte';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+
+    export let provider: Provider;
+
+    let appId: string = null;
+    let enabled: boolean = null;
+    let clientSecret: string = null;
+    let oktaDomain: string = null;
+    let authorizationServerId: string = null;
+
+    onMount(() => {
+        appId ??= provider.appId;
+        enabled ??= provider.enabled;
+        if (provider.secret)
+            ({ clientSecret, oktaDomain, authorizationServerId } = JSON.parse(provider.secret));
+    });
+
+    let error: string;
+
+    const projectId = $page.params.project;
+
+    const update = async () => {
+        try {
+            await sdkForConsole.projects.updateOAuth2(
+                projectId,
+                provider.name.toLowerCase(),
+                appId,
+                secret
+            );
+            addNotification({
+                type: 'success',
+                message: `${provider.name} authentication has been ${
+                    provider.enabled ? 'enabled' : 'disabled'
+                }`
+            });
+            provider = null;
+            invalidate(Dependencies.PROJECT);
+        } catch ({ message }) {
+            error = message;
+        }
+    };
+
+    $: secret =
+        clientSecret && oktaDomain && authorizationServerId
+            ? JSON.stringify({ clientSecret, oktaDomain, authorizationServerId })
+            : provider.secret;
+</script>
+
+<Modal {error} on:submit={update} size="big" show on:close>
+    <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={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
+        <InputText
+            id="appID"
+            label="Client ID"
+            autofocus={true}
+            placeholder="Enter ID"
+            bind:value={appId} />
+        <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={() => (provider = null)}>Cancel</Button>
+        <Button
+            disabled={(secret === provider.secret &&
+                enabled === provider.enabled &&
+                appId === provider.appId) ||
+                !(appId && clientSecret && oktaDomain && authorizationServerId)}
+            submit>Update</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/auth/breadcrumbs.svelte b/src/routes/console/project-[project]/auth/breadcrumbs.svelte
new file mode 100644
index 000000000..77e02ac04
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/breadcrumbs.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    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/project-${$project?.$id}`,
+            title: $project?.name
+        },
+        {
+            href: `/console/project-${$project?.$id}/auth`,
+            title: 'Auth'
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/auth/header.svelte b/src/routes/console/project-[project]/auth/header.svelte
new file mode 100644
index 000000000..99fea587b
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/header.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Tab, Tabs } from '$lib/components';
+    import { isTabSelected } from '$lib/helpers/load';
+    import { Cover, CoverTitle } from '$lib/layout';
+
+    const projectId = $page.params.project;
+    const path = `/console/project-${projectId}/auth`;
+    const tabs = [
+        {
+            href: path,
+            title: 'Users',
+            hasChildren: true
+        },
+        {
+            href: `${path}/teams`,
+            title: 'Teams',
+            hasChildren: true
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage'
+        },
+        {
+            href: `${path}/security`,
+            title: 'Security'
+        },
+        {
+            href: `${path}/settings`,
+            title: 'Settings'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <CoverTitle>Auth</CoverTitle>
+    </svelte:fragment>
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
diff --git a/src/routes/console/project-[project]/authentication/security/+page.svelte b/src/routes/console/project-[project]/auth/security/+page.svelte
similarity index 93%
rename from src/routes/console/project-[project]/authentication/security/+page.svelte
rename to src/routes/console/project-[project]/auth/security/+page.svelte
index 2c9920d8e..8b241edca 100644
--- a/src/routes/console/project-[project]/authentication/security/+page.svelte
+++ b/src/routes/console/project-[project]/auth/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({
@@ -139,7 +140,7 @@
     </CardGrid>
 
     <CardGrid>
-        <Heading tag="h2" size="6">Session Length (Coming Soon)</Heading>
+        <Heading tag="h2" size="6">Session Length <Pill>Coming Soon!</Pill></Heading>
         <p>
             If you reduce the limit, users who are currently logged in will be logged out of the
             application.
diff --git a/src/routes/console/project-[project]/authentication/settings/+page.svelte b/src/routes/console/project-[project]/auth/settings/+page.svelte
similarity index 84%
rename from src/routes/console/project-[project]/authentication/settings/+page.svelte
rename to src/routes/console/project-[project]/auth/settings/+page.svelte
index ac4a4ad9b..66032e6c3 100644
--- a/src/routes/console/project-[project]/authentication/settings/+page.svelte
+++ b/src/routes/console/project-[project]/auth/settings/+page.svelte
@@ -11,17 +11,14 @@
     import { event } from '$lib/actions/analytics';
     import type { Provider } from '$lib/stores/oauth-providers';
     import { app } from '$lib/stores/app';
-    import { onMount } from 'svelte';
     import { page } from '$app/stores';
 
     const projectId = $page.params.project;
-    let showModal = false;
 
-    onMount(async () => {
-        await project.load(projectId);
+    $: {
         authMethods.load($project);
         OAuthProviders.load($project);
-    });
+    }
 
     const authUpdate = async (box: AuthMethod) => {
         try {
@@ -47,7 +44,7 @@
 {#if $authMethods && $OAuthProviders}
     <Container>
         <CardGrid>
-            <Heading tag="h2" size="7">Authentication Methods</Heading>
+            <Heading tag="h2" size="7">Auth Methods</Heading>
             <p>Enable the authentication methods you wish to use.</p>
             <svelte:fragment slot="aside">
                 <form class="form">
@@ -57,9 +54,7 @@
                                 label={box.label}
                                 id={box.method}
                                 bind:value={box.value}
-                                on:change={() => {
-                                    authUpdate(box);
-                                }} />
+                                on:change={() => authUpdate(box)} />
                         {/each}
                     </ul>
                 </form>
@@ -68,12 +63,11 @@
         <section class="common-section">
             <h2 class="heading-level-6 common-section">OAuth2 Providers</h2>
             <ul class="grid-box common-section">
-                {#each $OAuthProviders.providers as provider}
+                {#each $OAuthProviders.providers.sort( (a, b) => (a.enabled === b.enabled ? 0 : a.enabled ? -1 : 1) ) as provider}
                     <button
                         class="card u-flex u-flex-vertical u-cross-center"
                         on:click={() => {
                             selectedProvider = provider;
-                            showModal = true;
                         }}
                         use:event={{
                             name: 'console_users',
@@ -92,8 +86,8 @@
                         </div>
                         <p class="u-margin-block-start-8">{provider.name}</p>
                         <div class="u-margin-block-start-24">
-                            <Pill success={provider.active}>
-                                {provider.active ? 'enabled' : 'disabled'}
+                            <Pill success={provider.enabled}>
+                                {provider.enabled ? 'enabled' : 'disabled'}
                             </Pill>
                         </div>
                     </button>
@@ -106,6 +100,7 @@
 {#if selectedProvider}
     <svelte:component
         this={selectedProvider.component}
-        provider={selectedProvider}
-        bind:showModal />
+        bind:provider={selectedProvider}
+        on:close={() => (selectedProvider = null)}
+        showModal />
 {/if}
diff --git a/src/routes/console/project-[project]/authentication/teams/+page.svelte b/src/routes/console/project-[project]/auth/teams/[[page]]/+page.svelte
similarity index 54%
rename from src/routes/console/project-[project]/authentication/teams/+page.svelte
rename to src/routes/console/project-[project]/auth/teams/[[page]]/+page.svelte
index aa1f07f46..fec59dafb 100644
--- a/src/routes/console/project-[project]/authentication/teams/+page.svelte
+++ b/src/routes/console/project-[project]/auth/teams/[[page]]/+page.svelte
@@ -10,36 +10,29 @@
         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}/auth/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 +45,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 +54,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}/auth/teams/team-${team.$id}`}>
                         <TableCell title="ID">
                             <div class="u-flex u-gap-12">
                                 <AvatarInitials size={32} name={team.name} />
@@ -79,38 +72,29 @@
             </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}/auth/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}/auth/teams`}>
+                Clear Search
+            </Button>
         </EmptySearch>
     {:else}
-        <Empty isButton single on:click={() => (showCreate = true)}>
-            <div
-                class="common-section"
-                use:event={{
-                    name: 'console_users',
-                    action: 'click_create',
-                    parameters: {
-                        type: 'team'
-                    }
-                }}>
-                <div class="u-text-center common-section">
-                    <p>Create your first Team to get started.</p>
-                    <p>Need a hand? Check out our documentation.</p>
-                </div>
-                <div class="u-flex u-gap-16 common-section u-main-center">
-                    <Button external href="#/" text>Documentation</Button>
-                    <Button secondary>Create team</Button>
-                </div>
-            </div>
-        </Empty>
+        <Empty
+            single
+            on:click={() => (showCreate = true)}
+            href="https://appwrite.io/docs/client/teams"
+            target="team" />
     {/if}
 </Container>
 
diff --git a/src/routes/console/project-[project]/auth/teams/[[page]]/+page.ts b/src/routes/console/project-[project]/auth/teams/[[page]]/+page.ts
new file mode 100644
index 000000000..18f5288e1
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/teams/[[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,
+        teams: sdkForProject.teams.list(
+            [Query.limit(PAGE_LIMIT), Query.offset(offset), Query.orderDesc('$createdAt')],
+            search
+        )
+    };
+};
diff --git a/src/routes/console/project-[project]/auth/teams/team-[team]/+layout.svelte b/src/routes/console/project-[project]/auth/teams/team-[team]/+layout.svelte
new file mode 100644
index 000000000..f20f1c4b6
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/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]/auth/teams/team-[team]/+layout.ts b/src/routes/console/project-[project]/auth/teams/team-[team]/+layout.ts
new file mode 100644
index 000000000..f7b8997b6
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/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]/auth/teams/team-[team]/+page.svelte
similarity index 88%
rename from src/routes/console/project-[project]/authentication/teams/[team]/+page.svelte
rename to src/routes/console/project-[project]/auth/teams/team-[team]/+page.svelte
index d7da47e57..43e53afb2 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/+page.svelte
+++ b/src/routes/console/project-[project]/auth/teams/team-[team]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { onMount } from 'svelte';
     import { page } from '$app/stores';
     import { CardGrid, Box, Heading, AvatarInitials } from '$lib/components';
     import { Container } from '$lib/layout';
@@ -7,9 +8,9 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { addNotification } from '$lib/stores/notifications';
     import { team } from './store';
-    import { title, breadcrumbs } from '$lib/stores/layout';
-    import DeleteTeam from './_deleteTeam.svelte';
-    import { onMount } from 'svelte';
+    import { Dependencies } from '$lib/constants';
+    import { invalidate } from '$app/navigation';
+    import DeleteTeam from './deleteTeam.svelte';
 
     let showDelete = false;
     let teamName: string = null;
@@ -21,11 +22,7 @@
     async function updateName() {
         try {
             await sdkForProject.teams.update($page.params.team, teamName);
-            $team.name = teamName;
-            title.set(teamName);
-            const breadcrumb = $breadcrumbs.get($breadcrumbs.size);
-            breadcrumb.title = teamName;
-            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size, breadcrumb);
+            invalidate(Dependencies.TEAM);
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
@@ -80,7 +77,7 @@
         </CardGrid>
     </Form>
 
-    <CardGrid>
+    <CardGrid danger>
         <div>
             <Heading tag="h6" size="7">Danger Zone</Heading>
         </div>
@@ -95,7 +92,7 @@
                     <AvatarInitials size={48} name={$team.name} />
                 </svelte:fragment>
                 <svelte:fragment slot="title">
-                    <h6 class="u-bold">{$team.name}</h6>
+                    <h6 class="u-bold u-trim-1">{$team.name}</h6>
                     <span>{$team.total} Members</span>
                 </svelte:fragment>
             </Box>
diff --git a/src/routes/console/project-[project]/auth/teams/team-[team]/activity/[[page]]/+page.svelte b/src/routes/console/project-[project]/auth/teams/team-[team]/activity/[[page]]/+page.svelte
new file mode 100644
index 000000000..3647857fd
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/teams/team-[team]/activity/[[page]]/+page.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    import { page } from '$app/stores';
+    import { Activity } from '$lib/layout';
+
+    export let data: PageData;
+    const path = `/console/project-${$page.params.project}/auth/teams/team-${$page.params.team}/activity`;
+</script>
+
+<Activity {path} logs={data.logs} offset={data.offset} />
diff --git a/src/routes/console/project-[project]/auth/teams/team-[team]/activity/[[page]]/+page.ts b/src/routes/console/project-[project]/auth/teams/team-[team]/activity/[[page]]/+page.ts
new file mode 100644
index 000000000..7a37ebc80
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/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]/auth/teams/team-[team]/breadcrumbs.svelte b/src/routes/console/project-[project]/auth/teams/team-[team]/breadcrumbs.svelte
new file mode 100644
index 000000000..277e199c2
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/teams/team-[team]/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 { team } from './store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization?.$id}`,
+            title: $organization?.name
+        },
+        {
+            href: `/console/project-${$project.$id}`,
+            title: $project?.name
+        },
+        {
+            href: `/console/project-${$project?.$id}/auth`,
+            title: 'Auth'
+        },
+        {
+            href: `/console/project-${$project?.$id}/auth/teams-${$team?.$id}`,
+            title: $team?.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/auth/teams/team-[team]/createMembership.svelte b/src/routes/console/project-[project]/auth/teams/team-[team]/createMembership.svelte
new file mode 100644
index 000000000..ef46c7d5f
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/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}/auth/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]/auth/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]/auth/teams/team-[team]/deleteMembership.svelte
index ebd0aae32..039c4f3a3 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/_deleteMembership.svelte
+++ b/src/routes/console/project-[project]/auth/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}/auth/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]/auth/teams/team-[team]/deleteTeam.svelte
similarity index 60%
rename from src/routes/console/project-[project]/authentication/teams/[team]/_deleteTeam.svelte
rename to src/routes/console/project-[project]/auth/teams/team-[team]/deleteTeam.svelte
index e906e405e..2a79abc62 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/_deleteTeam.svelte
+++ b/src/routes/console/project-[project]/auth/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';
@@ -15,7 +15,7 @@
         try {
             await sdkForProject.teams.delete(team.$id);
             showDelete = false;
-            await goto(`${base}/console/project-${$page.params.project}/authentication/teams`);
+            await goto(`${base}/console/project-${$page.params.project}/auth/teams`);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -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]/auth/teams/team-[team]/header.svelte b/src/routes/console/project-[project]/auth/teams/team-[team]/header.svelte
new file mode 100644
index 000000000..536b9880d
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/teams/team-[team]/header.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Copy, Tab, Tabs } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    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}/auth/teams/team-${teamId}`;
+    const tabs = [
+        {
+            href: path,
+            title: 'Overview'
+        },
+        {
+            href: `${path}/members`,
+            title: 'Members',
+            hasChildren: true
+        },
+        {
+            href: `${path}/activity`,
+            title: 'Activity',
+            hasChildren: true
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <CoverTitle href={`/console/project-${projectId}/auth/teams`}>
+            {$team?.name}
+        </CoverTitle>
+        <Copy value={$team?.$id}>
+            <Pill button>
+                <span class="icon-duplicate" aria-hidden="true" />
+                Team ID
+            </Pill>
+        </Copy>
+    </svelte:fragment>
+
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte b/src/routes/console/project-[project]/auth/teams/team-[team]/members/[[page]]/+page.svelte
similarity index 56%
rename from src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
rename to src/routes/console/project-[project]/auth/teams/team-[team]/members/[[page]]/+page.svelte
index 7774adbf1..462844b6f 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte
+++ b/src/routes/console/project-[project]/auth/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,36 @@
     } 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
-        );
+        await goto(`${base}/console/project-${project}/auth/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 && !data.search}
         <Table>
             <TableHeader>
                 <TableCellHead>Name</TableCellHead>
@@ -72,9 +49,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}/auth/user-${membership.userId}`}>
                         <TableCellText title="Name">
                             <div class="u-flex u-gap-12">
                                 <AvatarInitials size={32} name={membership.userName} />
@@ -82,8 +59,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,23 +78,38 @@
             </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}/auth/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
+                external
+                href="https://appwrite.io/docs/client/teams?sdk=web-default#teamsCreateMembership"
+                text>
+                Documentation
+            </Button>
+            <Button secondary on:click={() => (showCreate = true)}>Create membership</Button>
         </EmptySearch>
     {:else}
-        <Empty isButton single on:click={() => (showCreate = true)}>
-            <p>Add your first member to get started</p>
-        </Empty>
+        <Empty
+            single
+            href="https://appwrite.io/docs/client/teams?sdk=web-default#teamsCreateMembership"
+            target="membership"
+            on:click={() => (showCreate = true)} />
     {/if}
 </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]/auth/teams/team-[team]/members/[[page]]/+page.ts b/src/routes/console/project-[project]/auth/teams/team-[team]/members/[[page]]/+page.ts
new file mode 100644
index 000000000..2aa0f1ac3
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/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]/auth/teams/team-[team]/store.ts b/src/routes/console/project-[project]/auth/teams/team-[team]/store.ts
new file mode 100644
index 000000000..5b81e517e
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/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]/auth/usage/[[period]]/+page.svelte b/src/routes/console/project-[project]/auth/usage/[[period]]/+page.svelte
new file mode 100644
index 000000000..879419d72
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/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}/auth/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]/auth/usage/[[period]]/+page.ts b/src/routes/console/project-[project]/auth/usage/[[period]]/+page.ts
new file mode 100644
index 000000000..fbc99f708
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/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]/auth/user-[user]/+layout.svelte b/src/routes/console/project-[project]/auth/user-[user]/+layout.svelte
new file mode 100644
index 000000000..af7ca922b
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/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]/auth/user-[user]/+layout.ts b/src/routes/console/project-[project]/auth/user-[user]/+layout.ts
new file mode 100644
index 000000000..2cbe498c2
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/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]/auth/user-[user]/+page.svelte
similarity index 95%
rename from src/routes/console/project-[project]/authentication/user/[user]/+page.svelte
rename to src/routes/console/project-[project]/auth/user-[user]/+page.svelte
index 5c2d22619..35c47ec8c 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/+page.svelte
+++ b/src/routes/console/project-[project]/auth/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,15 +20,18 @@
     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 { title, breadcrumbs } from '$lib/stores/layout';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
 
     $: if (prefs) {
         if (JSON.stringify(prefs) !== JSON.stringify(Object.entries($user.prefs))) {
-            if (prefs[prefs.length - 1][0] && prefs[prefs.length - 1][1]) {
+            if (!!prefs[prefs.length - 1][0] && !!prefs[prefs.length - 1][1]) {
                 arePrefsDisabled = false;
+            } else {
+                arePrefsDisabled = true;
             }
         } else {
             arePrefsDisabled = true;
@@ -46,7 +48,6 @@
     let showVerifcationDropdown = false;
 
     onMount(async () => {
-        await user.load($page.params.user);
         prefs = Object.entries($user.prefs);
         if (!prefs?.length) {
             prefs.push(['', '']);
@@ -78,7 +79,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'
@@ -95,7 +96,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'
@@ -112,11 +113,7 @@
     async function updateName() {
         try {
             await sdkForProject.users.updateName($user.$id, userName);
-            $user.name = userName;
-            title.set(userName);
-            const breadcrumb = $breadcrumbs.get($breadcrumbs.size);
-            breadcrumb.title = userName;
-            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size, breadcrumb);
+            invalidate(Dependencies.USER);
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
@@ -131,7 +128,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'
@@ -146,7 +143,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'
@@ -179,7 +176,7 @@
             let updatedPrefs = Object.fromEntries(prefs);
 
             await sdkForProject.users.updatePrefs($user.$id, updatedPrefs);
-            $user.prefs = updatedPrefs;
+            invalidate(Dependencies.USER);
             arePrefsDisabled = true;
 
             addNotification({
@@ -269,14 +266,16 @@
                             </DropListItem>
                         </svelte:fragment>
                     </DropList>
-                {:else if !$user.phone}
+                {:else if $user.email}
                     <Button secondary on:click={() => updateVerificationEmail()}>
                         {$user.emailVerification ? 'Unverify' : 'Verify'} account
                     </Button>
-                {:else if !$user.email}
+                {:else if $user.phone}
+                    test
                     <Button secondary on:click={() => updateVerificationPhone()}>
                         {$user.phoneVerification ? 'Unverify' : 'Verify'} account
-                    </Button>{/if}
+                    </Button>
+                {/if}
             {/if}
         </svelte:fragment>
     </CardGrid>
@@ -425,6 +424,7 @@
                         {/if}
                     </ul>
                     <Button
+                        noMargin
                         text
                         on:click={() => {
                             if (prefs[prefs.length - 1][0] && prefs[prefs.length - 1][1]) {
@@ -444,7 +444,7 @@
         </CardGrid>
     </Form>
 
-    <CardGrid>
+    <CardGrid danger>
         <div>
             <Heading tag="h6" size="7">Danger Zone</Heading>
         </div>
@@ -470,11 +470,11 @@
                     {/if}
                 </svelte:fragment>
                 <svelte:fragment slot="title">
-                    <h6 class="u-bold">
+                    <h6 class="u-bold u-trim-1">
                         {$user.name || $user.email || $user.phone || 'Anonymous'}
                     </h6>
                 </svelte:fragment>
-                <p>
+                <p class="u-trim-1">
                     {$user.email && $user.phone
                         ? [$user.email, $user.phone].join(',')
                         : $user.email || $user.phone}
diff --git a/src/routes/console/project-[project]/auth/user-[user]/activity/[[page]]/+page.svelte b/src/routes/console/project-[project]/auth/user-[user]/activity/[[page]]/+page.svelte
new file mode 100644
index 000000000..f703612b7
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/user-[user]/activity/[[page]]/+page.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    import { page } from '$app/stores';
+    import { Activity } from '$lib/layout';
+
+    export let data: PageData;
+    const path = `/console/project-${$page.params.project}/auth/user-${$page.params.user}/activity`;
+</script>
+
+<Activity {path} logs={data.logs} offset={data.offset} />
diff --git a/src/routes/console/project-[project]/auth/user-[user]/activity/[[page]]/+page.ts b/src/routes/console/project-[project]/auth/user-[user]/activity/[[page]]/+page.ts
new file mode 100644
index 000000000..829f37d4a
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/user-[user]/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: await sdkForProject.users.listLogs(params.user, [
+            Query.limit(PAGE_LIMIT),
+            Query.offset(offset)
+        ])
+    };
+};
diff --git a/src/routes/console/project-[project]/auth/user-[user]/breadcrumbs.svelte b/src/routes/console/project-[project]/auth/user-[user]/breadcrumbs.svelte
new file mode 100644
index 000000000..1662d3e4f
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/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}/auth`,
+            title: 'Auth'
+        },
+        {
+            href: `/console/project-${$project?.$id}/auth/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]/auth/user-[user]/deleteAllMemberships.svelte
similarity index 62%
rename from src/routes/console/project-[project]/authentication/user/[user]/_deleteAllMemberships.svelte
rename to src/routes/console/project-[project]/auth/user-[user]/deleteAllMemberships.svelte
index 0a853040b..ff508e4ab 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/_deleteAllMemberships.svelte
+++ b/src/routes/console/project-[project]/auth/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';
@@ -19,7 +19,7 @@
                 message: `All memberships have been deleted`
             });
             await goto(
-                `${base}/console/project-${$page.params.project}/authentication/${$user.$id}/membeships`
+                `${base}/console/project-${$page.params.project}/auth/${$user.$id}/membeships`
             );
         } catch (error) {
             addNotification({
@@ -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]/auth/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]/auth/user-[user]/deleteAllSessions.svelte
index 13ec19bad..f80d82f50 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/_deleteAllSessions.svelte
+++ b/src/routes/console/project-[project]/auth/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]/auth/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]/auth/user-[user]/deleteMembership.svelte
index 154f9c869..eec7bd042 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/_deleteMembership.svelte
+++ b/src/routes/console/project-[project]/auth/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}/auth/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]/auth/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]/auth/user-[user]/deleteSession.svelte
index b447e8f90..8091070ce 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/_deleteSession.svelte
+++ b/src/routes/console/project-[project]/auth/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]/auth/user-[user]/deleteUser.svelte
similarity index 61%
rename from src/routes/console/project-[project]/authentication/user/[user]/_deleteUser.svelte
rename to src/routes/console/project-[project]/auth/user-[user]/deleteUser.svelte
index 45825cac0..bfec8cbed 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/_deleteUser.svelte
+++ b/src/routes/console/project-[project]/auth/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;
 
@@ -19,7 +19,7 @@
                 type: 'success',
                 message: `${$user.name ? $user.name : 'User'} has been deleted`
             });
-            await goto(`${base}/console/project-${$page.params.project}/authentication`);
+            await goto(`${base}/console/project-${$page.params.project}/auth`);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -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]/auth/user-[user]/header.svelte b/src/routes/console/project-[project]/auth/user-[user]/header.svelte
new file mode 100644
index 000000000..0c1fa6e19
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/user-[user]/header.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Copy, Tab, Tabs } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    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}/auth/user-${userId}`;
+    const tabs = [
+        {
+            href: path,
+            title: 'Overview'
+        },
+        {
+            href: `${path}/memberships`,
+            title: 'Memberships'
+        },
+        {
+            href: `${path}/sessions`,
+            title: 'Sessions'
+        },
+        {
+            href: `${path}/activity`,
+            title: 'Activity',
+            hasChildren: true
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <CoverTitle href={`/console/project-${projectId}/auth`}>
+            {$user.name ? $user.name : '-'}
+        </CoverTitle>
+        <Copy value={$user.$id}>
+            <Pill button>
+                <span class="icon-duplicate" aria-hidden="true" />
+                User ID
+            </Pill>
+        </Copy>
+    </svelte:fragment>
+
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
diff --git a/src/routes/console/project-[project]/auth/user-[user]/memberships/[[page]]/+page.svelte b/src/routes/console/project-[project]/auth/user-[user]/memberships/[[page]]/+page.svelte
new file mode 100644
index 000000000..81abfff91
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/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}/auth/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/auth?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]/auth/user-[user]/memberships/[[page]]/+page.ts b/src/routes/console/project-[project]/auth/user-[user]/memberships/[[page]]/+page.ts
new file mode 100644
index 000000000..6d3659337
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/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]/auth/user-[user]/sessions/[[page]]/+page.svelte
similarity index 75%
rename from src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte
rename to src/routes/console/project-[project]/auth/user-[user]/sessions/[[page]]/+page.svelte
index a960f8fc0..44df5194b 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte
+++ b/src/routes/console/project-[project]/auth/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,10 +42,10 @@
                 <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">
+                            <div class="u-flex u-gap-12 u-cross-center">
                                 <div class="image-item">
                                     <img
                                         height="20"
@@ -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/auth?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]/auth/user-[user]/sessions/[[page]]/+page.ts b/src/routes/console/project-[project]/auth/user-[user]/sessions/[[page]]/+page.ts
new file mode 100644
index 000000000..530b91396
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/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]/auth/user-[user]/store.ts b/src/routes/console/project-[project]/auth/user-[user]/store.ts
new file mode 100644
index 000000000..f1ffab21e
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/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/+layout.svelte b/src/routes/console/project-[project]/authentication/+layout.svelte
deleted file mode 100644
index 0860a22f7..000000000
--- a/src/routes/console/project-[project]/authentication/+layout.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-
-    const path = 'authentication';
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    let loaded = false;
-
-    function handle(event = null) {
-        updateLayout({
-            navigate: event,
-            title: 'Authentication',
-            level: 3,
-            breadcrumbs: {
-                title: 'Authentication',
-                href: path
-            },
-            tabs: [
-                {
-                    href: path,
-                    title: 'Users'
-                },
-                {
-                    href: `${path}/teams`,
-                    title: 'Teams'
-                },
-                {
-                    href: `${path}/usage`,
-                    title: 'Usage'
-                },
-                {
-                    href: `${path}/security`,
-                    title: 'Security'
-                },
-                {
-                    href: `${path}/settings`,
-                    title: 'Settings'
-                }
-            ]
-        });
-
-        loaded = true;
-    }
-</script>
-
-<svelte:head>
-    <title>Users - Appwrite</title>
-</svelte:head>
-
-{#if loaded}
-    <slot />
-{/if}
diff --git a/src/routes/console/project-[project]/authentication/_appleOAuth.svelte b/src/routes/console/project-[project]/authentication/_appleOAuth.svelte
deleted file mode 100644
index 181236ece..000000000
--- a/src/routes/console/project-[project]/authentication/_appleOAuth.svelte
+++ /dev/null
@@ -1,103 +0,0 @@
-<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 { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
-    import type { Provider } from '$lib/stores/oauth-providers';
-    import { onMount } from 'svelte';
-
-    export let showModal = false;
-    export let provider: Provider;
-
-    let id: string = null;
-    let active = false;
-    let keyID: string = null;
-    let teamID: string = null;
-    let p8: string = null;
-
-    onMount(() => {
-        id ??= provider.id;
-        active ??= provider.active;
-        if (provider.secret) ({ keyID, teamID, p8 } = JSON.parse(provider.secret));
-    });
-
-    let error: string;
-
-    const projectId = $page.params.project;
-    const update = async () => {
-        try {
-            await sdkForConsole.projects.updateOAuth2(
-                projectId,
-                provider.name.toLowerCase(),
-                id,
-                secret
-            );
-            provider.active = active;
-            provider.id = id;
-            provider.secret = secret;
-            showModal = false;
-            addNotification({
-                type: 'success',
-                message: `${provider.name} authentication has been ${
-                    provider.active ? 'enabled' : 'disabled'
-                }`
-            });
-        } catch ({ message }) {
-            error = message;
-        }
-    };
-
-    $: 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>
diff --git a/src/routes/console/project-[project]/authentication/_auth0OAuth.svelte b/src/routes/console/project-[project]/authentication/_auth0OAuth.svelte
deleted file mode 100644
index 8a07aed3c..000000000
--- a/src/routes/console/project-[project]/authentication/_auth0OAuth.svelte
+++ /dev/null
@@ -1,112 +0,0 @@
-<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 { sdkForConsole } from '$lib/stores/sdk';
-    import type { Provider } from '$lib/stores/oauth-providers';
-    import { addNotification } from '$lib/stores/notifications';
-    import { onMount } from 'svelte';
-
-    export let showModal = false;
-    export let provider: Provider;
-
-    let id: string = null;
-    let active = false;
-    let clientSecret: string = null;
-    let auth0Domain: string = null;
-    let error: string;
-
-    onMount(() => {
-        id ??= provider.id;
-        active ??= provider.active;
-        if (provider.secret) ({ clientSecret, auth0Domain } = JSON.parse(provider.secret));
-    });
-
-    const projectId = $page.params.project;
-    const update = async () => {
-        try {
-            await sdkForConsole.projects.updateOAuth2(
-                projectId,
-                provider.name.toLowerCase(),
-                id,
-                secret
-            );
-            provider.active = active;
-            provider.id = id;
-            provider.secret = secret;
-            showModal = false;
-            addNotification({
-                type: 'success',
-                message: `${provider.name} authentication has been ${
-                    provider.active ? 'enabled' : 'disabled'
-                }`
-            });
-        } catch ({ message }) {
-            error = message;
-        }
-    };
-
-    $: secret =
-        clientSecret && auth0Domain
-            ? JSON.stringify({ clientSecret, auth0Domain })
-            : 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>
diff --git a/src/routes/console/project-[project]/authentication/_createTeam.svelte b/src/routes/console/project-[project]/authentication/_createTeam.svelte
deleted file mode 100644
index 88004bd2a..000000000
--- a/src/routes/console/project-[project]/authentication/_createTeam.svelte
+++ /dev/null
@@ -1,64 +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 { sdkForProject } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
-
-    export let showCreate = false;
-
-    const dispatch = createEventDispatcher();
-
-    let name: string, id: string, error: string;
-    let showCustomId = false;
-
-    const create = async () => {
-        try {
-            const team = await sdkForProject.teams.create(id ?? 'unique()', name);
-            name = '';
-            showCreate = false;
-            showCustomId = false;
-            addNotification({
-                type: 'success',
-                message: `${team.name} has been created`
-            });
-            dispatch('created', team);
-        } catch ({ message }) {
-            error = message;
-        }
-    };
-
-    $: if (!showCreate) {
-        showCustomId = false;
-        error = null;
-    }
-</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>
diff --git a/src/routes/console/project-[project]/authentication/_createUser.svelte b/src/routes/console/project-[project]/authentication/_createUser.svelte
deleted file mode 100644
index f4c6858f4..000000000
--- a/src/routes/console/project-[project]/authentication/_createUser.svelte
+++ /dev/null
@@ -1,92 +0,0 @@
-<script lang="ts">
-    import { Modal, CustomId } from '$lib/components';
-    import { Pill } from '$lib/elements/';
-    import {
-        Button,
-        InputPassword,
-        InputEmail,
-        InputText,
-        InputPhone,
-        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;
-
-    const dispatch = createEventDispatcher();
-
-    let showDropdown = false;
-    let name: string, mail: string, pass: string, id: string, phone: string;
-    let error: string;
-
-    const create = async () => {
-        try {
-            const user = await sdkForProject.users.create(
-                id ?? 'unique()',
-                mail,
-                phone,
-                pass,
-                name
-            );
-            mail = pass = name = '';
-            showCreate = false;
-            showDropdown = false;
-            addNotification({
-                type: 'success',
-                message: `${user.name ? user.name : 'User'} has been created`
-            });
-            dispatch('created', user);
-        } catch ({ message }) {
-            error = message;
-        }
-    };
-
-    $: if (!showDropdown) {
-        id = null;
-    }
-    $: if (!showCreate) {
-        showDropdown = false;
-        error = null;
-    }
-</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} />
-
-            {#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>
diff --git a/src/routes/console/project-[project]/authentication/_mainOAuth.svelte b/src/routes/console/project-[project]/authentication/_mainOAuth.svelte
deleted file mode 100644
index 5c6074b32..000000000
--- a/src/routes/console/project-[project]/authentication/_mainOAuth.svelte
+++ /dev/null
@@ -1,103 +0,0 @@
-<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 { sdkForConsole } from '$lib/stores/sdk';
-    import type { Provider } from '$lib/stores/oauth-providers';
-    import { addNotification } from '$lib/stores/notifications';
-    import { onMount } from 'svelte';
-
-    export let showModal = false;
-    export let provider: Provider;
-
-    const projectId = $page.params.project;
-
-    let active = false;
-    let id: string = null;
-    let secret: string = null;
-
-    onMount(() => {
-        active ??= provider.active;
-        id ??= provider.id;
-        secret ??= provider.secret;
-    });
-    let error: string;
-
-    const update = async () => {
-        try {
-            await sdkForConsole.projects.updateOAuth2(
-                projectId,
-                provider.name.toLowerCase(),
-                id,
-                secret
-            );
-            provider.active = active;
-            provider.id = id;
-            provider.secret = secret;
-            showModal = false;
-            addNotification({
-                type: 'success',
-                message: `${provider.name} authentication has been ${
-                    provider.active ? 'enabled' : 'disabled'
-                }`
-            });
-        } catch ({ message }) {
-            error = message;
-        }
-    };
-</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>
diff --git a/src/routes/console/project-[project]/authentication/_microsoftOAuth.svelte b/src/routes/console/project-[project]/authentication/_microsoftOAuth.svelte
deleted file mode 100644
index 695453153..000000000
--- a/src/routes/console/project-[project]/authentication/_microsoftOAuth.svelte
+++ /dev/null
@@ -1,113 +0,0 @@
-<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 { sdkForConsole } from '$lib/stores/sdk';
-    import type { Provider } from '$lib/stores/oauth-providers';
-    import { addNotification } from '$lib/stores/notifications';
-    import { onMount } from 'svelte';
-
-    export let showModal = false;
-    export let provider: Provider;
-
-    let id: string = null;
-    let active = false;
-    let clientSecret: string = null;
-    let tenantID: string = null;
-    let error: string;
-
-    onMount(() => {
-        id ??= provider.id;
-        active ??= provider.active;
-        if (provider.secret) ({ clientSecret, tenantID } = JSON.parse(provider.secret));
-    });
-
-    const projectId = $page.params.project;
-
-    const update = async () => {
-        try {
-            await sdkForConsole.projects.updateOAuth2(
-                projectId,
-                provider.name.toLowerCase(),
-                id,
-                secret
-            );
-            provider.active = active;
-            provider.id = id;
-            provider.secret = secret;
-
-            showModal = false;
-            addNotification({
-                type: 'success',
-                message: `${provider.name} authentication has been ${
-                    provider.active ? 'enabled' : 'disabled'
-                }`
-            });
-        } catch ({ message }) {
-            error = message;
-        }
-    };
-
-    $: secret =
-        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>
diff --git a/src/routes/console/project-[project]/authentication/_oktaOAuth.svelte b/src/routes/console/project-[project]/authentication/_oktaOAuth.svelte
deleted file mode 100644
index 01ec179b7..000000000
--- a/src/routes/console/project-[project]/authentication/_oktaOAuth.svelte
+++ /dev/null
@@ -1,122 +0,0 @@
-<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 { sdkForConsole } from '$lib/stores/sdk';
-    import type { Provider } from '$lib/stores/oauth-providers';
-    import { addNotification } from '$lib/stores/notifications';
-    import { onMount } from 'svelte';
-
-    export let showModal = false;
-    export let provider: Provider;
-
-    let id: string = null;
-    let active = false;
-    let clientSecret: string = null;
-    let oktaDomain: string = null;
-    let authorizationServerId: string = null;
-
-    onMount(() => {
-        id ??= provider.id;
-        active ??= provider.active;
-        if (provider.secret)
-            ({ clientSecret, oktaDomain, authorizationServerId } = JSON.parse(provider.secret));
-    });
-
-    let error: string;
-
-    const projectId = $page.params.project;
-
-    const update = async () => {
-        try {
-            await sdkForConsole.projects.updateOAuth2(
-                projectId,
-                provider.name.toLowerCase(),
-                id,
-                secret
-            );
-            provider.active = active;
-            provider.id = id;
-            provider.secret = secret;
-            showModal = false;
-            addNotification({
-                type: 'success',
-                message: `${provider.name} authentication has been ${
-                    provider.active ? 'enabled' : 'disabled'
-                }`
-            });
-        } catch ({ message }) {
-            error = message;
-        }
-    };
-
-    $: secret =
-        clientSecret && oktaDomain && authorizationServerId
-            ? JSON.stringify({ clientSecret, oktaDomain, authorizationServerId })
-            : 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} />
-
-            <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>
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 db487c067..000000000
--- 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/[team]/+layout.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/+layout.svelte
deleted file mode 100644
index 589d1741f..000000000
--- a/src/routes/console/project-[project]/authentication/teams/[team]/+layout.svelte
+++ /dev/null
@@ -1,59 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { base } from '$app/paths';
-    import { updateLayout } from '$lib/stores/layout';
-    import { team } from './store';
-    import { afterNavigate } from '$app/navigation';
-    import { onMount } from 'svelte';
-
-    const teamId = $page.params.team;
-    const path = `authentication/teams/${teamId}`;
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle(event = null) {
-        const promise = team.load(teamId);
-
-        if ($team?.$id !== teamId) {
-            await promise;
-        }
-
-        updateLayout({
-            navigate: event,
-            level: 4,
-            title: $team.name,
-            back: `${base}/console/project-${$page.params.project}/authentication/teams`,
-            breadcrumbs: {
-                title: $team.name,
-                href: `teams/${teamId}`
-            },
-            copy: {
-                text: 'Team ID',
-                value: teamId
-            },
-            tabs: [
-                {
-                    href: path,
-                    title: 'Overview'
-                },
-                {
-                    href: `${path}/members`,
-                    title: 'Members'
-                },
-                {
-                    href: `${path}/activity`,
-                    title: 'Activity'
-                }
-            ]
-        });
-    }
-</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 099d35b7c..000000000
--- 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 0eb463d93..000000000
--- 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 860ba0fb3..000000000
--- 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/usage/+page.svelte b/src/routes/console/project-[project]/authentication/usage/+page.svelte
deleted file mode 100644
index 1a4a38521..000000000
--- 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/user/[user]/+layout.svelte b/src/routes/console/project-[project]/authentication/user/[user]/+layout.svelte
deleted file mode 100644
index 4832116c9..000000000
--- a/src/routes/console/project-[project]/authentication/user/[user]/+layout.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-    import { user } from './store';
-
-    const userId = $page.params.user;
-    const path = `authentication/user/${userId}`;
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle(event = null) {
-        const promise = user.load(userId);
-
-        if ($user?.$id !== userId) {
-            await promise;
-        }
-
-        updateLayout({
-            navigate: event,
-            title: $user.name,
-            level: 4,
-            breadcrumbs: {
-                title: $user.name,
-                href: `user/${userId}`
-            },
-            back: `${base}/console/project-${$page.params.project}/authentication`,
-            copy: {
-                text: 'User ID',
-                value: userId
-            },
-            tabs: [
-                {
-                    href: path,
-                    title: 'Overview'
-                },
-                {
-                    href: `${path}/memberships`,
-                    title: 'Memberships'
-                },
-                {
-                    href: `${path}/sessions`,
-                    title: 'Sessions'
-                },
-                {
-                    href: `${path}/activity`,
-                    title: 'Activity'
-                }
-            ]
-        });
-    }
-</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 9244eb8ac..000000000
--- 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]/memberships/+page.svelte b/src/routes/console/project-[project]/authentication/user/[user]/memberships/+page.svelte
deleted file mode 100644
index 20921e487..000000000
--- 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 bd6bdc02f..000000000
--- 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 606b2e8ce..766790be1 100644
--- a/src/routes/console/project-[project]/databases/+layout.svelte
+++ b/src/routes/console/project-[project]/databases/+layout.svelte
@@ -1,43 +1,5 @@
-<script>
-    import { afterNavigate } from '$app/navigation';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-
-    const path = 'databases';
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    let loaded = false;
-
-    function handle(event = null) {
-        updateLayout({
-            navigate: event,
-            title: 'Databases',
-            tabs: [
-                {
-                    href: path,
-                    title: 'Databases'
-                },
-                {
-                    href: `${path}/usage`,
-                    title: 'Usage'
-                }
-            ],
-            level: 3,
-            breadcrumbs: {
-                href: 'databases',
-                title: 'Databases'
-            }
-        });
-        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 000000000..12cc3f795
--- /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.svelte
deleted file mode 100644
index 8bb880d00..000000000
--- a/src/routes/console/project-[project]/databases/+page.svelte
+++ /dev/null
@@ -1,80 +0,0 @@
-<script lang="ts">
-    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 { 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';
-
-    let showCreate = false;
-    let search = '';
-
-    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}`);
-    }
-
-    $: databaseList.load(
-        [Query.limit($cardLimit), Query.offset($offset), Query.orderDesc('$createdAt')],
-        search
-    );
-</script>
-
-<Container>
-    <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <Heading tag="h2" size="5">Databases</Heading>
-
-        <Button on:click={() => (showCreate = true)}>
-            <span class="icon-plus" aria-hidden="true" /> <span class="text">Create database</span>
-        </Button>
-    </div>
-
-    {#if $databaseList?.total}
-        <CardContainer
-            total={$databaseList.total}
-            offset={$offset}
-            on:click={() => (showCreate = true)}>
-            {#each $databaseList.databases as database}
-                <GridItem1
-                    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}>
-                        <Pill button><i class="icon-duplicate" />Database ID</Pill>
-                    </Copy>
-                </GridItem1>
-            {/each}
-            <svelte:fragment slot="empty">
-                <p>Create a new database</p>
-            </svelte:fragment>
-        </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} />
-        </div>
-    {:else}
-        <Empty isButton single on:click={() => (showCreate = true)}>
-            <div class="u-text-center">
-                <p class="text u-line-height-1-5">Create your first Database to get started</p>
-                <p class="text u-line-height-1-5">Need a hand? Check out our documentation.</p>
-            </div>
-            <div class="u-flex u-gap-12">
-                <Button external href="#/" text>Documentation</Button>
-                <Button secondary>Create Database</Button>
-            </div>
-        </Empty>
-    {/if}
-</Container>
-
-<Create bind:showCreate on:created={handleCreate} />
diff --git a/src/routes/console/project-[project]/databases/[[page]]/+page.svelte b/src/routes/console/project-[project]/databases/[[page]]/+page.svelte
new file mode 100644
index 000000000..09a52eda2
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/[[page]]/+page.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { goto } from '$app/navigation';
+    import { Button } from '$lib/elements/forms';
+    import { Empty, Copy, GridItem1, CardContainer, Heading, Pagination } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Container } from '$lib/layout';
+    import { base } from '$app/paths';
+    import Create from '../_create.svelte';
+    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;
+
+    async function handleCreate(event: CustomEvent<Models.Database>) {
+        showCreate = false;
+        await goto(`${base}/console/project-${project}/databases/database-${event.detail.$id}`);
+    }
+</script>
+
+<Container>
+    <div class="u-flex u-gap-12 common-section u-main-space-between">
+        <Heading tag="h2" size="5">Databases</Heading>
+
+        <Button on:click={() => (showCreate = true)}>
+            <span class="icon-plus" aria-hidden="true" /> <span class="text">Create database</span>
+        </Button>
+    </div>
+
+    {#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> -->
+                    <svelte:fragment slot="title">{database.name}</svelte:fragment>
+
+                    <Copy value={database.$id}>
+                        <Pill button><i class="icon-duplicate" />Database ID</Pill>
+                    </Copy>
+                </GridItem1>
+            {/each}
+            <svelte:fragment slot="empty">
+                <p>Create a new database</p>
+            </svelte:fragment>
+        </CardContainer>
+
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <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
+            single
+            href="https://appwrite.io/docs/databases"
+            target="database"
+            on:click={() => (showCreate = true)} />
+    {/if}
+</Container>
+
+<Create bind:showCreate on:created={handleCreate} />
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 000000000..47cc014c6
--- /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 864baecc4..8c9dac6da 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';
@@ -17,9 +17,13 @@
     const create = async () => {
         try {
             const database = await sdkForProject.databases.create(id ? id : 'unique()', name);
-            name = id = null;
             showCreate = false;
             dispatch('created', database);
+            addNotification({
+                type: 'success',
+                message: `${name} has been created`
+            });
+            name = id = null;
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -29,32 +33,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
new file mode 100644
index 000000000..4460be30e
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/breadcrumbs.svelte
@@ -0,0 +1,23 @@
+<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-${$page.data.organization?.$id}`,
+            title: $organization?.name
+        },
+        {
+            href: `/console/project-${$page.data.project?.$id}`,
+            title: $project?.name
+        },
+        {
+            href: `/console/project-${$page.data.project?.$id}/databases`,
+            title: 'Databases'
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
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 000000000..766790be1
--- /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 000000000..fc344a75e
--- /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 62%
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 94b5c9ecd..a4187a6db 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,20 +69,19 @@
         </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)}>
-            <div class="u-text-center">
-                <p class="text u-line-height-1-5">Create your first collection to get started</p>
-                <p class="text u-line-height-1-5">Need a hand? Check out our documentation.</p>
-            </div>
-            <div class="u-flex u-gap-12 ">
-                <Button external href="#/" text>Documentation</Button>
-                <Button secondary>Create Collection</Button>
-            </div>
-        </Empty>
+        <Empty
+            single
+            href="https://appwrite.io/docs/databases#collection"
+            target="collection"
+            on:click={() => (showCreate = true)} />
     {/if}
 </Container>
 
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 000000000..d7c69f3ca
--- /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
new file mode 100644
index 000000000..0da8a6705
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/breadcrumbs.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { database } from './store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization.$id}`,
+            title: $organization.name
+        },
+        {
+            href: `/console/project-${$page.data.project.$id}`,
+            title: $page.data.project.name
+        },
+        {
+            href: `/console/project-${$page.data.project.$id}/databases`,
+            title: 'Databases'
+        },
+        {
+            href: `/console/project-${$page.data.project.$id}/databases/database-${$database.$id}`,
+            title: $database.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
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 000000000..eb15b0dca
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { onDestroy, onMount } from 'svelte';
+    import { collection } from './store';
+
+    let unsubscribe: { (): void };
+
+    onMount(() => {
+        unsubscribe = sdkForConsole.client.subscribe('console', (response) => {
+            if (
+                response.events.includes('databases.*.collections.*.attributes.*') ||
+                response.events.includes('databases.*.collections.*.indexes.*')
+            ) {
+                invalidate(Dependencies.COLLECTION);
+            }
+        });
+    });
+
+    onDestroy(() => {
+        if (unsubscribe) {
+            unsubscribe();
+        }
+    });
+</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 000000000..4cff24c2d
--- /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 }) => {
+    depends(Dependencies.COLLECTION);
+    await parent();
+
+    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 62%
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 3afdb591a..380dad784 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,26 @@
         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';
+    import CreateAttribute from '../createAttribute.svelte';
 
-    const projectId = $page.params.project;
-    const databaseId = $page.params.database;
-    const offset = createPersistentPagination($pageLimit);
+    export let data: PageData;
+    let showCreateAttribute = false;
 
     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 +46,7 @@
     </div>
 
     {#if $collection?.attributes?.length}
-        {#if $documentList?.total}
+        {#if data.documents.total}
             <TableScroll>
                 <TableHeader>
                     <TableCellHead>Document ID</TableCellHead>
@@ -62,9 +55,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,17 +77,27 @@
             </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}>
-                <p>Create your first document to get started</p>
-            </Empty>
+            <Empty
+                single
+                href="https://appwrite.io/docs/databases#create-documents"
+                target="document"
+                on:click={openWizard} />
         {/if}
     {:else}
-        <Empty single>
-            <p>Create your first attribute to get started</p>
-        </Empty>
+        <Empty
+            single
+            href="https://appwrite.io/docs/databases#attributes"
+            target="attribute"
+            on:click={() => (showCreateAttribute = true)} />
     {/if}
 </Container>
+
+<CreateAttribute bind:showCreate={showCreateAttribute} />
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 000000000..7c19bb9dc
--- /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 000000000..60b725825
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/activity/[[page]]/+page.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Activity } from '$lib/layout';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
+    const path = `/console/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}/activity`;
+</script>
+
+<Activity {path} logs={data.logs} offset={data.offset} />
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 000000000..bfb63d8c6
--- /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 81%
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 5dd2ee726..0b7e693ad 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,17 +9,14 @@
         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 type { Attributes } from '../store';
+    import { DropList, DropListItem, Empty, Heading } from '$lib/components';
+    import { attributes, type Attributes } from '../store';
     import { Container } from '$lib/layout';
     import { Pill } from '$lib/elements';
-    import Create from './createAttribute.svelte';
+    import Create from '../createAttribute.svelte';
     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';
 
     let showDropdown = [];
     let selectedAttribute: Attributes = null;
@@ -27,8 +24,6 @@
     let showDelete = false;
     let showOverview = false;
     let showCreateIndex = false;
-
-    const offset = createPersistentPagination($pageLimit);
 </script>
 
 <Container>
@@ -41,7 +36,7 @@
         </Button>
     </div>
 
-    {#if $collection?.attributes.length}
+    {#if $attributes.length}
         <Table>
             <TableHeader>
                 <TableCellHead>Key</TableCellHead>
@@ -50,7 +45,7 @@
                 <TableCellHead width={30} />
             </TableHeader>
             <TableBody>
-                {#each $collection.attributes as attribute, index}
+                {#each $attributes as attribute, index}
                     <TableRow>
                         <TableCell title="Key">
                             <div class="u-flex u-main-space-between">
@@ -112,22 +107,18 @@
             </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: {$attributes.length}</p>
         </div>
     {:else}
-        <Empty isButton single on:click={() => (showCreate = true)}>
-            <p>Crate your first attribute to get started</p>
-        </Empty>
+        <Empty
+            single
+            href="https://appwrite.io/docs/databases#attributes"
+            target="attribute"
+            on:click={() => (showCreate = true)} />
     {/if}
 </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/boolean.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/boolean.svelte
new file mode 100644
index 000000000..a2ab21070
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/boolean.svelte
@@ -0,0 +1,67 @@
+<script context="module" lang="ts">
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    export async function submitBoolean(
+        databaseId: string,
+        collectionId: string,
+        key: string,
+        data: Partial<Models.AttributeBoolean>
+    ) {
+        await sdkForProject.databases.createBooleanAttribute(
+            databaseId,
+            collectionId,
+            key,
+            data.required,
+            data.default ? data.default : undefined,
+            data.array
+        );
+    }
+</script>
+
+<script lang="ts">
+    import { InputChoice, InputSelect } from '$lib/elements/forms';
+
+    export let selectedAttribute: Models.AttributeBoolean = null;
+    export let data: Partial<Models.AttributeBoolean> = {
+        required: false,
+        array: false,
+        default: null
+    };
+
+    $: if (selectedAttribute) {
+        data.required = selectedAttribute.required;
+        data.array = selectedAttribute.array;
+        data.default = selectedAttribute.default;
+    }
+
+    $: if (data.required || data.array) {
+        data.default = null;
+    }
+</script>
+
+<InputSelect
+    id="default"
+    label="Default value"
+    placeholder="Select a value"
+    options={[
+        { label: 'Select a value', value: null },
+        { label: 'True', value: true },
+        { label: 'False', value: false }
+    ]}
+    bind:value={data.default}
+    disabled={!!selectedAttribute || data.array || data.required} />
+<InputChoice
+    id="required"
+    label="Required"
+    bind:value={data.required}
+    disabled={!!selectedAttribute || data.array}>
+    Indicate whether this is a required attribute
+</InputChoice>
+<InputChoice
+    id="array"
+    label="Array"
+    bind:value={data.array}
+    disabled={!!selectedAttribute || data.required}>
+    Indicate whether this attribute should act as an array
+</InputChoice>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte
new file mode 100644
index 000000000..bd79b6643
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte
@@ -0,0 +1,54 @@
+<script context="module" lang="ts">
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    export async function submitDatetime(
+        databaseId: string,
+        collectionId: string,
+        key: string,
+        data: Partial<Models.AttributeDatetime>
+    ) {
+        await sdkForProject.databases.createDatetimeAttribute(
+            databaseId,
+            collectionId,
+            key,
+            data.required,
+            data.default ? data.default : undefined,
+            data.array
+        );
+    }
+</script>
+
+<script lang="ts">
+    import { InputChoice, InputDateTime } from '$lib/elements/forms';
+
+    export let selectedAttribute: Models.AttributeDatetime = null;
+    export let data: Partial<Models.AttributeDatetime>;
+
+    $: if (selectedAttribute) {
+        data.required = selectedAttribute.required;
+        data.array = selectedAttribute.array;
+        data.default = selectedAttribute.default;
+    }
+
+    $: if (data.required) {
+        data.default = null;
+    }
+</script>
+
+<InputDateTime
+    id="default"
+    label="Default value"
+    bind:value={data.default}
+    disabled={data.required}
+    readonly={!!selectedAttribute} />
+<InputChoice
+    id="required"
+    label="Required"
+    bind:value={data.required}
+    disabled={!!selectedAttribute}>
+    Indicate whether this is a required attribute
+</InputChoice>
+<InputChoice id="array" label="Array" bind:value={data.array} disabled={!!selectedAttribute}>
+    Indicate whether this attribute should act as an array
+</InputChoice>
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 54%
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 edfa1795e..b9497a571 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,14 @@
                 $collection.$id,
                 selectedAttribute.key
             );
-            collection.removeAttribute(selectedAttribute);
+            invalidate(Dependencies.COLLECTION);
             showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `Attribute has been deleted`
+            });
             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 +39,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
new file mode 100644
index 000000000..6e5d4d13e
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/email.svelte
@@ -0,0 +1,59 @@
+<script context="module" lang="ts">
+    import type { Models } from '@aw-labs/appwrite-console';
+
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    export async function submitEmail(
+        databaseId: string,
+        collectionId: string,
+        key: string,
+        data: Partial<Models.AttributeEmail>
+    ) {
+        await sdkForProject.databases.createEmailAttribute(
+            databaseId,
+            collectionId,
+            key,
+            data.required,
+            data.default ? data.default : undefined,
+            data.array
+        );
+    }
+</script>
+
+<script lang="ts">
+    import { InputChoice, InputEmail } from '$lib/elements/forms';
+
+    export let selectedAttribute: Models.AttributeEmail = null;
+    export let data: Partial<Models.AttributeEmail>;
+
+    $: if (selectedAttribute) {
+        data.required = selectedAttribute.required;
+        data.array = selectedAttribute.array;
+        data.default = selectedAttribute.default;
+    }
+
+    $: if (data.required || data.array) {
+        data.default = null;
+    }
+</script>
+
+<InputEmail
+    id="default"
+    label="Default value"
+    bind:value={data.default}
+    disabled={data.required}
+    readonly={!!selectedAttribute} />
+<InputChoice
+    id="required"
+    label="Required"
+    bind:value={data.required}
+    disabled={!!selectedAttribute || data.array}>
+    Indicate whether this is a required attribute
+</InputChoice>
+<InputChoice
+    id="array"
+    label="Array"
+    bind:value={data.array}
+    disabled={!!selectedAttribute || data.required}>
+    Indicate whether this attribute should act as an array
+</InputChoice>
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
new file mode 100644
index 000000000..52a45d972
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/enum.svelte
@@ -0,0 +1,73 @@
+<script context="module" lang="ts">
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    export async function submitEnum(
+        databaseId: string,
+        collectionId: string,
+        key: string,
+        data: Partial<Models.AttributeEnum>
+    ) {
+        await sdkForProject.databases.createEnumAttribute(
+            databaseId,
+            collectionId,
+            key,
+            data.elements,
+            data.required,
+            data.default ? data.default : undefined,
+            data.array
+        );
+    }
+</script>
+
+<script lang="ts">
+    import { InputChoice, InputSelect, InputTags } from '$lib/elements/forms';
+
+    export let selectedAttribute: Models.AttributeEnum;
+    export let data: Partial<Models.AttributeEnum>;
+
+    $: options =
+        data.elements?.map((e) => ({
+            value: e,
+            label: e
+        })) ?? [];
+
+    $: if (selectedAttribute) {
+        ({
+            required: data.required,
+            array: data.array,
+            elements: data.elements,
+            default: data.default
+        } = selectedAttribute);
+    }
+    $: if (data.required || data.array) {
+        data.default = null;
+    }
+</script>
+
+<InputTags
+    id="elements"
+    label="Elements"
+    bind:tags={data.elements}
+    placeholder="Add elements here"
+    readonly={!!selectedAttribute} />
+<InputSelect
+    id="default"
+    label="Default value"
+    bind:options
+    bind:value={data.default}
+    disabled={!!selectedAttribute || data.required} />
+<InputChoice
+    id="required"
+    label="Required"
+    bind:value={data.required}
+    disabled={!!selectedAttribute || data.array}>
+    Indicate whether this is a required attribute
+</InputChoice>
+<InputChoice
+    id="array"
+    label="Array"
+    bind:value={data.array}
+    disabled={!!selectedAttribute || data.required}>
+    Indicate whether this attribute should act as an array
+</InputChoice>
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
new file mode 100644
index 000000000..3686eead7
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte
@@ -0,0 +1,76 @@
+<script context="module" lang="ts">
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    export async function submitFloat(
+        databaseId: string,
+        collectionId: string,
+        key: string,
+        data: Partial<Models.AttributeFloat>
+    ) {
+        await sdkForProject.databases.createFloatAttribute(
+            databaseId,
+            collectionId,
+            key,
+            data.required,
+            data.min,
+            data.max,
+            data.default ? data.default : undefined,
+            data.array
+        );
+    }
+</script>
+
+<script lang="ts">
+    import { InputNumber, InputChoice } from '$lib/elements/forms';
+
+    export let selectedAttribute: Models.AttributeFloat;
+    export let data: Partial<Models.AttributeFloat> = {
+        required: false,
+        min: 0,
+        max: 0,
+        default: 0,
+        array: false
+    };
+
+    $: if (selectedAttribute) {
+        ({
+            required: data.required,
+            array: data.array,
+            min: data.min,
+            max: data.max
+        } = selectedAttribute);
+        data.default = selectedAttribute.default;
+    }
+
+    $: if (data.required || data.array) {
+        data.default = null;
+    }
+</script>
+
+<InputNumber id="min" label="Min" bind:value={data.min} readonly={!!selectedAttribute} />
+<InputNumber id="max" label="Max" bind:value={data.max} readonly={!!selectedAttribute} />
+
+<InputNumber
+    id="default"
+    label="Default value"
+    min={data.min}
+    max={data.max}
+    bind:value={data.default}
+    disabled={data.required || data.array}
+    readonly={!!selectedAttribute}
+    step="any" />
+<InputChoice
+    id="required"
+    label="Required"
+    bind:value={data.required}
+    disabled={!!selectedAttribute || data.array}>
+    Indicate whether this is a required attribute
+</InputChoice>
+<InputChoice
+    id="array"
+    label="Array"
+    bind:value={data.array}
+    disabled={!!selectedAttribute || data.required}>
+    Indicate whether this attribute should act as an array
+</InputChoice>
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
new file mode 100644
index 000000000..4c8c75f3c
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte
@@ -0,0 +1,74 @@
+<script context="module" lang="ts">
+    import { sdkForProject } from '$lib/stores/sdk';
+    import type { Models } from '@aw-labs/appwrite-console';
+
+    export async function submitInteger(
+        databaseId: string,
+        collectionId: string,
+        key: string,
+        data: Partial<Models.AttributeInteger>
+    ) {
+        await sdkForProject.databases.createIntegerAttribute(
+            databaseId,
+            collectionId,
+            key,
+            data.required,
+            data.min,
+            data.max,
+            data.default ? data.default : undefined,
+            data.array
+        );
+    }
+</script>
+
+<script lang="ts">
+    import { InputNumber, InputChoice } from '$lib/elements/forms';
+
+    export let selectedAttribute: Models.AttributeInteger;
+    export let data: Partial<Models.AttributeInteger> = {
+        required: false,
+        min: 0,
+        max: 0,
+        default: 0,
+        array: false
+    };
+
+    $: if (selectedAttribute) {
+        ({
+            required: data.required,
+            array: data.array,
+            min: data.min,
+            max: data.max,
+            default: data.default
+        } = selectedAttribute);
+    }
+    $: if (data.required || data.array) {
+        data.default = null;
+    }
+</script>
+
+<InputNumber id="min" label="Min" bind:value={data.min} readonly={!!selectedAttribute} />
+<InputNumber id="max" label="Max" bind:value={data.max} readonly={!!selectedAttribute} />
+
+<InputNumber
+    id="default"
+    label="Default value"
+    min={data.min}
+    max={data.max}
+    bind:value={data.default}
+    disabled={data.required || data.array}
+    readonly={!!selectedAttribute} />
+<InputChoice
+    id="required"
+    label="Required"
+    bind:value={data.required}
+    disabled={!!selectedAttribute || data.array}>
+    Indicate whether this is a required attribute
+</InputChoice>
+<InputChoice
+    id="array"
+    label="Array"
+    bind:value={data.array}
+    disabled={!!selectedAttribute || data.required}>
+    Indicate whether this attribute should act as an array
+</InputChoice>
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
new file mode 100644
index 000000000..154be4e57
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/ip.svelte
@@ -0,0 +1,55 @@
+<script context="module" lang="ts">
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    export async function submitIp(
+        databaseId: string,
+        collectionId: string,
+        key: string,
+        data: Partial<Models.AttributeIp>
+    ) {
+        await sdkForProject.databases.createIpAttribute(
+            databaseId,
+            collectionId,
+            key,
+            data.required,
+            data.default ? data.default : undefined,
+            data.array
+        );
+    }
+</script>
+
+<script lang="ts">
+    import { InputText, InputChoice } from '$lib/elements/forms';
+
+    export let selectedAttribute: Models.AttributeIp;
+    export let data: Partial<Models.AttributeIp>;
+
+    $: if (selectedAttribute) {
+        ({ required: data.required, array: data.array, default: data.default } = selectedAttribute);
+    }
+    $: if (data.required || data.array) {
+        data.default = null;
+    }
+</script>
+
+<InputText
+    id="default"
+    label="Default value"
+    bind:value={data.default}
+    disabled={data.required || data.array}
+    readonly={!!selectedAttribute} />
+<InputChoice
+    id="required"
+    label="Required"
+    bind:value={data.required}
+    disabled={!!selectedAttribute || data.array}>
+    Indicate whether this is a required attribute
+</InputChoice>
+<InputChoice
+    id="array"
+    label="Array"
+    bind:value={data.array}
+    disabled={!!selectedAttribute || data.required}>
+    Indicate whether this attribute should act as an array
+</InputChoice>
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 000000000..8d89a65c5
--- /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
new file mode 100644
index 000000000..c8faf10e9
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts
@@ -0,0 +1,88 @@
+import type { SvelteComponent } from 'svelte';
+import { writable } from 'svelte/store';
+import Boolean, { submitBoolean } from './boolean.svelte';
+import Email, { submitEmail } from './email.svelte';
+import Enum, { submitEnum } from './enum.svelte';
+import Float, { submitFloat } from './float.svelte';
+import Integer, { submitInteger } from './integer.svelte';
+import Ip, { submitIp } from './ip.svelte';
+import String, { submitString } from './string.svelte';
+import Url, { submitUrl } from './url.svelte';
+import Datetime, { submitDatetime } from './datetime.svelte';
+import type { Attributes } from '../store';
+
+export type Option = {
+    name: string;
+    component: typeof SvelteComponent;
+    type: 'string' | 'integer' | 'double' | 'boolean' | 'datetime';
+    func: (
+        databaseId: string,
+        collectionId: string,
+        key: string,
+        data: Partial<Attributes>
+    ) => Promise<void>;
+    format?: 'email' | 'ip' | 'url' | 'enum';
+};
+
+export const options: Option[] = [
+    {
+        name: 'String',
+        component: String,
+        type: 'string',
+        func: submitString
+    },
+    {
+        name: 'Integer',
+        component: Integer,
+        type: 'integer',
+        func: submitInteger
+    },
+    {
+        name: 'Float',
+        component: Float,
+        type: 'double',
+        func: submitFloat
+    },
+    {
+        name: 'Boolean',
+        component: Boolean,
+        type: 'boolean',
+        func: submitBoolean
+    },
+    {
+        name: 'Datetime',
+        component: Datetime,
+        type: 'datetime',
+        func: submitDatetime
+    },
+    {
+        name: 'Email',
+        component: Email,
+        type: 'string',
+        format: 'email',
+        func: submitEmail
+    },
+    {
+        name: 'IP',
+        component: Ip,
+        type: 'string',
+        format: 'ip',
+        func: submitIp
+    },
+    {
+        name: 'URL',
+        component: Url,
+        type: 'string',
+        format: 'url',
+        func: submitUrl
+    },
+    {
+        name: 'Enum',
+        component: Enum,
+        type: 'string',
+        format: 'enum',
+        func: submitEnum
+    }
+];
+
+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
new file mode 100644
index 000000000..9ecc9c513
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
@@ -0,0 +1,73 @@
+<script context="module" lang="ts">
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    export async function submitString(
+        databaseId: string,
+        collectionId: string,
+        key: string,
+        data: Partial<Models.AttributeString>
+    ) {
+        await sdkForProject.databases.createStringAttribute(
+            databaseId,
+            collectionId,
+            key,
+            data.size,
+            data.required,
+            data.default ? (data.default as string) : undefined,
+            data.array
+        );
+    }
+</script>
+
+<script lang="ts">
+    import { InputNumber, InputText, InputChoice } from '$lib/elements/forms';
+
+    export let selectedAttribute: Models.AttributeString;
+    export let data: Partial<Models.AttributeString> = {
+        required: false,
+        size: 0,
+        default: null,
+        array: false
+    };
+
+    $: if (selectedAttribute) {
+        ({
+            required: data.required,
+            array: data.array,
+            size: data.size,
+            default: data.default
+        } = selectedAttribute);
+    }
+    $: if (data.required || data.array) {
+        data.default = null;
+    }
+</script>
+
+<InputNumber
+    id="size"
+    label="Size"
+    bind:value={data.size}
+    required
+    readonly={!!selectedAttribute} />
+<InputText
+    id="default"
+    label="Default value"
+    bind:value={data.default}
+    maxlength={data.size}
+    disabled={data.required || data.array}
+    readonly={!!selectedAttribute} />
+<InputChoice
+    id="required"
+    label="Required"
+    bind:value={data.required}
+    disabled={!!selectedAttribute || data.array}>
+    Indicate whether this is a required attribute
+</InputChoice>
+<InputChoice
+    id="array"
+    label="Array"
+    bind:value={data.array}
+    disabled={!!selectedAttribute || data.required}>
+    Indicate whether this attribute should act as an array
+</InputChoice>
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
new file mode 100644
index 000000000..d8fd01633
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte
@@ -0,0 +1,55 @@
+<script context="module" lang="ts">
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    export async function submitUrl(
+        databaseId: string,
+        collectionId: string,
+        key: string,
+        data: Partial<Models.AttributeUrl>
+    ) {
+        await sdkForProject.databases.createUrlAttribute(
+            databaseId,
+            collectionId,
+            key,
+            data.required,
+            data.default ? data.default : undefined,
+            data.array
+        );
+    }
+</script>
+
+<script lang="ts">
+    import { InputText, InputChoice } from '$lib/elements/forms';
+
+    export let selectedAttribute: Models.AttributeUrl;
+    export let data: Partial<Models.AttributeUrl>;
+
+    $: if (selectedAttribute) {
+        ({ required: data.required, array: data.array, default: data.default } = selectedAttribute);
+    }
+    $: if (data.required || data.array) {
+        data.default = null;
+    }
+</script>
+
+<InputText
+    id="default"
+    label="Default value"
+    bind:value={data.default}
+    disabled={data.required || data.array}
+    readonly={!!selectedAttribute} />
+<InputChoice
+    id="required"
+    label="Required"
+    bind:value={data.required}
+    disabled={!!selectedAttribute || data.array}>
+    Indicate whether this is a required attribute
+</InputChoice>
+<InputChoice
+    id="array"
+    label="Array"
+    bind:value={data.array}
+    disabled={!!selectedAttribute || data.required}>
+    Indicate whether this attribute should act as an array
+</InputChoice>
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 000000000..07620ef93
--- /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]/createAttribute.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
new file mode 100644
index 000000000..c4fe7b59f
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { option, options } from './attributes/store';
+    import { Button, InputText, FormList, InputSelect } from '$lib/elements/forms';
+    import { goto, invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { page } from '$app/stores';
+    import { addNotification } from '$lib/stores/notifications';
+    import { base } from '$app/paths';
+    import type { Attributes } from './store';
+
+    export let showCreate = false;
+
+    let key: string = null;
+    let selectedOption = null;
+    let data: Partial<Attributes> = {
+        required: false,
+        array: false,
+        default: null
+    };
+    const databaseId = $page.params.database;
+    const collectionId = $page.params.collection;
+
+    async function submit() {
+        try {
+            await $option.func(databaseId, collectionId, key, data);
+            invalidate(Dependencies.COLLECTION);
+            if (!$page.url.pathname.includes('attributes')) {
+                goto(
+                    `${base}/console/project-${$page.params.project}/databases/database-${databaseId}/collection-${collectionId}/attributes`
+                );
+            }
+            addNotification({
+                type: 'success',
+                message: `Attribute ${key} has been created`
+            });
+            showCreate = false;
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+
+    $: if (selectedOption) {
+        $option = options.find((option) => option.name === selectedOption);
+    }
+
+    $: if (!showCreate) {
+        key = null;
+        selectedOption = null;
+        $option = null;
+    }
+</script>
+
+<Modal size="big" bind:show={showCreate} on:submit={submit}>
+    <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}
+                bind:data
+                on:close={() => ($option = null)} />
+        {/if}
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
+        <Button submit disabled={!selectedOption}>Create</Button>
+    </svelte:fragment>
+</Modal>
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 76%
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 0e0172813..259f157b5 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,29 +11,25 @@
     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();
-    });
+    onMount(initializeDocument);
 
-    const initializeDocument = () => {
-        $createDocument.attributes = $attributeList?.attributes?.filter(
-            (a) => a.status === 'available'
-        );
-        $attributeList.attributes.forEach((attr) => {
+    function initializeDocument() {
+        $createDocument.attributes = $attributes.filter((a) => a.status === 'available');
+        $attributes.forEach((attr) => {
             if (attr.array) {
                 $createDocument.document[attr.key] = [null];
             } else {
                 $createDocument.document[attr.key] = null;
             }
         });
-    };
+    }
 
-    const create = async () => {
+    async function create() {
         try {
             await sdkForProject.databases.createDocument(
                 databaseId,
@@ -46,7 +42,7 @@
                 message: 'Document has been created',
                 type: 'success'
             });
-            documentList.load(databaseId, collectionId);
+            invalidate(Dependencies.DOCUMENTS);
             wizard.hide();
         } catch (error) {
             addNotification({
@@ -54,10 +50,9 @@
                 type: 'error'
             });
         }
-    };
+    }
 
     onDestroy(() => {
-        initializeDocument();
         $createDocument.permissions = [];
     });
 
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 000000000..215b93a8a
--- /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 000000000..ac739c669
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/+layout.ts
@@ -0,0 +1,51 @@
+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';
+import type { Attributes } from '../store';
+
+export const load: LayoutLoad = async ({ params, parent, depends }) => {
+    depends(Dependencies.DOCUMENT);
+    const { collection } = await parent();
+
+    try {
+        const document = await sdkForProject.databases.getDocument(
+            params.database,
+            params.collection,
+            params.document
+        );
+
+        /**
+         * Sanitize DateTime to remove UTC Timezone section.
+         */
+        collection.attributes.forEach((attribute) => {
+            const { type, key, array } = attribute as unknown as Attributes;
+            if (type === 'datetime') {
+                if (array) {
+                    document[key] = document[key].map((n: string) => {
+                        if (!n) {
+                            return '';
+                        }
+                        return new Date(n).toISOString().slice(0, 23);
+                    });
+                } else {
+                    if (document[key]) {
+                        document[key] = new Date(document[key]).toISOString().slice(0, 23);
+                    } else {
+                        document[key] = '';
+                    }
+                }
+            }
+        });
+
+        return {
+            header: Header,
+            breadcrumbs: Breadcrumbs,
+            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 000000000..4bc625c9b
--- /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 { symmetricDifference } 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 (symmetricDifference(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 danger>
+        <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 u-trim-1">{$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 000000000..15ee2d818
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/activity/[[page]]/+page.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    import { page } from '$app/stores';
+    import { Activity } from '$lib/layout';
+
+    export let data: PageData;
+    const path = `/console/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}/document-${$page.params.document}/activity`;
+</script>
+
+<Activity {path} logs={data.logs} offset={data.offset} />
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 000000000..aa93b9396
--- /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 87%
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
index a21f61c07..65f903298 100644
--- 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
@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { Models } from '@aw-labs/appwrite-console';
     import Boolean from './attributes/_boolean.svelte';
+    import Datetime from './attributes/_datetime.svelte';
     import Enum from './attributes/_enum.svelte';
     import Integer from './attributes/_integer.svelte';
     import String from './attributes/_string.svelte';
@@ -8,7 +9,6 @@
     export let id: string;
     export let label: string;
     export let value: string | number | boolean;
-    export let index: number = null;
     export let attribute:
         | Models.AttributeBoolean
         | Models.AttributeEmail
@@ -17,13 +17,15 @@
         | Models.AttributeInteger
         | Models.AttributeIp
         | Models.AttributeString
+        | Models.AttributeDatetime
         | Models.AttributeUrl;
 
     const attributesTypeMap = {
         string: String,
         integer: Integer,
         double: Integer,
-        boolean: Boolean
+        boolean: Boolean,
+        datetime: Datetime
     };
 
     const attributesFormatMap = {
@@ -35,13 +37,12 @@
 </script>
 
 {#if attribute.type in attributesTypeMap}
-    {#if 'format' in attribute}
+    {#if 'format' in attribute && attribute.format}
         <svelte:component
             this={attributesFormatMap[attribute.format]}
             {id}
             {label}
             {attribute}
-            {index}
             bind:value />
     {:else}
         <svelte:component
@@ -49,7 +50,6 @@
             {id}
             {label}
             {attribute}
-            {index}
             bind:value />
     {/if}
 {/if}
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/_datetime.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/_datetime.svelte
new file mode 100644
index 000000000..f6ee0dfdb
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/_datetime.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { InputDateTime } from '$lib/elements/forms';
+    import type { Models } from '@aw-labs/appwrite-console';
+
+    export let id: string;
+    export let label: string;
+    export let value: string;
+    export let attribute: Models.AttributeDatetime;
+</script>
+
+<InputDateTime {id} {label} showLabel={!!label?.length} required={attribute.required} bind:value />
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 000000000..788e29309
--- /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 56%
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 80d570850..e69daa4c5 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;
 
@@ -20,8 +20,12 @@
                 $page.params.document
             );
             showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `Document has been deleted`
+            });
             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 +36,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 62%
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 01fff58ad..b5dab3650 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,45 +1,66 @@
 <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 type { Models } from '@aw-labs/appwrite-console';
+    import { Dependencies } from '$lib/constants';
+    import { invalidate } from '$app/navigation';
+    import Attribute from './attribute.svelte';
 
-    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;
         }
     }
 
-    const updateData = async () => {
+    async function updateData() {
         try {
             await sdkForProject.databases.updateDocument(
                 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!',
@@ -51,7 +72,26 @@
                 type: 'error'
             });
         }
-    };
+    }
+
+    function addArrayItem(key: string) {
+        work.update((n) => {
+            if (!Array.isArray(n[key])) {
+                n[key] = [];
+            }
+            n[key].push(null);
+
+            return n;
+        });
+    }
+
+    function removeArrayItem(key: string, index: number) {
+        work.update((n) => {
+            n[key].splice(index, 1);
+
+            return n;
+        });
+    }
 </script>
 
 <CardGrid>
@@ -62,20 +102,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].keys()] as 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)}>
+                                        disabled={$work[attribute.key].length === 1}
+                                        on:click={() => removeArrayItem(attribute.key, index)}>
                                         <span class="icon-x" aria-hidden="true" />
                                     </Button>
                                 </div>
@@ -87,7 +127,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,12 +140,11 @@
 
                     <Button
                         text
-                        disabled={$doc[attribute.key][$doc[attribute.key].length - 1] === null}
-                        on:click={() => {
-                            doc.addAttribute(attribute.key);
-                        }}>
+                        noMargin
+                        disabled={$work[attribute.key][$work[attribute.key].length - 1] === null}
+                        on:click={() => addArrayItem(attribute.key)}>
                         <span class="icon-plus" aria-hidden="true" />
-                        <span class="text"> Add item</span>
+                        <span class="text">Add item</span>
                     </Button>
                 {:else}
                     <ul class="form-list">
@@ -113,7 +152,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
new file mode 100644
index 000000000..7cdec919c
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/header.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Copy, Tab, Tabs } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    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 tabs = [
+        {
+            href: path,
+            title: 'Overview'
+        },
+        {
+            href: `${path}/activity`,
+            title: 'Activity',
+            hasChildren: true
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <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" />
+                Document ID
+            </Pill>
+        </Copy>
+    </svelte:fragment>
+
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
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 000000000..2f8a7ddae
--- /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
new file mode 100644
index 000000000..42dcec3c3
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/header.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Copy, Tab, Tabs } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    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 tabs = [
+        {
+            href: path,
+            title: 'Documents',
+            hasChildren: true
+        },
+        {
+            href: `${path}/attributes`,
+            title: 'Attributes'
+        },
+        {
+            href: `${path}/indexes`,
+            title: 'Indexes'
+        },
+        {
+            href: `${path}/activity`,
+            title: 'Activity',
+            hasChildren: true
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage'
+        },
+        {
+            href: `${path}/settings`,
+            title: 'Settings'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <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
+            </Pill>
+        </Copy>
+    </svelte:fragment>
+
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
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
new file mode 100644
index 000000000..a5e6f7407
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
@@ -0,0 +1,141 @@
+<script lang="ts">
+    import { Empty, DropList, DropListItem, Heading } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import {
+        Table,
+        TableHeader,
+        TableBody,
+        TableCellHead,
+        TableCell,
+        TableCellText,
+        TableRow
+    } from '$lib/elements/table';
+    import { Container } from '$lib/layout';
+    import { collection, indexes } from '../store';
+    import Delete from './deleteIndex.svelte';
+    import Create from './createIndex.svelte';
+    import Overview from './overviewIndex.svelte';
+    import CreateAttribute from '../createAttribute.svelte';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
+
+    let showDropdown = [];
+    let selectedIndex: Models.Index = null;
+    let showCreateIndex = false;
+    let showOverview = false;
+    let showDelete = false;
+    let showCreateAttribute = false;
+
+    const handleDelete = async () => {
+        invalidate(Dependencies.COLLECTION);
+    };
+</script>
+
+<Container>
+    <div class="u-flex u-gap-12 common-section u-main-space-between">
+        <Heading tag="h2" size="5">Indexes</Heading>
+
+        <Button
+            disabled={!$collection?.attributes?.length}
+            on:click={() => (showCreateIndex = true)}>
+            <span class="icon-plus" aria-hidden="true" />
+            <span class="text">Create index</span>
+        </Button>
+    </div>
+    {#if $collection?.attributes?.length}
+        {#if $indexes.length}
+            <Table>
+                <TableHeader>
+                    <TableCellHead>Key</TableCellHead>
+                    <TableCellHead>Type</TableCellHead>
+                    <TableCellHead>Attributes</TableCellHead>
+                    <TableCellHead>Asc/Desc</TableCellHead>
+                    <TableCellHead width={30} />
+                </TableHeader>
+                <TableBody>
+                    {#each $indexes as index, i}
+                        <TableRow>
+                            <TableCell title="Key">
+                                <div class="u-flex u-main-space-between">
+                                    <span class="text u-trim"> {index.key}</span>
+                                    {#if index.status !== 'available'}
+                                        <Pill
+                                            warning={index.status === 'processing'}
+                                            danger={['deleting', 'stuck', 'failed'].includes(
+                                                index.status
+                                            )}>
+                                            {index.status}
+                                        </Pill>
+                                    {/if}
+                                </div>
+                            </TableCell>
+                            <TableCellText title="Type">{index.type}</TableCellText>
+                            <TableCellText title="Attributes">
+                                {index.attributes}
+                            </TableCellText>
+                            <TableCellText title="ASC/DESC">
+                                {index.orders}
+                            </TableCellText>
+                            <TableCell showOverflow>
+                                <DropList
+                                    bind:show={showDropdown[i]}
+                                    placement="bottom-start"
+                                    noArrow>
+                                    <button
+                                        class="button is-only-icon is-text"
+                                        aria-label="More options"
+                                        on:click|preventDefault={() => {
+                                            showDropdown[i] = !showDropdown[i];
+                                        }}>
+                                        <span class="icon-dots-horizontal" aria-hidden="true" />
+                                    </button>
+                                    <svelte:fragment slot="list">
+                                        <DropListItem
+                                            icon="eye"
+                                            on:click={() => {
+                                                selectedIndex = index;
+                                                showOverview = true;
+                                            }}>Overview</DropListItem>
+
+                                        <DropListItem
+                                            icon="trash"
+                                            on:click={() => {
+                                                selectedIndex = index;
+                                                showDelete = true;
+                                            }}>Delete</DropListItem>
+                                    </svelte:fragment>
+                                </DropList>
+                            </TableCell>
+                        </TableRow>
+                    {/each}
+                </TableBody>
+            </Table>
+            <div class="u-flex u-margin-block-start-32 u-main-space-between">
+                <p class="text">Total results: {$indexes.length}</p>
+            </div>
+        {:else}
+            <Empty
+                single
+                href="https://appwrite.io/docs/databases#indexes"
+                target="index"
+                on:click={() => (showCreateIndex = true)} />
+        {/if}
+    {:else}
+        <Empty
+            single
+            target="attribute"
+            href="https://appwrite.io/docs/databases#attributes"
+            on:click={() => (showCreateAttribute = true)} />
+    {/if}
+</Container>
+
+<Create bind:showCreateIndex />
+
+{#if selectedIndex}
+    <Delete bind:showDelete {selectedIndex} on:deleted={handleDelete} />
+    <Overview bind:showOverview {selectedIndex} />
+{/if}
+
+<CreateAttribute bind:showCreate={showCreateAttribute} />
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 000000000..b27071f03
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
@@ -0,0 +1,190 @@
+<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';
+    import Select from './select.svelte';
+
+    export let showCreateIndex = false;
+    export let externalAttribute: Attributes = null;
+
+    const databaseId = $page.params.database;
+
+    let error: string;
+    let key: string = null;
+    let types = [
+        { value: 'key', label: 'Key' },
+        { value: 'unique', label: 'Unique' },
+        { value: 'fulltext', label: 'FullText' }
+    ];
+    let newAttr = false;
+    let selectedType = 'key';
+    $: 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 = [];
+        selectedOrder = selectedAttribute = '';
+        selectedType = 'key';
+        key = null;
+    }
+    const created = async () => {
+        if (key && selectedAttribute && selectedOrder && selectedType) {
+            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.COLLECTION);
+                addNotification({
+                    message: 'Index has been created',
+                    type: 'success'
+                });
+            } catch (error) {
+                addNotification({
+                    message: error.message,
+                    type: 'error'
+                });
+            }
+
+            showCreateIndex = false;
+        } else error = 'All fields are required';
+    };
+</script>
+
+<Modal bind:error 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 />
+        <InputSelect options={types} id="type" label="Index type" bind:value={selectedType} />
+
+        {#if attributeList?.length}
+            {#each attributeList as index, i}
+                <li class="form-item is-multiple">
+                    <div class="form-item-part u-stretch">
+                        <Select id="attribute" label="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>
+                    </div>
+                    <div class="form-item-part u-stretch">
+                        <Select id="order" label="Order" bind:value={index.order}>
+                            <option value="ASC"> ASC </option>
+                            <option value="DESC"> DESC </option>
+                        </Select>
+                    </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" style="align-items: flex-start;">
+                    <Select id="attribute" label="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>
+                </div>
+                <div class="form-item-part u-stretch">
+                    <Select id="order" label="Order" bind:value={selectedOrder}>
+                        <option value="" disabled selected hidden>Select Order</option>
+
+                        <option value="ASC"> ASC </option>
+                        <option value="DESC"> DESC </option>
+                    </Select>
+                </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
+            noMargin
+            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 61%
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 aadfe3296..f33c28a36 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';
@@ -22,6 +22,10 @@
                 selectedIndex.key
             );
             showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `Index has been deleted`
+            });
             dispatch('deleted');
         } catch (error) {
             addNotification({
@@ -32,16 +36,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]/indexes/select.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/select.svelte
new file mode 100644
index 000000000..05344c804
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/select.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+    import Helper from '$lib/elements/forms/helper.svelte';
+
+    export let value: string;
+    export let id: string;
+    export let label: string;
+    export let required = false;
+
+    let element: HTMLSelectElement;
+
+    let error: string;
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+
+        if (element.validity.valueMissing) {
+            error = 'This field is required';
+            return;
+        }
+        error = element.validationMessage;
+    };
+
+    $: if (value) {
+        error = null;
+    }
+</script>
+
+<label class="label" for={id}>{label}</label>
+<div class="select">
+    <select bind:this={element} {id} bind:value {required} on:invalid={handleInvalid}>
+        <slot />
+    </select>
+    <span class="icon-cheveron-down" aria-hidden="true" />
+</div>
+{#if error}
+    <Helper type="warning">{error}</Helper>
+{/if}
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 93%
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 a957e54e3..c8abe4744 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
@@ -9,8 +9,10 @@
     import { addNotification } from '$lib/stores/notifications';
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
-    import { difference } from '$lib/helpers/array';
+    import { symmetricDifference } from '$lib/helpers/array';
     import Delete from './deleteCollection.svelte';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
 
     const databaseId = $page.params.database;
 
@@ -35,10 +37,7 @@
         if (collectionDocumentSecurity !== $collection.documentSecurity) {
             arePermsDisabled = false;
         } else if (collectionPermissions) {
-            if (
-                difference(collectionPermissions, $collection.$permissions).length ||
-                difference($collection.$permissions, collectionPermissions).length
-            ) {
+            if (symmetricDifference(collectionPermissions, $collection.$permissions).length) {
                 arePermsDisabled = false;
             } else arePermsDisabled = true;
         }
@@ -60,7 +59,7 @@
                 $collection.documentSecurity,
                 enabled
             );
-            $collection.enabled = enabled;
+            invalidate(Dependencies.COLLECTION);
             addNotification({
                 message: `${$collection.name} has been updated`,
                 type: 'success'
@@ -77,10 +76,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 +97,7 @@
                 $collection.name,
                 collectionDocumentSecurity ? $collection.$permissions : collectionPermissions
             );
-            $collection.$permissions = collectionPermissions;
-            $collection.documentSecurity = collectionDocumentSecurity;
+            invalidate(Dependencies.COLLECTION);
             arePermsDisabled = true;
             addNotification({
                 message: 'Permissions have been updated',
@@ -213,7 +211,7 @@
             </svelte:fragment>
         </CardGrid>
 
-        <CardGrid>
+        <CardGrid danger>
             <Heading tag="h6" size="7">Delete Collection</Heading>
             <p>
                 The collection will be permanently deleted, including all the documents within it.
@@ -222,7 +220,7 @@
             <svelte:fragment slot="aside">
                 <Box>
                     <svelte:fragment slot="title">
-                        <h6 class="u-bold">{$collection.name}</h6>
+                        <h6 class="u-bold u-trim-1">{$collection.name}</h6>
                     </svelte:fragment>
                     <p>Last Updated: {toLocaleDateTime($collection.$updatedAt)}</p>
                 </Box>
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 60%
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 d4f8638f8..ed3246c05 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';
@@ -16,6 +16,10 @@
         try {
             await sdkForProject.databases.deleteCollection(databaseId, $collection.$id);
             showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `${$collection.name} has been deleted`
+            });
             await goto(
                 `${base}/console/project-${$page.params.project}/databases/database/${$page.params.database}`
             );
@@ -28,16 +32,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 000000000..6d30597ee
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/store.ts
@@ -0,0 +1,24 @@
+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[]
+);
+export const indexes = derived(page, ($page) => $page.data.collection.indexes as Models.Index[]);
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 000000000..b4f9eb530
--- /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 000000000..cf4a899cf
--- /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 65%
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 5ffc08aaa..0f84965e4 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
@@ -1,12 +1,28 @@
 <script lang="ts">
     import { CustomId } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { Button } from '$lib/elements/forms';
+    import { Button, FormList } 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;
+
+    function addArrayItem(key: string) {
+        createDocument.update((n) => {
+            n.document[key].push(null);
+
+            return n;
+        });
+    }
+
+    function removeArrayItem(key: string, index: number) {
+        createDocument.update((n) => {
+            n.document[key].splice(index, 1);
+
+            return n;
+        });
+    }
 </script>
 
 <WizardStep>
@@ -16,11 +32,11 @@
     </svelte:fragment>
 
     {#if $createDocument.attributes.length}
-        <ul class="form-list">
+        <FormList>
             {#each $createDocument.attributes as attribute}
                 {@const label = attribute.required ? `${attribute.key}*` : attribute.key}
                 {#if attribute.array}
-                    {#each $createDocument.document[attribute.key] as _v, index}
+                    {#each [...$createDocument.document[attribute.key].keys()] as index}
                         <li class="form-item is-multiple">
                             <div class="form-item-part u-stretch">
                                 <Attribute
@@ -33,51 +49,30 @@
                                 <Button
                                     text
                                     disabled={index === 0}
-                                    on:click={() => {
-                                        $createDocument.document[attribute.key].splice(index, 1);
-                                    }}>
-                                    <span class="icon-x" aria-hidden="true" />
-                                </Button>
-                            </div>
-                        </li>
-                    {:else}
-                        <li class="form-item is-multiple">
-                            <div class="form-item-part u-stretch">
-                                <Attribute
-                                    {attribute}
-                                    id={`${attribute.key}-0`}
-                                    {label}
-                                    bind:value={$createDocument.document[attribute.key][0]} />
-                            </div>
-                            <div class="form-item-part u-cross-child-end">
-                                <Button text disabled>
+                                    on:click={() => removeArrayItem(attribute.key, index)}>
                                     <span class="icon-x" aria-hidden="true" />
                                 </Button>
                             </div>
                         </li>
                     {/each}
-
                     <Button
                         text
+                        noMargin
                         disabled={$createDocument.document[attribute.key][
                             $createDocument.document[attribute.key].length - 1
                         ] === null}
-                        on:click={() => {
-                            {
-                                $createDocument.document[attribute.key].push(null);
-                            }
-                        }}>
+                        on:click={() => addArrayItem(attribute.key)}>
                         <span class="icon-plus" aria-hidden="true" />
                         <span class="text"> Add item</span>
                     </Button>
                 {:else}
-                    <ul class="form-list">
+                    <FormList>
                         <Attribute
                             {attribute}
-                            id={attribute.key}
                             {label}
+                            id={attribute.key}
                             bind:value={$createDocument.document[attribute.key]} />
-                    </ul>
+                    </FormList>
                 {/if}
             {/each}
             {#if !showCustomId}
@@ -91,6 +86,6 @@
             {:else}
                 <CustomId bind:show={showCustomId} name="Document" bind:id={$createDocument.id} />
             {/if}
-        </ul>
+        </FormList>
     {/if}
 </WizardStep>
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 ac54188b8..3b99cb29a 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 57%
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 696eda69d..2bbe8e69a 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';
@@ -15,6 +15,10 @@
         try {
             await sdkForProject.databases.delete(databaseId);
             showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `${$database.name} has been deleted`
+            });
             await goto(`${base}/console/project-${$page.params.project}/databases`);
         } catch (error) {
             addNotification({
@@ -25,16 +29,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
new file mode 100644
index 000000000..185bce8a6
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/header.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Copy, Tab, Tabs } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    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 tabs = [
+        {
+            href: path,
+            title: 'Collections',
+            hasChildren: true
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage'
+        },
+        {
+            href: `${path}/settings`,
+            title: 'Settings'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <CoverTitle href={`/console/project-${projectId}/databases`}>
+            {$database.name}
+        </CoverTitle>
+        <Copy value={$database.$id}>
+            <Pill button>
+                <span class="icon-duplicate" aria-hidden="true" />
+                Database ID
+            </Pill>
+        </Copy>
+    </svelte:fragment>
+
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
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 89%
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 f7d315e7b..abb475132 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'
@@ -86,7 +85,7 @@
             </svelte:fragment>
         </CardGrid>
 
-        <CardGrid>
+        <CardGrid danger>
             <div>
                 <Heading tag="h6" size="7">Danger Zone</Heading>
             </div>
@@ -101,8 +100,8 @@
                         <AvatarInitials size={48} name={$database.name} />
                     </svelte:fragment>
                     <svelte:fragment slot="title">
-                        <h6 class="u-bold">{$database.name}</h6>
-                        <span>Last Updated: TO IMPLEMENT</span>
+                        <h6 class="u-bold u-trim-1">{$database.name}</h6>
+                        <span>Last Updated: {toLocaleDateTime($database.$updatedAt)}</span>
                     </svelte:fragment>
                 </Box>
             </svelte:fragment>
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 000000000..37fc82784
--- /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 000000000..869150446
--- /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 000000000..bc1023198
--- /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 57ae0bddd..000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/+layout.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-<script>
-    import { afterNavigate } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-    import { database } from './store';
-
-    const databaseId = $page.params.database;
-    const path = `databases/database/${databaseId}`;
-
-    let loaded = false;
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle(event = null) {
-        const promise = database.load(databaseId);
-        if ($database?.$id !== databaseId) {
-            await promise;
-        }
-
-        updateLayout({
-            navigate: event,
-            back: `${base}/console/project-${$page.params.project}/databases`,
-            copy: {
-                text: 'Database ID',
-                value: databaseId
-            },
-            title: $database.name,
-            level: 4,
-            breadcrumbs: {
-                href: `database/${databaseId}`,
-                title: $database.name
-            },
-            tabs: [
-                {
-                    href: path,
-                    title: 'Collections'
-                },
-                {
-                    href: `${path}/usage`,
-                    title: 'Usage'
-                },
-                {
-                    href: `${path}/settings`,
-                    title: 'Settings'
-                }
-            ]
-        });
-        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 94e869e96..000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+layout.svelte
+++ /dev/null
@@ -1,70 +0,0 @@
-<script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-    import { collection } from './store';
-
-    const databaseId = $page.params.database;
-    const collectionId = $page.params.collection;
-    const path = `databases/database/${databaseId}/collection/${collectionId}`;
-
-    let loaded = false;
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle(event = null) {
-        if ($collection?.$id !== collectionId || !event) {
-            await collection.load(databaseId, collectionId);
-        }
-
-        updateLayout({
-            navigate: event,
-            title: $collection.name,
-            back: `${base}/console/project-${$page.params.project}/databases/database/${databaseId}`,
-            copy: {
-                text: 'Collection ID',
-                value: collectionId
-            },
-            level: 5,
-            breadcrumbs: {
-                href: `collection/${collectionId}`,
-                title: $collection.name
-            },
-            tabs: [
-                {
-                    href: path,
-                    title: 'Documents'
-                },
-                {
-                    href: `${path}/attributes`,
-                    title: 'Attributes'
-                },
-                {
-                    href: `${path}/indexes`,
-                    title: 'Indexes'
-                },
-                {
-                    href: `${path}/usage`,
-                    title: 'Usage'
-                },
-                {
-                    href: `${path}/settings`,
-                    title: 'Settings'
-                }
-            ]
-        });
-
-        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/boolean.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/boolean.svelte
deleted file mode 100644
index edc4e9473..000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/boolean.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<script lang="ts">
-    import { InputChoice, InputSelect } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
-    import { collection } from '../store';
-    import type { Models } from '@aw-labs/appwrite-console';
-    import { page } from '$app/stores';
-
-    export let submitted = false;
-    export let key: string;
-    export let overview = false;
-    export let selectedAttribute: Models.AttributeBoolean;
-
-    const databaseId = $page.params.database;
-
-    const dispatch = createEventDispatcher();
-
-    let xdefault: boolean,
-        required = false,
-        array = false;
-
-    const submit = async () => {
-        submitted = false;
-        try {
-            const attribute = await sdkForProject.databases.createBooleanAttribute(
-                databaseId,
-                $collection.$id,
-                key,
-                required,
-                xdefault ? xdefault : undefined,
-                array
-            );
-            dispatch('created', attribute);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    };
-
-    $: if (submitted) {
-        submit();
-    }
-
-    $: if (overview) {
-        ({ required, array } = selectedAttribute);
-        xdefault = selectedAttribute.default;
-    }
-
-    $: if (required) {
-        xdefault = null;
-    }
-
-    //TODO: refactor to use context module instead of submitted
-</script>
-
-<InputSelect
-    id="default"
-    label="Default value"
-    placeholder="Select a value"
-    options={[
-        { label: 'True', value: true },
-        { label: 'False', value: false }
-    ]}
-    bind:value={xdefault}
-    disabled={overview} />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
-    Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
-    Indicate whether this attribute should act as an array</InputChoice>
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 47fe506d1..000000000
--- 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/email.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/email.svelte
deleted file mode 100644
index 1db971cfc..000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/email.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script lang="ts">
-    import { InputText, InputChoice } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
-    import { collection } from '../store';
-    import type { Models } from '@aw-labs/appwrite-console';
-    import { page } from '$app/stores';
-
-    export let key: string;
-    export let submitted = false;
-    export let overview = false;
-    export let selectedAttribute: Models.AttributeEmail;
-
-    const databaseId = $page.params.database;
-    const dispatch = createEventDispatcher();
-
-    let xdefault: string,
-        required = false,
-        array = false;
-
-    const submit = async () => {
-        submitted = false;
-        try {
-            const attribute = await sdkForProject.databases.createEmailAttribute(
-                databaseId,
-                $collection.$id,
-                key,
-                required,
-                xdefault ? xdefault : undefined,
-                array
-            );
-            dispatch('created', attribute);
-            addNotification({
-                type: 'success',
-                message: `${key} has been created`
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    };
-
-    $: if (submitted) {
-        submit();
-    }
-
-    $: if (overview) {
-        ({ required, array } = selectedAttribute);
-        xdefault = selectedAttribute.default;
-    }
-
-    $: if (required) {
-        xdefault = null;
-    }
-</script>
-
-<InputText
-    id="default"
-    label="Default value"
-    bind:value={xdefault}
-    disabled={required}
-    readonly={overview} />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
-    Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
-    Indicate whether this attribute should act as an array</InputChoice>
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
deleted file mode 100644
index 3a33b38d8..000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/enum.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script lang="ts">
-    import { InputChoice, InputSelect, InputTags } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
-    import { collection } from '../store';
-    import type { Models } from '@aw-labs/appwrite-console';
-    import { page } from '$app/stores';
-
-    export let key: string;
-    export let submitted = false;
-    export let overview = false;
-    export let selectedAttribute: Models.AttributeEnum;
-
-    const databaseId = $page.params.database;
-    const dispatch = createEventDispatcher();
-
-    let xdefault = '',
-        elements: string[],
-        required = false,
-        array = false;
-
-    const submit = async () => {
-        submitted = false;
-        try {
-            const attribute = await sdkForProject.databases.createEnumAttribute(
-                databaseId,
-                $collection.$id,
-                key,
-                elements,
-                required,
-                xdefault ? xdefault : undefined,
-                array
-            );
-            dispatch('created', attribute);
-            addNotification({
-                type: 'success',
-                message: `${key} has been created`
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    };
-
-    $: options =
-        elements?.map((e) => ({
-            value: e,
-            label: e
-        })) ?? [];
-
-    $: if (submitted) {
-        submit();
-    }
-    $: if (overview) {
-        ({ required, array, elements } = selectedAttribute);
-        xdefault = selectedAttribute.default;
-    }
-    $: if (required) {
-        xdefault = null;
-    }
-</script>
-
-<InputTags
-    id="elements"
-    label="Elements"
-    bind:tags={elements}
-    placeholder="Add elements here"
-    readonly={overview} />
-<InputSelect
-    id="default"
-    label="Default value"
-    bind:options
-    bind:value={xdefault}
-    disabled={overview || required} />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
-    Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
-    Indicate whether this attribute should act as an array</InputChoice>
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
deleted file mode 100644
index 389dec445..000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/float.svelte
+++ /dev/null
@@ -1,77 +0,0 @@
-<script lang="ts">
-    import { InputNumber, InputChoice } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
-    import { collection } from '../store';
-    import type { Models } from '@aw-labs/appwrite-console';
-    import { page } from '$app/stores';
-
-    export let key: string;
-    export let submitted = false;
-    export let overview = false;
-    export let selectedAttribute: Models.AttributeFloat;
-
-    const databaseId = $page.params.database;
-    const dispatch = createEventDispatcher();
-
-    let min: number,
-        max: number,
-        xdefault: number,
-        required = false,
-        array = false;
-
-    const submit = async () => {
-        submitted = false;
-        try {
-            const attribute = await sdkForProject.databases.createFloatAttribute(
-                databaseId,
-                $collection.$id,
-                key,
-                required,
-                min,
-                max,
-                xdefault ? xdefault : undefined,
-                array
-            );
-            dispatch('created', attribute);
-            addNotification({
-                type: 'success',
-                message: `${key} has been created`
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    };
-
-    $: if (submitted) {
-        submit();
-    }
-
-    $: if (overview) {
-        ({ required, array, min, max } = selectedAttribute);
-        xdefault = selectedAttribute.default;
-    }
-
-    $: if (required) {
-        xdefault = null;
-    }
-</script>
-
-<InputNumber id="min" label="Min" bind:value={min} readonly={overview} />
-<InputNumber id="max" label="Max" bind:value={max} readonly={overview} />
-
-<InputNumber
-    id="default"
-    label="Default value"
-    bind:value={xdefault}
-    disabled={required}
-    readonly={overview}
-    step="any" />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
-    Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
-    Indicate whether this attribute should act as an array</InputChoice>
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
deleted file mode 100644
index 41429ac93..000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/integer.svelte
+++ /dev/null
@@ -1,75 +0,0 @@
-<script lang="ts">
-    import { InputNumber, InputChoice } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
-    import { collection } from '../store';
-    import type { Models } from '@aw-labs/appwrite-console';
-    import { page } from '$app/stores';
-
-    export let key: string = null;
-    export let submitted = false;
-    export let overview = false;
-    export let selectedAttribute: Models.AttributeInteger;
-
-    const databaseId = $page.params.database;
-    const dispatch = createEventDispatcher();
-
-    let min: number,
-        max: number,
-        xdefault: number,
-        required = false,
-        array = false;
-
-    const submit = async () => {
-        submitted = false;
-        try {
-            const attribute = await sdkForProject.databases.createIntegerAttribute(
-                databaseId,
-                $collection.$id,
-                key,
-                required,
-                min,
-                max,
-                xdefault ? xdefault : undefined,
-                array
-            );
-            dispatch('created', attribute);
-            addNotification({
-                type: 'success',
-                message: `${key} has been created`
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    };
-
-    $: if (submitted) {
-        submit();
-    }
-
-    $: if (overview) {
-        ({ required, array, min, max } = selectedAttribute);
-        xdefault = selectedAttribute.default;
-    }
-    $: if (required) {
-        xdefault = null;
-    }
-</script>
-
-<InputNumber id="min" label="Min" bind:value={min} readonly={overview} />
-<InputNumber id="max" label="Max" bind:value={max} readonly={overview} />
-
-<InputNumber
-    id="default"
-    label="Default value"
-    bind:value={xdefault}
-    disabled={required}
-    readonly={overview} />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
-    Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
-    Indicate whether this attribute should act as an array</InputChoice>
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
deleted file mode 100644
index f40f1d8fa..000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/ip.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script lang="ts">
-    import { InputText, InputChoice } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
-    import { collection } from '../store';
-    import type { Models } from '@aw-labs/appwrite-console';
-    import { page } from '$app/stores';
-
-    export let key: string;
-    export let submitted = false;
-    export let overview = false;
-    export let selectedAttribute: Models.AttributeIp;
-
-    const databaseId = $page.params.database;
-    const dispatch = createEventDispatcher();
-
-    let xdefault: string,
-        required = false,
-        array = false;
-
-    const submit = async () => {
-        submitted = false;
-        try {
-            const attribute = await sdkForProject.databases.createIpAttribute(
-                databaseId,
-                $collection.$id,
-                key,
-                required,
-                xdefault ? xdefault : undefined,
-                array
-            );
-            dispatch('created', attribute);
-            addNotification({
-                type: 'success',
-                message: `${key} has been created`
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    };
-
-    $: if (submitted) {
-        submit();
-    }
-
-    $: if (overview) {
-        ({ required, array } = selectedAttribute);
-        xdefault = selectedAttribute.default;
-    }
-    $: if (required) {
-        xdefault = null;
-    }
-</script>
-
-<InputText
-    id="default"
-    label="Default value"
-    bind:value={xdefault}
-    disabled={required}
-    readonly={overview} />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
-    Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
-    Indicate whether this attribute should act as an array</InputChoice>
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 e6a1d4cb4..000000000
--- 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]/attributes/store.ts b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/store.ts
deleted file mode 100644
index cd0baad18..000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/store.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import type { SvelteComponent } from 'svelte';
-import { writable } from 'svelte/store';
-import Boolean from './boolean.svelte';
-import Email from './email.svelte';
-import Enum from './enum.svelte';
-import Float from './float.svelte';
-import Integer from './integer.svelte';
-import Ip from './ip.svelte';
-import String from './string.svelte';
-import Url from './url.svelte';
-
-export type Option = {
-    name: string;
-    component: typeof SvelteComponent;
-};
-
-export const options: Option[] = [
-    {
-        name: 'String',
-        component: String
-    },
-    {
-        name: 'Integer',
-        component: Integer
-    },
-    {
-        name: 'Float',
-        component: Float
-    },
-    {
-        name: 'Boolean',
-        component: Boolean
-    },
-    {
-        name: 'Email',
-        component: Email
-    },
-    {
-        name: 'IP',
-        component: Ip
-    },
-    {
-        name: 'URL',
-        component: Url
-    },
-    {
-        name: 'Enum',
-        component: Enum
-    }
-];
-
-export const option = writable<Option>({ name: null, component: null });
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
deleted file mode 100644
index b69dc22b9..000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/string.svelte
+++ /dev/null
@@ -1,71 +0,0 @@
-<script lang="ts">
-    import { InputNumber, InputText, InputChoice } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
-    import { collection } from '../store';
-    import type { Models } from '@aw-labs/appwrite-console';
-    import { page } from '$app/stores';
-
-    export let key: string;
-    export let submitted = false;
-    export let overview = false;
-    export let selectedAttribute: Models.AttributeString;
-
-    const databaseId = $page.params.database;
-
-    let xdefault: string,
-        size = 255,
-        required = false,
-        array = false;
-
-    const dispatch = createEventDispatcher();
-    const submit = async () => {
-        submitted = false;
-        try {
-            const attribute = await sdkForProject.databases.createStringAttribute(
-                databaseId,
-                $collection.$id,
-                key,
-                size,
-                required,
-                xdefault ? xdefault : undefined,
-                array
-            );
-            dispatch('created', attribute);
-            addNotification({
-                type: 'success',
-                message: `${key} has been created`
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    };
-
-    $: if (submitted) {
-        submit();
-    }
-
-    $: if (overview) {
-        ({ required, array, size } = selectedAttribute);
-        xdefault = selectedAttribute.default;
-    }
-    $: if (required) {
-        xdefault = null;
-    }
-</script>
-
-<InputNumber id="size" label="Size" bind:value={size} required readonly={overview} />
-<InputText
-    id="default"
-    label="Default value"
-    bind:value={xdefault}
-    disabled={required}
-    readonly={overview} />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
-    Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
-    Indicate whether this attribute should act as an array</InputChoice>
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
deleted file mode 100644
index 23e57028b..000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/url.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script lang="ts">
-    import { InputText, InputChoice } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
-    import { collection } from '../store';
-    import type { Models } from '@aw-labs/appwrite-console';
-    import { page } from '$app/stores';
-
-    export let key: string;
-    export let submitted = false;
-    export let overview = false;
-    export let selectedAttribute: Models.AttributeUrl;
-
-    const databaseId = $page.params.database;
-    const dispatch = createEventDispatcher();
-
-    let xdefault: string,
-        required = false,
-        array = false;
-
-    const submit = async () => {
-        submitted = false;
-        try {
-            const attribute = await sdkForProject.databases.createUrlAttribute(
-                databaseId,
-                $collection.$id,
-                key,
-                required,
-                xdefault ? xdefault : undefined,
-                array
-            );
-            dispatch('created', attribute);
-            addNotification({
-                type: 'success',
-                message: `${key} has been created`
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    };
-
-    $: if (submitted) {
-        submit();
-    }
-
-    $: if (overview) {
-        ({ required, array } = selectedAttribute);
-        xdefault = selectedAttribute.default;
-    }
-    $: if (required) {
-        xdefault = null;
-    }
-</script>
-
-<InputText
-    id="default"
-    label="Default value"
-    bind:value={xdefault}
-    disabled={required}
-    readonly={overview} />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
-    Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
-    Indicate whether this attribute should act as an array</InputChoice>
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 9ccd1d1a2..000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+layout.svelte
+++ /dev/null
@@ -1,53 +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 { base } from '$app/paths';
-
-    const databaseId = $page.params.database;
-    const collectionId = $page.params.collection;
-    const documentId = $page.params.document;
-    const path = `databases/database/${databaseId}/collection/${collectionId}/document/${documentId}`;
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle(event = null) {
-        const promise = doc.load(databaseId, collectionId, documentId);
-        if ($doc?.$id !== documentId) {
-            await promise;
-        }
-
-        updateLayout({
-            navigate: event,
-            title: 'Document',
-            copy: { text: 'Document ID', value: $doc.$id },
-            back: `${base}/console/project-${$page.params.project}/databases/database/${databaseId}/collection/${collectionId}`,
-            level: 6,
-            breadcrumbs: {
-                title: $doc.$id,
-                href: `document/${documentId}`
-            },
-            tabs: [
-                {
-                    href: path,
-                    title: 'Overview'
-                },
-                {
-                    href: `${path}/activity`,
-                    title: 'Activity'
-                }
-            ]
-        });
-    }
-</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 621adcac5..000000000
--- 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 dde4f656b..000000000
--- 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]/store.ts b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/store.ts
deleted file mode 100644
index 7e6e18331..000000000
--- 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/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte
deleted file mode 100644
index a9981c2b2..000000000
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/indexes/+page.svelte
+++ /dev/null
@@ -1,168 +0,0 @@
-<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 { Pill } from '$lib/elements';
-    import {
-        Table,
-        TableHeader,
-        TableBody,
-        TableCellHead,
-        TableCell,
-        TableCellText,
-        TableRow
-    } from '$lib/elements/table';
-    import { Container } from '$lib/layout';
-    import { indexList, collection } from '../store';
-    import { onMount } from 'svelte';
-    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';
-
-    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);
-    };
-
-    // $: 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}
-        <Table>
-            <TableHeader>
-                <TableCellHead>Key</TableCellHead>
-                <TableCellHead>Type</TableCellHead>
-                <TableCellHead>Attributes</TableCellHead>
-                <TableCellHead>Asc/Desc</TableCellHead>
-                <TableCellHead width={30} />
-            </TableHeader>
-            <TableBody>
-                {#each $indexList.indexes as index, i}
-                    <TableRow>
-                        <TableCell title="Key">
-                            <div class="u-flex u-main-space-between">
-                                <span class="text u-trim"> {index.key}</span>
-                                {#if index.status !== 'available'}
-                                    <Pill
-                                        warning={index.status === 'processing'}
-                                        danger={['deleting', 'stuck', 'failed'].includes(
-                                            index.status
-                                        )}>
-                                        {index.status}
-                                    </Pill>
-                                {/if}
-                            </div>
-                        </TableCell>
-                        <TableCellText title="Type">{index.type}</TableCellText>
-                        <TableCellText title="Attributes">
-                            {index.attributes}
-                        </TableCellText>
-                        <TableCellText title="ASC/DESC">
-                            {index.orders}
-                        </TableCellText>
-                        <TableCell showOverflow>
-                            <DropList bind:show={showDropdown[i]} placement="bottom-start" noArrow>
-                                <button
-                                    class="button is-only-icon is-text"
-                                    aria-label="More options"
-                                    on:click|preventDefault={() => {
-                                        showDropdown[i] = !showDropdown[i];
-                                    }}>
-                                    <span class="icon-dots-horizontal" aria-hidden="true" />
-                                </button>
-                                <svelte:fragment slot="list">
-                                    <DropListItem
-                                        icon="eye"
-                                        on:click={() => {
-                                            selectedIndex = index;
-                                            showOverview = true;
-                                        }}>Overview</DropListItem>
-
-                                    <DropListItem
-                                        icon="trash"
-                                        on:click={() => {
-                                            selectedIndex = index;
-                                            showDelete = true;
-                                        }}>Delete</DropListItem>
-                                </svelte:fragment>
-                            </DropList>
-                        </TableCell>
-                    </TableRow>
-                {/each}
-            </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} />
-        </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>
-        </Empty>
-    {:else}
-        <Empty isButton single on:click={() => (showCreateIndex = true)}>
-            <p>Create your first index to get started</p>
-        </Empty>
-    {/if}
-</Container>
-
-<Create bind:showCreateIndex />
-{#if selectedIndex}
-    <Delete bind:showDelete {selectedIndex} on:deleted={handleDelete} />
-    <Overview bind:showOverview {selectedIndex} />
-{/if}
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 c184a80ad..000000000
--- 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 35af4cde8..000000000
--- 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 06b7832cb..000000000
--- 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 69072d890..000000000
--- 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 6cd026085..000000000
--- 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
new file mode 100644
index 000000000..b37a3406e
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/header.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Tab, Tabs } from '$lib/components';
+    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',
+            hasChildren: true
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <CoverTitle>Databases</CoverTitle>
+    </svelte:fragment>
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
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 642b5c471..000000000
--- 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 2c19b78c3..000000000
--- 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 000000000..a4a116618
--- /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 000000000..9017a1b24
--- /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 6dbf4be7e..8ccdfb692 100644
--- a/src/routes/console/project-[project]/functions/+layout.svelte
+++ b/src/routes/console/project-[project]/functions/+layout.svelte
@@ -1,54 +1,28 @@
 <script lang="ts">
-    import { browser } from '$app/environment';
-    import { afterNavigate } from '$app/navigation';
-    import { updateLayout } from '$lib/stores/layout';
+    import { onDestroy, onMount } from 'svelte';
     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 { Dependencies } from '$lib/constants';
+    import { invalidate } from '$app/navigation';
 
-    let loaded = false;
+    let unsubscribe: { (): void };
 
-    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(() => {
+        unsubscribe = sdkForConsole.client.subscribe('console', (response) => {
+            if (response.events.includes('functions.*.deployments.*')) {
+                invalidate(Dependencies.DEPLOYMENTS);
             }
         });
-    }
-    onMount(handle);
-    afterNavigate(handle);
+    });
 
-    function handle(event = null) {
-        updateLayout({
-            navigate: event,
-            title: 'Functions',
-            level: 3,
-            breadcrumbs: {
-                href: 'functions',
-                title: 'Functions'
-            }
-        });
-        loaded = true;
-    }
+    onDestroy(() => {
+        if (unsubscribe) {
+            unsubscribe();
+        }
+    });
 </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 000000000..12cc3f795
--- /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 54%
rename from src/routes/console/project-[project]/functions/+page.svelte
rename to src/routes/console/project-[project]/functions/[[page]]/+page.svelte
index efc48a4ac..01c855551 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">
@@ -67,22 +54,7 @@
                             <span class="text">{func.name}</span>
                         </div>
                     </svelte:fragment>
-                    <svelte:fragment slot="status">
-                        {#if deployments && deployments[func.$id]}
-                            {deployments[func.$id].status ?? 'No deployment'}
-                        {/if}
-                    </svelte:fragment>
                     <svelte:fragment slot="icons">
-                        {#if deployments && deployments[func.$id] && deployments[func.$id].status === 'failed'}
-                            <li>
-                                <span
-                                    class="icon-exclamation"
-                                    aria-hidden="true"
-                                    use:tooltip={{
-                                        content: 'Build error'
-                                    }} />
-                            </li>
-                        {/if}
                         {#if func.scheduleNext}
                             <li>
                                 <span
@@ -106,19 +78,18 @@
             </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}>
-            <div class="u-text-center">
-                <p class="text">Create your first function to get started</p>
-                <p class="text">Need a hand? Check out our documentation.</p>
-            </div>
-            <div class="u-flex u-gap-12">
-                <Button external text>Documentation</Button>
-                <Button secondary on:click={openWizard}>Create function</Button>
-            </div>
-        </Empty>
+        <Empty
+            single
+            href="https://appwrite.io/docs/functions"
+            target="function"
+            on:click={openWizard} />
     {/if}
 </Container>
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 000000000..3c3b826a6
--- /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
new file mode 100644
index 000000000..65754ecd0
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/breadcrumbs.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    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/project-${$project?.$id}`,
+            title: $project?.name
+        },
+        {
+            href: `/console/project-${$project?.$id}/functions`,
+            title: 'Functions'
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/functions/createFunction.svelte b/src/routes/console/project-[project]/functions/createFunction.svelte
index b18299e61..47759434a 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,17 @@
     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 { goto, invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
 
-    const create = async () => {
+    const projectId = $page.params.project;
+
+    async function onFinish() {
+        await invalidate(Dependencies.FUNCTIONS);
+    }
+    async function create() {
         try {
             const response = await sdkForProject.functions.create(
                 $createFunction.id ?? 'unique()',
@@ -29,11 +36,13 @@
                 async (v) =>
                     await sdkForProject.functions.createVariable(response.$id, v.key, v.value)
             );
+            await invalidate(Dependencies.FUNCTIONS);
+            goto(`${base}/console/project-${projectId}/functions/function-${response.$id}`);
+
             addNotification({
-                message: 'Function has been created',
+                message: `${$createFunction.name} has been created`,
                 type: 'success'
             });
-            functionList.load([Query.limit(6), Query.offset(0), Query.orderDesc('$createdAt')]);
             wizard.hide();
         } catch (error) {
             addNotification({
@@ -41,7 +50,7 @@
                 type: 'error'
             });
         }
-    };
+    }
 
     onDestroy(() => {
         $createFunction = {
@@ -83,4 +92,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 8c0ea8700..2654e31c6 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 000000000..e8b8dae48
--- /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 000000000..d91cd6300
--- /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 66%
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 e52c36aad..bd389bbcb 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,27 @@
         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';
+    import Output from '$lib/components/output.svelte';
+
+    export let data: PageData;
 
-    let search = '';
-    let offset = 0;
     let showCreate = false;
     let showDropdown = [];
     let showDelete = false;
@@ -44,27 +48,32 @@
 
     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);
 
-    $: 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);
+    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);
+                invalidate(Dependencies.FUNCTION);
+
+                return;
+            }
+            if (message.events.includes('functions.*.deployments.*.delete')) {
+                invalidate(Dependencies.DEPLOYMENTS);
+
+                return;
+            }
+        });
+    }
 </script>
 
 <Container>
@@ -75,14 +84,14 @@
             <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>
         {#if activeDeployment}
             <CardGrid>
                 <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
-                    <div class="avatar is-medium">
+                    <div class="avatar is-medium" aria-hidden="true">
                         <img
                             src={`${base}/icons/${$app.themeInUse}/color/${
                                 $func.runtime.split('-')[0]
@@ -90,8 +99,17 @@
                             alt="technology" />
                     </div>
                     <div>
-                        <p><b>Function ID: {$func.$id} </b></p>
-                        <p>Deployment ID: {$func.deployment}</p>
+                        <div class="u-flex u-gap-12 u-cross-center">
+                            <p><b>Function ID: </b></p>
+                            <Output value={$func.$id}><b>{$func.$id}</b></Output>
+                        </div>
+
+                        <div class="u-flex u-gap-12 u-cross-center">
+                            <p>Deployment ID:</p>
+                            <Output value={$func.deployment}>
+                                {$func.deployment}
+                            </Output>
+                        </div>
                     </div>
                 </div>
                 <svelte:fragment slot="aside">
@@ -120,23 +138,11 @@
                 </svelte:fragment>
             </CardGrid>
         {:else}
-            <Empty single isButton on:click={() => (showCreate = true)}>
-                <div class="u-text-center">
-                    <p>
-                        Create a new deployment, or activate an existing one to see your function in
-                        action.
-                    </p>
-                    <p>Need a hand? Check out our documentation.</p>
-                </div>
-                <div class="u-flex u-gap-12">
-                    <Button text external href="https://appwrite.io/docs/functions#createFunction">
-                        Documentation
-                    </Button>
-                    <Button secondary on:click={() => (showCreate = true)}>
-                        Create Deployment
-                    </Button>
-                </div>
-            </Empty>
+            <Empty
+                single
+                href="https://appwrite.io/docs/functions#createFunction"
+                target="deployment"
+                on:click={() => (showCreate = true)} />
         {/if}
 
         <div class="common-section">
@@ -150,11 +156,10 @@
                 <TableCellHead width={100}>Status</TableCellHead>
                 <TableCellHead width={90}>Build time</TableCellHead>
                 <TableCellHead width={70}>Size</TableCellHead>
-                <TableCellHead width={60} />
                 <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">
@@ -179,16 +184,7 @@
                             <TableCellText title="Size">
                                 {calculateSize(deployment.size)}
                             </TableCellText>
-                            <TableCell>
-                                <Button
-                                    secondary
-                                    on:click={() => {
-                                        selectedDeployment = deployment;
-                                        showActivate = true;
-                                    }}>
-                                    <span class="text">Activate</span>
-                                </Button>
-                            </TableCell>
+
                             <TableCell showOverflow>
                                 <DropList
                                     bind:show={showDropdown[index]}
@@ -203,6 +199,15 @@
                                         <span class="icon-dots-horizontal" aria-hidden="true" />
                                     </button>
                                     <svelte:fragment slot="list">
+                                        <DropListItem
+                                            icon="lightning-bolt"
+                                            on:click={() => {
+                                                selectedDeployment = deployment;
+                                                showActivate = true;
+                                                showDropdown = [];
+                                            }}>
+                                            Activate
+                                        </DropListItem>
                                         <DropListItem
                                             icon="terminal"
                                             on:click={() => {
@@ -210,14 +215,18 @@
                                                 $log.func = $func;
                                                 $log.data = deployment;
                                                 showDropdown = [];
-                                            }}>Output</DropListItem>
+                                            }}>
+                                            Output
+                                        </DropListItem>
                                         <DropListItem
                                             icon="trash"
                                             on:click={() => {
                                                 selectedDeployment = deployment;
                                                 showDropdown = [];
                                                 showDelete = true;
-                                            }}>Delete</DropListItem>
+                                            }}>
+                                            Delete
+                                        </DropListItem>
                                     </svelte:fragment>
                                 </DropList>
                             </TableCell>
@@ -227,29 +236,23 @@
             </TableBody>
         </Table>
     {:else}
-        <Empty isButton single on:click={() => (showCreate = true)}>
-            <div class="u-text-center">
-                <p>
-                    Create a new deployment, or activate an existing one to see your function in
-                    action.
-                </p>
-                <p>Need a hand? Check out our documentation.</p>
-            </div>
-            <div class="u-flex u-gap-12">
-                <Button text external href="https://appwrite.io/docs/functions#createFunction">
-                    Documentation
-                </Button>
-                <Button secondary on:click={() => (showCreate = true)}>Create Deployment</Button>
-            </div>
-        </Empty>
+        <Empty
+            single
+            target="deployment"
+            href="https://appwrite.io/docs/functions#createFunction"
+            on:click={() => (showCreate = true)} />
     {/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 000000000..9472fd6af
--- /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 }) => {
+    depends(Dependencies.DEPLOYMENTS);
+    await parent();
+    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 deeb750ac..0313ab76c 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 000000000..d0af4e3ca
--- /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 000000000..4d3469bc8
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function-[function]/create.svelte
@@ -0,0 +1,180 @@
+<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, onMount } 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';
+    import { func } from './store';
+
+    export let showCreate = false;
+
+    enum Mode {
+        CLI,
+        Github,
+        Manual
+    }
+    let mode: Mode = Mode.CLI;
+    let entrypoint: string;
+    let active: boolean;
+    let files: FileList;
+    let lang = 'js';
+    let codeSnippets = {};
+
+    const functionId = $page.params.function;
+    const dispatch = createEventDispatcher();
+
+    onMount(() => {
+        lang = setLanguage($func.runtime);
+        codeSnippets = setCodeSnippets(lang);
+    });
+
+    function setLanguage(runtime: string) {
+        if (runtime.includes('node') || runtime.includes('deno')) {
+            return 'js';
+        } else if (runtime.includes('php')) {
+            return 'php';
+        } else if (runtime.includes('python')) {
+            return 'py';
+        } else if (runtime.includes('dart')) {
+            return 'dart';
+        } else if (runtime.includes('dotnet')) {
+            return 'cs';
+        } else if (runtime.includes('ruby')) {
+            return 'rb';
+        } else if (runtime.includes('swift')) {
+            return 'swift';
+        } else if (runtime.includes('kotlin')) {
+            return 'kt';
+        } else if (runtime.includes('java')) {
+            return 'java';
+        }
+    }
+
+    function setCodeSnippets(lang: string) {
+        return {
+            Unix: {
+                code: `appwrite functions createDeployment \\ 
+    --functionId=${functionId} \\ 
+    --entrypoint='index.${lang}' \\ 
+    --code="." \\ 
+    --activate=true`,
+                language: 'bash'
+            },
+
+            CMD: {
+                code: `appwrite functions createDeployment ^
+    --functionId=${functionId} ^
+    --entrypoint='index.${lang}' ^
+    --code="." ^
+    --activate=true`,
+                language: 'CMD'
+            },
+            PowerShell: {
+                code: `appwrite functions createDeployment ,
+    --functionId=${functionId} ,
+    --entrypoint='index.${lang}' ,
+    --code="." ,
+    --activate=true`,
+                language: 'PowerShell'
+            }
+        };
+    }
+
+    async function create() {
+        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
+            });
+        }
+    }
+</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="https://appwrite.io/docs/command-line"
+                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.${lang}`}
+                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 c4eaa6e69..78fa59a2a 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 4bd3d0e01..093cd4e3a 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 56%
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 af1e70604..8e03241e9 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,7 @@
 <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, Status, Heading, Pagination, EmptySearch } from '$lib/components';
     import {
         Table,
         TableHeader,
@@ -17,24 +13,42 @@
     } 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';
+    import { func } from '../../store';
+    import type { PageData } from './$types';
+    import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+    import { page } from '$app/stores';
+    import { onDestroy, onMount } from 'svelte';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { invalidate } from '$app/navigation';
+    import { Button } from '$lib/elements/forms';
+    import CreateDeployment from '../../create.svelte';
 
-    let search = '';
-    let offset = 0;
-    const functionId = $page.params.function;
+    export let data: PageData;
+    let showCreate = false;
 
-    $: executionList.load(functionId, [Query.offset(offset), Query.limit($pageLimit)], search);
+    let unsubscribe: { (): void };
 
-    //TODO: add optional hover state to rows
+    onMount(() => {
+        unsubscribe = sdkForConsole.client.subscribe('console', (response) => {
+            if (response.events.includes('functions.*.executions.*')) {
+                invalidate(Dependencies.EXECUTIONS);
+            }
+        });
+    });
+
+    onDestroy(() => {
+        if (unsubscribe) {
+            unsubscribe();
+        }
+    });
 </script>
 
 <Container>
     <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>
@@ -42,10 +56,10 @@
                 <TableCellHead width={110}>Status</TableCellHead>
                 <TableCellHead width={90}>Trigger</TableCellHead>
                 <TableCellHead width={70}>Type</TableCellHead>
-                <TableCellHead width={100}>Build Time</TableCellHead>
+                <TableCellHead width={100}>Duration</TableCellHead>
             </TableHeader>
             <TableBody>
-                {#each $executionList.executions as execution}
+                {#each data.executions.executions as execution}
                     <TableRowButton
                         on:click={() => {
                             $log.show = true;
@@ -79,14 +93,30 @@
                 {/each}
             </TableBody>
         </Table>
+        <div class="u-flex u-margin-block-start-32 u-main-space-between">
+            <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>
     {:else}
-        <Empty isButton single>
-            <p>Execute your function to view execution logs</p>
-            <Button external secondary href="#">Documentation</Button>
-        </Empty>
+        <EmptySearch>
+            <div class="u-text-center">
+                <p class="text u-line-height-1-5">
+                    You have no execution logs. Create and activate a deployment to see it here.
+                </p>
+                <p class="text u-line-height-1-5">Need a hand? Check out our documentation</p>
+            </div>
+            <div class="u-flex u-gap-16">
+                <Button text external href="https://appwrite.io/docs/functions#execute">
+                    Documentation
+                </Button>
+                <Button secondary on:click={() => (showCreate = true)}>Create deployment</Button>
+            </div>
+        </EmptySearch>
     {/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} />
-    </div>
 </Container>
+
+<CreateDeployment bind:showCreate />
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 000000000..5d5c50f05
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function-[function]/executions/[[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.EXECUTIONS);
+    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
new file mode 100644
index 000000000..19c0de0c6
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function-[function]/header.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Copy, Tab, Tabs } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    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 tabs = [
+        {
+            href: path,
+            title: 'Deployments',
+            hasChildren: true
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage'
+        },
+        {
+            href: `${path}/executions`,
+            title: 'Executions',
+            hasChildren: true
+        },
+        {
+            href: `${path}/settings`,
+            title: 'Settings'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <CoverTitle href={`/console/project-${projectId}/functions`}>
+            {$func?.name}
+        </CoverTitle>
+        <Copy value={$func?.$id}>
+            <Pill button>
+                <span class="icon-duplicate" aria-hidden="true" />
+                ID Details
+            </Pill>
+        </Copy>
+    </svelte:fragment>
+
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
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 85%
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 f25658580..c1e8ad125 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,17 +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 { breadcrumbs, title } from '$lib/stores/layout';
-    import { Permissions } from '$lib/components/permissions';
-    import { difference } from '$lib/helpers/array';
+    import { Roles } from '$lib/components/permissions';
+    import { symmetricDifference } 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;
@@ -49,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;
@@ -63,11 +62,7 @@
     async function updateName() {
         try {
             await sdkForProject.functions.update(functionId, functionName, $func.execute);
-            $func.name = functionName;
-            title.set(functionName);
-            const breadcrumb = $breadcrumbs.get($breadcrumbs.size);
-            breadcrumb.title = functionName;
-            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size, breadcrumb);
+            invalidate(Dependencies.FUNCTION);
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
@@ -79,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'
@@ -94,6 +90,7 @@
             });
         }
     }
+
     async function updateEvents() {
         try {
             await sdkForProject.functions.update(
@@ -102,7 +99,7 @@
                 $func.execute,
                 Array.from($eventSet)
             );
-            $func.events = Array.from($eventSet);
+            invalidate(Dependencies.FUNCTION);
             addNotification({
                 message: 'Permissions have been updated',
                 type: 'success'
@@ -125,7 +122,7 @@
                 functionSchedule,
                 timeout
             );
-            $func.schedule = functionSchedule;
+            invalidate(Dependencies.FUNCTION);
 
             addNotification({
                 type: 'success',
@@ -162,17 +159,17 @@
         }
     }
 
-    async function handleVariableCreated(dispatcedData: CustomEvent) {
-        const variable = dispatcedData.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',
@@ -181,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',
@@ -199,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',
@@ -216,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'
             });
 
@@ -244,19 +244,13 @@
     }
 
     $: if (permissions) {
-        if (
-            difference(permissions, $func.execute).length ||
-            difference($func.execute, permissions).length
-        ) {
+        if (symmetricDifference(permissions, $func.execute).length) {
             arePermsDisabled = false;
         } else arePermsDisabled = true;
     }
 
     $: if ($eventSet) {
-        if (
-            difference(Array.from($eventSet), $func.events).length ||
-            difference($func.events, Array.from($eventSet)).length
-        ) {
+        if (symmetricDifference(Array.from($eventSet), $func.events).length) {
             areEventsDisabled = false;
         } else areEventsDisabled = true;
     }
@@ -289,11 +283,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>
 
@@ -328,7 +318,7 @@
                 check out the Permissions Guide in our documentation.
             </p>
             <svelte:fragment slot="aside">
-                <Permissions withCrud={false} bind:executeAccess={permissions} />
+                <Roles bind:roles={permissions} />
             </svelte:fragment>
 
             <svelte:fragment slot="actions">
@@ -363,18 +353,16 @@
                             </li>
                         {/each}
                     </TableList>
-                {:else}
-                    <Empty isButton on:click={() => (showEvents = true)}>
-                        Add a event to get started
-                    </Empty>
-                {/if}
 
-                <div class="u-flex u-margin-block-start-16">
-                    <Button text noMargin on:click={() => (showEvents = true)}>
-                        <span class="icon-plus" aria-hidden="true" />
-                        <span class="u-text">Add event</span>
-                    </Button>
-                </div>
+                    <div class="u-flex u-margin-block-start-16">
+                        <Button text noMargin on:click={() => (showEvents = true)}>
+                            <span class="icon-plus" aria-hidden="true" />
+                            <span class="u-text">Add event</span>
+                        </Button>
+                    </div>
+                {:else}
+                    <Empty on:click={() => (showEvents = true)}>Add an event to get started</Empty>
+                {/if}
             </svelte:fragment>
 
             <svelte:fragment slot="actions">
@@ -388,7 +376,7 @@
             <Heading tag="h6" size="7">Update CRON Schedule</Heading>
             <p>
                 Set a CRON schedule to trigger your function. Leave blank for no schedule. <a
-                    href="#/"
+                    href="https://appwrite.io/docs/functions#createFunction"
                     target="_blank"
                     rel="noopener noreferrer"
                     class="link">
@@ -397,7 +385,7 @@
             <svelte:fragment slot="aside">
                 <FormList>
                     <InputCron
-                        bind:value={$func.schedule}
+                        bind:value={functionSchedule}
                         label="Schedule (CRON Syntax)"
                         id="schedule" />
                 </FormList>
@@ -460,8 +448,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>
@@ -524,7 +512,7 @@
                                             <DropListItem
                                                 icon="trash"
                                                 on:click={async () => {
-                                                    handleVariableDeleted(variable.$id);
+                                                    handleVariableDeleted(variable);
                                                     showVariablesDropdown[i] = false;
                                                 }}>
                                                 Delete
@@ -551,7 +539,7 @@
         </svelte:fragment>
     </CardGrid>
 
-    <CardGrid>
+    <CardGrid danger>
         <Heading tag="h6" size="7">Delete Function</Heading>
         <p>
             The function will be permanently deleted, including all deployments associated with it.
@@ -560,7 +548,7 @@
         <svelte:fragment slot="aside">
             <Box>
                 <svelte:fragment slot="title">
-                    <h6 class="u-bold">{$func.name}</h6>
+                    <h6 class="u-bold u-trim-1">{$func.name}</h6>
                 </svelte:fragment>
                 <p>Last Updated: {toLocaleDateTime($func.$updatedAt)}</p>
             </Box>
@@ -573,13 +561,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 000000000..897dbb058
--- /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 854459e13..1ffb3d806 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 d92a4b18f..5c6122235 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 000000000..726e6cd0e
--- /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 c510d9e8e..628eaf11e 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 000000000..fcba697b3
--- /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 35c468d6d..000000000
--- a/src/routes/console/project-[project]/functions/function/[function]/+layout.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-    import { func, execute } from './store';
-    import Execute from './execute.svelte';
-
-    const functionId = $page.params.function;
-    const path = `functions/function/${functionId}`;
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle(event = null) {
-        const promise = func.load(functionId);
-        if ($func?.$id !== functionId) {
-            await promise;
-        }
-
-        updateLayout({
-            navigate: event,
-            title: $func.name,
-            level: 4,
-            back: `${base}/console/project-${$page.params.project}/functions`,
-            copy: {
-                text: 'ID Details',
-                value: functionId
-            },
-            breadcrumbs: {
-                title: $func.name,
-                href: `function/${functionId}`
-            },
-            tabs: [
-                {
-                    href: path,
-                    title: 'Deployments'
-                },
-                {
-                    href: `${path}/usage`,
-                    title: 'Usage'
-                },
-                {
-                    href: `${path}/executions`,
-                    title: 'Executions'
-                },
-                {
-                    href: `${path}/settings`,
-                    title: 'Settings'
-                }
-            ]
-        });
-    }
-</script>
-
-{#if $func}
-    <slot />
-{/if}
-
-{#if $execute}
-    <Execute selectedFunction={$execute} />
-{/if}
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 97973aa9e..000000000
--- 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 a09315308..000000000
--- 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 9ebb1f1a8..000000000
--- 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
new file mode 100644
index 000000000..6ea24a4d9
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/header.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    import { Cover, CoverTitle } from '$lib/layout';
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <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 725cb5238..000000000
--- 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]/functions/wizard/step1.svelte b/src/routes/console/project-[project]/functions/wizard/step1.svelte
index 93ac297e8..6067d9af7 100644
--- a/src/routes/console/project-[project]/functions/wizard/step1.svelte
+++ b/src/routes/console/project-[project]/functions/wizard/step1.svelte
@@ -14,7 +14,7 @@
     onMount(async () => {
         let runtimes = await sdkForProject.functions.listRuntimes();
         options = runtimes.runtimes.map((runtime) => ({
-            label: runtime.name,
+            label: `${runtime.name} - ${runtime.version}`,
             value: runtime.$id
         }));
     });
@@ -39,18 +39,16 @@
             {options}
             required />
 
-        <ul class="form-list">
-            {#if !showCustomId}
-                <div>
-                    <Pill button on:click={() => (showCustomId = !showCustomId)}>
-                        <span class="icon-pencil" aria-hidden="true" /><span class="text">
-                            Function ID
-                        </span>
-                    </Pill>
-                </div>
-            {:else}
-                <CustomId bind:show={showCustomId} name="Function" bind:id={$createFunction.id} />
-            {/if}
-        </ul>
+        {#if !showCustomId}
+            <div>
+                <Pill button on:click={() => (showCustomId = !showCustomId)}>
+                    <span class="icon-pencil" aria-hidden="true" /><span class="text">
+                        Function ID
+                    </span>
+                </Pill>
+            </div>
+        {:else}
+            <CustomId bind:show={showCustomId} name="Function" bind:id={$createFunction.id} />
+        {/if}
     </FormList>
 </WizardStep>
diff --git a/src/routes/console/project-[project]/functions/wizard/step2.svelte b/src/routes/console/project-[project]/functions/wizard/step2.svelte
index 4a8394c9f..4ee422c0e 100644
--- a/src/routes/console/project-[project]/functions/wizard/step2.svelte
+++ b/src/routes/console/project-[project]/functions/wizard/step2.svelte
@@ -1,17 +1,21 @@
 <script lang="ts">
     import { WizardStep } from '$lib/layout';
     import { createFunction } from './store';
-    import { Permissions } from '$lib/components/permissions';
+    import { Roles } from '$lib/components/permissions';
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Execute access (optional)</svelte:fragment>
+    <svelte:fragment slot="title">Execute access</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Choose who can execute this function using the client API. Check out our documentation for
-        more on <a href="#/" target="_blank" rel="noopener noreferrer" class="link">
+        more on <a
+            href="https://appwrite.io/docs/permissions"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link">
             Permissions</a
         >.
     </svelte:fragment>
 
-    <Permissions withCrud={false} bind:executeAccess={$createFunction.execute} />
+    <Roles bind:roles={$createFunction.execute} />
 </WizardStep>
diff --git a/src/routes/console/project-[project]/functions/wizard/step3.svelte b/src/routes/console/project-[project]/functions/wizard/step3.svelte
index efb08fbea..331fab559 100644
--- a/src/routes/console/project-[project]/functions/wizard/step3.svelte
+++ b/src/routes/console/project-[project]/functions/wizard/step3.svelte
@@ -17,13 +17,11 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Events (optional)</svelte:fragment>
+    <svelte:fragment slot="title">Events</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Set the events that will trigger your function. Maximum 100 events allowed.
     </svelte:fragment>
 
-    <span class="u-sep-block-end">EVENT</span>
-
     {#if $createFunction?.events?.length}
         <TableList>
             {#each $createFunction.events as event}
@@ -45,18 +43,15 @@
                 </li>
             {/each}
         </TableList>
+        <div class="u-flex u-margin-block-start-16">
+            <Button text noMargin on:click={() => (showCreate = !showCreate)}>
+                <span class="icon-plus" aria-hidden="true" />
+                <span class="u-text">Add event</span>
+            </Button>
+        </div>
     {:else}
-        <Empty isButton on:click={() => (showCreate = !showCreate)}
-            >Add a event to get started
-        </Empty>
+        <Empty on:click={() => (showCreate = !showCreate)}>Add an event to get started</Empty>
     {/if}
-
-    <div class="u-flex u-margin-block-start-16">
-        <Button text noMargin on:click={() => (showCreate = !showCreate)}>
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="u-text">Add event</span>
-        </Button>
-    </div>
 </WizardStep>
 
 {#if showCreate}
diff --git a/src/routes/console/project-[project]/functions/wizard/step4.svelte b/src/routes/console/project-[project]/functions/wizard/step4.svelte
index 1adcbf147..2203bd16d 100644
--- a/src/routes/console/project-[project]/functions/wizard/step4.svelte
+++ b/src/routes/console/project-[project]/functions/wizard/step4.svelte
@@ -5,10 +5,10 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Scheduling (optional)</svelte:fragment>
+    <svelte:fragment slot="title">Scheduling</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Set a CRON schedule to trigger your function. Leave blank for no schedule. <a
-            href="#/"
+            href="https://appwrite.io/docs/functions#createFunction"
             target="_blank"
             rel="noopener noreferrer"
             class="link">More details on CRON syntax here</a
diff --git a/src/routes/console/project-[project]/functions/wizard/step5.svelte b/src/routes/console/project-[project]/functions/wizard/step5.svelte
index ba0f4e8cc..f3cf1c9ae 100644
--- a/src/routes/console/project-[project]/functions/wizard/step5.svelte
+++ b/src/routes/console/project-[project]/functions/wizard/step5.svelte
@@ -22,7 +22,16 @@
 
     function handleCreated(dispatchEvent: CustomEvent) {
         createFunction.update((n) => {
-            n.vars.push(dispatchEvent.detail);
+            if (n.vars.length) {
+                n.vars.map((v) => {
+                    if (v.key !== dispatchEvent.detail.key) {
+                        n.vars.push(dispatchEvent.detail);
+                    }
+                });
+            } else {
+                n.vars.push(dispatchEvent.detail);
+            }
+
             return n;
         });
     }
@@ -35,7 +44,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Variables (optional)</svelte:fragment>
+    <svelte:fragment slot="title">Variables</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Create a variable (or secret key) that will be passed to your function at runtime.
     </svelte:fragment>
@@ -91,19 +100,15 @@
                 {/each}
             </TableBody>
         </Table>
+        <div class="u-flex u-margin-block-start-16">
+            <Button text noMargin on:click={() => (showCreate = !showCreate)}>
+                <span class="icon-plus" aria-hidden="true" />
+                <span class="u-text">Create variable</span>
+            </Button>
+        </div>
     {:else}
-        <span class="u-sep-block-end">VARIABLES</span>
-
-        <Empty isButton on:click={() => (showCreate = !showCreate)}
-            >Create a variable to get started
-        </Empty>
+        <Empty on:click={() => (showCreate = !showCreate)}>Create a variable to get started</Empty>
     {/if}
-    <div class="u-flex u-margin-block-start-16">
-        <Button text noMargin on:click={() => (showCreate = !showCreate)}>
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="u-text">Create variable</span>
-        </Button>
-    </div>
 </WizardStep>
 
 {#if showCreate}
diff --git a/src/routes/console/project-[project]/overview/+layout.svelte b/src/routes/console/project-[project]/overview/+layout.svelte
index 3bb090593..90877e51a 100644
--- a/src/routes/console/project-[project]/overview/+layout.svelte
+++ b/src/routes/console/project-[project]/overview/+layout.svelte
@@ -1,24 +1,42 @@
+<script context="module" lang="ts">
+    const formatter = Intl.NumberFormat('en', {
+        notation: 'compact'
+    });
+
+    // TODO: metric type is wrong
+    export function last(set: Array<unknown>): Models.Metric | null {
+        return (set as Models.Metric[]).slice(-1)[0] ?? null;
+    }
+
+    // TODO: metric type is wrong
+    export function total(set: Array<unknown>): number {
+        return (set as Models.Metric[]).reduce((prev, curr) => prev + curr.value, 0);
+    }
+
+    export function format(number: number): string {
+        return formatter.format(number);
+    }
+</script>
+
 <script lang="ts">
     import type { Models } from '@aw-labs/appwrite-console';
     import { Container, type UsagePeriods } from '$lib/layout';
     import { page } from '$app/stores';
-    import { browser } from '$app/environment';
-    import { tabs, title, backButton, copyData } from '$lib/stores/layout';
-    import { sdkForConsole } from '$lib/stores/sdk';
-    import { project } from '../store';
+    import { onboarding, project } from '../store';
     import { usage } from './store';
     import { onMount } from 'svelte';
     import { afterNavigate } from '$app/navigation';
-    import { DropList, DropListItem, Heading } from '$lib/components';
-    import { BarChart, LineChart } from '$lib/charts';
+    import { Heading } from '$lib/components';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
+    import { base } from '$app/paths';
+    import Realtime from './realtime.svelte';
+    import Bandwith from './bandwith.svelte';
+    import Requests from './requests.svelte';
+    import Onboard from './onboard.svelte';
 
     $: projectId = $page.params.project;
     $: path = `/console/project-${projectId}/overview`;
-
     let period: UsagePeriods = '30d';
-    let showPeriodBandwidth = false;
-    let showPeriodRequests = false;
 
     onMount(handle);
     afterNavigate(handle);
@@ -29,60 +47,12 @@
         if ($usage) {
             await promise;
         }
-
-        title.set($project.name);
-        tabs.set([]);
-        backButton.set('');
-
-        copyData.set({
-            text: 'Project ID',
-            value: $project.$id
-        });
-    }
-
-    const formatter = Intl.NumberFormat('en', {
-        notation: 'compact'
-    });
-
-    // TODO: metric type is wrong
-    function last(set: Array<unknown>): Models.Metric | null {
-        return (set as Models.Metric[]).slice(-1)[0] ?? null;
-    }
-
-    // TODO: metric type is wrong
-    function total(set: Array<unknown>): number {
-        return (set as Models.Metric[]).reduce((prev, curr) => prev + curr.value, 0);
-    }
-
-    function format(number: number): string {
-        return formatter.format(number);
     }
 
     function changePeriod(newPeriod: UsagePeriods) {
         period = newPeriod;
         usage.load(projectId, period);
-        showPeriodBandwidth = false;
-        showPeriodRequests = false;
     }
-
-    if (browser) {
-        sdkForConsole.client.subscribe<unknown>('console', (message) => {
-            if (message.events.includes('stats.connections')) {
-                // TODO: take care of realtime connections
-                return;
-            }
-        });
-    }
-
-    //TODO: workaround for broken types
-    $: network = $usage?.network as unknown as Array<{
-        date: number;
-        value: number;
-    }>;
-    $: requests = $usage?.requests as unknown as Array<{
-        date: number;
-        value: number;
-    }>;
 </script>
 
 <svelte:head>
@@ -91,236 +61,161 @@
 
 {#if $project}
     <Container overlapCover>
-        {#if $usage}
-            {@const bandwith = humanFileSize(total($usage.network))}
-            {@const storage = humanFileSize(last($usage.storage).value)}
-            <section class="common-section">
-                <div class="grid-dashboard-1s-2m-6l">
-                    <div class="card is-2-columns-medium-screen is-3-columns-large-screen">
-                        <div class="u-flex u-gap-16 u-main-space-between">
-                            <div>
-                                <div class="heading-level-4">
-                                    {bandwith.value}
-                                    <span class="body-text-2">{bandwith.unit}</span>
-                                </div>
-                                <div>Bandwidth</div>
-                            </div>
-                            <DropList
-                                bind:show={showPeriodBandwidth}
-                                placement="bottom-start"
-                                childStart>
-                                <button
-                                    class="transparent-button"
-                                    on:click={() => (showPeriodBandwidth = !showPeriodBandwidth)}>
-                                    <span class="text">{period}</span>
-                                    <span class="icon-cheveron-down" aria-hidden="true" />
-                                </button>
-                                <svelte:fragment slot="list">
-                                    <DropListItem on:click={() => changePeriod('24h')}>
-                                        24h
-                                    </DropListItem>
-                                    <DropListItem on:click={() => changePeriod('30d')}>
-                                        30d
-                                    </DropListItem>
-                                    <DropListItem on:click={() => changePeriod('90d')}>
-                                        90d
-                                    </DropListItem>
-                                </svelte:fragment>
-                            </DropList>
+        {#if $onboarding}
+            <Onboard {projectId} />
+        {:else}
+            {#if $usage}
+                {@const storage = humanFileSize(last($usage.storage).value)}
+                <section class="common-section">
+                    <div class="grid-dashboard-1s-2m-6l">
+                        <div class="card is-2-columns-medium-screen is-3-columns-large-screen">
+                            <Bandwith {period} on:change={(e) => changePeriod(e.detail)} />
                         </div>
-                        {#if network.length}
-                            <BarChart
-                                series={[
-                                    {
-                                        name: 'Bandwidth',
-                                        data: [...network.map((e) => [e.date, e.value])]
-                                    }
-                                ]} />
-                        {/if}
-                    </div>
-                    <div class="card is-2-columns-medium-screen is-3-columns-large-screen">
-                        <div class="u-flex u-gap-16 u-main-space-between">
-                            <div>
-                                <div class="heading-level-4">
-                                    {format(total($usage.requests))}
-                                </div>
-                                <div>Requests</div>
-                            </div>
-                            <DropList
-                                bind:show={showPeriodRequests}
-                                placement="bottom-start"
-                                childStart>
-                                <button
-                                    class="transparent-button"
-                                    on:click={() => (showPeriodRequests = !showPeriodRequests)}>
-                                    <span class="text">{period}</span>
-                                    <span class="icon-cheveron-down" aria-hidden="true" />
-                                </button>
-                                <svelte:fragment slot="list">
-                                    <DropListItem on:click={() => changePeriod('24h')}>
-                                        24h
-                                    </DropListItem>
-                                    <DropListItem on:click={() => changePeriod('30d')}>
-                                        30d
-                                    </DropListItem>
-                                    <DropListItem on:click={() => changePeriod('90d')}>
-                                        90d
-                                    </DropListItem>
-                                </svelte:fragment>
-                            </DropList>
+                        <div class="card is-2-columns-medium-screen is-3-columns-large-screen">
+                            <Requests {period} on:change={(e) => changePeriod(e.detail)} />
                         </div>
-                        {#if network.length}
-                            <LineChart
-                                series={[
-                                    {
-                                        name: 'Requests',
-                                        data: [...requests.map((e) => [e.date, e.value])]
-                                    }
-                                ]} />
-                        {/if}
-                    </div>
-                    <div class="card is-2-columns-large-screen">
-                        <div class="grid-item-1">
-                            <div class="grid-item-1-start-start">
-                                <div class="eyebrow-heading-3">
-                                    <span class="icon-database" aria-hidden="true" />
-                                    <span class="text">Database</span>
+                        <a
+                            href={`${base}/console/project-${projectId}/databases`}
+                            class="card is-2-columns-large-screen">
+                            <div class="grid-item-1">
+                                <div class="grid-item-1-start-start">
+                                    <div class="eyebrow-heading-3">
+                                        <span class="icon-database" aria-hidden="true" />
+                                        <span class="text">Database</span>
+                                    </div>
+                                </div>
+
+                                <div class="grid-item-1-start-end" />
+
+                                <div class="grid-item-1-end-start">
+                                    <div class="heading-level-4">
+                                        {format(last($usage.documents).value)}
+                                    </div>
+                                    <div>Documents</div>
+                                </div>
+
+                                <div class="grid-item-1-end-end">
+                                    <div class="text">Databases: XX</div>
                                 </div>
                             </div>
+                        </a>
+                        <a
+                            href={`${base}/console/project-${projectId}/storage`}
+                            class="card is-2-columns-large-screen">
+                            <div class="grid-item-1">
+                                <div class="grid-item-1-start-start">
+                                    <div class="eyebrow-heading-3">
+                                        <span class="icon-folder" aria-hidden="true" />
+                                        <span class="text">Storage</span>
+                                    </div>
+                                </div>
 
-                            <div class="grid-item-1-start-end" />
+                                <div class="grid-item-1-start-end" />
 
-                            <div class="grid-item-1-end-start">
-                                <div class="heading-level-4">XX</div>
-                                <div>Databases</div>
+                                <div class="grid-item-1-end-start">
+                                    <div class="heading-level-4">
+                                        {storage.value}
+                                        <span class="body-text-2">{storage.unit}</span>
+                                    </div>
+                                    <div>Storage</div>
+                                </div>
+
+                                <div class="grid-item-1-end-end">
+                                    <div class="text">Buckets: XX</div>
+                                </div>
                             </div>
+                        </a>
+                        <a
+                            href={`${base}/console/project-${projectId}/auth`}
+                            class="card is-2-columns-large-screen">
+                            <div class="grid-item-1">
+                                <div class="grid-item-1-start-start">
+                                    <div class="eyebrow-heading-3">
+                                        <span class="icon-user-group" aria-hidden="true" />
+                                        <span class="text">Auth</span>
+                                    </div>
+                                </div>
 
-                            <div class="grid-item-1-end-end">
-                                <div class="text">Documents: {last($usage.documents).value}</div>
+                                <div class="grid-item-1-start-end" />
+
+                                <div class="grid-item-1-end-start">
+                                    <div class="heading-level-4">
+                                        {format(last($usage.users).value)}
+                                    </div>
+                                    <div>Users</div>
+                                </div>
                             </div>
+                        </a>
+                        <a
+                            href={`${base}/console/project-${projectId}/functions`}
+                            class="card is-2-columns-large-screen">
+                            <div class="grid-item-1">
+                                <div class="grid-item-1-start-start">
+                                    <div class="eyebrow-heading-3">
+                                        <span class="icon-lightning-bolt" aria-hidden="true" />
+                                        <span class="text">Functions</span>
+                                    </div>
+                                </div>
+
+                                <div class="grid-item-1-start-end" />
+
+                                <div class="grid-item-1-end-start">
+                                    <div class="heading-level-4">
+                                        {format(last($usage.executions).value)}
+                                    </div>
+                                    <div>Executions</div>
+                                </div>
+
+                                <div class="grid-item-1-end-end">
+                                    <div class="text" />
+                                </div>
+                            </div>
+                        </a>
+                        <div
+                            class="card is-2-columns-medium-screen is-2-columns-large-screen is-2-rows-large-screen is-location-row-2-end-large-screen">
+                            <Realtime />
                         </div>
                     </div>
-                    <div class="card is-2-columns-large-screen">
-                        <div class="grid-item-1">
-                            <div class="grid-item-1-start-start">
-                                <div class="eyebrow-heading-3">
-                                    <span class="icon-folder" aria-hidden="true" />
-                                    <span class="text">Storage</span>
-                                </div>
-                            </div>
+                </section>
+            {/if}
 
-                            <div class="grid-item-1-start-end" />
+            <section class="common-section u-margin-block-start-100">
+                <Heading tag="h2" size="5">Integrations</Heading>
+                <div class="tabs u-margin-block-start-24 u-sep-block-end">
+                    <button
+                        class="tabs-button-scroll is-start u-hide"
+                        aria-label="Show items in start side">
+                        <span class="icon-cheveron-left" aria-hidden="true" />
+                    </button>
+                    <button
+                        class="tabs-button-scroll is-end u-hide"
+                        aria-label="Show items in end side">
+                        <span class="icon-cheveron-right" aria-hidden="true" />
+                    </button>
+                    <ul class="tabs-list" data-sveltekit-noscroll>
+                        <li class="tabs-item">
+                            <a
+                                class="tabs-button"
+                                href={`${path}/platforms`}
+                                class:is-selected={$page.url.pathname === `${path}/platforms`}>
+                                <span class="text">Platforms</span>
+                            </a>
+                        </li>
+                        <li class="tabs-item">
+                            <a
+                                class="tabs-button"
+                                href={`${path}/keys`}
+                                class:is-selected={$page.url.pathname === `${path}/keys`}>
+                                <span class="text">API Keys</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
 
-                            <div class="grid-item-1-end-start">
-                                <div class="heading-level-4">
-                                    {storage.value}
-                                    <span class="body-text-2">{storage.unit}</span>
-                                </div>
-                                <div>Storage</div>
-                            </div>
-
-                            <div class="grid-item-1-end-end">
-                                <div class="text">Buckets: XX</div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="card is-2-columns-large-screen">
-                        <div class="grid-item-1">
-                            <div class="grid-item-1-start-start">
-                                <div class="eyebrow-heading-3">
-                                    <span class="icon-user-group" aria-hidden="true" />
-                                    <span class="text">authentication</span>
-                                </div>
-                            </div>
-
-                            <div class="grid-item-1-start-end" />
-
-                            <div class="grid-item-1-end-start">
-                                <div class="heading-level-4">
-                                    {format(last($usage.users).value)}
-                                </div>
-                                <div>Users</div>
-                            </div>
-
-                            <div class="grid-item-1-end-end">
-                                <div class="text">Sessions: XX</div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="card is-2-columns-large-screen">
-                        <div class="grid-item-1">
-                            <div class="grid-item-1-start-start">
-                                <div class="eyebrow-heading-3">
-                                    <span class="icon-lightning-bolt" aria-hidden="true" />
-                                    <span class="text">Functions</span>
-                                </div>
-                            </div>
-
-                            <div class="grid-item-1-start-end" />
-
-                            <div class="grid-item-1-end-start">
-                                <div class="heading-level-4">
-                                    {format(last($usage.executions).value)}
-                                </div>
-                                <div>Executions</div>
-                            </div>
-
-                            <div class="grid-item-1-end-end">
-                                <div class="text" />
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        class="card is-2-columns-medium-screen is-2-columns-large-screen is-2-rows-large-screen is-location-row-2-end-large-screen">
-                        <div class="heading-level-4">XX</div>
-                        <div>Realtime Connections</div>
-                    </div>
+                <div class="u-margin-block-start-40">
+                    <slot />
                 </div>
             </section>
         {/if}
-
-        <section class="common-section u-margin-block-start-100">
-            <Heading tag="h2" size="5">Integrations</Heading>
-            <div class="tabs u-margin-block-start-24 u-sep-block-end">
-                <button
-                    class="tabs-button-scroll is-start u-hide"
-                    aria-label="Show items in start side">
-                    <span class="icon-cheveron-left" aria-hidden="true" />
-                </button>
-                <button
-                    class="tabs-button-scroll is-end u-hide"
-                    aria-label="Show items in end side">
-                    <span class="icon-cheveron-right" aria-hidden="true" />
-                </button>
-                <ul class="tabs-list" data-sveltekit-noscroll>
-                    <li class="tabs-item">
-                        <a
-                            class="tabs-button"
-                            href={`${path}/platforms`}
-                            class:is-selected={$page.url.pathname === `${path}/platforms`}>
-                            <span class="text">Platforms</span>
-                        </a>
-                    </li>
-                    <li class="tabs-item">
-                        <a
-                            class="tabs-button"
-                            href={`${path}/keys`}
-                            class:is-selected={$page.url.pathname === `${path}/keys`}>
-                            <span class="text">API Keys</span>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-
-            <div class="u-margin-block-start-40">
-                <slot />
-            </div>
-        </section>
     </Container>
 {/if}
-
-<style>
-    .grid-item-1 {
-        min-block-size: 6.5rem; /* TODO: remove */
-    }
-</style>
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 000000000..7db345058
--- /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/bandwith.svelte b/src/routes/console/project-[project]/overview/bandwith.svelte
new file mode 100644
index 000000000..7e040eb61
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/bandwith.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+    import { Card, DropList, DropListItem } from '$lib/components';
+    import { humanFileSize } from '$lib/helpers/sizeConvertion';
+    import { total } from './+layout.svelte';
+    import { usage } from './store';
+    import type { UsagePeriods } from '$lib/layout';
+    import { createEventDispatcher } from 'svelte';
+    import { BarChart } from '$lib/charts';
+
+    export let period: UsagePeriods;
+
+    let showPeriod = false;
+
+    const dispatch = createEventDispatcher();
+
+    $: network = $usage?.network as unknown as Array<{
+        date: number;
+        value: number;
+    }>;
+    $: bandwith = humanFileSize(total($usage.network));
+</script>
+
+<div class="u-flex u-gap-16 u-main-space-between">
+    <div>
+        <div class="heading-level-4">
+            {bandwith.value}
+            <span class="body-text-2">{bandwith.unit}</span>
+        </div>
+        <div>Bandwidth</div>
+    </div>
+    <DropList bind:show={showPeriod} placement="bottom-start" childStart noArrow>
+        <button class="transparent-button" on:click={() => (showPeriod = !showPeriod)}>
+            <span class="text">{period}</span>
+            <span class="icon-cheveron-down" aria-hidden="true" />
+        </button>
+        <svelte:fragment slot="list">
+            <DropListItem on:click={() => dispatch('change', '24h')}>24h</DropListItem>
+            <DropListItem on:click={() => dispatch('change', '30d')}>30d</DropListItem>
+            <DropListItem on:click={() => dispatch('change', '90d')}>90d</DropListItem>
+        </svelte:fragment>
+    </DropList>
+</div>
+{#if bandwith.value !== '0'}
+    <div style="height: 12rem;">
+        <BarChart
+            options={{
+                yAxis: {
+                    axisLabel: {
+                        formatter: (value) =>
+                            value
+                                ? `${humanFileSize(+value).value} ${humanFileSize(+value).unit}`
+                                : '0'
+                    }
+                }
+            }}
+            series={[
+                {
+                    name: 'Bandwidth',
+                    data: [...network.map((e) => [e.date, e.value])],
+                    tooltip: {
+                        valueFormatter: (value) =>
+                            `${humanFileSize(+value).value} ${humanFileSize(+value).unit}`
+                    }
+                }
+            ]} />
+    </div>
+{:else}
+    <Card isDashed>
+        <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
+            <span
+                class="icon-chart-square-bar text-large"
+                aria-hidden="true"
+                style="font-size: 32px;" />
+            <p class="u-bold">No data to show</p>
+        </div>
+    </Card>
+{/if}
diff --git a/src/routes/console/project-[project]/overview/breadcrumbs.svelte b/src/routes/console/project-[project]/overview/breadcrumbs.svelte
new file mode 100644
index 000000000..cf6b91aec
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/breadcrumbs.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+    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/project-${$project?.$id}`,
+            title: $project?.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/overview/header.svelte b/src/routes/console/project-[project]/overview/header.svelte
new file mode 100644
index 000000000..ee3ea2506
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { Copy } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Cover, CoverTitle } from '$lib/layout';
+    import { project } from '../store';
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <CoverTitle>
+            {$project?.name}
+        </CoverTitle>
+        <Copy value={$project.$id}>
+            <Pill button>
+                <span class="icon-duplicate" aria-hidden="true" />
+                Project ID
+            </Pill>
+        </Copy>
+    </svelte:fragment>
+</Cover>
diff --git a/src/routes/console/project-[project]/overview/intro-dark.svg b/src/routes/console/project-[project]/overview/intro-dark.svg
new file mode 100644
index 000000000..30629f75e
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/intro-dark.svg
@@ -0,0 +1,264 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 424.4 191.1" style="enable-background:new 0 0 424.4 191.1;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:url(#SVGID_00000142885517343536665010000014201853629063367808_);}
+	.st2{fill:#1F202E;fill-opacity:0.25;}
+	.st3{fill:url(#SVGID_00000015321750630219403960000008935308037696241071_);}
+	.st4{fill:url(#SVGID_00000104699251513228500350000001254837238495643043_);}
+	.st5{fill:#14141F;fill-opacity:0.24;}
+	.st6{fill:#20202F;fill-opacity:0.26;}
+	.st7{fill-rule:evenodd;clip-rule:evenodd;fill:#14141F;fill-opacity:0.26;}
+	.st8{opacity:0.8;}
+	.st9{fill:#C00D53;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000069381323521629319590000011098246531548226487_);}
+	.st11{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000074413441820536526900000012778315149397095304_);}
+	.st12{fill-rule:evenodd;clip-rule:evenodd;fill:#252736;}
+	.st13{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000121278480221221543010000005768761693135342004_);}
+	.st14{fill-rule:evenodd;clip-rule:evenodd;fill:#6B7284;}
+	.st15{fill-rule:evenodd;clip-rule:evenodd;fill:#6A7183;}
+	.st16{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000091728598835065986980000000329787063612547752_);}
+	.st17{fill:#232634;}
+	.st18{fill:url(#SVGID_00000178179481832286420410000003347931513612733588_);}
+	.st19{fill:url(#SVGID_00000066511038083839903610000009096097230288899261_);}
+	.st20{fill:url(#SVGID_00000030475345589648125490000010305871866420153517_);}
+	.st21{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000069364483919980655510000000374149805581267596_);}
+	.st22{fill:#FFFFFF;}
+	.st23{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000098188206123596186020000014780826931092904332_);}
+	.st24{fill:#72798A;}
+	.st25{fill-rule:evenodd;clip-rule:evenodd;fill:#737A8B;}
+	.st26{fill:#212331;}
+	.st27{fill:#A3A8BD;fill-opacity:0.44;}
+	.st28{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000147909540178171813720000014468453641682545306_);}
+	.st29{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000000190969851564865220000012329315323325246606_);}
+	.st30{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000159463521060491178850000003744963206558716816_);}
+	.st31{fill:url(#SVGID_00000029022640935143671830000001107380081357136546_);}
+	.st32{fill:url(#SVGID_00000011743617506039840450000005445008086251978155_);}
+	.st33{fill:url(#SVGID_00000176738020288317272010000007311834162452667796_);}
+	.st34{fill:url(#SVGID_00000109714025646878893640000006129900393855983010_);}
+	.st35{fill:url(#SVGID_00000080923722808042938030000012569415380901445778_);}
+	.st36{fill:url(#SVGID_00000101061571767078578760000005053774929722226056_);}
+	.st37{fill:#252736;}
+	.st38{fill:url(#SVGID_00000071560665801589357040000014811445969369430713_);}
+	.st39{fill:#878E9F;}
+	.st40{fill:#C4295C;}
+	.st41{fill:#A2144F;}
+	.st42{fill:#616B7C;}
+</style>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="244.831" y1="141.2354" x2="139.063" y2="-67.7646" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
+	<stop  offset="0" style="stop-color:#4F5769"/>
+	<stop  offset="1" style="stop-color:#282A3B"/>
+</linearGradient>
+<path class="st0" d="M5.9,133.3L101.8,14l106.4,0l89.6,79.7l110.8,5.4l-72.3,92h-149l-80-56.7L5.9,133.3z"/>
+<linearGradient id="SVGID_00000158736875229733007750000014631219022261061290_" gradientUnits="userSpaceOnUse" x1="449.6474" y1="343.8356" x2="157.4224" y2="17.1056" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
+	<stop  offset="0" style="stop-color:#373B4D"/>
+	<stop  offset="1" style="stop-color:#35394C"/>
+</linearGradient>
+<path style="fill:url(#SVGID_00000158736875229733007750000014631219022261061290_);" d="M112.8,132.8l95.7-119.2l86.3,77.1
+	l-74.5,100.4h-12.3h-20L112.8,132.8z"/>
+<path class="st2" d="M137.2,36.4c-11.2-8.9-41.9-0.6-56.7,4.7l21.5-27.5h105.2l31.5,27.5c-9.3,2.1-21.6,11.3-46.1,15.8
+	C170.5,60.9,151.2,47.5,137.2,36.4z"/>
+<g>
+	
+		<linearGradient id="SVGID_00000142872493212902564800000004993749228445041855_" gradientUnits="userSpaceOnUse" x1="-24.6018" y1="196.3491" x2="-24.6018" y2="148.1309" gradientTransform="matrix(0.9774 0.2273 0.1613 -0.9948 228.3344 235.4618)">
+		<stop  offset="0" style="stop-color:#252736"/>
+		<stop  offset="1" style="stop-color:#212432"/>
+	</linearGradient>
+	<path style="fill:url(#SVGID_00000142872493212902564800000004993749228445041855_);" d="M239.9,10.6c9.9,2.3,16.2,14.9,14.1,28.2
+		S242,60.8,232.1,58.5S215.9,43.6,218,30.4C220.2,17.1,229.9,8.3,239.9,10.6z"/>
+</g>
+<linearGradient id="SVGID_00000124131868460139146580000010721796754471463861_" gradientUnits="userSpaceOnUse" x1="-22.9408" y1="189.9565" x2="-9.5556" y2="138.443" gradientTransform="matrix(0.9774 0.2273 0.1613 -0.9948 230.6934 234.912)">
+	<stop  offset="0" style="stop-color:#464C5B"/>
+	<stop  offset="1" style="stop-color:#3E4453"/>
+</linearGradient>
+<path style="fill:url(#SVGID_00000124131868460139146580000010721796754471463861_);" d="M242.2,10c8.9,2.1,14.4,14.5,12.2,27.7
+	c-2.1,13.2-11.1,22.3-20,20.2c-8.9-2.1-14.4-14.5-12.2-27.7S233.3,7.9,242.2,10z"/>
+<g>
+	<path shape-rendering="crispEdges" class="st5" d="M28.9,105.1c0,0-13.9,17.4-22.1,28.5l102.2,1.2l79.3,56.9
+		c-67.3-53.5-56.1-74.9-74.7-83.6c-18.6-8.7-30.8,10.5-51.7,0C51.9,103,51.5,77.8,28.9,105.1z"/>
+</g>
+<path class="st6" d="M333.6,121.4c-5.1-10.3,2.1-21.5,6.4-25.8l68.9,3.5l-45.7,60.5c0.2-3.1-0.1-10.9-2.9-17
+	C356.7,134.9,340,134.3,333.6,121.4z"/>
+<path class="st7" d="M113.8,83.6c0,0,2.3-1.5,2.3-1.5l1.2-8.5c0.4,0.1,1,0.3,1.6,0.5c6.8,2,13.9,4.9,18.4,10.4l0,0
+	c3.8,4.7,6.4,9.5,8.5,13.9c0.5,1.1,1,2.1,1.5,3.1c1.5,3.2,2.8,5.9,4.5,8.5c2,3.2,4.2,6.9,7.4,8.8c3.2,1.9,7.7,3.6,14.5,4.2
+	c15.5,1.5,24.9-7.6,36.4-17.6l0.3-0.3c11.1-9.7,24.4-21.2,45.9-18.8c14.5,1.6,24,7.4,30.3,15.1c6.1,7.4,8.8,16,10.6,22.2
+	c0.7,2.6,1.4,5.9,2,9c0.2,0.9,0.3,1.8,0.5,2.7c0.8,4.2,1.8,8.3,3.2,12.2c2.8,7.6,7.1,13.6,15.5,16c15.8,4.6,55.2-23,61.5-25.7
+	l-11,13.8c-5.8,7-34.5,29.9-54,24.2c-13.7-4-20.4-14.1-24-23.9c-1.8-4.9-2.9-9.8-3.7-14.1c-0.2-1.2-0.4-2.2-0.6-3.3
+	c-0.6-3-1-5.4-1.6-7.4c-1.7-6-3.8-13.5-8.1-18.7c-4.1-4.9-10.5-9.3-21.9-10.5c-15.5-1.7-24.9,7.3-36.4,17.2
+	c-0.2,0.2-0.4,0.3-0.6,0.5c-11,9.6-24.2,21-45.4,19c-8.3-0.8-14.7-2.8-19.9-6c-5.2-3.2-8.8-7.4-11.5-11.7c-2.1-3.3-3.8-6.9-5.4-10.2
+	c-0.4-0.9-0.8-1.7-1.2-2.6c-2-4.1-4.1-7.9-6.9-11.4c-2.3-2.8-4.6-5.1-6.6-6.7c-1-0.8-1.9-1.4-2.5-1.8
+	C117.7,83.8,113.9,83.6,113.8,83.6z"/>
+<g class="st8">
+	<g>
+		<path class="st9" d="M113,82.4c0.9,1.2,3.9,2.3,4.2,2.2c0.2,0.1,0.8,0.1,1.5-0.6c0.9-0.9,12-19.8,16.4-29.2
+			c4.4-9.3,3.8-13.4,3.2-18.7c-0.6-5.2-6.2-12-10.6-13.1c-4.4-1.2,6.2,16.1-4.1,24.3c-10.3,8.2-25-1.5-24.1,3.7
+			C100.5,56.3,111.8,80.9,113,82.4z"/>
+	</g>
+	
+		<linearGradient id="SVGID_00000095319538511799997670000010828145058603694266_" gradientUnits="userSpaceOnUse" x1="192.7159" y1="53.6944" x2="91.9038" y2="160.3544" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
+		<stop  offset="0" style="stop-color:#DA1A5B"/>
+		<stop  offset="1" style="stop-color:#F02E65"/>
+	</linearGradient>
+	<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000095319538511799997670000010828145058603694266_);" d="
+		M113.7,82.8c-0.3,0.1-1.1,0-2.1-1.2c-1.2-1.5-14.7-27.1-15.6-32.4c-0.9-5.2-2.6-15.4,6.8-24.6c7-6.9,17-4.6,21.4-3.4
+		c4.4,1.2,10,7.9,10.6,13.1c0,0.1,0,0.2,0,0.4c0.6,5.1,1,9.2-3.3,18.3c-4.4,9.3-15.6,28.3-16.4,29.2
+		C114.4,82.9,113.9,82.9,113.7,82.8z M113.9,50.9c5.4,0,9.8-5,9.8-11.1s-4.4-11.1-9.8-11.1c-5.4,0-9.8,5-9.8,11.1
+		S108.5,50.9,113.9,50.9z"/>
+	<path class="st9" d="M105,44.6c1.9,5.3,6.2,6.2,8.9,6.2c-4-3.1-5.1-5.4-5.8-7.5c-0.6-1.8-0.9-3.6,0-8c0.4-2.2,3-6.1,4.4-6.7
+		c-1.3,0.1-4.9,1.2-6.7,4C103.7,36.2,103.3,39.8,105,44.6z"/>
+</g>
+<linearGradient id="SVGID_00000013190673004317531570000009135951069778102698_" gradientUnits="userSpaceOnUse" x1="238.8301" y1="144.0437" x2="232.3811" y2="139.5186" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
+	<stop  offset="0" style="stop-color:#242735"/>
+	<stop  offset="1" style="stop-color:#252736"/>
+</linearGradient>
+<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000013190673004317531570000009135951069778102698_);" d="
+	M232.9,44.4l-1.1-10.3l3.2-0.4l4.6,14.8l-2.9,1.3L232.9,44.4z"/>
+<path class="st12" d="M231.8,34.1l2.8-1.3l2.9,0.7l6.6,4.1l-2.8,1.3l-8.9,0.9L231.8,34.1z"/>
+<linearGradient id="SVGID_00000155133873949132804050000008545361950813754251_" gradientUnits="userSpaceOnUse" x1="242.106" y1="158.2374" x2="232.154" y2="151.2538" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
+	<stop  offset="0" style="stop-color:#222534"/>
+	<stop  offset="1" style="stop-color:#252736"/>
+</linearGradient>
+<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000155133873949132804050000008545361950813754251_);" d="
+	M230.9,25.2l0.6,5.8l13.9-1.4l2.8-1.3l-6.6-4.2l-7.8-0.3L230.9,25.2z"/>
+<path class="st14" d="M235.8,43.1l-1.1-10.3l3.2-0.4l1.7,16.1L235.8,43.1z"/>
+<path class="st15" d="M234.6,32.8l5.7-0.6l3.8,5.4l-8.9,0.9L234.6,32.8z"/>
+<linearGradient id="SVGID_00000165214235479653008570000014422174056093356472_" gradientUnits="userSpaceOnUse" x1="244.8016" y1="159.7769" x2="234.8506" y2="152.7933" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
+	<stop  offset="0" style="stop-color:#6D7486"/>
+	<stop  offset="1" style="stop-color:#61697B"/>
+</linearGradient>
+<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000165214235479653008570000014422174056093356472_);" d="
+	M233.7,23.9l0.6,5.8l13.9-1.4l-3.8-5.5L233.7,23.9z"/>
+<g>
+	<ellipse class="st17" cx="43.3" cy="77.6" rx="19.5" ry="22"/>
+</g>
+<linearGradient id="SVGID_00000081635111000780607750000016427041494248675217_" gradientUnits="userSpaceOnUse" x1="71.587" y1="138.3428" x2="28.5871" y2="95.3428" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
+	<stop  offset="0" style="stop-color:#535A6A"/>
+	<stop  offset="1" style="stop-color:#353947"/>
+</linearGradient>
+<ellipse style="fill:url(#SVGID_00000081635111000780607750000016427041494248675217_);" cx="39.3" cy="77.1" rx="19.5" ry="21.5"/>
+<linearGradient id="SVGID_00000144319357159291417670000015825048474101387414_" gradientUnits="userSpaceOnUse" x1="226.7439" y1="48.1652" x2="242.0419" y2="7.0902" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
+	<stop  offset="0" style="stop-color:#252736"/>
+	<stop  offset="1" style="stop-color:#202230"/>
+</linearGradient>
+<ellipse style="fill:url(#SVGID_00000144319357159291417670000015825048474101387414_);" cx="235.3" cy="158.1" rx="18.5" ry="20.5"/>
+<g>
+	
+		<linearGradient id="SVGID_00000099641561758305425560000006258368169424830379_" gradientUnits="userSpaceOnUse" x1="226.1708" y1="50.9241" x2="265.9688" y2="-33.5749" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
+		<stop  offset="0" style="stop-color:#555C6D"/>
+		<stop  offset="1" style="stop-color:#343947"/>
+	</linearGradient>
+	
+		<ellipse style="fill:url(#SVGID_00000099641561758305425560000006258368169424830379_);" cx="238.3" cy="158.1" rx="17.5" ry="20.5"/>
+</g>
+<linearGradient id="SVGID_00000134942220632718391400000012995103895491178902_" gradientUnits="userSpaceOnUse" x1="244.0473" y1="22.5866" x2="228.2992" y2="24.5776" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
+	<stop  offset="0" style="stop-color:#2F3342"/>
+	<stop  offset="1" style="stop-color:#252736"/>
+</linearGradient>
+<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000134942220632718391400000012995103895491178902_);" d="
+	M239.6,164.3l-2.9,0.7l0.4,3.1c0.1,0.7-0.4,1.3-1,1.5c-0.6,0.2-1.2-0.2-1.3-0.9l-0.4-3.1l-0.1,0c-0.8,0.2-1.5-0.3-1.6-1.2l-0.9-7.9
+	c0,0,0-0.1,0-0.1l10.4-2.7c0,0,0,0.1,0,0.1l0.9,7.9c0.1,0.8-0.4,1.7-1.2,1.9l-0.1,0l0.4,3.1c0.1,0.7-0.4,1.3-1,1.5
+	c-0.6,0.2-1.2-0.2-1.3-0.9L239.6,164.3z M231.4,158.6c-0.1-0.7-0.7-1.1-1.3-0.9c-0.6,0.2-1.1,0.8-1,1.5l0.6,5.2
+	c0.1,0.7,0.7,1.1,1.3,0.9c0.6-0.2,1.1-0.8,1-1.5L231.4,158.6z M245.4,154.9c-0.1-0.7-0.7-1.1-1.3-0.9c-0.6,0.2-1.1,0.8-1,1.5
+	l0.6,5.2c0.1,0.7,0.7,1.1,1.3,0.9c0.6-0.2,1.1-0.8,1-1.5L245.4,154.9z M235.8,150.1c-2.5,0.9-4.3,3.4-4,5.8l10.3-2.7
+	c-0.3-2.4-2.5-3.9-5.1-3.5L235.8,150.1z"/>
+<path class="st22" d="M234.2,152.8c0,0.3-0.2,0.7-0.5,0.8s-0.6-0.1-0.7-0.5l0,0c0-0.3,0.2-0.7,0.5-0.8
+	C233.8,152.3,234.1,152.5,234.2,152.8L234.2,152.8z M238.6,151.7c0,0.3-0.2,0.7-0.5,0.8c-0.3,0.1-0.6-0.1-0.7-0.5v0
+	c0-0.3,0.2-0.7,0.5-0.8C238.3,151.1,238.6,151.4,238.6,151.7L238.6,151.7z"/>
+<linearGradient id="SVGID_00000134940010252349478240000002397122030648918431_" gradientUnits="userSpaceOnUse" x1="230.3355" y1="31.5806" x2="244.6265" y2="17.3906" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
+	<stop  offset="0" style="stop-color:#878E9F"/>
+	<stop  offset="1" style="stop-color:#61687A"/>
+</linearGradient>
+<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000134940010252349478240000002397122030648918431_);" d="
+	M239.4,163.2l-2.9,0.7l0.4,3.1c0.1,0.7-0.4,1.3-1,1.5c-0.6,0.2-1.2-0.2-1.3-0.9l-0.4-3.1l-0.1,0c-0.8,0.2-1.5-0.3-1.6-1.2l-0.9-7.9
+	c0,0,0-0.1,0-0.1l10.4-2.7c0,0,0,0.1,0,0.1l0.9,7.9c0.1,0.8-0.4,1.7-1.2,1.9l-0.1,0l0.4,3.1c0.1,0.7-0.4,1.3-1,1.5
+	c-0.6,0.2-1.2-0.2-1.3-0.9L239.4,163.2z M231.1,157.5c-0.1-0.7-0.7-1.1-1.3-0.9c-0.6,0.2-1.1,0.8-1,1.5l0.6,5.2
+	c0.1,0.7,0.7,1.1,1.3,0.9c0.6-0.2,1.1-0.8,1-1.5L231.1,157.5z M245.2,153.8c-0.1-0.7-0.7-1.1-1.3-0.9c-0.6,0.2-1.1,0.8-1,1.5
+	l0.6,5.2c0.1,0.7,0.7,1.1,1.3,0.9c0.6-0.2,1.1-0.8,1-1.5L245.2,153.8z M235.6,149c-2.5,0.9-4.3,3.4-4,5.8l10.3-2.7
+	c-0.3-2.4-2.6-3.9-5.1-3.5L235.6,149z"/>
+<path class="st24" d="M231.4,149.9l1.5,1.9L231.4,149.9z M240.9,147.4l-0.9,2.5L240.9,147.4z"/>
+<path class="st25" d="M231.1,149.5c0.2-0.2,0.6-0.2,0.7,0l1.5,1.9c0.1,0.2,0.1,0.5-0.2,0.6s-0.6,0.2-0.7,0l-1.5-1.9
+	C230.8,150,230.9,149.7,231.1,149.5z M241,146.9c0.3,0,0.4,0.3,0.3,0.5l-0.9,2.5c-0.1,0.2-0.4,0.4-0.7,0.4c-0.3,0-0.4-0.3-0.3-0.5
+	l0.9-2.5C240.5,147.1,240.8,146.9,241,146.9z"/>
+<path class="st26" d="M234.9,151.8c0,0.3-0.2,0.7-0.5,0.8s-0.6-0.1-0.7-0.5v0c0-0.3,0.2-0.7,0.5-0.8
+	C234.6,151.2,234.9,151.4,234.9,151.8L234.9,151.8z M239.3,150.6c0,0.3-0.2,0.7-0.5,0.8c-0.3,0.1-0.6-0.1-0.7-0.5l0,0
+	c0-0.3,0.2-0.7,0.5-0.8C239,150.1,239.3,150.3,239.3,150.6L239.3,150.6z"/>
+<g>
+	<path class="st27" d="M33.2,71.1l2.6,0.5l-3.1,3.5l3.1,4.8l-2.5-0.5l-3.1-4.7L33.2,71.1z"/>
+</g>
+<g>
+	<path class="st27" d="M47.9,74l-2.6-0.5l3.1,4.7l-3.1,3.6l2.5,0.5l3.1-3.5L47.9,74z"/>
+</g>
+<g>
+	<path class="st27" d="M41.7,65.8l1.9,0.4l-3.8,20.5l-1.9-0.4L41.7,65.8z"/>
+</g>
+<linearGradient id="SVGID_00000005956640909351551830000012926937636429069237_" gradientUnits="userSpaceOnUse" x1="34.8775" y1="120.8174" x2="28.9219" y2="87.5084" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
+	<stop  offset="0" style="stop-color:#2E3141"/>
+	<stop  offset="1" style="stop-color:#282A3B"/>
+</linearGradient>
+<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000005956640909351551830000012926937636429069237_);" d="
+	M34.9,72l-2.6-0.5l-3,3.6l3.1,4.7l0.7,0.1l-2,0.2l2.4,0.5l1.4-0.3l0,0l0,0l0,0l0,0l-3.1-4.8L34.9,72z"/>
+<linearGradient id="SVGID_00000023266905135775645910000004109233400584778915_" gradientUnits="userSpaceOnUse" x1="49.8204" y1="109.523" x2="38.5096" y2="97.0479" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
+	<stop  offset="0" style="stop-color:#353A48"/>
+	<stop  offset="1" style="stop-color:#232634"/>
+</linearGradient>
+<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000023266905135775645910000004109233400584778915_);" d="
+	M44.4,73.8l2.6,0.5l3,4.8l-3.1,3.5l-2.5-0.5l3.1-3.6L44.4,73.8z M43.1,82.5l2.5,0.5l1.3-0.3l-1-0.2L43.1,82.5z"/>
+<linearGradient id="SVGID_00000093177584693944561140000000539913441972535681_" gradientUnits="userSpaceOnUse" x1="44.4648" y1="115.4688" x2="27.977" y2="83.8658" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
+	<stop  offset="0" style="stop-color:#2B2E3F"/>
+	<stop  offset="1" style="stop-color:#282A3B"/>
+</linearGradient>
+<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000093177584693944561140000000539913441972535681_);" d="
+	M42.7,66.6l-1.9-0.4L37,86.7l1.9,0.4L42.7,66.6z M35.6,87l2-0.2l1.2,0.2l-1.2,0.3L35.6,87z"/>
+<linearGradient id="SVGID_00000105418779091039622690000013356290385376551095_" gradientUnits="userSpaceOnUse" x1="31.3573" y1="107.3014" x2="27.4778" y2="108.8817" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
+	<stop  offset="0" style="stop-color:#686F82"/>
+	<stop  offset="1" style="stop-color:#5C6476"/>
+</linearGradient>
+<path style="fill:url(#SVGID_00000105418779091039622690000013356290385376551095_);" d="M31,71.8l2.6,0.5l-3.1,3.5l3.1,4.8
+	l-2.5-0.5L28,75.5L31,71.8z"/>
+<linearGradient id="SVGID_00000029764923180034765200000006898552117800737972_" gradientUnits="userSpaceOnUse" x1="46.3486" y1="101.283" x2="44.4889" y2="104.8996" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
+	<stop  offset="0" style="stop-color:#5C6476"/>
+	<stop  offset="1" style="stop-color:#7B8295"/>
+</linearGradient>
+<path style="fill:url(#SVGID_00000029764923180034765200000006898552117800737972_);" d="M45.7,74.7l-2.6-0.5l3.1,4.7l-3.1,3.6
+	l2.5,0.5l3.1-3.5L45.7,74.7z"/>
+<linearGradient id="SVGID_00000167396542097071636550000008197070836259756179_" gradientUnits="userSpaceOnUse" x1="49.1157" y1="106.0228" x2="29.5259" y2="106.3822" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
+	<stop  offset="0.2302" style="stop-color:#7B8195"/>
+	<stop  offset="1" style="stop-color:#4F5769"/>
+</linearGradient>
+<path style="fill:url(#SVGID_00000167396542097071636550000008197070836259756179_);" d="M39.4,66.5l1.9,0.4l-3.8,20.5L35.6,87
+	L39.4,66.5z"/>
+<linearGradient id="SVGID_00000101067962669616497940000013994520637891310218_" gradientUnits="userSpaceOnUse" x1="31.9666" y1="112.4903" x2="34.6551" y2="109.1623" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
+	<stop  offset="0" style="stop-color:#A3A8BD"/>
+	<stop  offset="1" style="stop-color:#282A3B"/>
+</linearGradient>
+<path style="fill:url(#SVGID_00000101067962669616497940000013994520637891310218_);" d="M32.3,71.5L31,71.8l2.6,0.5l1.3-0.3
+	L32.3,71.5z"/>
+<linearGradient id="SVGID_00000178166427605302853390000012720813208423930754_" gradientUnits="userSpaceOnUse" x1="38.82" y1="118.36" x2="42.514" y2="115.4948" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
+	<stop  offset="0" style="stop-color:#A3A8BD"/>
+	<stop  offset="1" style="stop-color:#5A6274"/>
+</linearGradient>
+<path style="fill:url(#SVGID_00000178166427605302853390000012720813208423930754_);" d="M40.8,66.2l-1.3,0.3l1.9,0.4l1.3-0.3
+	L40.8,66.2z"/>
+<linearGradient id="SVGID_00000115487732379793972330000008250218682802136497_" gradientUnits="userSpaceOnUse" x1="41.1603" y1="111.9492" x2="47.2883" y2="107.2078" gradientTransform="matrix(1 0 0 -1 0 183.1856)">
+	<stop  offset="0" style="stop-color:#A3A8BD"/>
+	<stop  offset="1" style="stop-color:#6D7487"/>
+</linearGradient>
+<path style="fill:url(#SVGID_00000115487732379793972330000008250218682802136497_);" d="M44.4,73.8l-1.3,0.3l2.6,0.5l1.3-0.3
+	L44.4,73.8z"/>
+<g>
+	
+		<ellipse transform="matrix(0.1771 -0.9842 0.9842 0.1771 195.9967 482.8482)" class="st37" cx="386.8" cy="124.2" rx="27.6" ry="29.7"/>
+</g>
+<linearGradient id="SVGID_00000072264236368894608570000004484140370334352012_" gradientUnits="userSpaceOnUse" x1="-68.8286" y1="231.0642" x2="-0.6727" y2="282.4253" gradientTransform="matrix(0.3485 -0.9373 -0.9454 -0.3258 639.7332 159.8793)">
+	<stop  offset="0" style="stop-color:#404756"/>
+	<stop  offset="1" style="stop-color:#6C7285"/>
+</linearGradient>
+<path style="fill:url(#SVGID_00000072264236368894608570000004484140370334352012_);" d="M360.1,109.7c5.3-14.3,22.2-21.6,37.7-16.3
+	s23.7,21.3,18.4,35.6c-5.3,14.3-22.2,21.6-37.7,16.3S354.8,124.1,360.1,109.7z"/>
+<path class="st39" d="M378.8,126.9l-7.5-23.8l23.8,7l8.8,26.4L378.8,126.9z"/>
+<path class="st40" d="M378.8,127.3l-8-24.7l24,7.5l-9.9,8.6L378.8,127.3z"/>
+<path class="st41" d="M378.8,127.3l-8-24.7l14.1,16.1L378.8,127.3z"/>
+<path class="st42" d="M378.8,127.3l25.2,9.3l-19.3-18.1L378.8,127.3z"/>
+</svg>
diff --git a/src/routes/console/project-[project]/overview/intro-light.svg b/src/routes/console/project-[project]/overview/intro-light.svg
new file mode 100644
index 000000000..a69e4e954
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/intro-light.svg
@@ -0,0 +1,259 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 424.1 190.8" style="enable-background:new 0 0 424.1 190.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{clip-path:url(#SVGID_00000021805632377186583740000011731992574237057451_);}
+	.st1{fill:#C4C6D7;fill-opacity:0.13;}
+	.st2{fill:url(#SVGID_00000160899217040623734610000012475498666032569535_);}
+	.st3{fill:url(#SVGID_00000165937116837111335010000002168296177881715893_);}
+	.st4{fill:url(#SVGID_00000018918107990092482040000013252589092973039528_);}
+	.st5{fill:#EFF0F5;}
+	.st6{fill:#C4C6D7;fill-opacity:0.1;}
+	.st7{fill-rule:evenodd;clip-rule:evenodd;fill:#C4C6D7;fill-opacity:0.24;}
+	.st8{opacity:0.8;}
+	.st9{fill:#F02E65;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000167371531459048999190000011249690870566165131_);}
+	.st11{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000129189707251269225150000005643527147027450300_);}
+	.st12{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000110441753684435544470000002509435895197784990_);}
+	.st13{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000040543275171738859230000011080850046303292574_);}
+	.st14{fill-rule:evenodd;clip-rule:evenodd;fill:#C4C6D7;}
+	.st15{fill-rule:evenodd;clip-rule:evenodd;fill:#C5C7D8;}
+	.st16{fill:#E1E2EB;}
+	.st17{fill:#F7F7FD;}
+	.st18{fill:url(#SVGID_00000014616156117666285330000017681245174404887476_);}
+	.st19{fill:url(#SVGID_00000049915430414130331190000010213430985914623119_);}
+	.st20{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000150061310937551999490000005118680971835354005_);}
+	.st21{fill:#FFFFFF;}
+	.st22{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000153685637016501534810000007342960322620315286_);}
+	.st23{fill:#C4C6D7;}
+	.st24{fill:none;stroke:#C4C6D7;stroke-linecap:round;stroke-linejoin:round;}
+	.st25{fill:#A3A8BD;fill-opacity:0.44;}
+	.st26{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000122713569741792111270000013894495698271964855_);}
+	.st27{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000058547726287328230310000017868126435458607280_);}
+	.st28{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000168812222206957706450000006078852729696268212_);}
+	.st29{fill:url(#SVGID_00000155113799803772021930000015866631640545841041_);}
+	.st30{fill:url(#SVGID_00000088848469795268600710000008867049092415817861_);}
+	.st31{fill:url(#SVGID_00000075876533340810585590000003382599365659021220_);}
+	.st32{fill:url(#SVGID_00000072984218318522218100000000103455013259610791_);}
+	.st33{fill:url(#SVGID_00000029037054272536630930000012467091695488964254_);}
+	.st34{fill:url(#SVGID_00000031182715734895419450000013181737395988048028_);}
+	.st35{fill:#E5E6EF;}
+	.st36{fill:url(#SVGID_00000088130410630487144420000007429096236737403268_);}
+	.st37{fill:#DCDEE9;}
+	.st38{fill:#F02E65;fill-opacity:0.5;}
+</style>
+<g>
+	<defs>
+		<rect id="SVGID_1_" x="-0.5" y="-0.1" width="424.1" height="190.8"/>
+	</defs>
+	<clipPath id="SVGID_00000036962071336252325100000015735855463922640033_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	<g style="clip-path:url(#SVGID_00000036962071336252325100000015735855463922640033_);">
+		<path class="st1" d="M134.2,36.2c-11.2-8.9-43.6-0.6-58.4,4.7l18.1-27.5h110.4l31.6,27.5c-9.3,2.1-21.6,11.3-46.1,15.8
+			C167.5,60.7,148.3,47.3,134.2,36.2z"/>
+		
+			<linearGradient id="SVGID_00000120531480136468366030000010422245260786763652_" gradientUnits="userSpaceOnUse" x1="222.7078" y1="192.5487" x2="188.0658" y2="6.4369" gradientTransform="matrix(1 0 0 -1 0 209.6)">
+			<stop  offset="0" style="stop-color:#F2F2F8"/>
+			<stop  offset="1" style="stop-color:#F2F2F8;stop-opacity:0.5"/>
+		</linearGradient>
+		<path style="fill:url(#SVGID_00000120531480136468366030000010422245260786763652_);" d="M2.9,133.1L98.8,13.8h106.4l89.6,79.7
+			l110.8,5.4l-72.3,92h-149l-80-56.7L2.9,133.1z"/>
+		
+			<linearGradient id="SVGID_00000014601897631993702440000001613442895209435323_" gradientUnits="userSpaceOnUse" x1="233.0974" y1="175.2321" x2="222.1132" y2="127.9958" gradientTransform="matrix(1 0 0 -1 0 209.6)">
+			<stop  offset="0" style="stop-color:#D5D7E3"/>
+			<stop  offset="1" style="stop-color:#DADBE6"/>
+		</linearGradient>
+		<path style="fill:url(#SVGID_00000014601897631993702440000001613442895209435323_);" d="M236.9,10.4c9.9,2.3,16.2,14.9,14.1,28.2
+			s-11.9,22.1-21.8,19.8c-9.9-2.3-16.2-14.9-14.1-28.2C217.2,16.9,227,8.1,236.9,10.4z"/>
+		
+			<linearGradient id="SVGID_00000063635011906143689870000000275410262821832626_" gradientUnits="userSpaceOnUse" x1="214.2627" y1="197.0107" x2="277.3987" y2="133.6245" gradientTransform="matrix(1 0 0 -1 0 209.6)">
+			<stop  offset="0" style="stop-color:#E6E7F0"/>
+			<stop  offset="1" style="stop-color:#FAFAFF"/>
+		</linearGradient>
+		<path style="fill:url(#SVGID_00000063635011906143689870000000275410262821832626_);" d="M239.2,9.8c8.9,2.1,14.4,14.5,12.2,27.7
+			c-2.2,13.2-11.1,22.3-20,20.2c-8.9-2.1-14.4-14.5-12.2-27.7S230.3,7.7,239.2,9.8z"/>
+		<path class="st5" d="M25.9,104.9c0,0-13.9,17.4-22.1,28.5l102.2,1.2l78.5,54.3c-67.3-53.5-55.3-72.3-73.9-81
+			c-18.6-8.7-30.8,10.5-51.7,0C48.9,102.8,48.5,77.6,25.9,104.9z"/>
+		<path class="st6" d="M330.6,121.2c-5.1-10.3,2.1-21.5,6.4-25.8l68.9,3.5l-45.7,60.5c0.2-3.1-0.1-10.9-2.9-17
+			C353.8,134.7,337,134.2,330.6,121.2z"/>
+		<path class="st7" d="M110.9,83.4l2.3-1.5l1.2-8.5c0.4,0.1,1,0.3,1.6,0.5c6.8,2,13.9,4.9,18.4,10.4c3.8,4.7,6.4,9.5,8.5,13.9
+			c0.5,1.1,1,2.1,1.5,3.1c1.5,3.2,2.8,5.9,4.5,8.5c2,3.2,4.2,6.9,7.4,8.8c3.2,1.9,7.7,3.6,14.5,4.2c15.5,1.5,24.9-7.6,36.4-17.6
+			l0.3-0.3c11.1-9.7,24.4-21.2,45.9-18.8c14.5,1.6,24,7.4,30.3,15.1c6.1,7.4,8.8,16,10.6,22.2c0.7,2.6,1.4,5.9,2,9
+			c0.2,0.9,0.3,1.8,0.5,2.7c0.8,4.2,1.8,8.3,3.2,12.2c2.8,7.6,7.1,13.6,15.5,16c15.8,4.6,55.2-23,61.5-25.7l-11,13.8
+			c-5.8,7-34.5,29.9-54,24.2c-13.7-4-20.4-14.1-24-23.9c-1.8-4.9-2.9-9.8-3.7-14.1c-0.2-1.2-0.4-2.2-0.6-3.3c-0.6-3-1-5.4-1.6-7.4
+			c-1.7-6-3.8-13.5-8.1-18.7c-4.1-4.9-10.5-9.3-21.9-10.5c-15.5-1.7-24.9,7.3-36.4,17.2c-0.2,0.2-0.4,0.3-0.6,0.5
+			c-11,9.6-24.2,21-45.4,19c-8.3-0.8-14.7-2.8-19.9-6c-5.2-3.2-8.8-7.4-11.5-11.7c-2.1-3.3-3.8-6.9-5.4-10.2
+			c-0.4-0.9-0.8-1.7-1.2-2.6c-2-4.1-4.1-7.9-6.9-11.4c-2.3-2.8-4.6-5.1-6.6-6.7c-1-0.8-1.9-1.4-2.5-1.8
+			C114.7,83.6,110.9,83.4,110.9,83.4z"/>
+		<g class="st8">
+			<path class="st9" d="M110,82.2c0.9,1.2,3.9,2.3,4.2,2.2c0.2,0.1,0.8,0.1,1.5-0.6c0.9-0.9,12-19.8,16.4-29.2
+				c4.4-9.3,3.8-13.4,3.2-18.7c-0.6-5.2-6.2-12-10.6-13.1c-4.4-1.2,6.2,16.1-4.1,24.3s-25-1.5-24.1,3.7
+				C97.5,56.1,108.9,80.7,110,82.2z"/>
+			
+				<linearGradient id="SVGID_00000041983407352360849690000014411068895137063583_" gradientUnits="userSpaceOnUse" x1="189.766" y1="80.2983" x2="88.9538" y2="186.9586" gradientTransform="matrix(1 0 0 -1 0 209.6)">
+				<stop  offset="0" style="stop-color:#F02E65"/>
+				<stop  offset="1" style="stop-color:#F291AE"/>
+			</linearGradient>
+			<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000041983407352360849690000014411068895137063583_);" d="
+				M110.7,82.6c-0.3,0.1-1.1,0-2.1-1.2C107.4,79.9,93.9,54.3,93,49c-0.9-5.3-2.6-15.4,6.8-24.6c7-6.9,17-4.6,21.4-3.4
+				c4.4,1.2,10,7.9,10.6,13.1c0,0.1,0,0.2,0,0.4c0.6,5.1,1,9.2-3.3,18.3c-4.4,9.3-15.6,28.3-16.4,29.2
+				C111.4,82.7,110.9,82.7,110.7,82.6z M110.9,50.7c5.4,0,9.8-5,9.8-11.1s-4.4-11.1-9.8-11.1s-9.8,5-9.8,11.1S105.5,50.7,110.9,50.7
+				z"/>
+			<path class="st9" d="M102,44.4c1.9,5.3,6.2,6.2,8.9,6.2c-4-3.1-5.1-5.4-5.8-7.5c-0.6-1.8-0.9-3.6,0-8c0.4-2.2,3-6.1,4.4-6.7
+				c-1.3,0.1-4.9,1.2-6.7,4C100.7,36,100.3,39.6,102,44.4z"/>
+		</g>
+		
+			<linearGradient id="SVGID_00000047770167322269114000000006427443012937318574_" gradientUnits="userSpaceOnUse" x1="235.8584" y1="170.6884" x2="229.4094" y2="166.1626" gradientTransform="matrix(1 0 0 -1 0 209.6)">
+			<stop  offset="0" style="stop-color:#E8E8F1"/>
+			<stop  offset="1" style="stop-color:#C4C6D7"/>
+		</linearGradient>
+		<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000047770167322269114000000006427443012937318574_);" d="
+			M229.9,44.2l-1.1-10.3l3.2-0.4l4.6,14.8l-2.9,1.3L229.9,44.2z"/>
+		
+			<linearGradient id="SVGID_00000073701026715854532600000016529582597290795680_" gradientUnits="userSpaceOnUse" x1="235.8108" y1="174.526" x2="229.4188" y2="170.0405" gradientTransform="matrix(1 0 0 -1 0 209.6)">
+			<stop  offset="0" style="stop-color:#E8E8F1"/>
+			<stop  offset="1" style="stop-color:#C4C6D7"/>
+		</linearGradient>
+		<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000073701026715854532600000016529582597290795680_);" d="
+			M228.8,33.9l2.8-1.3l2.9,0.7l6.6,4.1l-2.8,1.3l-8.9,0.9L228.8,33.9z"/>
+		
+			<linearGradient id="SVGID_00000036224557440401591050000006020178233110649512_" gradientUnits="userSpaceOnUse" x1="239.1553" y1="184.8503" x2="229.2043" y2="177.8667" gradientTransform="matrix(1 0 0 -1 0 209.6)">
+			<stop  offset="0" style="stop-color:#E8E8F1"/>
+			<stop  offset="1" style="stop-color:#C4C6D7"/>
+		</linearGradient>
+		<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000036224557440401591050000006020178233110649512_);" d="
+			M227.9,25l0.6,5.8l13.9-1.4l2.8-1.3l-6.6-4.2l-7.8-0.3L227.9,25z"/>
+		<path class="st14" d="M232.8,42.9l-1.1-10.3l3.2-0.4l1.7,16.1L232.8,42.9z"/>
+		<path class="st15" d="M231.7,32.6l5.7-0.6l3.8,5.4l-8.9,0.9L231.7,32.6z"/>
+		<path class="st15" d="M230.8,23.7l0.6,5.8l13.9-1.4l-3.8-5.5L230.8,23.7z"/>
+		<path class="st16" d="M40.4,99.4c10.8,0,19.5-9.8,19.5-22s-8.7-22-19.5-22c-10.8,0-19.5,9.8-19.5,22S29.7,99.4,40.4,99.4z"/>
+		<path class="st17" d="M36.4,98.4c10.8,0,19.5-9.6,19.5-21.5s-8.7-21.5-19.5-21.5c-10.8,0-19.5,9.6-19.5,21.5S25.7,98.4,36.4,98.4z
+			"/>
+		
+			<linearGradient id="SVGID_00000090292124887545916010000003054529199096651392_" gradientUnits="userSpaceOnUse" x1="223.1171" y1="105.2476" x2="233.191" y2="31.5836" gradientTransform="matrix(1 0 0 -1 0 209.6)">
+			<stop  offset="0" style="stop-color:#D5D7E3"/>
+			<stop  offset="1" style="stop-color:#ECEEF8"/>
+		</linearGradient>
+		<path style="fill:url(#SVGID_00000090292124887545916010000003054529199096651392_);" d="M230.4,178.4c10.2,0,18.5-9.2,18.5-20.5
+			s-8.3-20.5-18.5-20.5c-10.2,0-18.5,9.2-18.5,20.5S220.2,178.4,230.4,178.4z"/>
+		
+			<linearGradient id="SVGID_00000111167967411611742080000010383734263537612986_" gradientUnits="userSpaceOnUse" x1="202.3134" y1="123.8137" x2="262.4785" y2="-7.1604" gradientTransform="matrix(1 0 0 -1 0 209.6)">
+			<stop  offset="0" style="stop-color:#E6E7F0"/>
+			<stop  offset="1" style="stop-color:#FFFFFF"/>
+		</linearGradient>
+		<path style="fill:url(#SVGID_00000111167967411611742080000010383734263537612986_);" d="M235.4,178.4c9.7,0,17.5-9.2,17.5-20.5
+			s-7.8-20.5-17.5-20.5c-9.7,0-17.5,9.2-17.5,20.5S225.8,178.4,235.4,178.4z"/>
+		
+			<linearGradient id="SVGID_00000039842361181573650650000016717646815770968453_" gradientUnits="userSpaceOnUse" x1="241.1087" y1="49.2552" x2="225.3607" y2="51.2462" gradientTransform="matrix(1 0 0 -1 0 209.6)">
+			<stop  offset="0" style="stop-color:#E8E8F1"/>
+			<stop  offset="1" style="stop-color:#C4C6D7"/>
+		</linearGradient>
+		<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000039842361181573650650000016717646815770968453_);" d="
+			M236.6,164.1l-2.9,0.7l0.4,3.1c0.1,0.7-0.4,1.3-1,1.5c-0.6,0.2-1.2-0.2-1.3-0.9l-0.4-3.1h-0.1c-0.8,0.2-1.5-0.3-1.6-1.2l-0.9-7.9
+			v-0.1l10.4-2.7v0.1l0.9,7.9c0.1,0.8-0.4,1.7-1.2,1.9h-0.1l0.4,3.1c0.1,0.7-0.4,1.3-1,1.5c-0.6,0.2-1.2-0.2-1.3-0.9L236.6,164.1z
+			 M228.4,158.4c-0.1-0.7-0.7-1.1-1.3-0.9c-0.6,0.2-1.1,0.8-1,1.5l0.6,5.2c0.1,0.7,0.7,1.1,1.3,0.9s1.1-0.8,1-1.5L228.4,158.4z
+			 M242.4,154.7c-0.1-0.7-0.7-1.1-1.3-0.9c-0.6,0.2-1.1,0.8-1,1.5l0.6,5.2c0.1,0.7,0.7,1.1,1.3,0.9s1.1-0.8,1-1.5L242.4,154.7z
+			 M232.8,149.9c-2.5,0.9-4.3,3.4-4,5.8l10.3-2.7c-0.3-2.4-2.5-3.9-5.1-3.5L232.8,149.9z"/>
+		<path class="st21" d="M231.2,152.6c0,0.3-0.2,0.7-0.5,0.8s-0.6-0.1-0.7-0.5c0-0.3,0.2-0.7,0.5-0.8
+			C230.9,152.1,231.2,152.3,231.2,152.6z M235.6,151.5c0,0.3-0.2,0.7-0.5,0.8c-0.3,0.1-0.6-0.1-0.7-0.5c0-0.3,0.2-0.7,0.5-0.8
+			C235.3,151,235.6,151.2,235.6,151.5z"/>
+		
+			<linearGradient id="SVGID_00000132047320660920396990000008116030610979388070_" gradientUnits="userSpaceOnUse" x1="229.8114" y1="58.9299" x2="245.6875" y2="32.0059" gradientTransform="matrix(1 0 0 -1 0 209.6)">
+			<stop  offset="0" style="stop-color:#C4C6D7"/>
+			<stop  offset="1" style="stop-color:#C4C6D7"/>
+		</linearGradient>
+		<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000132047320660920396990000008116030610979388070_);" d="
+			M236.4,163l-2.9,0.7l0.4,3.1c0.1,0.7-0.4,1.3-1,1.5c-0.6,0.2-1.2-0.2-1.3-0.9l-0.4-3.1h-0.1c-0.8,0.2-1.5-0.3-1.6-1.2l-0.9-7.9
+			v-0.1l10.4-2.7v0.1l0.9,7.9c0.1,0.8-0.4,1.7-1.2,1.9h-0.1l0.4,3.1c0.1,0.7-0.4,1.3-1,1.5s-1.2-0.2-1.3-0.9L236.4,163z
+			 M228.1,157.3c-0.1-0.7-0.7-1.1-1.3-0.9c-0.6,0.2-1.1,0.8-1,1.5l0.6,5.2c0.1,0.7,0.7,1.1,1.3,0.9c0.6-0.2,1.1-0.8,1-1.5
+			L228.1,157.3z M242.2,153.6c-0.1-0.7-0.7-1.1-1.3-0.9c-0.6,0.2-1.1,0.8-1,1.5l0.6,5.2c0.1,0.7,0.7,1.1,1.3,0.9
+			c0.6-0.2,1.1-0.8,1-1.5L242.2,153.6z M232.6,148.8c-2.5,0.9-4.3,3.4-4,5.8l10.3-2.7c-0.3-2.4-2.6-3.9-5.1-3.5L232.6,148.8z"/>
+		<path class="st23" d="M228.4,149.7l1.5,1.9L228.4,149.7z M237.9,147.2l-0.9,2.5L237.9,147.2z"/>
+		<path class="st24" d="M228.4,149.7l1.5,1.9 M237.9,147.2l-0.9,2.5"/>
+		<path class="st21" d="M231.9,151.6c0,0.3-0.2,0.7-0.5,0.8c-0.3,0.1-0.6-0.1-0.7-0.5c0-0.3,0.2-0.7,0.5-0.8
+			C231.6,151,231.9,151.2,231.9,151.6z M236.3,150.4c0,0.3-0.2,0.7-0.5,0.8c-0.3,0.1-0.6-0.1-0.7-0.5c0-0.3,0.2-0.7,0.5-0.8
+			C236,149.9,236.3,150.1,236.3,150.4z"/>
+		<path class="st25" d="M30.3,70.9l2.6,0.5l-3.1,3.5l3.1,4.8l-2.5-0.5l-3.1-4.7L30.3,70.9z"/>
+		<path class="st25" d="M44.9,73.8l-2.6-0.5l3.1,4.7l-3.1,3.6l2.5,0.5l3.1-3.5L44.9,73.8z"/>
+		<path class="st25" d="M38.7,65.6l1.9,0.4l-3.8,20.5l-1.9-0.4L38.7,65.6z"/>
+		
+			<linearGradient id="SVGID_00000162311568297408065920000015641952244260549309_" gradientUnits="userSpaceOnUse" x1="31.4826" y1="138.162" x2="28.2267" y2="129.7374" gradientTransform="matrix(1 0 0 -1 0 209.6)">
+			<stop  offset="0" style="stop-color:#A3A8BD"/>
+			<stop  offset="1" style="stop-color:#C4C6D7"/>
+		</linearGradient>
+		<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000162311568297408065920000015641952244260549309_);" d="
+			M31.9,71.8l-2.6-0.5l-3,3.6l3.1,4.7l0.7,0.1l-2,0.2l2.4,0.5l1.4-0.3l-3.1-4.8L31.9,71.8z"/>
+		
+			<linearGradient id="SVGID_00000000922909364608009210000006839748742282430905_" gradientUnits="userSpaceOnUse" x1="46.8573" y1="136.1461" x2="35.5465" y2="123.6711" gradientTransform="matrix(1 0 0 -1 0 209.6)">
+			<stop  offset="0" style="stop-color:#C4C6D7"/>
+			<stop  offset="1" style="stop-color:#A3A8BD"/>
+		</linearGradient>
+		<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000000922909364608009210000006839748742282430905_);" d="
+			M41.4,73.6l2.6,0.5l3,4.8l-3.1,3.5l-2.5-0.5l3.1-3.6L41.4,73.6z M40.1,82.3l2.5,0.5l1.3-0.3l-1-0.2H40.1z"/>
+		
+			<linearGradient id="SVGID_00000002352446127904352350000000406116734864036743_" gradientUnits="userSpaceOnUse" x1="41.5413" y1="142.0648" x2="25.0535" y2="110.4618" gradientTransform="matrix(1 0 0 -1 0 209.6)">
+			<stop  offset="0" style="stop-color:#C4C6D7"/>
+			<stop  offset="1" style="stop-color:#A3A8BD"/>
+		</linearGradient>
+		<path style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_00000002352446127904352350000000406116734864036743_);" d="
+			M39.7,66.4L37.8,66L34,86.5l1.9,0.4L39.7,66.4z M32.7,86.8l2-0.2l1.2,0.2l-1.2,0.3L32.7,86.8z"/>
+		
+			<linearGradient id="SVGID_00000147930224128362316950000016462697264583626373_" gradientUnits="userSpaceOnUse" x1="28.4247" y1="133.9432" x2="24.5452" y2="135.5235" gradientTransform="matrix(1 0 0 -1 0 209.6)">
+			<stop  offset="0" style="stop-color:#C4C6D7"/>
+			<stop  offset="1" style="stop-color:#FFFFFF"/>
+		</linearGradient>
+		<path style="fill:url(#SVGID_00000147930224128362316950000016462697264583626373_);" d="M28,71.6l2.6,0.5l-3.1,3.6l3.1,4.8
+			L28.1,80L25,75.3L28,71.6z"/>
+		
+			<linearGradient id="SVGID_00000132084040323080864270000007235383945633433482_" gradientUnits="userSpaceOnUse" x1="46.0117" y1="127.8771" x2="31.797" y2="138.2089" gradientTransform="matrix(1 0 0 -1 0 209.6)">
+			<stop  offset="0" style="stop-color:#A3A8BD"/>
+			<stop  offset="1" style="stop-color:#FFFFFF"/>
+		</linearGradient>
+		<path style="fill:url(#SVGID_00000132084040323080864270000007235383945633433482_);" d="M42.7,74.5L40.1,74l3.1,4.7l-3.1,3.6
+			l2.5,0.5l3.1-3.5L42.7,74.5z"/>
+		
+			<linearGradient id="SVGID_00000183953686507929609820000004907616558297372844_" gradientUnits="userSpaceOnUse" x1="38.512" y1="131.649" x2="28.883" y2="135.6073" gradientTransform="matrix(1 0 0 -1 0 209.6)">
+			<stop  offset="0" style="stop-color:#C4C6D7"/>
+			<stop  offset="1" style="stop-color:#FFFFFF"/>
+		</linearGradient>
+		<path style="fill:url(#SVGID_00000183953686507929609820000004907616558297372844_);" d="M36.5,66.3l1.9,0.4l-3.8,20.5l-1.9-0.4
+			L36.5,66.3z"/>
+		
+			<linearGradient id="SVGID_00000062908688815126735820000003382563083365322155_" gradientUnits="userSpaceOnUse" x1="29.082" y1="139.148" x2="31.7705" y2="135.82" gradientTransform="matrix(1 0 0 -1 0 209.6)">
+			<stop  offset="0" style="stop-color:#A3A8BD"/>
+			<stop  offset="1" style="stop-color:#FFFFFF"/>
+		</linearGradient>
+		<path style="fill:url(#SVGID_00000062908688815126735820000003382563083365322155_);" d="M29.4,71.3l-1.3,0.3l2.6,0.5l1.3-0.3
+			L29.4,71.3z"/>
+		
+			<linearGradient id="SVGID_00000112612499809665390110000012375988160051438726_" gradientUnits="userSpaceOnUse" x1="37.4168" y1="144.2006" x2="39.2324" y2="141.8137" gradientTransform="matrix(1 0 0 -1 0 209.6)">
+			<stop  offset="0" style="stop-color:#A3A8BD"/>
+			<stop  offset="1" style="stop-color:#FFFFFF"/>
+		</linearGradient>
+		<path style="fill:url(#SVGID_00000112612499809665390110000012375988160051438726_);" d="M37.8,66l-1.3,0.3l1.9,0.4l1.3-0.3
+			L37.8,66z"/>
+		
+			<linearGradient id="SVGID_00000083066911523164798880000010443932817195736479_" gradientUnits="userSpaceOnUse" x1="41.2906" y1="136.3787" x2="44.0442" y2="133.6968" gradientTransform="matrix(1 0 0 -1 0 209.6)">
+			<stop  offset="0" style="stop-color:#A3A8BD"/>
+			<stop  offset="1" style="stop-color:#FFFFFF"/>
+		</linearGradient>
+		<path style="fill:url(#SVGID_00000083066911523164798880000010443932817195736479_);" d="M41.4,73.6l-1.3,0.3l2.6,0.5l1.3-0.3
+			L41.4,73.6z"/>
+		<path class="st35" d="M413,129.2c2.7-15-8.2-29.5-24.3-32.4c-16.1-2.9-31.4,6.9-34.1,21.9c-2.7,15,8.2,29.5,24.3,32.4
+			C395,154,410.3,144.2,413,129.2z"/>
+		
+			<linearGradient id="SVGID_00000008139052301016845560000008229210164744449954_" gradientUnits="userSpaceOnUse" x1="459.4391" y1="100.9133" x2="299.8311" y2="78.4213" gradientTransform="matrix(1 0 0 -1 0 209.6)">
+			<stop  offset="0" style="stop-color:#F3F3FA"/>
+			<stop  offset="1" style="stop-color:#FFFFFF"/>
+		</linearGradient>
+		<path style="fill:url(#SVGID_00000008139052301016845560000008229210164744449954_);" d="M357.1,109.5
+			c5.3-14.3,22.2-21.6,37.7-16.3c15.5,5.3,23.7,21.3,18.4,35.6c-5.3,14.3-22.2,21.6-37.7,16.3S351.8,123.9,357.1,109.5z"/>
+		<path class="st37" d="M375.8,126.7l-8.1-24.2l24.4,7.3l8.8,26.4L375.8,126.7z"/>
+		<path class="st38" d="M375.8,127.1l-8.2-24.4l24.2,7.2l-9.9,8.6L375.8,127.1z"/>
+		<path class="st38" d="M375.8,127.1l-8.2-24.4l14.3,15.8L375.8,127.1z"/>
+		<path class="st23" d="M375.8,127.1l25.2,9.3l-19.3-18.1L375.8,127.1z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/routes/console/project-[project]/overview/keys/+page.svelte b/src/routes/console/project-[project]/overview/keys/+page.svelte
index 7c86fd9de..1c08f5b5f 100644
--- a/src/routes/console/project-[project]/overview/keys/+page.svelte
+++ b/src/routes/console/project-[project]/overview/keys/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Heading } from '$lib/components';
+    import { Empty, Heading } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import {
         Table,
@@ -10,45 +10,54 @@
         TableRowLink
     } from '$lib/elements/table';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { project } from '../../store';
-    import Create from './create.svelte';
+    import { wizard } from '$lib/stores/wizard';
+    import type { PageData } from './$types';
+    import Wizard from './wizard.svelte';
 
-    let show = false;
+    export let data: PageData;
+
+    function create() {
+        wizard.start(Wizard);
+    }
 </script>
 
 <div class="common-section u-flex u-gap-12">
     <Heading tag="h3" size="7">API Keys</Heading>
     <span class="u-margin-inline-start-auto">
-        <Button on:click={() => (show = true)}>
+        <Button on:click={create}>
             <span class="icon-plus" aria-hidden="true" />
             <span class="text">Create API Key</span>
         </Button>
     </span>
 </div>
 
-<Table>
-    <TableHeader>
-        <TableCellHead>Name</TableCellHead>
-        <TableCellHead>last accessed</TableCellHead>
-        <TableCellHead>expiration date</TableCellHead>
-        <TableCellHead>clients</TableCellHead>
-    </TableHeader>
-    <TableBody>
-        {#each $project.keys as key}
-            <TableRowLink href={`keys/${key.$id}`}>
-                <TableCellText title="Name">
-                    {key.name}
-                </TableCellText>
-                <TableCellText title="Last Accessed">
-                    {key.accessedAt ? toLocaleDateTime(key.accessedAt) : 'never'}
-                </TableCellText>
-                <TableCellText title="Expiration Date">
-                    {toLocaleDateTime(key.$updatedAt)}
-                </TableCellText>
-                <TableCellText title="Clients" />
-            </TableRowLink>
-        {/each}
-    </TableBody>
-</Table>
-
-<Create bind:show />
+{#if data.keys.total}
+    <Table>
+        <TableHeader>
+            <TableCellHead>Name</TableCellHead>
+            <TableCellHead>last accessed</TableCellHead>
+            <TableCellHead>expiration date</TableCellHead>
+            <TableCellHead>scopes</TableCellHead>
+        </TableHeader>
+        <TableBody>
+            {#each data.keys.keys as key}
+                <TableRowLink href={`keys/${key.$id}`}>
+                    <TableCellText title="Name">
+                        {key.name}
+                    </TableCellText>
+                    <TableCellText title="Last Accessed">
+                        {key.accessedAt ? toLocaleDateTime(key.accessedAt) : 'never'}
+                    </TableCellText>
+                    <TableCellText title="Expiration Date">
+                        {key.expire ? toLocaleDateTime(key.expire) : 'never'}
+                    </TableCellText>
+                    <TableCellText title="Expiration Date">
+                        {key.scopes.length} Scopes
+                    </TableCellText>
+                </TableRowLink>
+            {/each}
+        </TableBody>
+    </Table>
+{:else}
+    <Empty single href="https://appwrite.io/docs/keys" target="API Key" on:click={create} />
+{/if}
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 000000000..0394783a0
--- /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 000000000..62c8a4fdb
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/keys/[key]/+page.ts
@@ -0,0 +1,20 @@
+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);
+
+    const key = await sdkForConsole.projects.getKey(params.project, params.key);
+    if (key.expire) {
+        key.expire = new Date(key.expire).toISOString().slice(0, 23);
+    }
+
+    return {
+        header: Header,
+        breadcrumbs: Breadcrumbs,
+        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 8c34d53b4..4e82451be 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,72 +1,36 @@
 <script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { base } from '$app/paths';
-    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 { difference } from '$lib/helpers/array';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, FormList, InputText, InputDateTime } from '$lib/elements/forms';
+    import { symmetricDifference } 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 Delete from './delete.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(event = null) {
-        await key.load(projectId, keyId);
-
+    onMount(() => {
         name ??= $key.name;
         secret ??= $key.secret;
         expire ??= $key.expire;
         scopes ??= $key.scopes;
-
-        updateLayout({
-            navigate: event,
-            back: `${base}/console/project-${$page.params.project}/overview/keys`,
-            title: $key.name,
-            level: 4,
-            copy: {
-                text: 'API Key Secret',
-                value: $key.secret
-            },
-            breadcrumbs: [
-                {
-                    level: 3,
-                    href: 'keys',
-                    title: 'API Keys'
-                },
-                {
-                    level: 4,
-                    href: keyId,
-                    title: $key.name
-                }
-            ]
-        });
-        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'
@@ -88,7 +52,7 @@
                 $key.scopes,
                 expire
             );
-            $key.expire = expire;
+            invalidate(Dependencies.KEY);
             addNotification({
                 type: 'success',
                 message: 'API Key expiration has been updated'
@@ -104,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'
@@ -123,104 +87,103 @@
 </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>
-            </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>
-                <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>
-        <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>
+                <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 === $key.name} submit>Update</Button>
             </svelte:fragment>
         </CardGrid>
-    {/if}
+    </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">
+                {#if scopes !== null}
+                    <Scopes bind:scopes />
+                {/if}
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button
+                    submit
+                    disabled={scopes &&
+                        $key?.scopes &&
+                        !symmetricDifference(scopes, $key.scopes).length}>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>
+    <CardGrid danger>
+        <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
new file mode 100644
index 000000000..076836cec
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/keys/[key]/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 { key } from './store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization?.$id}`,
+            title: $organization?.name
+        },
+        {
+            href: `/console/project-${$project?.$id}`,
+            title: $project?.name
+        },
+        {
+            href: `/console/project-${$project?.$id}/overview/keys`,
+            title: 'API Keys'
+        },
+        {
+            href: `/console/project-${$project?.$id}/overview/keys/${$key?.$id}`,
+            title: $key?.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
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 333be86fb..966b01304 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
new file mode 100644
index 000000000..55a5872e7
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/keys/[key]/header.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Copy } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Cover, CoverTitle } from '$lib/layout';
+    import { key } from './store';
+
+    const projectId = $page.params.project;
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <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
+            </Pill>
+        </Copy>
+    </svelte:fragment>
+</Cover>
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 8b29e0e74..058982d62 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
deleted file mode 100644
index 043cae7cb..000000000
--- a/src/routes/console/project-[project]/overview/keys/create.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-    import { Modal } from '$lib/components';
-    import { InputText, Button, Form, FormList } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
-    import { project } from '../../.../../store';
-    import Scopes from './scopes.svelte';
-
-    export let show = false;
-
-    let name: string;
-    let scopes: string[] = [];
-
-    async function create() {
-        try {
-            await sdkForConsole.projects.createKey($project.$id, name, scopes);
-            name = null;
-            scopes = [];
-            project.load($project.$id);
-            show = false;
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    }
-</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>
diff --git a/src/routes/console/project-[project]/overview/keys/scopes.svelte b/src/routes/console/project-[project]/overview/keys/scopes.svelte
index d60f14730..4f3b44036 100644
--- a/src/routes/console/project-[project]/overview/keys/scopes.svelte
+++ b/src/routes/console/project-[project]/overview/keys/scopes.svelte
@@ -3,10 +3,18 @@
     import { Button, FormList, InputChoice } from '$lib/elements/forms';
     import { scopes as allScopes } from '$lib/constants';
     import { onMount } from 'svelte';
-    import { difference } from '$lib/helpers/array';
+    import { symmetricDifference } from '$lib/helpers/array';
 
     export let scopes: string[];
 
+    enum Category {
+        Auth = 'Auth',
+        Database = 'Database',
+        Functions = 'Functions',
+        Storage = 'Storage',
+        Other = 'Other'
+    }
+
     let mounted = false;
 
     onMount(() => {
@@ -22,12 +30,35 @@
         }
     }
 
-    function unselectAll() {
+    function deselectAll() {
         for (const scope in activeScopes) {
             activeScopes[scope] = false;
         }
     }
 
+    function categoryState(category: string, s: string[]): boolean | null {
+        const scopesByCategory = allScopes.filter((n) => n.category === category);
+        const filtered = scopesByCategory.filter((n) => s.includes(n.scope));
+        if (filtered.length === 0) {
+            return false;
+        } else if (filtered.length === scopesByCategory.length) {
+            return true;
+        } else {
+            return null;
+        }
+    }
+
+    function onCategoryChange(
+        event: Event & { currentTarget: EventTarget & HTMLInputElement },
+        category: Category
+    ) {
+        allScopes.forEach((s) => {
+            if (s.category === category) {
+                activeScopes[s.scope] = event.currentTarget.checked;
+            }
+        });
+    }
+
     const activeScopes = allScopes.reduce((prev, next) => {
         prev[next.scope] = false;
 
@@ -39,10 +70,7 @@
             const newScopes = allScopes
                 .filter((scope) => activeScopes[scope.scope])
                 .map(({ scope }) => scope);
-            if (
-                difference(scopes, newScopes).length !== 0 ||
-                difference(newScopes, scopes).length !== 0
-            ) {
+            if (symmetricDifference(scopes, newScopes).length) {
                 scopes = newScopes;
             }
         }
@@ -50,23 +78,39 @@
 </script>
 
 <div class="u-flex u-cross-center u-main-end">
-    <Button text on:click={unselectAll}>Unselect all</Button>
+    <Button text on:click={deselectAll}>Deselect all</Button>
     <Button text on:click={selectAll}>Select all</Button>
 </div>
 <Collapsible>
-    {#each ['Authentication', 'Database', 'Functions', 'Storage', 'Other'] as category}
-        <CollapsibleItem>
-            <svelte:fragment slot="title">{category}</svelte:fragment>
-            <FormList>
-                {#each allScopes.filter((s) => s.category === category) as scope}
-                    <InputChoice
-                        id={scope.scope}
-                        label={scope.scope}
-                        bind:value={activeScopes[scope.scope]}>
-                        {scope.description}
-                    </InputChoice>
-                {/each}
-            </FormList>
+    {#each [Category.Auth, Category.Database, Category.Functions, Category.Storage, Category.Other] as category}
+        {@const checked = categoryState(category, scopes)}
+        <CollapsibleItem withIndentation>
+            <svelte:fragment slot="beforetitle">
+                <input
+                    type="checkbox"
+                    {checked}
+                    indeterminate={checked === null ? true : false}
+                    on:change={(e) => onCategoryChange(e, category)} />
+            </svelte:fragment>
+            <svelte:fragment slot="title">
+                {category}
+            </svelte:fragment>
+            <svelte:fragment slot="subtitle">
+                ({allScopes.filter((n) => n.category === category && scopes.includes(n.scope))
+                    .length} Scopes)
+            </svelte:fragment>
+            <div class="form">
+                <FormList>
+                    {#each allScopes.filter((s) => s.category === category) as scope}
+                        <InputChoice
+                            id={scope.scope}
+                            label={scope.scope}
+                            bind:value={activeScopes[scope.scope]}>
+                            {scope.description}
+                        </InputChoice>
+                    {/each}
+                </FormList>
+            </div>
         </CollapsibleItem>
     {/each}
 </Collapsible>
diff --git a/src/routes/console/project-[project]/overview/keys/wizard.svelte b/src/routes/console/project-[project]/overview/keys/wizard.svelte
new file mode 100644
index 000000000..9217ccd88
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/keys/wizard.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+    import { Wizard } from '$lib/layout';
+    import { beforeNavigate, goto, invalidate } from '$app/navigation';
+    import { wizard } from '$lib/stores/wizard';
+    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
+    import Step1 from './wizard/step1.svelte';
+    import Step2 from './wizard/step2.svelte';
+    import { key } from './wizard/store';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { page } from '$app/stores';
+    import { addNotification } from '$lib/stores/notifications';
+    import { onDestroy } from 'svelte';
+    import { onboarding } from '../../store';
+    import { Dependencies } from '$lib/constants';
+
+    async function onFinish() {
+        try {
+            const { $id } = await sdkForConsole.projects.createKey(
+                $page.params.project,
+                $key.name,
+                $key.scopes,
+                $key.expire ?? undefined
+            );
+            if ($onboarding) {
+                invalidate(Dependencies.PROJECT);
+            }
+            goto(`/console/project-${$page.params.project}/overview/keys/${$id}`);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
+
+    onDestroy(() => {
+        key.reset();
+    });
+
+    beforeNavigate(() => {
+        wizard.hide();
+    });
+
+    const stepsComponents: WizardStepsType = new Map();
+    stepsComponents.set(1, {
+        label: 'Details',
+        component: Step1
+    });
+    stepsComponents.set(2, {
+        label: 'Scopes',
+        component: Step2
+    });
+</script>
+
+<Wizard title="Create an API Key" steps={stepsComponents} on:finish={onFinish} />
diff --git a/src/routes/console/project-[project]/overview/keys/wizard/step1.svelte b/src/routes/console/project-[project]/overview/keys/wizard/step1.svelte
new file mode 100644
index 000000000..37fb03702
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/keys/wizard/step1.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+    import { FormList, InputText, InputDateTime, InputSelect } from '$lib/elements/forms';
+    import { WizardStep } from '$lib/layout';
+    import { key } from './store';
+
+    let preset = 'never';
+    function incrementToday(value: number, type: 'day' | 'month' | 'year'): string {
+        const date = new Date();
+        switch (type) {
+            case 'day':
+                date.setDate(date.getDate() + value);
+                break;
+            case 'month':
+                date.setMonth(date.getMonth() + value);
+                break;
+            case 'year':
+                date.setMonth(date.getMonth() + value * 12);
+                break;
+        }
+
+        return date.toISOString();
+    }
+
+    $: {
+        switch (preset) {
+            case 'never':
+                $key.expire = null;
+                break;
+            case '1day':
+                $key.expire = incrementToday(1, 'day');
+                break;
+            case '7days':
+                $key.expire = incrementToday(7, 'day');
+                break;
+            case '1month':
+                $key.expire = incrementToday(1, 'month');
+                break;
+            case '1year':
+                $key.expire = incrementToday(1, 'year');
+                break;
+        }
+    }
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Create an API Key</svelte:fragment>
+    <svelte:fragment slot="subtitle">Let's create an API Key.</svelte:fragment>
+    <FormList>
+        <InputText
+            id="name"
+            label="Name"
+            placeholder="API Key Name"
+            required
+            bind:value={$key.name} />
+        <InputSelect
+            bind:value={preset}
+            options={[
+                {
+                    label: 'Never',
+                    value: 'never'
+                },
+                {
+                    label: '1 Day',
+                    value: '1day'
+                },
+                {
+                    label: '7 Days',
+                    value: '7days'
+                },
+                {
+                    label: '1 Month',
+                    value: '1month'
+                },
+                {
+                    label: '1 Year',
+                    value: '1year'
+                },
+                {
+                    label: 'Custom Date',
+                    value: 'custom'
+                }
+            ]}
+            id="preset"
+            label="Expiration Date" />
+        {#if preset === 'custom'}
+            <InputDateTime id="expire" label="" bind:value={$key.expire} showLabel={false} />
+        {/if}
+    </FormList>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/overview/keys/wizard/step2.svelte b/src/routes/console/project-[project]/overview/keys/wizard/step2.svelte
new file mode 100644
index 000000000..56638e8a0
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/keys/wizard/step2.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { FormList } from '$lib/elements/forms';
+    import { WizardStep } from '$lib/layout';
+    import Scopes from '../scopes.svelte';
+    import { key } from './store';
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Add Scopes</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        Choose which permission scopes to grant your application. It is best practice to allow only
+        the permissions you need to meet your project goals.
+    </svelte:fragment>
+    <FormList>
+        <Scopes bind:scopes={$key.scopes} />
+    </FormList>
+</WizardStep>
diff --git a/src/routes/console/project-[project]/overview/keys/wizard/store.ts b/src/routes/console/project-[project]/overview/keys/wizard/store.ts
new file mode 100644
index 000000000..148e58193
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/keys/wizard/store.ts
@@ -0,0 +1,25 @@
+import { writable } from 'svelte/store';
+import type { Models } from '@aw-labs/appwrite-console';
+
+function createKeyStore() {
+    const { subscribe, update, set } = writable<Partial<Models.Key>>({
+        name: null,
+        expire: null,
+        scopes: []
+    });
+
+    return {
+        subscribe,
+        update,
+        set,
+        reset() {
+            set({
+                name: null,
+                expire: null,
+                scopes: []
+            });
+        }
+    };
+}
+
+export const key = createKeyStore();
diff --git a/src/routes/console/project-[project]/overview/onboard-1-dark.svg b/src/routes/console/project-[project]/overview/onboard-1-dark.svg
new file mode 100644
index 000000000..164c41f73
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/onboard-1-dark.svg
@@ -0,0 +1,152 @@
+<svg width="1169" height="342" viewBox="0 0 1169 342" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_d_1297_52064)">
+        <rect y="1" width="572" height="340" rx="16" fill="#1B1B28" />
+        <rect y="1" width="572" height="340" rx="16" stroke="#373B4D" />
+    </g>
+    <path opacity="0.5" d="M32.1378 132V131.233L35.0185 128.08C35.3565 127.71 35.6349 127.389 35.8537 127.116C36.0724 126.841 36.2344 126.582 36.3395 126.341C36.4474 126.097 36.5014 125.841 36.5014 125.574C36.5014 125.267 36.4276 125.001 36.2798 124.777C36.1349 124.553 35.9361 124.379 35.6832 124.257C35.4304 124.135 35.1463 124.074 34.831 124.074C34.4957 124.074 34.2031 124.143 33.9531 124.283C33.706 124.419 33.5142 124.611 33.3778 124.858C33.2443 125.105 33.1776 125.395 33.1776 125.727H32.1719C32.1719 125.216 32.2898 124.767 32.5256 124.381C32.7614 123.994 33.0824 123.693 33.4886 123.477C33.8977 123.261 34.3565 123.153 34.8651 123.153C35.3764 123.153 35.8295 123.261 36.2244 123.477C36.6193 123.693 36.929 123.984 37.1534 124.351C37.3778 124.717 37.4901 125.125 37.4901 125.574C37.4901 125.895 37.4318 126.209 37.3153 126.516C37.2017 126.82 37.0028 127.159 36.7188 127.534C36.4375 127.906 36.0469 128.361 35.5469 128.898L33.5866 130.994V131.062H37.6435V132H32.1378ZM42.25 132.119C41.608 132.119 41.0611 131.945 40.6094 131.595C40.1577 131.243 39.8125 130.733 39.5739 130.065C39.3352 129.395 39.2159 128.585 39.2159 127.636C39.2159 126.693 39.3352 125.888 39.5739 125.22C39.8153 124.55 40.1619 124.038 40.6136 123.686C41.0682 123.331 41.6136 123.153 42.25 123.153C42.8864 123.153 43.4304 123.331 43.8821 123.686C44.3366 124.038 44.6832 124.55 44.9219 125.22C45.1634 125.888 45.2841 126.693 45.2841 127.636C45.2841 128.585 45.1648 129.395 44.9261 130.065C44.6875 130.733 44.3423 131.243 43.8906 131.595C43.4389 131.945 42.892 132.119 42.25 132.119ZM42.25 131.182C42.8864 131.182 43.3807 130.875 43.733 130.261C44.0852 129.648 44.2614 128.773 44.2614 127.636C44.2614 126.881 44.1804 126.237 44.0185 125.706C43.8594 125.175 43.6293 124.77 43.3281 124.491C43.0298 124.213 42.6705 124.074 42.25 124.074C41.6193 124.074 41.1264 124.385 40.7713 125.007C40.4162 125.626 40.2386 126.503 40.2386 127.636C40.2386 128.392 40.3182 129.034 40.4773 129.562C40.6364 130.091 40.8651 130.493 41.1634 130.768C41.4645 131.044 41.8267 131.182 42.25 131.182ZM49.75 132.119C49.108 132.119 48.5611 131.945 48.1094 131.595C47.6577 131.243 47.3125 130.733 47.0739 130.065C46.8352 129.395 46.7159 128.585 46.7159 127.636C46.7159 126.693 46.8352 125.888 47.0739 125.22C47.3153 124.55 47.6619 124.038 48.1136 123.686C48.5682 123.331 49.1136 123.153 49.75 123.153C50.3864 123.153 50.9304 123.331 51.3821 123.686C51.8366 124.038 52.1832 124.55 52.4219 125.22C52.6634 125.888 52.7841 126.693 52.7841 127.636C52.7841 128.585 52.6648 129.395 52.4261 130.065C52.1875 130.733 51.8423 131.243 51.3906 131.595C50.9389 131.945 50.392 132.119 49.75 132.119ZM49.75 131.182C50.3864 131.182 50.8807 130.875 51.233 130.261C51.5852 129.648 51.7614 128.773 51.7614 127.636C51.7614 126.881 51.6804 126.237 51.5185 125.706C51.3594 125.175 51.1293 124.77 50.8281 124.491C50.5298 124.213 50.1705 124.074 49.75 124.074C49.1193 124.074 48.6264 124.385 48.2713 125.007C47.9162 125.626 47.7386 126.503 47.7386 127.636C47.7386 128.392 47.8182 129.034 47.9773 129.562C48.1364 130.091 48.3651 130.493 48.6634 130.768C48.9645 131.044 49.3267 131.182 49.75 131.182ZM57.25 132.119C56.608 132.119 56.0611 131.945 55.6094 131.595C55.1577 131.243 54.8125 130.733 54.5739 130.065C54.3352 129.395 54.2159 128.585 54.2159 127.636C54.2159 126.693 54.3352 125.888 54.5739 125.22C54.8153 124.55 55.1619 124.038 55.6136 123.686C56.0682 123.331 56.6136 123.153 57.25 123.153C57.8864 123.153 58.4304 123.331 58.8821 123.686C59.3366 124.038 59.6832 124.55 59.9219 125.22C60.1634 125.888 60.2841 126.693 60.2841 127.636C60.2841 128.585 60.1648 129.395 59.9261 130.065C59.6875 130.733 59.3423 131.243 58.8906 131.595C58.4389 131.945 57.892 132.119 57.25 132.119ZM57.25 131.182C57.8864 131.182 58.3807 130.875 58.733 130.261C59.0852 129.648 59.2614 128.773 59.2614 127.636C59.2614 126.881 59.1804 126.237 59.0185 125.706C58.8594 125.175 58.6293 124.77 58.3281 124.491C58.0298 124.213 57.6705 124.074 57.25 124.074C56.6193 124.074 56.1264 124.385 55.7713 125.007C55.4162 125.626 55.2386 126.503 55.2386 127.636C55.2386 128.392 55.3182 129.034 55.4773 129.562C55.6364 130.091 55.8651 130.493 56.1634 130.768C56.4645 131.044 56.8267 131.182 57.25 131.182Z" fill="#868EA3" />
+    <line x1="77" y1="127.75" x2="540" y2="127.75" stroke="#4F5769" stroke-width="0.5" />
+    <path opacity="0.5" d="M37.0927 160.273V169H36.0359V161.381H35.9847L33.854 162.795V161.722L36.0359 160.273H37.0927ZM42.3299 169.119C41.8299 169.119 41.3796 169.02 40.979 168.821C40.5785 168.622 40.2575 168.349 40.016 168.003C39.7745 167.656 39.6424 167.261 39.6197 166.818H40.6424C40.6822 167.213 40.8612 167.54 41.1793 167.798C41.5004 168.054 41.8839 168.182 42.3299 168.182C42.6879 168.182 43.006 168.098 43.2844 167.93C43.5657 167.763 43.7859 167.533 43.945 167.24C44.1069 166.945 44.1879 166.611 44.1879 166.239C44.1879 165.858 44.104 165.518 43.9364 165.22C43.7717 164.919 43.5444 164.682 43.2546 164.509C42.9648 164.335 42.6339 164.247 42.2617 164.244C41.9947 164.241 41.7205 164.283 41.4393 164.368C41.158 164.45 40.9265 164.557 40.7447 164.688L39.756 164.568L40.2844 160.273H44.8185V161.21H41.1708L40.864 163.784H40.9151C41.0941 163.642 41.3185 163.524 41.5884 163.43C41.8583 163.337 42.1396 163.29 42.4322 163.29C42.9663 163.29 43.4421 163.418 43.8597 163.673C44.2802 163.926 44.6097 164.273 44.8484 164.713C45.0898 165.153 45.2106 165.656 45.2106 166.222C45.2106 166.778 45.0856 167.276 44.8356 167.713C44.5884 168.148 44.2475 168.491 43.8129 168.744C43.3782 168.994 42.8839 169.119 42.3299 169.119ZM49.75 169.119C49.108 169.119 48.5611 168.945 48.1094 168.595C47.6577 168.243 47.3125 167.733 47.0739 167.065C46.8352 166.395 46.7159 165.585 46.7159 164.636C46.7159 163.693 46.8352 162.888 47.0739 162.22C47.3153 161.55 47.6619 161.038 48.1136 160.686C48.5682 160.331 49.1136 160.153 49.75 160.153C50.3864 160.153 50.9304 160.331 51.3821 160.686C51.8366 161.038 52.1832 161.55 52.4219 162.22C52.6634 162.888 52.7841 163.693 52.7841 164.636C52.7841 165.585 52.6648 166.395 52.4261 167.065C52.1875 167.733 51.8423 168.243 51.3906 168.595C50.9389 168.945 50.392 169.119 49.75 169.119ZM49.75 168.182C50.3864 168.182 50.8807 167.875 51.233 167.261C51.5852 166.648 51.7614 165.773 51.7614 164.636C51.7614 163.881 51.6804 163.237 51.5185 162.706C51.3594 162.175 51.1293 161.77 50.8281 161.491C50.5298 161.213 50.1705 161.074 49.75 161.074C49.1193 161.074 48.6264 161.385 48.2713 162.007C47.9162 162.626 47.7386 163.503 47.7386 164.636C47.7386 165.392 47.8182 166.034 47.9773 166.562C48.1364 167.091 48.3651 167.493 48.6634 167.768C48.9645 168.044 49.3267 168.182 49.75 168.182ZM57.25 169.119C56.608 169.119 56.0611 168.945 55.6094 168.595C55.1577 168.243 54.8125 167.733 54.5739 167.065C54.3352 166.395 54.2159 165.585 54.2159 164.636C54.2159 163.693 54.3352 162.888 54.5739 162.22C54.8153 161.55 55.1619 161.038 55.6136 160.686C56.0682 160.331 56.6136 160.153 57.25 160.153C57.8864 160.153 58.4304 160.331 58.8821 160.686C59.3366 161.038 59.6832 161.55 59.9219 162.22C60.1634 162.888 60.2841 163.693 60.2841 164.636C60.2841 165.585 60.1648 166.395 59.9261 167.065C59.6875 167.733 59.3423 168.243 58.8906 168.595C58.4389 168.945 57.892 169.119 57.25 169.119ZM57.25 168.182C57.8864 168.182 58.3807 167.875 58.733 167.261C59.0852 166.648 59.2614 165.773 59.2614 164.636C59.2614 163.881 59.1804 163.237 59.0185 162.706C58.8594 162.175 58.6293 161.77 58.3281 161.491C58.0298 161.213 57.6705 161.074 57.25 161.074C56.6193 161.074 56.1264 161.385 55.7713 162.007C55.4162 162.626 55.2386 163.503 55.2386 164.636C55.2386 165.392 55.3182 166.034 55.4773 166.562C55.6364 167.091 55.8651 167.493 56.1634 167.768C56.4645 168.044 56.8267 168.182 57.25 168.182Z" fill="#868EA3" />
+    <line x1="77" y1="164.75" x2="540" y2="164.75" stroke="#4F5769" stroke-width="0.5" />
+    <path opacity="0.5" d="M36.8935 198.773V207.5H35.8366V199.881H35.7855L33.6548 201.295V200.222L35.8366 198.773H36.8935ZM42.25 207.619C41.608 207.619 41.0611 207.445 40.6094 207.095C40.1577 206.743 39.8125 206.233 39.5739 205.565C39.3352 204.895 39.2159 204.085 39.2159 203.136C39.2159 202.193 39.3352 201.388 39.5739 200.72C39.8153 200.05 40.1619 199.538 40.6136 199.186C41.0682 198.831 41.6136 198.653 42.25 198.653C42.8864 198.653 43.4304 198.831 43.8821 199.186C44.3366 199.538 44.6832 200.05 44.9219 200.72C45.1634 201.388 45.2841 202.193 45.2841 203.136C45.2841 204.085 45.1648 204.895 44.9261 205.565C44.6875 206.233 44.3423 206.743 43.8906 207.095C43.4389 207.445 42.892 207.619 42.25 207.619ZM42.25 206.682C42.8864 206.682 43.3807 206.375 43.733 205.761C44.0852 205.148 44.2614 204.273 44.2614 203.136C44.2614 202.381 44.1804 201.737 44.0185 201.206C43.8594 200.675 43.6293 200.27 43.3281 199.991C43.0298 199.713 42.6705 199.574 42.25 199.574C41.6193 199.574 41.1264 199.885 40.7713 200.507C40.4162 201.126 40.2386 202.003 40.2386 203.136C40.2386 203.892 40.3182 204.534 40.4773 205.062C40.6364 205.591 40.8651 205.993 41.1634 206.268C41.4645 206.544 41.8267 206.682 42.25 206.682ZM49.75 207.619C49.108 207.619 48.5611 207.445 48.1094 207.095C47.6577 206.743 47.3125 206.233 47.0739 205.565C46.8352 204.895 46.7159 204.085 46.7159 203.136C46.7159 202.193 46.8352 201.388 47.0739 200.72C47.3153 200.05 47.6619 199.538 48.1136 199.186C48.5682 198.831 49.1136 198.653 49.75 198.653C50.3864 198.653 50.9304 198.831 51.3821 199.186C51.8366 199.538 52.1832 200.05 52.4219 200.72C52.6634 201.388 52.7841 202.193 52.7841 203.136C52.7841 204.085 52.6648 204.895 52.4261 205.565C52.1875 206.233 51.8423 206.743 51.3906 207.095C50.9389 207.445 50.392 207.619 49.75 207.619ZM49.75 206.682C50.3864 206.682 50.8807 206.375 51.233 205.761C51.5852 205.148 51.7614 204.273 51.7614 203.136C51.7614 202.381 51.6804 201.737 51.5185 201.206C51.3594 200.675 51.1293 200.27 50.8281 199.991C50.5298 199.713 50.1705 199.574 49.75 199.574C49.1193 199.574 48.6264 199.885 48.2713 200.507C47.9162 201.126 47.7386 202.003 47.7386 203.136C47.7386 203.892 47.8182 204.534 47.9773 205.062C48.1364 205.591 48.3651 205.993 48.6634 206.268C48.9645 206.544 49.3267 206.682 49.75 206.682ZM57.25 207.619C56.608 207.619 56.0611 207.445 55.6094 207.095C55.1577 206.743 54.8125 206.233 54.5739 205.565C54.3352 204.895 54.2159 204.085 54.2159 203.136C54.2159 202.193 54.3352 201.388 54.5739 200.72C54.8153 200.05 55.1619 199.538 55.6136 199.186C56.0682 198.831 56.6136 198.653 57.25 198.653C57.8864 198.653 58.4304 198.831 58.8821 199.186C59.3366 199.538 59.6832 200.05 59.9219 200.72C60.1634 201.388 60.2841 202.193 60.2841 203.136C60.2841 204.085 60.1648 204.895 59.9261 205.565C59.6875 206.233 59.3423 206.743 58.8906 207.095C58.4389 207.445 57.892 207.619 57.25 207.619ZM57.25 206.682C57.8864 206.682 58.3807 206.375 58.733 205.761C59.0852 205.148 59.2614 204.273 59.2614 203.136C59.2614 202.381 59.1804 201.737 59.0185 201.206C58.8594 200.675 58.6293 200.27 58.3281 199.991C58.0298 199.713 57.6705 199.574 57.25 199.574C56.6193 199.574 56.1264 199.885 55.7713 200.507C55.4162 201.126 55.2386 202.003 55.2386 203.136C55.2386 203.892 55.3182 204.534 55.4773 205.062C55.6364 205.591 55.8651 205.993 56.1634 206.268C56.4645 206.544 56.8267 206.682 57.25 206.682Z" fill="#868EA3" />
+    <line x1="77" y1="203.25" x2="540" y2="203.25" stroke="#4F5769" stroke-width="0.5" />
+    <path opacity="0.5" d="M42.3299 245.119C41.8299 245.119 41.3796 245.02 40.979 244.821C40.5785 244.622 40.2575 244.349 40.016 244.003C39.7745 243.656 39.6424 243.261 39.6197 242.818H40.6424C40.6822 243.213 40.8612 243.54 41.1793 243.798C41.5004 244.054 41.8839 244.182 42.3299 244.182C42.6879 244.182 43.006 244.098 43.2844 243.93C43.5657 243.763 43.7859 243.533 43.945 243.24C44.1069 242.945 44.1879 242.611 44.1879 242.239C44.1879 241.858 44.104 241.518 43.9364 241.22C43.7717 240.919 43.5444 240.682 43.2546 240.509C42.9648 240.335 42.6339 240.247 42.2617 240.244C41.9947 240.241 41.7205 240.283 41.4393 240.368C41.158 240.45 40.9265 240.557 40.7447 240.688L39.756 240.568L40.2844 236.273H44.8185V237.21H41.1708L40.864 239.784H40.9151C41.0941 239.642 41.3185 239.524 41.5884 239.43C41.8583 239.337 42.1396 239.29 42.4322 239.29C42.9663 239.29 43.4421 239.418 43.8597 239.673C44.2802 239.926 44.6097 240.273 44.8484 240.713C45.0898 241.153 45.2106 241.656 45.2106 242.222C45.2106 242.778 45.0856 243.276 44.8356 243.713C44.5884 244.148 44.2475 244.491 43.8129 244.744C43.3782 244.994 42.8839 245.119 42.3299 245.119ZM49.75 245.119C49.108 245.119 48.5611 244.945 48.1094 244.595C47.6577 244.243 47.3125 243.733 47.0739 243.065C46.8352 242.395 46.7159 241.585 46.7159 240.636C46.7159 239.693 46.8352 238.888 47.0739 238.22C47.3153 237.55 47.6619 237.038 48.1136 236.686C48.5682 236.331 49.1136 236.153 49.75 236.153C50.3864 236.153 50.9304 236.331 51.3821 236.686C51.8366 237.038 52.1832 237.55 52.4219 238.22C52.6634 238.888 52.7841 239.693 52.7841 240.636C52.7841 241.585 52.6648 242.395 52.4261 243.065C52.1875 243.733 51.8423 244.243 51.3906 244.595C50.9389 244.945 50.392 245.119 49.75 245.119ZM49.75 244.182C50.3864 244.182 50.8807 243.875 51.233 243.261C51.5852 242.648 51.7614 241.773 51.7614 240.636C51.7614 239.881 51.6804 239.237 51.5185 238.706C51.3594 238.175 51.1293 237.77 50.8281 237.491C50.5298 237.213 50.1705 237.074 49.75 237.074C49.1193 237.074 48.6264 237.385 48.2713 238.007C47.9162 238.626 47.7386 239.503 47.7386 240.636C47.7386 241.392 47.8182 242.034 47.9773 242.562C48.1364 243.091 48.3651 243.493 48.6634 243.768C48.9645 244.044 49.3267 244.182 49.75 244.182ZM57.25 245.119C56.608 245.119 56.0611 244.945 55.6094 244.595C55.1577 244.243 54.8125 243.733 54.5739 243.065C54.3352 242.395 54.2159 241.585 54.2159 240.636C54.2159 239.693 54.3352 238.888 54.5739 238.22C54.8153 237.55 55.1619 237.038 55.6136 236.686C56.0682 236.331 56.6136 236.153 57.25 236.153C57.8864 236.153 58.4304 236.331 58.8821 236.686C59.3366 237.038 59.6832 237.55 59.9219 238.22C60.1634 238.888 60.2841 239.693 60.2841 240.636C60.2841 241.585 60.1648 242.395 59.9261 243.065C59.6875 243.733 59.3423 244.243 58.8906 244.595C58.4389 244.945 57.892 245.119 57.25 245.119ZM57.25 244.182C57.8864 244.182 58.3807 243.875 58.733 243.261C59.0852 242.648 59.2614 241.773 59.2614 240.636C59.2614 239.881 59.1804 239.237 59.0185 238.706C58.8594 238.175 58.6293 237.77 58.3281 237.491C58.0298 237.213 57.6705 237.074 57.25 237.074C56.6193 237.074 56.1264 237.385 55.7713 238.007C55.4162 238.626 55.2386 239.503 55.2386 240.636C55.2386 241.392 55.3182 242.034 55.4773 242.562C55.6364 243.091 55.8651 243.493 56.1634 243.768C56.4645 244.044 56.8267 244.182 57.25 244.182Z" fill="#868EA3" />
+    <line x1="77" y1="240.75" x2="540" y2="240.75" stroke="#4F5769" stroke-width="0.5" />
+    <path opacity="0.5" d="M57.25 282.119C56.608 282.119 56.0611 281.945 55.6094 281.595C55.1577 281.243 54.8125 280.733 54.5739 280.065C54.3352 279.395 54.2159 278.585 54.2159 277.636C54.2159 276.693 54.3352 275.888 54.5739 275.22C54.8153 274.55 55.1619 274.038 55.6136 273.686C56.0682 273.331 56.6136 273.153 57.25 273.153C57.8864 273.153 58.4304 273.331 58.8821 273.686C59.3366 274.038 59.6832 274.55 59.9219 275.22C60.1634 275.888 60.2841 276.693 60.2841 277.636C60.2841 278.585 60.1648 279.395 59.9261 280.065C59.6875 280.733 59.3423 281.243 58.8906 281.595C58.4389 281.945 57.892 282.119 57.25 282.119ZM57.25 281.182C57.8864 281.182 58.3807 280.875 58.733 280.261C59.0852 279.648 59.2614 278.773 59.2614 277.636C59.2614 276.881 59.1804 276.237 59.0185 275.706C58.8594 275.175 58.6293 274.77 58.3281 274.491C58.0298 274.213 57.6705 274.074 57.25 274.074C56.6193 274.074 56.1264 274.385 55.7713 275.007C55.4162 275.626 55.2386 276.503 55.2386 277.636C55.2386 278.392 55.3182 279.034 55.4773 279.562C55.6364 280.091 55.8651 280.493 56.1634 280.768C56.4645 281.044 56.8267 281.182 57.25 281.182Z" fill="#868EA3" />
+    <line x1="77" y1="277.75" x2="540" y2="277.75" stroke="#4F5769" stroke-width="0.5" />
+    <path d="M77 164.761C77 163.236 78.2363 162 79.7614 162V162C81.2865 162 82.5229 163.236 82.5229 164.761V278.369H77V164.761Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M77 220.416C77 218.891 78.2363 217.655 79.7614 217.655V217.655C81.2865 217.655 82.5229 218.891 82.5229 220.416V278.369H77V220.416Z" fill="#F02E65" />
+    <path d="M92.6484 203.214C92.6484 201.688 93.8848 200.452 95.4099 200.452V200.452C96.935 200.452 98.1713 201.688 98.1713 203.214V278.369H92.6484V203.214Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M92.6484 233.571C92.6484 232.046 93.8848 230.809 95.4099 230.809V230.809C96.935 230.809 98.1713 232.046 98.1713 233.571V278.369H92.6484V233.571Z" fill="#F02E65" />
+    <path d="M108.296 233.571C108.296 232.046 109.532 230.809 111.057 230.809V230.809C112.582 230.809 113.819 232.046 113.819 233.571V278.369H108.296V233.571Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M108.296 256.845C108.296 255.32 109.532 254.083 111.057 254.083V254.083C112.582 254.083 113.819 255.32 113.819 256.845V278.369H108.296V256.845Z" fill="#F02E65" />
+    <path d="M123.944 214.345C123.944 212.82 125.181 211.584 126.706 211.584V211.584C128.231 211.584 129.467 212.82 129.467 214.345V278.369H123.944V214.345Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M123.944 238.631C123.944 237.106 125.181 235.869 126.706 235.869V235.869C128.231 235.869 129.467 237.106 129.467 238.631V278.369H123.944V238.631Z" fill="#F02E65" />
+    <path d="M139.593 183.988C139.593 182.463 140.829 181.227 142.354 181.227V181.227C143.879 181.227 145.116 182.463 145.116 183.988V278.37H139.593V183.988Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M139.593 211.309C139.593 209.784 140.829 208.548 142.354 208.548V208.548C143.879 208.548 145.116 209.784 145.116 211.309V278.37H139.593V211.309Z" fill="#F02E65" />
+    <path d="M155.24 164.761C155.24 163.236 156.477 162 158.002 162V162C159.527 162 160.763 163.236 160.763 164.761V278.369H155.24V164.761Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M155.24 194.107C155.24 192.582 156.477 191.345 158.002 191.345V191.345C159.527 191.345 160.763 192.582 160.763 194.107V278.369H155.24V194.107Z" fill="#F02E65" />
+    <path d="M170.889 203.214C170.889 201.688 172.125 200.452 173.65 200.452V200.452C175.175 200.452 176.412 201.688 176.412 203.214V278.369H170.889V203.214Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M170.889 228.511C170.889 226.986 172.125 225.75 173.65 225.75V225.75C175.175 225.75 176.412 226.986 176.412 228.511V278.369H170.889V228.511Z" fill="#F02E65" />
+    <path d="M186.537 233.571C186.537 232.046 187.773 230.809 189.299 230.809V230.809C190.824 230.809 192.06 232.046 192.06 233.571V278.369H186.537V233.571Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M186.537 252.797C186.537 251.272 187.773 250.036 189.299 250.036V250.036C190.824 250.036 192.06 251.272 192.06 252.797V278.369H186.537V252.797Z" fill="#F02E65" />
+    <path d="M202.185 214.345C202.185 212.82 203.421 211.584 204.946 211.584V211.584C206.471 211.584 207.707 212.82 207.707 214.345V278.37H202.185V214.345Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M202.185 228.511C202.185 226.986 203.421 225.75 204.946 225.75V225.75C206.471 225.75 207.707 226.986 207.707 228.511V278.369H202.185V228.511Z" fill="#F02E65" />
+    <path d="M217.833 183.988C217.833 182.463 219.069 181.226 220.594 181.226V181.226C222.12 181.226 223.356 182.463 223.356 183.988V278.369H217.833V183.988Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M217.833 211.309C217.833 209.784 219.069 208.548 220.594 208.548V208.548C222.12 208.548 223.356 209.784 223.356 211.309V278.369H217.833V211.309Z" fill="#F02E65" />
+    <path d="M233.481 203.214C233.481 201.688 234.718 200.452 236.243 200.452V200.452C237.768 200.452 239.004 201.688 239.004 203.214V278.369H233.481V203.214Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M233.481 228.511C233.481 226.986 234.718 225.75 236.243 225.75V225.75C237.768 225.75 239.004 226.986 239.004 228.511V278.369H233.481V228.511Z" fill="#F02E65" />
+    <path d="M249.129 233.571C249.129 232.046 250.365 230.809 251.89 230.809V230.809C253.415 230.809 254.652 232.046 254.652 233.571V278.369H249.129V233.571Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M249.129 252.797C249.129 251.272 250.365 250.036 251.89 250.036V250.036C253.415 250.036 254.652 251.272 254.652 252.797V278.369H249.129V252.797Z" fill="#F02E65" />
+    <path d="M264.777 214.345C264.777 212.82 266.014 211.584 267.539 211.584V211.584C269.064 211.584 270.3 212.82 270.3 214.345V278.369H264.777V214.345Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M264.777 233.571C264.777 232.046 266.014 230.809 267.539 230.809V230.809C269.064 230.809 270.3 232.046 270.3 233.571V278.369H264.777V233.571Z" fill="#F02E65" />
+    <path d="M280.426 183.988C280.426 182.463 281.662 181.227 283.187 181.227V181.227C284.712 181.227 285.949 182.463 285.949 183.988V278.37H280.426V183.988Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M280.426 211.309C280.426 209.784 281.662 208.548 283.187 208.548V208.548C284.712 208.548 285.949 209.784 285.949 211.309V278.37H280.426V211.309Z" fill="#F02E65" />
+    <path d="M296.073 214.345C296.073 212.82 297.31 211.584 298.835 211.584V211.584C300.36 211.584 301.596 212.82 301.596 214.345V278.37H296.073V214.345Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M296.073 238.631C296.073 237.106 297.31 235.87 298.835 235.87V235.87C300.36 235.87 301.596 237.106 301.596 238.631V278.37H296.073V238.631Z" fill="#F02E65" />
+    <path d="M311.722 183.988C311.722 182.463 312.958 181.226 314.483 181.226V181.226C316.008 181.226 317.245 182.463 317.245 183.988V278.369H311.722V183.988Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M311.722 211.309C311.722 209.784 312.958 208.548 314.483 208.548V208.548C316.008 208.548 317.245 209.784 317.245 211.309V278.369H311.722V211.309Z" fill="#F02E65" />
+    <path d="M327.37 214.345C327.37 212.82 328.606 211.584 330.132 211.584V211.584C331.657 211.584 332.893 212.82 332.893 214.345V278.37H327.37V214.345Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M327.37 238.631C327.37 237.106 328.606 235.87 330.132 235.87V235.87C331.657 235.87 332.893 237.106 332.893 238.631V278.37H327.37V238.631Z" fill="#F02E65" />
+    <path d="M343.018 183.988C343.018 182.463 344.254 181.227 345.779 181.227V181.227C347.304 181.227 348.54 182.463 348.54 183.988V278.37H343.018V183.988Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M343.018 215.357C343.018 213.832 344.254 212.596 345.779 212.596V212.596C347.304 212.596 348.54 213.832 348.54 215.357V278.37H343.018V215.357Z" fill="#F02E65" />
+    <path d="M359 177.253C359 175.872 360.119 174.753 361.5 174.753V174.753C362.881 174.753 364 175.872 364 177.253V278.369H359V177.253Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M359 211.526C359 210.145 360.119 209.026 361.5 209.026V209.026C362.881 209.026 364 210.145 364 211.526V278.369H359V211.526Z" fill="#F02E65" />
+    <path d="M374.314 183.988C374.314 182.463 375.551 181.227 377.076 181.227V181.227C378.601 181.227 379.837 182.463 379.837 183.988V278.37H374.314V183.988Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M374.314 214.345C374.314 212.82 375.551 211.584 377.076 211.584V211.584C378.601 211.584 379.837 212.82 379.837 214.345V278.369H374.314V214.345Z" fill="#F02E65" />
+    <path d="M389.962 214.345C389.962 212.82 391.198 211.584 392.723 211.584V211.584C394.248 211.584 395.485 212.82 395.485 214.345V278.37H389.962V214.345Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M389.962 238.631C389.962 237.106 391.198 235.87 392.723 235.87V235.87C394.248 235.87 395.485 237.106 395.485 238.631V278.37H389.962V238.631Z" fill="#F02E65" />
+    <path d="M405.61 183.988C405.61 182.463 406.847 181.226 408.372 181.226V181.226C409.897 181.226 411.133 182.463 411.133 183.988V278.369H405.61V183.988Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M405.61 192.083C405.61 190.558 406.847 189.321 408.372 189.321V189.321C409.897 189.321 411.133 190.558 411.133 192.083V278.369H405.61V192.083Z" fill="#F02E65" />
+    <path d="M421.259 214.345C421.259 212.82 422.495 211.584 424.02 211.584V211.584C425.545 211.584 426.782 212.82 426.782 214.345V278.37H421.259V214.345Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M421.259 236.606C421.259 235.081 422.495 233.845 424.02 233.845V233.845C425.545 233.845 426.782 235.081 426.782 236.606V278.369H421.259V236.606Z" fill="#F02E65" />
+    <path d="M436.906 236.496C436.906 234.971 438.143 233.734 439.668 233.734V233.734C441.193 233.734 442.429 234.971 442.429 236.496V278.369H436.906V236.496Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M436.906 245.287C436.906 243.762 438.143 242.526 439.668 242.526V242.526C441.193 242.526 442.429 243.762 442.429 245.287V278.369H436.906V245.287Z" fill="#F02E65" />
+    <path d="M452.555 214.345C452.555 212.82 453.791 211.583 455.316 211.583V211.583C456.841 211.583 458.078 212.82 458.078 214.345V278.369H452.555V214.345Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M452.555 227.499C452.555 225.974 453.791 224.738 455.316 224.738V224.738C456.841 224.738 458.078 225.974 458.078 227.499V278.369H452.555V227.499Z" fill="#F02E65" />
+    <path d="M469.123 206.208C469.123 204.683 470.359 203.447 471.884 203.447V203.447C473.41 203.447 474.646 204.683 474.646 206.208V278.203H469.123V206.208Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M469.123 220.932C469.123 219.407 470.359 218.171 471.884 218.171V218.171C473.41 218.171 474.646 219.407 474.646 220.932V278.203H469.123V220.932Z" fill="#F02E65" />
+    <path d="M485.691 214.178C485.691 212.653 486.928 211.417 488.453 211.417V211.417C489.978 211.417 491.214 212.653 491.214 214.178V278.203H485.691V214.178Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M485.691 227.333C485.691 225.808 486.928 224.571 488.453 224.571V224.571C489.978 224.571 491.214 225.808 491.214 227.333V278.202H485.691V227.333Z" fill="#F02E65" />
+    <path d="M502.261 222.149C502.261 220.624 503.497 219.388 505.022 219.388V219.388C506.547 219.388 507.784 220.624 507.784 222.149V278.203H502.261V222.149Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M502.261 233.733C502.261 232.208 503.497 230.972 505.022 230.972V230.972C506.547 230.972 507.784 232.208 507.784 233.733V278.202H502.261V233.733Z" fill="#F02E65" />
+    <path d="M518.829 199.832C518.829 198.307 520.065 197.07 521.591 197.07V197.07C523.116 197.07 524.352 198.307 524.352 199.832V279H518.829V199.832Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M518.829 215.969C518.829 214.444 520.065 213.207 521.591 213.207V213.207C523.116 213.207 524.352 214.444 524.352 215.969V279H518.829V215.969Z" fill="#F02E65" />
+    <path d="M534.478 214.345C534.478 212.82 535.714 211.584 537.239 211.584V211.584C538.764 211.584 540 212.82 540 214.345V278.37H534.478V214.345Z" fill="#F02E65" fill-opacity="0.4" />
+    <path d="M534.478 227.5C534.478 225.974 535.714 224.738 537.239 224.738V224.738C538.764 224.738 540 225.974 540 227.5V278.369H534.478V227.5Z" fill="#F02E65" />
+    <g filter="url(#filter1_d_1297_52064)">
+        <rect x="596" y="1" width="572" height="340" rx="16" fill="#1B1B28" stroke="#373B4D" />
+        <path opacity="0.5" d="M628.5 131.707V130.838L632.335 124.77H632.966V126.116H632.539L629.642 130.701V130.77H634.806V131.707H628.5ZM632.608 133.497V131.443V131.038V124.77H633.613V133.497H632.608ZM639.25 133.616C638.608 133.616 638.061 133.442 637.609 133.092C637.158 132.74 636.813 132.23 636.574 131.562C636.335 130.892 636.216 130.082 636.216 129.133C636.216 128.19 636.335 127.385 636.574 126.717C636.815 126.047 637.162 125.535 637.614 125.183C638.068 124.828 638.614 124.65 639.25 124.65C639.886 124.65 640.43 124.828 640.882 125.183C641.337 125.535 641.683 126.047 641.922 126.717C642.163 127.385 642.284 128.19 642.284 129.133C642.284 130.082 642.165 130.892 641.926 131.562C641.688 132.23 641.342 132.74 640.891 133.092C640.439 133.442 639.892 133.616 639.25 133.616ZM639.25 132.679C639.886 132.679 640.381 132.372 640.733 131.758C641.085 131.145 641.261 130.27 641.261 129.133C641.261 128.378 641.18 127.734 641.018 127.203C640.859 126.672 640.629 126.267 640.328 125.988C640.03 125.71 639.67 125.571 639.25 125.571C638.619 125.571 638.126 125.882 637.771 126.504C637.416 127.123 637.239 128 637.239 129.133C637.239 129.889 637.318 130.531 637.477 131.059C637.636 131.588 637.865 131.99 638.163 132.265C638.464 132.541 638.827 132.679 639.25 132.679ZM646.75 133.616C646.108 133.616 645.561 133.442 645.109 133.092C644.658 132.74 644.313 132.23 644.074 131.562C643.835 130.892 643.716 130.082 643.716 129.133C643.716 128.19 643.835 127.385 644.074 126.717C644.315 126.047 644.662 125.535 645.114 125.183C645.568 124.828 646.114 124.65 646.75 124.65C647.386 124.65 647.93 124.828 648.382 125.183C648.837 125.535 649.183 126.047 649.422 126.717C649.663 127.385 649.784 128.19 649.784 129.133C649.784 130.082 649.665 130.892 649.426 131.562C649.188 132.23 648.842 132.74 648.391 133.092C647.939 133.442 647.392 133.616 646.75 133.616ZM646.75 132.679C647.386 132.679 647.881 132.372 648.233 131.758C648.585 131.145 648.761 130.27 648.761 129.133C648.761 128.378 648.68 127.734 648.518 127.203C648.359 126.672 648.129 126.267 647.828 125.988C647.53 125.71 647.17 125.571 646.75 125.571C646.119 125.571 645.626 125.882 645.271 126.504C644.916 127.123 644.739 128 644.739 129.133C644.739 129.889 644.818 130.531 644.977 131.059C645.136 131.588 645.365 131.99 645.663 132.265C645.964 132.541 646.327 132.679 646.75 132.679ZM654.25 133.616C653.608 133.616 653.061 133.442 652.609 133.092C652.158 132.74 651.813 132.23 651.574 131.562C651.335 130.892 651.216 130.082 651.216 129.133C651.216 128.19 651.335 127.385 651.574 126.717C651.815 126.047 652.162 125.535 652.614 125.183C653.068 124.828 653.614 124.65 654.25 124.65C654.886 124.65 655.43 124.828 655.882 125.183C656.337 125.535 656.683 126.047 656.922 126.717C657.163 127.385 657.284 128.19 657.284 129.133C657.284 130.082 657.165 130.892 656.926 131.562C656.688 132.23 656.342 132.74 655.891 133.092C655.439 133.442 654.892 133.616 654.25 133.616ZM654.25 132.679C654.886 132.679 655.381 132.372 655.733 131.758C656.085 131.145 656.261 130.27 656.261 129.133C656.261 128.378 656.18 127.734 656.018 127.203C655.859 126.672 655.629 126.267 655.328 125.988C655.03 125.71 654.67 125.571 654.25 125.571C653.619 125.571 653.126 125.882 652.771 126.504C652.416 127.123 652.239 128 652.239 129.133C652.239 129.889 652.318 130.531 652.477 131.059C652.636 131.588 652.865 131.99 653.163 132.265C653.464 132.541 653.827 132.679 654.25 132.679Z" fill="#868EA3" />
+        <line x1="674" y1="129.247" x2="1137" y2="129.247" stroke="#868EA3" stroke-width="0.5" />
+        <path opacity="0.5" d="M631.712 168.886C631.149 168.886 630.648 168.789 630.207 168.596C629.77 168.403 629.422 168.134 629.163 167.791C628.908 167.444 628.768 167.042 628.746 166.585H629.82C629.842 166.866 629.939 167.109 630.109 167.313C630.28 167.515 630.503 167.671 630.778 167.782C631.054 167.893 631.359 167.948 631.695 167.948C632.07 167.948 632.402 167.883 632.692 167.752C632.982 167.622 633.209 167.44 633.374 167.207C633.538 166.974 633.621 166.704 633.621 166.397C633.621 166.076 633.541 165.793 633.382 165.549C633.223 165.302 632.99 165.109 632.683 164.97C632.376 164.83 632.001 164.761 631.558 164.761H630.859V163.823H631.558C631.905 163.823 632.209 163.761 632.47 163.636C632.734 163.511 632.94 163.335 633.088 163.107C633.239 162.88 633.314 162.613 633.314 162.306C633.314 162.011 633.249 161.754 633.118 161.535C632.987 161.316 632.803 161.146 632.564 161.024C632.328 160.901 632.05 160.84 631.729 160.84C631.428 160.84 631.143 160.896 630.876 161.007C630.612 161.114 630.396 161.272 630.229 161.48C630.061 161.684 629.97 161.931 629.956 162.221H628.933C628.95 161.764 629.088 161.363 629.347 161.019C629.605 160.673 629.943 160.403 630.361 160.21C630.781 160.016 631.243 159.92 631.746 159.92C632.286 159.92 632.749 160.029 633.135 160.248C633.521 160.464 633.818 160.749 634.026 161.105C634.233 161.46 634.337 161.843 634.337 162.255C634.337 162.747 634.207 163.166 633.949 163.512C633.693 163.859 633.345 164.099 632.905 164.232V164.301C633.456 164.391 633.886 164.626 634.196 165.004C634.506 165.379 634.661 165.843 634.661 166.397C634.661 166.872 634.531 167.298 634.273 167.676C634.017 168.051 633.668 168.346 633.224 168.562C632.781 168.778 632.277 168.886 631.712 168.886ZM639.25 168.886C638.608 168.886 638.061 168.711 637.609 168.362C637.158 168.009 636.813 167.499 636.574 166.832C636.335 166.161 636.216 165.352 636.216 164.403C636.216 163.46 636.335 162.654 636.574 161.987C636.815 161.316 637.162 160.805 637.614 160.453C638.068 160.097 638.614 159.92 639.25 159.92C639.886 159.92 640.43 160.097 640.882 160.453C641.337 160.805 641.683 161.316 641.922 161.987C642.163 162.654 642.284 163.46 642.284 164.403C642.284 165.352 642.165 166.161 641.926 166.832C641.688 167.499 641.342 168.009 640.891 168.362C640.439 168.711 639.892 168.886 639.25 168.886ZM639.25 167.948C639.886 167.948 640.381 167.641 640.733 167.028C641.085 166.414 641.261 165.539 641.261 164.403C641.261 163.647 641.18 163.004 641.018 162.472C640.859 161.941 640.629 161.536 640.328 161.258C640.03 160.98 639.67 160.84 639.25 160.84C638.619 160.84 638.126 161.151 637.771 161.774C637.416 162.393 637.239 163.269 637.239 164.403C637.239 165.159 637.318 165.801 637.477 166.329C637.636 166.857 637.865 167.259 638.163 167.535C638.464 167.811 638.827 167.948 639.25 167.948ZM646.75 168.886C646.108 168.886 645.561 168.711 645.109 168.362C644.658 168.009 644.313 167.499 644.074 166.832C643.835 166.161 643.716 165.352 643.716 164.403C643.716 163.46 643.835 162.654 644.074 161.987C644.315 161.316 644.662 160.805 645.114 160.453C645.568 160.097 646.114 159.92 646.75 159.92C647.386 159.92 647.93 160.097 648.382 160.453C648.837 160.805 649.183 161.316 649.422 161.987C649.663 162.654 649.784 163.46 649.784 164.403C649.784 165.352 649.665 166.161 649.426 166.832C649.188 167.499 648.842 168.009 648.391 168.362C647.939 168.711 647.392 168.886 646.75 168.886ZM646.75 167.948C647.386 167.948 647.881 167.641 648.233 167.028C648.585 166.414 648.761 165.539 648.761 164.403C648.761 163.647 648.68 163.004 648.518 162.472C648.359 161.941 648.129 161.536 647.828 161.258C647.53 160.98 647.17 160.84 646.75 160.84C646.119 160.84 645.626 161.151 645.271 161.774C644.916 162.393 644.739 163.269 644.739 164.403C644.739 165.159 644.818 165.801 644.977 166.329C645.136 166.857 645.365 167.259 645.663 167.535C645.964 167.811 646.327 167.948 646.75 167.948ZM654.25 168.886C653.608 168.886 653.061 168.711 652.609 168.362C652.158 168.009 651.813 167.499 651.574 166.832C651.335 166.161 651.216 165.352 651.216 164.403C651.216 163.46 651.335 162.654 651.574 161.987C651.815 161.316 652.162 160.805 652.614 160.453C653.068 160.097 653.614 159.92 654.25 159.92C654.886 159.92 655.43 160.097 655.882 160.453C656.337 160.805 656.683 161.316 656.922 161.987C657.163 162.654 657.284 163.46 657.284 164.403C657.284 165.352 657.165 166.161 656.926 166.832C656.688 167.499 656.342 168.009 655.891 168.362C655.439 168.711 654.892 168.886 654.25 168.886ZM654.25 167.948C654.886 167.948 655.381 167.641 655.733 167.028C656.085 166.414 656.261 165.539 656.261 164.403C656.261 163.647 656.18 163.004 656.018 162.472C655.859 161.941 655.629 161.536 655.328 161.258C655.03 160.98 654.67 160.84 654.25 160.84C653.619 160.84 653.126 161.151 652.771 161.774C652.416 162.393 652.239 163.269 652.239 164.403C652.239 165.159 652.318 165.801 652.477 166.329C652.636 166.857 652.865 167.259 653.163 167.535C653.464 167.811 653.827 167.948 654.25 167.948Z" fill="#868EA3" />
+        <line x1="674" y1="164.516" x2="1137" y2="164.516" stroke="#868EA3" stroke-width="0.5" />
+        <path opacity="0.5" d="M629.138 204.964V204.197L632.018 201.044C632.357 200.674 632.635 200.353 632.854 200.08C633.072 199.805 633.234 199.546 633.339 199.305C633.447 199.061 633.501 198.805 633.501 198.538C633.501 198.231 633.428 197.965 633.28 197.741C633.135 197.517 632.936 197.343 632.683 197.221C632.43 197.099 632.146 197.038 631.831 197.038C631.496 197.038 631.203 197.107 630.953 197.247C630.706 197.383 630.514 197.575 630.378 197.822C630.244 198.069 630.178 198.359 630.178 198.691H629.172C629.172 198.18 629.29 197.731 629.526 197.345C629.761 196.958 630.082 196.657 630.489 196.441C630.898 196.225 631.357 196.117 631.865 196.117C632.376 196.117 632.83 196.225 633.224 196.441C633.619 196.657 633.929 196.948 634.153 197.315C634.378 197.681 634.49 198.089 634.49 198.538C634.49 198.859 634.432 199.173 634.315 199.48C634.202 199.784 634.003 200.123 633.719 200.498C633.438 200.87 633.047 201.325 632.547 201.862L630.587 203.958V204.026H634.643V204.964H629.138ZM639.25 205.083C638.608 205.083 638.061 204.909 637.609 204.559C637.158 204.207 636.813 203.697 636.574 203.029C636.335 202.359 636.216 201.549 636.216 200.6C636.216 199.657 636.335 198.852 636.574 198.184C636.815 197.514 637.162 197.002 637.614 196.65C638.068 196.295 638.614 196.117 639.25 196.117C639.886 196.117 640.43 196.295 640.882 196.65C641.337 197.002 641.683 197.514 641.922 198.184C642.163 198.852 642.284 199.657 642.284 200.6C642.284 201.549 642.165 202.359 641.926 203.029C641.688 203.697 641.342 204.207 640.891 204.559C640.439 204.909 639.892 205.083 639.25 205.083ZM639.25 204.146C639.886 204.146 640.381 203.839 640.733 203.225C641.085 202.612 641.261 201.737 641.261 200.6C641.261 199.845 641.18 199.201 641.018 198.67C640.859 198.139 640.629 197.734 640.328 197.455C640.03 197.177 639.67 197.038 639.25 197.038C638.619 197.038 638.126 197.349 637.771 197.971C637.416 198.59 637.239 199.467 637.239 200.6C637.239 201.356 637.318 201.998 637.477 202.526C637.636 203.055 637.865 203.457 638.163 203.732C638.464 204.008 638.827 204.146 639.25 204.146ZM646.75 205.083C646.108 205.083 645.561 204.909 645.109 204.559C644.658 204.207 644.313 203.697 644.074 203.029C643.835 202.359 643.716 201.549 643.716 200.6C643.716 199.657 643.835 198.852 644.074 198.184C644.315 197.514 644.662 197.002 645.114 196.65C645.568 196.295 646.114 196.117 646.75 196.117C647.386 196.117 647.93 196.295 648.382 196.65C648.837 197.002 649.183 197.514 649.422 198.184C649.663 198.852 649.784 199.657 649.784 200.6C649.784 201.549 649.665 202.359 649.426 203.029C649.188 203.697 648.842 204.207 648.391 204.559C647.939 204.909 647.392 205.083 646.75 205.083ZM646.75 204.146C647.386 204.146 647.881 203.839 648.233 203.225C648.585 202.612 648.761 201.737 648.761 200.6C648.761 199.845 648.68 199.201 648.518 198.67C648.359 198.139 648.129 197.734 647.828 197.455C647.53 197.177 647.17 197.038 646.75 197.038C646.119 197.038 645.626 197.349 645.271 197.971C644.916 198.59 644.739 199.467 644.739 200.6C644.739 201.356 644.818 201.998 644.977 202.526C645.136 203.055 645.365 203.457 645.663 203.732C645.964 204.008 646.327 204.146 646.75 204.146ZM654.25 205.083C653.608 205.083 653.061 204.909 652.609 204.559C652.158 204.207 651.813 203.697 651.574 203.029C651.335 202.359 651.216 201.549 651.216 200.6C651.216 199.657 651.335 198.852 651.574 198.184C651.815 197.514 652.162 197.002 652.614 196.65C653.068 196.295 653.614 196.117 654.25 196.117C654.886 196.117 655.43 196.295 655.882 196.65C656.337 197.002 656.683 197.514 656.922 198.184C657.163 198.852 657.284 199.657 657.284 200.6C657.284 201.549 657.165 202.359 656.926 203.029C656.688 203.697 656.342 204.207 655.891 204.559C655.439 204.909 654.892 205.083 654.25 205.083ZM654.25 204.146C654.886 204.146 655.381 203.839 655.733 203.225C656.085 202.612 656.261 201.737 656.261 200.6C656.261 199.845 656.18 199.201 656.018 198.67C655.859 198.139 655.629 197.734 655.328 197.455C655.03 197.177 654.67 197.038 654.25 197.038C653.619 197.038 653.126 197.349 652.771 197.971C652.416 198.59 652.239 199.467 652.239 200.6C652.239 201.356 652.318 201.998 652.477 202.526C652.636 203.055 652.865 203.457 653.163 203.732C653.464 204.008 653.827 204.146 654.25 204.146Z" fill="#868EA3" />
+        <line x1="674" y1="200.714" x2="1137" y2="200.714" stroke="#868EA3" stroke-width="0.5" />
+        <path opacity="0.5" d="M633.893 231.506V240.234H632.837V232.614H632.786L630.655 234.029V232.955L632.837 231.506H633.893ZM639.25 240.353C638.608 240.353 638.061 240.178 637.609 239.829C637.158 239.477 636.813 238.967 636.574 238.299C636.335 237.629 636.216 236.819 636.216 235.87C636.216 234.927 636.335 234.122 636.574 233.454C636.815 232.783 637.162 232.272 637.614 231.92C638.068 231.565 638.614 231.387 639.25 231.387C639.886 231.387 640.43 231.565 640.882 231.92C641.337 232.272 641.683 232.783 641.922 233.454C642.163 234.122 642.284 234.927 642.284 235.87C642.284 236.819 642.165 237.629 641.926 238.299C641.688 238.967 641.342 239.477 640.891 239.829C640.439 240.178 639.892 240.353 639.25 240.353ZM639.25 239.416C639.886 239.416 640.381 239.109 640.733 238.495C641.085 237.881 641.261 237.006 641.261 235.87C641.261 235.114 641.18 234.471 641.018 233.94C640.859 233.408 640.629 233.004 640.328 232.725C640.03 232.447 639.67 232.308 639.25 232.308C638.619 232.308 638.126 232.619 637.771 233.241C637.416 233.86 637.239 234.737 637.239 235.87C637.239 236.626 637.318 237.268 637.477 237.796C637.636 238.325 637.865 238.727 638.163 239.002C638.464 239.278 638.827 239.416 639.25 239.416ZM646.75 240.353C646.108 240.353 645.561 240.178 645.109 239.829C644.658 239.477 644.313 238.967 644.074 238.299C643.835 237.629 643.716 236.819 643.716 235.87C643.716 234.927 643.835 234.122 644.074 233.454C644.315 232.783 644.662 232.272 645.114 231.92C645.568 231.565 646.114 231.387 646.75 231.387C647.386 231.387 647.93 231.565 648.382 231.92C648.837 232.272 649.183 232.783 649.422 233.454C649.663 234.122 649.784 234.927 649.784 235.87C649.784 236.819 649.665 237.629 649.426 238.299C649.188 238.967 648.842 239.477 648.391 239.829C647.939 240.178 647.392 240.353 646.75 240.353ZM646.75 239.416C647.386 239.416 647.881 239.109 648.233 238.495C648.585 237.881 648.761 237.006 648.761 235.87C648.761 235.114 648.68 234.471 648.518 233.94C648.359 233.408 648.129 233.004 647.828 232.725C647.53 232.447 647.17 232.308 646.75 232.308C646.119 232.308 645.626 232.619 645.271 233.241C644.916 233.86 644.739 234.737 644.739 235.87C644.739 236.626 644.818 237.268 644.977 237.796C645.136 238.325 645.365 238.727 645.663 239.002C645.964 239.278 646.327 239.416 646.75 239.416ZM654.25 240.353C653.608 240.353 653.061 240.178 652.609 239.829C652.158 239.477 651.813 238.967 651.574 238.299C651.335 237.629 651.216 236.819 651.216 235.87C651.216 234.927 651.335 234.122 651.574 233.454C651.815 232.783 652.162 232.272 652.614 231.92C653.068 231.565 653.614 231.387 654.25 231.387C654.886 231.387 655.43 231.565 655.882 231.92C656.337 232.272 656.683 232.783 656.922 233.454C657.163 234.122 657.284 234.927 657.284 235.87C657.284 236.819 657.165 237.629 656.926 238.299C656.688 238.967 656.342 239.477 655.891 239.829C655.439 240.178 654.892 240.353 654.25 240.353ZM654.25 239.416C654.886 239.416 655.381 239.109 655.733 238.495C656.085 237.881 656.261 237.006 656.261 235.87C656.261 235.114 656.18 234.471 656.018 233.94C655.859 233.408 655.629 233.004 655.328 232.725C655.03 232.447 654.67 232.308 654.25 232.308C653.619 232.308 653.126 232.619 652.771 233.241C652.416 233.86 652.239 234.737 652.239 235.87C652.239 236.626 652.318 237.268 652.477 237.796C652.636 238.325 652.865 238.727 653.163 239.002C653.464 239.278 653.827 239.416 654.25 239.416Z" fill="#868EA3" />
+        <line x1="674" y1="235.984" x2="1137" y2="235.984" stroke="#868EA3" stroke-width="0.5" />
+        <path opacity="0.5" d="M654.25 275.622C653.608 275.622 653.061 275.448 652.609 275.098C652.158 274.746 651.813 274.236 651.574 273.568C651.335 272.898 651.216 272.088 651.216 271.139C651.216 270.196 651.335 269.391 651.574 268.723C651.815 268.053 652.162 267.541 652.614 267.189C653.068 266.834 653.614 266.656 654.25 266.656C654.886 266.656 655.43 266.834 655.882 267.189C656.337 267.541 656.683 268.053 656.922 268.723C657.163 269.391 657.284 270.196 657.284 271.139C657.284 272.088 657.165 272.898 656.926 273.568C656.688 274.236 656.342 274.746 655.891 275.098C655.439 275.448 654.892 275.622 654.25 275.622ZM654.25 274.685C654.886 274.685 655.381 274.378 655.733 273.764C656.085 273.151 656.261 272.276 656.261 271.139C656.261 270.384 656.18 269.74 656.018 269.209C655.859 268.678 655.629 268.273 655.328 267.995C655.03 267.716 654.67 267.577 654.25 267.577C653.619 267.577 653.126 267.888 652.771 268.51C652.416 269.129 652.239 270.006 652.239 271.139C652.239 271.895 652.318 272.537 652.477 273.066C652.636 273.594 652.865 273.996 653.163 274.272C653.464 274.547 653.827 274.685 654.25 274.685Z" fill="#868EA3" />
+        <line x1="674" y1="271.253" x2="1137" y2="271.253" stroke="#868EA3" stroke-width="0.5" />
+        <g filter="url(#filter2_d_1297_52064)">
+            <path d="M674.5 272C679.5 265.5 686.5 262.5 696.259 231.884C700.736 217.842 712.887 168.103 730.921 164.565C764.068 158.062 780.154 200.517 806.964 200.517C828.9 200.517 837.858 190.24 855.32 174.025C872.781 157.81 883.576 168.129 889.29 171.077C895.005 174.025 922.944 198.348 941.676 151.545C956.661 114.102 983.36 127.959 995.648 138.278C1008.62 147.122 1040.32 210.133 1061.91 199.519C1083.5 188.905 1122.84 174.025 1136 212.501" stroke="#F02E65" />
+        </g>
+    </g>
+    <rect x="628" y="33" width="92" height="12" rx="6" fill="url(#paint0_linear_1297_52064)" />
+    <rect x="1110" y="33" width="40" height="12" rx="6" fill="url(#paint1_linear_1297_52064)" />
+    <path d="M31.3365 73V62.8182H34.8961C35.6054 62.8182 36.1904 62.9408 36.6511 63.1861C37.1118 63.428 37.4548 63.7545 37.6802 64.1655C37.9056 64.5732 38.0183 65.0256 38.0183 65.5227C38.0183 65.9602 37.9404 66.3215 37.7846 66.6065C37.6322 66.8916 37.43 67.117 37.1781 67.2827C36.9295 67.4484 36.6594 67.571 36.3677 67.6506V67.75C36.6793 67.7699 36.9925 67.8793 37.3074 68.0781C37.6222 68.277 37.8857 68.562 38.0978 68.9332C38.31 69.3045 38.416 69.7585 38.416 70.2955C38.416 70.8059 38.3 71.2649 38.068 71.6726C37.836 72.0803 37.4698 72.4034 36.9693 72.642C36.4688 72.8807 35.8175 73 35.0154 73H31.3365ZM32.5694 71.9062H35.0154C35.8208 71.9062 36.3926 71.7505 36.7306 71.4389C37.072 71.1241 37.2427 70.7429 37.2427 70.2955C37.2427 69.9508 37.1549 69.6326 36.9792 69.3409C36.8036 69.0459 36.5533 68.8106 36.2285 68.6349C35.9037 68.456 35.5192 68.3665 35.0751 68.3665H32.5694V71.9062ZM32.5694 67.2926H34.8564C35.2276 67.2926 35.5623 67.2197 35.8606 67.0739C36.1622 66.928 36.4009 66.7225 36.5765 66.4574C36.7555 66.1922 36.845 65.8807 36.845 65.5227C36.845 65.0753 36.6892 64.6958 36.3777 64.3842C36.0661 64.0694 35.5723 63.9119 34.8961 63.9119H32.5694V67.2926ZM42.53 73.179C42.0461 73.179 41.6069 73.0878 41.2125 72.9055C40.8181 72.7199 40.5049 72.4531 40.2729 72.1051C40.0409 71.7538 39.9249 71.3295 39.9249 70.8324C39.9249 70.3949 40.0111 70.0402 40.1834 69.7685C40.3558 69.4934 40.5861 69.2779 40.8745 69.1222C41.1628 68.9664 41.481 68.8504 41.829 68.7741C42.1803 68.6946 42.5333 68.6316 42.888 68.5852C43.352 68.5256 43.7282 68.4808 44.0165 68.451C44.3082 68.4179 44.5203 68.3632 44.6529 68.2869C44.7888 68.2107 44.8567 68.0781 44.8567 67.8892V67.8494C44.8567 67.3589 44.7225 66.9777 44.454 66.706C44.1889 66.4342 43.7862 66.2983 43.2459 66.2983C42.6858 66.2983 42.2466 66.4209 41.9284 66.6662C41.6103 66.9115 41.3865 67.1733 41.2573 67.4517L40.1436 67.054C40.3425 66.59 40.6077 66.2287 40.9391 65.9702C41.2739 65.7083 41.6384 65.526 42.0328 65.4233C42.4306 65.3172 42.8217 65.2642 43.2061 65.2642C43.4514 65.2642 43.7331 65.294 44.0513 65.3537C44.3728 65.41 44.6827 65.5277 44.981 65.7067C45.2826 65.8857 45.5328 66.1558 45.7317 66.517C45.9306 66.8783 46.03 67.3622 46.03 67.9688V73H44.8567V71.9659H44.7971C44.7175 72.1316 44.5849 72.3089 44.3993 72.4979C44.2137 72.6868 43.9668 72.8475 43.6586 72.9801C43.3503 73.1127 42.9741 73.179 42.53 73.179ZM42.709 72.125C43.173 72.125 43.5641 72.0339 43.8823 71.8516C44.2038 71.6693 44.4457 71.4339 44.6081 71.1456C44.7739 70.8572 44.8567 70.554 44.8567 70.2358V69.1619C44.807 69.2216 44.6976 69.2763 44.5286 69.326C44.3629 69.3724 44.1706 69.4138 43.9519 69.4503C43.7364 69.4834 43.526 69.5133 43.3205 69.5398C43.1183 69.563 42.9542 69.5829 42.8283 69.5994C42.5234 69.6392 42.2383 69.7038 41.9732 69.7933C41.7114 69.8795 41.4992 70.0104 41.3368 70.1861C41.1777 70.3584 41.0982 70.5937 41.0982 70.892C41.0982 71.2997 41.249 71.608 41.5506 71.8168C41.8555 72.0223 42.2417 72.125 42.709 72.125ZM49.3448 68.4062V73H48.1715V65.3636H49.305V66.5568H49.4045C49.5835 66.169 49.8552 65.8575 50.2198 65.6222C50.5844 65.3835 51.055 65.2642 51.6317 65.2642C52.1488 65.2642 52.6012 65.3703 52.989 65.5824C53.3768 65.7912 53.6784 66.1094 53.8938 66.5369C54.1093 66.9612 54.217 67.4981 54.217 68.1477V73H53.0437V68.2273C53.0437 67.6274 52.8879 67.16 52.5763 66.8253C52.2648 66.4872 51.8372 66.3182 51.2937 66.3182C50.9192 66.3182 50.5844 66.3994 50.2894 66.5618C49.9978 66.7242 49.7674 66.9612 49.5984 67.2727C49.4293 67.5843 49.3448 67.9621 49.3448 68.4062ZM59.2445 73.1591C58.6081 73.1591 58.0463 72.9983 57.5591 72.6768C57.0719 72.352 56.6908 71.8946 56.4157 71.3047C56.1406 70.7114 56.003 70.0104 56.003 69.2017C56.003 68.3996 56.1406 67.7036 56.4157 67.1136C56.6908 66.5237 57.0736 66.0679 57.5641 65.7464C58.0546 65.425 58.6214 65.2642 59.2644 65.2642C59.7615 65.2642 60.1543 65.3471 60.4426 65.5128C60.7343 65.6752 60.9564 65.8608 61.1088 66.0696C61.2646 66.2751 61.3856 66.4441 61.4718 66.5767H61.5712V62.8182H62.7445V73H61.611V71.8267H61.4718C61.3856 71.9659 61.263 72.1416 61.1039 72.3537C60.9448 72.5625 60.7177 72.7498 60.4228 72.9155C60.1278 73.0779 59.735 73.1591 59.2445 73.1591ZM59.4036 72.1051C59.8742 72.1051 60.272 71.9825 60.5968 71.7372C60.9216 71.4886 61.1685 71.1456 61.3375 70.7081C61.5066 70.2673 61.5911 69.7585 61.5911 69.1818C61.5911 68.6117 61.5082 68.1129 61.3425 67.6854C61.1768 67.2545 60.9315 66.9197 60.6067 66.6811C60.2819 66.4392 59.8809 66.3182 59.4036 66.3182C58.9064 66.3182 58.4921 66.4458 58.1607 66.701C57.8326 66.9529 57.5856 67.2959 57.4199 67.7301C57.2575 68.161 57.1763 68.6449 57.1763 69.1818C57.1763 69.7254 57.2592 70.2192 57.4249 70.6634C57.5939 71.1042 57.8425 71.4555 58.1706 71.7173C58.5021 71.9759 58.9131 72.1051 59.4036 72.1051ZM66.7864 73L64.4597 65.3636H65.6926L67.3432 71.2102H67.4228L69.0534 65.3636H70.3063L71.9171 71.1903H71.9966L73.6472 65.3636H74.8801L72.5534 73H71.4L69.7296 67.1335H69.6103L67.9398 73H66.7864ZM76.4313 73V65.3636H77.6046V73H76.4313ZM77.0279 64.0909C76.7992 64.0909 76.602 64.013 76.4363 63.8572C76.2739 63.7015 76.1926 63.5142 76.1926 63.2955C76.1926 63.0767 76.2739 62.8894 76.4363 62.7337C76.602 62.5779 76.7992 62.5 77.0279 62.5C77.2566 62.5 77.4521 62.5779 77.6145 62.7337C77.7802 62.8894 77.8631 63.0767 77.8631 63.2955C77.8631 63.5142 77.7802 63.7015 77.6145 63.8572C77.4521 64.013 77.2566 64.0909 77.0279 64.0909ZM82.6371 73.1591C82.0007 73.1591 81.4389 72.9983 80.9517 72.6768C80.4645 72.352 80.0833 71.8946 79.8082 71.3047C79.5331 70.7114 79.3956 70.0104 79.3956 69.2017C79.3956 68.3996 79.5331 67.7036 79.8082 67.1136C80.0833 66.5237 80.4661 66.0679 80.9567 65.7464C81.4472 65.425 82.014 65.2642 82.657 65.2642C83.1541 65.2642 83.5469 65.3471 83.8352 65.5128C84.1269 65.6752 84.349 65.8608 84.5014 66.0696C84.6572 66.2751 84.7782 66.4441 84.8643 66.5767H84.9638V62.8182H86.1371V73H85.0036V71.8267H84.8643C84.7782 71.9659 84.6555 72.1416 84.4964 72.3537C84.3374 72.5625 84.1103 72.7498 83.8153 72.9155C83.5204 73.0779 83.1276 73.1591 82.6371 73.1591ZM82.7962 72.1051C83.2668 72.1051 83.6645 71.9825 83.9893 71.7372C84.3142 71.4886 84.5611 71.1456 84.7301 70.7081C84.8991 70.2673 84.9837 69.7585 84.9837 69.1818C84.9837 68.6117 84.9008 68.1129 84.7351 67.6854C84.5694 67.2545 84.3241 66.9197 83.9993 66.6811C83.6745 66.4392 83.2734 66.3182 82.7962 66.3182C82.299 66.3182 81.8847 66.4458 81.5533 66.701C81.2251 66.9529 80.9782 67.2959 80.8125 67.7301C80.6501 68.161 80.5689 68.6449 80.5689 69.1818C80.5689 69.7254 80.6518 70.2192 80.8175 70.6634C80.9865 71.1042 81.2351 71.4555 81.5632 71.7173C81.8946 71.9759 82.3056 72.1051 82.7962 72.1051ZM91.7699 65.3636V66.358H87.8125V65.3636H91.7699ZM88.9659 63.5341H90.1392V70.8125C90.1392 71.1439 90.1873 71.3925 90.2834 71.5582C90.3828 71.7206 90.5088 71.83 90.6612 71.8864C90.817 71.9394 90.9811 71.9659 91.1534 71.9659C91.2827 71.9659 91.3887 71.9593 91.4716 71.946C91.5545 71.9295 91.6207 71.9162 91.6705 71.9062L91.9091 72.9602C91.8295 72.9901 91.7185 73.0199 91.576 73.0497C91.4335 73.0829 91.2528 73.0994 91.0341 73.0994C90.7027 73.0994 90.3778 73.0282 90.0597 72.8857C89.7448 72.7431 89.483 72.526 89.2741 72.2344C89.0687 71.9427 88.9659 71.5748 88.9659 71.1307V63.5341ZM94.8722 68.4062V73H93.6989V62.8182H94.8722V66.5568H94.9716C95.1506 66.1624 95.419 65.8492 95.777 65.6172C96.1383 65.3819 96.6188 65.2642 97.2188 65.2642C97.7391 65.2642 98.1948 65.3686 98.5859 65.5774C98.977 65.7829 99.2803 66.0994 99.4957 66.527C99.7145 66.9512 99.8239 67.4915 99.8239 68.1477V73H98.6506V68.2273C98.6506 67.6207 98.4931 67.1518 98.1783 66.8203C97.8667 66.4856 97.4342 66.3182 96.8807 66.3182C96.4962 66.3182 96.1515 66.3994 95.8466 66.5618C95.545 66.7242 95.3063 66.9612 95.1307 67.2727C94.9583 67.5843 94.8722 67.9621 94.8722 68.4062Z" fill="#616B7C" />
+    <path d="M631.526 73V62.8182H634.966C635.762 62.8182 636.415 62.9541 636.925 63.2259C637.435 63.4943 637.813 63.8639 638.059 64.3345C638.304 64.8052 638.426 65.3404 638.426 65.9403C638.426 66.5402 638.304 67.0722 638.059 67.5362C637.813 68.0002 637.437 68.3648 636.93 68.63C636.423 68.8918 635.775 69.0227 634.986 69.0227H632.202V67.9091H634.946C635.49 67.9091 635.927 67.8295 636.259 67.6705C636.594 67.5114 636.836 67.286 636.985 66.9943C637.137 66.6993 637.213 66.348 637.213 65.9403C637.213 65.5327 637.137 65.1764 636.985 64.8714C636.832 64.5665 636.589 64.3312 636.254 64.1655C635.919 63.9964 635.477 63.9119 634.926 63.9119H632.759V73H631.526ZM636.319 68.4261L638.824 73H637.392L634.926 68.4261H636.319ZM643.442 73.1591C642.706 73.1591 642.071 72.9967 641.537 72.6719C641.007 72.3438 640.598 71.8864 640.309 71.2997C640.024 70.7098 639.882 70.0237 639.882 69.2415C639.882 68.4593 640.024 67.7699 640.309 67.1733C640.598 66.5734 640.999 66.1061 641.513 65.7713C642.03 65.4332 642.633 65.2642 643.322 65.2642C643.72 65.2642 644.113 65.3305 644.501 65.4631C644.888 65.5956 645.241 65.8111 645.559 66.1094C645.878 66.4044 646.131 66.7955 646.32 67.2827C646.509 67.7699 646.604 68.3698 646.604 69.0824V69.5795H640.717V68.5653H645.41C645.41 68.1345 645.324 67.75 645.152 67.4119C644.983 67.0739 644.741 66.8071 644.426 66.6115C644.114 66.416 643.747 66.3182 643.322 66.3182C642.855 66.3182 642.451 66.4342 642.109 66.6662C641.771 66.8949 641.511 67.1932 641.329 67.5611C641.146 67.929 641.055 68.3234 641.055 68.7443V69.4205C641.055 69.9972 641.155 70.486 641.354 70.8871C641.556 71.2848 641.836 71.5881 642.194 71.7969C642.552 72.0024 642.968 72.1051 643.442 72.1051C643.75 72.1051 644.028 72.062 644.277 71.9759C644.529 71.8864 644.746 71.7538 644.928 71.5781C645.11 71.3991 645.251 71.1771 645.351 70.9119L646.484 71.2301C646.365 71.6146 646.164 71.9527 645.883 72.2443C645.601 72.5327 645.253 72.758 644.839 72.9205C644.424 73.0795 643.959 73.1591 643.442 73.1591ZM653.599 75.8636V71.8267H653.499C653.413 71.9659 653.29 72.1416 653.131 72.3537C652.972 72.5625 652.745 72.7498 652.45 72.9155C652.155 73.0779 651.762 73.1591 651.272 73.1591C650.635 73.1591 650.074 72.9983 649.586 72.6768C649.099 72.352 648.718 71.8946 648.443 71.3047C648.168 70.7114 648.03 70.0104 648.03 69.2017C648.03 68.3996 648.168 67.7036 648.443 67.1136C648.718 66.5237 649.101 66.0679 649.591 65.7464C650.082 65.425 650.649 65.2642 651.292 65.2642C651.789 65.2642 652.182 65.3471 652.47 65.5128C652.762 65.6752 652.984 65.8608 653.136 66.0696C653.292 66.2751 653.413 66.4441 653.499 66.5767H653.638V65.3636H654.772V75.8636H653.599ZM651.431 72.1051C651.902 72.1051 652.299 71.9825 652.624 71.7372C652.949 71.4886 653.196 71.1456 653.365 70.7081C653.534 70.2673 653.618 69.7585 653.618 69.1818C653.618 68.6117 653.536 68.1129 653.37 67.6854C653.204 67.2545 652.959 66.9197 652.634 66.6811C652.309 66.4392 651.908 66.3182 651.431 66.3182C650.934 66.3182 650.519 66.4458 650.188 66.701C649.86 66.9529 649.613 67.2959 649.447 67.7301C649.285 68.161 649.204 68.6449 649.204 69.1818C649.204 69.7254 649.287 70.2192 649.452 70.6634C649.621 71.1042 649.87 71.4555 650.198 71.7173C650.529 71.9759 650.94 72.1051 651.431 72.1051ZM661.732 69.8778V65.3636H662.905V73H661.732V71.7074H661.653C661.474 72.0952 661.195 72.425 660.817 72.6967C660.439 72.9652 659.962 73.0994 659.385 73.0994C658.908 73.0994 658.484 72.995 658.113 72.7862C657.742 72.5741 657.45 72.2559 657.238 71.8317C657.026 71.4041 656.92 70.8655 656.92 70.2159V65.3636H658.093V70.1364C658.093 70.6932 658.249 71.1373 658.56 71.4688C658.875 71.8002 659.276 71.9659 659.763 71.9659C660.055 71.9659 660.352 71.8913 660.653 71.7422C660.958 71.593 661.213 71.3643 661.419 71.0561C661.628 70.7479 661.732 70.3551 661.732 69.8778ZM668.256 73.1591C667.52 73.1591 666.886 72.9967 666.352 72.6719C665.822 72.3438 665.412 71.8864 665.124 71.2997C664.839 70.7098 664.696 70.0237 664.696 69.2415C664.696 68.4593 664.839 67.7699 665.124 67.1733C665.412 66.5734 665.813 66.1061 666.327 65.7713C666.844 65.4332 667.447 65.2642 668.137 65.2642C668.534 65.2642 668.927 65.3305 669.315 65.4631C669.703 65.5956 670.056 65.8111 670.374 66.1094C670.692 66.4044 670.946 66.7955 671.135 67.2827C671.324 67.7699 671.418 68.3698 671.418 69.0824V69.5795H665.532V68.5653H670.225C670.225 68.1345 670.139 67.75 669.966 67.4119C669.797 67.0739 669.555 66.8071 669.24 66.6115C668.929 66.416 668.561 66.3182 668.137 66.3182C667.669 66.3182 667.265 66.4342 666.924 66.6662C666.586 66.8949 666.325 67.1932 666.143 67.5611C665.961 67.929 665.87 68.3234 665.87 68.7443V69.4205C665.87 69.9972 665.969 70.486 666.168 70.8871C666.37 71.2848 666.65 71.5881 667.008 71.7969C667.366 72.0024 667.782 72.1051 668.256 72.1051C668.564 72.1051 668.843 72.062 669.091 71.9759C669.343 71.8864 669.56 71.7538 669.743 71.5781C669.925 71.3991 670.066 71.1771 670.165 70.9119L671.299 71.2301C671.179 71.6146 670.979 71.9527 670.697 72.2443C670.415 72.5327 670.067 72.758 669.653 72.9205C669.239 73.0795 668.773 73.1591 668.256 73.1591ZM678.612 67.0739L677.558 67.3722C677.492 67.1965 677.394 67.0258 677.265 66.8601C677.139 66.6911 676.966 66.5518 676.748 66.4425C676.529 66.3331 676.249 66.2784 675.907 66.2784C675.44 66.2784 675.051 66.3861 674.739 66.6016C674.431 66.8137 674.277 67.0838 674.277 67.4119C674.277 67.7036 674.383 67.9339 674.595 68.103C674.807 68.272 675.138 68.4129 675.589 68.5256L676.723 68.804C677.405 68.9697 677.914 69.2232 678.249 69.5646C678.584 69.9027 678.751 70.3385 678.751 70.8722C678.751 71.3097 678.625 71.7008 678.373 72.0455C678.125 72.3902 677.777 72.6619 677.329 72.8608C676.882 73.0597 676.361 73.1591 675.768 73.1591C674.989 73.1591 674.345 72.9901 673.834 72.652C673.324 72.3139 673.001 71.8201 672.865 71.1705L673.978 70.892C674.084 71.303 674.285 71.6113 674.58 71.8168C674.878 72.0223 675.268 72.125 675.748 72.125C676.295 72.125 676.729 72.009 677.051 71.777C677.376 71.5417 677.538 71.2599 677.538 70.9318C677.538 70.6667 677.445 70.4446 677.26 70.2656C677.074 70.0833 676.789 69.9474 676.404 69.858L675.132 69.5597C674.432 69.3939 673.919 69.1371 673.591 68.7891C673.266 68.4377 673.103 67.9986 673.103 67.4716C673.103 67.0407 673.224 66.6596 673.466 66.3281C673.712 65.9967 674.045 65.7365 674.466 65.5476C674.89 65.3587 675.37 65.2642 675.907 65.2642C676.663 65.2642 677.256 65.4299 677.687 65.7614C678.121 66.0928 678.43 66.5303 678.612 67.0739ZM683.838 65.3636V66.358H679.881V65.3636H683.838ZM681.034 63.5341H682.208V70.8125C682.208 71.1439 682.256 71.3925 682.352 71.5582C682.451 71.7206 682.577 71.83 682.73 71.8864C682.885 71.9394 683.049 71.9659 683.222 71.9659C683.351 71.9659 683.457 71.9593 683.54 71.946C683.623 71.9295 683.689 71.9162 683.739 71.9062L683.977 72.9602C683.898 72.9901 683.787 73.0199 683.644 73.0497C683.502 73.0829 683.321 73.0994 683.102 73.0994C682.771 73.0994 682.446 73.0282 682.128 72.8857C681.813 72.7431 681.551 72.526 681.343 72.2344C681.137 71.9427 681.034 71.5748 681.034 71.1307V63.5341ZM690.876 67.0739L689.822 67.3722C689.755 67.1965 689.657 67.0258 689.528 66.8601C689.402 66.6911 689.23 66.5518 689.011 66.4425C688.792 66.3331 688.512 66.2784 688.171 66.2784C687.704 66.2784 687.314 66.3861 687.003 66.6016C686.694 66.8137 686.54 67.0838 686.54 67.4119C686.54 67.7036 686.646 67.9339 686.858 68.103C687.071 68.272 687.402 68.4129 687.853 68.5256L688.986 68.804C689.669 68.9697 690.178 69.2232 690.513 69.5646C690.847 69.9027 691.015 70.3385 691.015 70.8722C691.015 71.3097 690.889 71.7008 690.637 72.0455C690.388 72.3902 690.04 72.6619 689.593 72.8608C689.145 73.0597 688.625 73.1591 688.032 73.1591C687.253 73.1591 686.608 72.9901 686.098 72.652C685.587 72.3139 685.264 71.8201 685.128 71.1705L686.242 70.892C686.348 71.303 686.549 71.6113 686.844 71.8168C687.142 72.0223 687.531 72.125 688.012 72.125C688.559 72.125 688.993 72.009 689.314 71.777C689.639 71.5417 689.802 71.2599 689.802 70.9318C689.802 70.6667 689.709 70.4446 689.523 70.2656C689.338 70.0833 689.053 69.9474 688.668 69.858L687.395 69.5597C686.696 69.3939 686.182 69.1371 685.854 68.7891C685.529 68.4377 685.367 67.9986 685.367 67.4716C685.367 67.0407 685.488 66.6596 685.73 66.3281C685.975 65.9967 686.308 65.7365 686.729 65.5476C687.153 65.3587 687.634 65.2642 688.171 65.2642C688.927 65.2642 689.52 65.4299 689.951 65.7614C690.385 66.0928 690.693 66.5303 690.876 67.0739Z" fill="#616B7C" />
+    <rect x="30" y="33" width="92" height="12" rx="6" fill="url(#paint2_linear_1297_52064)" />
+    <rect x="512" y="33" width="40" height="12" rx="6" fill="url(#paint3_linear_1297_52064)" />
+    <rect x="0.5" y="0.5" width="1167" height="341" rx="15.5" fill="url(#paint4_radial_1297_52064)" stroke="#282A3B" />
+    <defs>
+        <filter id="filter0_d_1297_52064" x="-32.5" y="-15.5" width="637" height="405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dy="16" />
+            <feGaussianBlur stdDeviation="16" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0.215686 0 0 0 0 0.231373 0 0 0 0 0.301961 0 0 0 0.02 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1297_52064" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1297_52064" result="shape" />
+        </filter>
+        <filter id="filter1_d_1297_52064" x="563.5" y="-15.5" width="637.393" height="405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dy="16" />
+            <feGaussianBlur stdDeviation="16" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0.215686 0 0 0 0 0.231373 0 0 0 0 0.301961 0 0 0 0.02 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1297_52064" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1297_52064" result="shape" />
+        </filter>
+        <filter id="filter2_d_1297_52064" x="636.104" y="103.5" width="538.37" height="221.805" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dy="15" />
+            <feGaussianBlur stdDeviation="19" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0.941176 0 0 0 0 0.180392 0 0 0 0 0.396078 0 0 0 1 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1297_52064" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1297_52064" result="shape" />
+        </filter>
+        <linearGradient id="paint0_linear_1297_52064" x1="628" y1="39" x2="712" y2="39" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#E8E9F0" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint1_linear_1297_52064" x1="1107" y1="40" x2="1150" y2="40.5" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#616B7C" />
+            <stop offset="1" stop-color="#1B1B28" />
+        </linearGradient>
+        <linearGradient id="paint2_linear_1297_52064" x1="30" y1="39" x2="114" y2="39" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#616B7C" />
+            <stop offset="1" stop-color="#373B4D" />
+        </linearGradient>
+        <linearGradient id="paint3_linear_1297_52064" x1="509" y1="40" x2="552" y2="40.5" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#E8E9F0" stop-opacity="0" />
+        </linearGradient>
+        <radialGradient id="paint4_radial_1297_52064" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1138.42 171) rotate(180) scale(1121.88 7550.23)">
+            <stop stop-color="#1B1B28" stop-opacity="0.5" />
+            <stop offset="0.239583" stop-color="#1B1B28" stop-opacity="0.9" />
+            <stop offset="0.505208" stop-color="#1B1B28" />
+            <stop offset="0.756132" stop-color="#1B1B28" stop-opacity="0.9" />
+            <stop offset="1" stop-color="#1B1B28" stop-opacity="0.5" />
+        </radialGradient>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/src/routes/console/project-[project]/overview/onboard-1-light.svg b/src/routes/console/project-[project]/overview/onboard-1-light.svg
new file mode 100644
index 000000000..abc72d703
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/onboard-1-light.svg
@@ -0,0 +1,153 @@
+<svg width="1169" height="340" viewBox="0 0 1169 340" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1289_51614)">
+<rect width="572" height="340" rx="16" fill="white"/>
+<rect width="572" height="340" rx="16" stroke="#F2F2F8"/>
+</g>
+<path opacity="0.5" d="M32.1378 131V130.233L35.0185 127.08C35.3565 126.71 35.6349 126.389 35.8537 126.116C36.0724 125.841 36.2344 125.582 36.3395 125.341C36.4474 125.097 36.5014 124.841 36.5014 124.574C36.5014 124.267 36.4276 124.001 36.2798 123.777C36.1349 123.553 35.9361 123.379 35.6832 123.257C35.4304 123.135 35.1463 123.074 34.831 123.074C34.4957 123.074 34.2031 123.143 33.9531 123.283C33.706 123.419 33.5142 123.611 33.3778 123.858C33.2443 124.105 33.1776 124.395 33.1776 124.727H32.1719C32.1719 124.216 32.2898 123.767 32.5256 123.381C32.7614 122.994 33.0824 122.693 33.4886 122.477C33.8977 122.261 34.3565 122.153 34.8651 122.153C35.3764 122.153 35.8295 122.261 36.2244 122.477C36.6193 122.693 36.929 122.984 37.1534 123.351C37.3778 123.717 37.4901 124.125 37.4901 124.574C37.4901 124.895 37.4318 125.209 37.3153 125.516C37.2017 125.82 37.0028 126.159 36.7188 126.534C36.4375 126.906 36.0469 127.361 35.5469 127.898L33.5866 129.994V130.062H37.6435V131H32.1378ZM42.25 131.119C41.608 131.119 41.0611 130.945 40.6094 130.595C40.1577 130.243 39.8125 129.733 39.5739 129.065C39.3352 128.395 39.2159 127.585 39.2159 126.636C39.2159 125.693 39.3352 124.888 39.5739 124.22C39.8153 123.55 40.1619 123.038 40.6136 122.686C41.0682 122.331 41.6136 122.153 42.25 122.153C42.8864 122.153 43.4304 122.331 43.8821 122.686C44.3366 123.038 44.6832 123.55 44.9219 124.22C45.1634 124.888 45.2841 125.693 45.2841 126.636C45.2841 127.585 45.1648 128.395 44.9261 129.065C44.6875 129.733 44.3423 130.243 43.8906 130.595C43.4389 130.945 42.892 131.119 42.25 131.119ZM42.25 130.182C42.8864 130.182 43.3807 129.875 43.733 129.261C44.0852 128.648 44.2614 127.773 44.2614 126.636C44.2614 125.881 44.1804 125.237 44.0185 124.706C43.8594 124.175 43.6293 123.77 43.3281 123.491C43.0298 123.213 42.6705 123.074 42.25 123.074C41.6193 123.074 41.1264 123.385 40.7713 124.007C40.4162 124.626 40.2386 125.503 40.2386 126.636C40.2386 127.392 40.3182 128.034 40.4773 128.562C40.6364 129.091 40.8651 129.493 41.1634 129.768C41.4645 130.044 41.8267 130.182 42.25 130.182ZM49.75 131.119C49.108 131.119 48.5611 130.945 48.1094 130.595C47.6577 130.243 47.3125 129.733 47.0739 129.065C46.8352 128.395 46.7159 127.585 46.7159 126.636C46.7159 125.693 46.8352 124.888 47.0739 124.22C47.3153 123.55 47.6619 123.038 48.1136 122.686C48.5682 122.331 49.1136 122.153 49.75 122.153C50.3864 122.153 50.9304 122.331 51.3821 122.686C51.8366 123.038 52.1832 123.55 52.4219 124.22C52.6634 124.888 52.7841 125.693 52.7841 126.636C52.7841 127.585 52.6648 128.395 52.4261 129.065C52.1875 129.733 51.8423 130.243 51.3906 130.595C50.9389 130.945 50.392 131.119 49.75 131.119ZM49.75 130.182C50.3864 130.182 50.8807 129.875 51.233 129.261C51.5852 128.648 51.7614 127.773 51.7614 126.636C51.7614 125.881 51.6804 125.237 51.5185 124.706C51.3594 124.175 51.1293 123.77 50.8281 123.491C50.5298 123.213 50.1705 123.074 49.75 123.074C49.1193 123.074 48.6264 123.385 48.2713 124.007C47.9162 124.626 47.7386 125.503 47.7386 126.636C47.7386 127.392 47.8182 128.034 47.9773 128.562C48.1364 129.091 48.3651 129.493 48.6634 129.768C48.9645 130.044 49.3267 130.182 49.75 130.182ZM57.25 131.119C56.608 131.119 56.0611 130.945 55.6094 130.595C55.1577 130.243 54.8125 129.733 54.5739 129.065C54.3352 128.395 54.2159 127.585 54.2159 126.636C54.2159 125.693 54.3352 124.888 54.5739 124.22C54.8153 123.55 55.1619 123.038 55.6136 122.686C56.0682 122.331 56.6136 122.153 57.25 122.153C57.8864 122.153 58.4304 122.331 58.8821 122.686C59.3366 123.038 59.6832 123.55 59.9219 124.22C60.1634 124.888 60.2841 125.693 60.2841 126.636C60.2841 127.585 60.1648 128.395 59.9261 129.065C59.6875 129.733 59.3423 130.243 58.8906 130.595C58.4389 130.945 57.892 131.119 57.25 131.119ZM57.25 130.182C57.8864 130.182 58.3807 129.875 58.733 129.261C59.0852 128.648 59.2614 127.773 59.2614 126.636C59.2614 125.881 59.1804 125.237 59.0185 124.706C58.8594 124.175 58.6293 123.77 58.3281 123.491C58.0298 123.213 57.6705 123.074 57.25 123.074C56.6193 123.074 56.1264 123.385 55.7713 124.007C55.4162 124.626 55.2386 125.503 55.2386 126.636C55.2386 127.392 55.3182 128.034 55.4773 128.562C55.6364 129.091 55.8651 129.493 56.1634 129.768C56.4645 130.044 56.8267 130.182 57.25 130.182Z" fill="#868EA3"/>
+<line x1="77" y1="126.75" x2="540" y2="126.75" stroke="#E8E9F0" stroke-width="0.5"/>
+<path opacity="0.5" d="M37.0927 159.273V168H36.0359V160.381H35.9847L33.854 161.795V160.722L36.0359 159.273H37.0927ZM42.3299 168.119C41.8299 168.119 41.3796 168.02 40.979 167.821C40.5785 167.622 40.2575 167.349 40.016 167.003C39.7745 166.656 39.6424 166.261 39.6197 165.818H40.6424C40.6822 166.213 40.8612 166.54 41.1793 166.798C41.5004 167.054 41.8839 167.182 42.3299 167.182C42.6879 167.182 43.006 167.098 43.2844 166.93C43.5657 166.763 43.7859 166.533 43.945 166.24C44.1069 165.945 44.1879 165.611 44.1879 165.239C44.1879 164.858 44.104 164.518 43.9364 164.22C43.7717 163.919 43.5444 163.682 43.2546 163.509C42.9648 163.335 42.6339 163.247 42.2617 163.244C41.9947 163.241 41.7205 163.283 41.4393 163.368C41.158 163.45 40.9265 163.557 40.7447 163.688L39.756 163.568L40.2844 159.273H44.8185V160.21H41.1708L40.864 162.784H40.9151C41.0941 162.642 41.3185 162.524 41.5884 162.43C41.8583 162.337 42.1396 162.29 42.4322 162.29C42.9663 162.29 43.4421 162.418 43.8597 162.673C44.2802 162.926 44.6097 163.273 44.8484 163.713C45.0898 164.153 45.2106 164.656 45.2106 165.222C45.2106 165.778 45.0856 166.276 44.8356 166.713C44.5884 167.148 44.2475 167.491 43.8129 167.744C43.3782 167.994 42.8839 168.119 42.3299 168.119ZM49.75 168.119C49.108 168.119 48.5611 167.945 48.1094 167.595C47.6577 167.243 47.3125 166.733 47.0739 166.065C46.8352 165.395 46.7159 164.585 46.7159 163.636C46.7159 162.693 46.8352 161.888 47.0739 161.22C47.3153 160.55 47.6619 160.038 48.1136 159.686C48.5682 159.331 49.1136 159.153 49.75 159.153C50.3864 159.153 50.9304 159.331 51.3821 159.686C51.8366 160.038 52.1832 160.55 52.4219 161.22C52.6634 161.888 52.7841 162.693 52.7841 163.636C52.7841 164.585 52.6648 165.395 52.4261 166.065C52.1875 166.733 51.8423 167.243 51.3906 167.595C50.9389 167.945 50.392 168.119 49.75 168.119ZM49.75 167.182C50.3864 167.182 50.8807 166.875 51.233 166.261C51.5852 165.648 51.7614 164.773 51.7614 163.636C51.7614 162.881 51.6804 162.237 51.5185 161.706C51.3594 161.175 51.1293 160.77 50.8281 160.491C50.5298 160.213 50.1705 160.074 49.75 160.074C49.1193 160.074 48.6264 160.385 48.2713 161.007C47.9162 161.626 47.7386 162.503 47.7386 163.636C47.7386 164.392 47.8182 165.034 47.9773 165.562C48.1364 166.091 48.3651 166.493 48.6634 166.768C48.9645 167.044 49.3267 167.182 49.75 167.182ZM57.25 168.119C56.608 168.119 56.0611 167.945 55.6094 167.595C55.1577 167.243 54.8125 166.733 54.5739 166.065C54.3352 165.395 54.2159 164.585 54.2159 163.636C54.2159 162.693 54.3352 161.888 54.5739 161.22C54.8153 160.55 55.1619 160.038 55.6136 159.686C56.0682 159.331 56.6136 159.153 57.25 159.153C57.8864 159.153 58.4304 159.331 58.8821 159.686C59.3366 160.038 59.6832 160.55 59.9219 161.22C60.1634 161.888 60.2841 162.693 60.2841 163.636C60.2841 164.585 60.1648 165.395 59.9261 166.065C59.6875 166.733 59.3423 167.243 58.8906 167.595C58.4389 167.945 57.892 168.119 57.25 168.119ZM57.25 167.182C57.8864 167.182 58.3807 166.875 58.733 166.261C59.0852 165.648 59.2614 164.773 59.2614 163.636C59.2614 162.881 59.1804 162.237 59.0185 161.706C58.8594 161.175 58.6293 160.77 58.3281 160.491C58.0298 160.213 57.6705 160.074 57.25 160.074C56.6193 160.074 56.1264 160.385 55.7713 161.007C55.4162 161.626 55.2386 162.503 55.2386 163.636C55.2386 164.392 55.3182 165.034 55.4773 165.562C55.6364 166.091 55.8651 166.493 56.1634 166.768C56.4645 167.044 56.8267 167.182 57.25 167.182Z" fill="#868EA3"/>
+<line x1="77" y1="163.75" x2="540" y2="163.75" stroke="#E8E9F0" stroke-width="0.5"/>
+<path opacity="0.5" d="M36.8935 197.773V206.5H35.8366V198.881H35.7855L33.6548 200.295V199.222L35.8366 197.773H36.8935ZM42.25 206.619C41.608 206.619 41.0611 206.445 40.6094 206.095C40.1577 205.743 39.8125 205.233 39.5739 204.565C39.3352 203.895 39.2159 203.085 39.2159 202.136C39.2159 201.193 39.3352 200.388 39.5739 199.72C39.8153 199.05 40.1619 198.538 40.6136 198.186C41.0682 197.831 41.6136 197.653 42.25 197.653C42.8864 197.653 43.4304 197.831 43.8821 198.186C44.3366 198.538 44.6832 199.05 44.9219 199.72C45.1634 200.388 45.2841 201.193 45.2841 202.136C45.2841 203.085 45.1648 203.895 44.9261 204.565C44.6875 205.233 44.3423 205.743 43.8906 206.095C43.4389 206.445 42.892 206.619 42.25 206.619ZM42.25 205.682C42.8864 205.682 43.3807 205.375 43.733 204.761C44.0852 204.148 44.2614 203.273 44.2614 202.136C44.2614 201.381 44.1804 200.737 44.0185 200.206C43.8594 199.675 43.6293 199.27 43.3281 198.991C43.0298 198.713 42.6705 198.574 42.25 198.574C41.6193 198.574 41.1264 198.885 40.7713 199.507C40.4162 200.126 40.2386 201.003 40.2386 202.136C40.2386 202.892 40.3182 203.534 40.4773 204.062C40.6364 204.591 40.8651 204.993 41.1634 205.268C41.4645 205.544 41.8267 205.682 42.25 205.682ZM49.75 206.619C49.108 206.619 48.5611 206.445 48.1094 206.095C47.6577 205.743 47.3125 205.233 47.0739 204.565C46.8352 203.895 46.7159 203.085 46.7159 202.136C46.7159 201.193 46.8352 200.388 47.0739 199.72C47.3153 199.05 47.6619 198.538 48.1136 198.186C48.5682 197.831 49.1136 197.653 49.75 197.653C50.3864 197.653 50.9304 197.831 51.3821 198.186C51.8366 198.538 52.1832 199.05 52.4219 199.72C52.6634 200.388 52.7841 201.193 52.7841 202.136C52.7841 203.085 52.6648 203.895 52.4261 204.565C52.1875 205.233 51.8423 205.743 51.3906 206.095C50.9389 206.445 50.392 206.619 49.75 206.619ZM49.75 205.682C50.3864 205.682 50.8807 205.375 51.233 204.761C51.5852 204.148 51.7614 203.273 51.7614 202.136C51.7614 201.381 51.6804 200.737 51.5185 200.206C51.3594 199.675 51.1293 199.27 50.8281 198.991C50.5298 198.713 50.1705 198.574 49.75 198.574C49.1193 198.574 48.6264 198.885 48.2713 199.507C47.9162 200.126 47.7386 201.003 47.7386 202.136C47.7386 202.892 47.8182 203.534 47.9773 204.062C48.1364 204.591 48.3651 204.993 48.6634 205.268C48.9645 205.544 49.3267 205.682 49.75 205.682ZM57.25 206.619C56.608 206.619 56.0611 206.445 55.6094 206.095C55.1577 205.743 54.8125 205.233 54.5739 204.565C54.3352 203.895 54.2159 203.085 54.2159 202.136C54.2159 201.193 54.3352 200.388 54.5739 199.72C54.8153 199.05 55.1619 198.538 55.6136 198.186C56.0682 197.831 56.6136 197.653 57.25 197.653C57.8864 197.653 58.4304 197.831 58.8821 198.186C59.3366 198.538 59.6832 199.05 59.9219 199.72C60.1634 200.388 60.2841 201.193 60.2841 202.136C60.2841 203.085 60.1648 203.895 59.9261 204.565C59.6875 205.233 59.3423 205.743 58.8906 206.095C58.4389 206.445 57.892 206.619 57.25 206.619ZM57.25 205.682C57.8864 205.682 58.3807 205.375 58.733 204.761C59.0852 204.148 59.2614 203.273 59.2614 202.136C59.2614 201.381 59.1804 200.737 59.0185 200.206C58.8594 199.675 58.6293 199.27 58.3281 198.991C58.0298 198.713 57.6705 198.574 57.25 198.574C56.6193 198.574 56.1264 198.885 55.7713 199.507C55.4162 200.126 55.2386 201.003 55.2386 202.136C55.2386 202.892 55.3182 203.534 55.4773 204.062C55.6364 204.591 55.8651 204.993 56.1634 205.268C56.4645 205.544 56.8267 205.682 57.25 205.682Z" fill="#868EA3"/>
+<line x1="77" y1="202.25" x2="540" y2="202.25" stroke="#E8E9F0" stroke-width="0.5"/>
+<path opacity="0.5" d="M42.3299 244.119C41.8299 244.119 41.3796 244.02 40.979 243.821C40.5785 243.622 40.2575 243.349 40.016 243.003C39.7745 242.656 39.6424 242.261 39.6197 241.818H40.6424C40.6822 242.213 40.8612 242.54 41.1793 242.798C41.5004 243.054 41.8839 243.182 42.3299 243.182C42.6879 243.182 43.006 243.098 43.2844 242.93C43.5657 242.763 43.7859 242.533 43.945 242.24C44.1069 241.945 44.1879 241.611 44.1879 241.239C44.1879 240.858 44.104 240.518 43.9364 240.22C43.7717 239.919 43.5444 239.682 43.2546 239.509C42.9648 239.335 42.6339 239.247 42.2617 239.244C41.9947 239.241 41.7205 239.283 41.4393 239.368C41.158 239.45 40.9265 239.557 40.7447 239.688L39.756 239.568L40.2844 235.273H44.8185V236.21H41.1708L40.864 238.784H40.9151C41.0941 238.642 41.3185 238.524 41.5884 238.43C41.8583 238.337 42.1396 238.29 42.4322 238.29C42.9663 238.29 43.4421 238.418 43.8597 238.673C44.2802 238.926 44.6097 239.273 44.8484 239.713C45.0898 240.153 45.2106 240.656 45.2106 241.222C45.2106 241.778 45.0856 242.276 44.8356 242.713C44.5884 243.148 44.2475 243.491 43.8129 243.744C43.3782 243.994 42.8839 244.119 42.3299 244.119ZM49.75 244.119C49.108 244.119 48.5611 243.945 48.1094 243.595C47.6577 243.243 47.3125 242.733 47.0739 242.065C46.8352 241.395 46.7159 240.585 46.7159 239.636C46.7159 238.693 46.8352 237.888 47.0739 237.22C47.3153 236.55 47.6619 236.038 48.1136 235.686C48.5682 235.331 49.1136 235.153 49.75 235.153C50.3864 235.153 50.9304 235.331 51.3821 235.686C51.8366 236.038 52.1832 236.55 52.4219 237.22C52.6634 237.888 52.7841 238.693 52.7841 239.636C52.7841 240.585 52.6648 241.395 52.4261 242.065C52.1875 242.733 51.8423 243.243 51.3906 243.595C50.9389 243.945 50.392 244.119 49.75 244.119ZM49.75 243.182C50.3864 243.182 50.8807 242.875 51.233 242.261C51.5852 241.648 51.7614 240.773 51.7614 239.636C51.7614 238.881 51.6804 238.237 51.5185 237.706C51.3594 237.175 51.1293 236.77 50.8281 236.491C50.5298 236.213 50.1705 236.074 49.75 236.074C49.1193 236.074 48.6264 236.385 48.2713 237.007C47.9162 237.626 47.7386 238.503 47.7386 239.636C47.7386 240.392 47.8182 241.034 47.9773 241.562C48.1364 242.091 48.3651 242.493 48.6634 242.768C48.9645 243.044 49.3267 243.182 49.75 243.182ZM57.25 244.119C56.608 244.119 56.0611 243.945 55.6094 243.595C55.1577 243.243 54.8125 242.733 54.5739 242.065C54.3352 241.395 54.2159 240.585 54.2159 239.636C54.2159 238.693 54.3352 237.888 54.5739 237.22C54.8153 236.55 55.1619 236.038 55.6136 235.686C56.0682 235.331 56.6136 235.153 57.25 235.153C57.8864 235.153 58.4304 235.331 58.8821 235.686C59.3366 236.038 59.6832 236.55 59.9219 237.22C60.1634 237.888 60.2841 238.693 60.2841 239.636C60.2841 240.585 60.1648 241.395 59.9261 242.065C59.6875 242.733 59.3423 243.243 58.8906 243.595C58.4389 243.945 57.892 244.119 57.25 244.119ZM57.25 243.182C57.8864 243.182 58.3807 242.875 58.733 242.261C59.0852 241.648 59.2614 240.773 59.2614 239.636C59.2614 238.881 59.1804 238.237 59.0185 237.706C58.8594 237.175 58.6293 236.77 58.3281 236.491C58.0298 236.213 57.6705 236.074 57.25 236.074C56.6193 236.074 56.1264 236.385 55.7713 237.007C55.4162 237.626 55.2386 238.503 55.2386 239.636C55.2386 240.392 55.3182 241.034 55.4773 241.562C55.6364 242.091 55.8651 242.493 56.1634 242.768C56.4645 243.044 56.8267 243.182 57.25 243.182Z" fill="#868EA3"/>
+<line x1="77" y1="239.75" x2="540" y2="239.75" stroke="#E8E9F0" stroke-width="0.5"/>
+<path opacity="0.5" d="M57.25 281.119C56.608 281.119 56.0611 280.945 55.6094 280.595C55.1577 280.243 54.8125 279.733 54.5739 279.065C54.3352 278.395 54.2159 277.585 54.2159 276.636C54.2159 275.693 54.3352 274.888 54.5739 274.22C54.8153 273.55 55.1619 273.038 55.6136 272.686C56.0682 272.331 56.6136 272.153 57.25 272.153C57.8864 272.153 58.4304 272.331 58.8821 272.686C59.3366 273.038 59.6832 273.55 59.9219 274.22C60.1634 274.888 60.2841 275.693 60.2841 276.636C60.2841 277.585 60.1648 278.395 59.9261 279.065C59.6875 279.733 59.3423 280.243 58.8906 280.595C58.4389 280.945 57.892 281.119 57.25 281.119ZM57.25 280.182C57.8864 280.182 58.3807 279.875 58.733 279.261C59.0852 278.648 59.2614 277.773 59.2614 276.636C59.2614 275.881 59.1804 275.237 59.0185 274.706C58.8594 274.175 58.6293 273.77 58.3281 273.491C58.0298 273.213 57.6705 273.074 57.25 273.074C56.6193 273.074 56.1264 273.385 55.7713 274.007C55.4162 274.626 55.2386 275.503 55.2386 276.636C55.2386 277.392 55.3182 278.034 55.4773 278.562C55.6364 279.091 55.8651 279.493 56.1634 279.768C56.4645 280.044 56.8267 280.182 57.25 280.182Z" fill="#868EA3"/>
+<line x1="77" y1="276.75" x2="540" y2="276.75" stroke="#E8E9F0" stroke-width="0.5"/>
+<path d="M77 163.761C77 162.236 78.2363 161 79.7614 161C81.2865 161 82.5229 162.236 82.5229 163.761V277.369H77V163.761Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M77 219.416C77 217.891 78.2363 216.655 79.7614 216.655C81.2865 216.655 82.5229 217.891 82.5229 219.416V277.369H77V219.416Z" fill="#F02E65"/>
+<path d="M92.6484 202.214C92.6484 200.688 93.8848 199.452 95.4099 199.452C96.935 199.452 98.1713 200.688 98.1713 202.214V277.369H92.6484V202.214Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M92.6484 232.571C92.6484 231.046 93.8848 229.809 95.4099 229.809C96.935 229.809 98.1713 231.046 98.1713 232.571V277.369H92.6484V232.571Z" fill="#F02E65"/>
+<path d="M108.296 232.571C108.296 231.046 109.532 229.809 111.057 229.809C112.582 229.809 113.819 231.046 113.819 232.571V277.369H108.296V232.571Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M108.296 255.845C108.296 254.32 109.532 253.083 111.057 253.083C112.582 253.083 113.819 254.32 113.819 255.845V277.369H108.296V255.845Z" fill="#F02E65"/>
+<path d="M123.944 213.345C123.944 211.82 125.181 210.584 126.706 210.584C128.231 210.584 129.467 211.82 129.467 213.345V277.369H123.944V213.345Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M123.944 237.631C123.944 236.106 125.181 234.869 126.706 234.869C128.231 234.869 129.467 236.106 129.467 237.631V277.369H123.944V237.631Z" fill="#F02E65"/>
+<path d="M139.593 182.988C139.593 181.463 140.829 180.227 142.354 180.227C143.879 180.227 145.116 181.463 145.116 182.988V277.37H139.593V182.988Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M139.593 210.309C139.593 208.784 140.829 207.548 142.354 207.548C143.879 207.548 145.116 208.784 145.116 210.309V277.37H139.593V210.309Z" fill="#F02E65"/>
+<path d="M155.24 163.761C155.24 162.236 156.477 161 158.002 161C159.527 161 160.763 162.236 160.763 163.761V277.369H155.24V163.761Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M155.24 193.107C155.24 191.582 156.477 190.345 158.002 190.345C159.527 190.345 160.763 191.582 160.763 193.107V277.369H155.24V193.107Z" fill="#F02E65"/>
+<path d="M170.889 202.214C170.889 200.688 172.125 199.452 173.65 199.452C175.175 199.452 176.412 200.688 176.412 202.214V277.369H170.889V202.214Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M170.889 227.511C170.889 225.986 172.125 224.75 173.65 224.75C175.175 224.75 176.412 225.986 176.412 227.511V277.369H170.889V227.511Z" fill="#F02E65"/>
+<path d="M186.537 232.571C186.537 231.046 187.773 229.809 189.299 229.809C190.824 229.809 192.06 231.046 192.06 232.571V277.369H186.537V232.571Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M186.537 251.797C186.537 250.272 187.773 249.036 189.299 249.036C190.824 249.036 192.06 250.272 192.06 251.797V277.369H186.537V251.797Z" fill="#F02E65"/>
+<path d="M202.185 213.345C202.185 211.82 203.421 210.584 204.946 210.584C206.471 210.584 207.707 211.82 207.707 213.345V277.37H202.185V213.345Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M202.185 227.511C202.185 225.986 203.421 224.75 204.946 224.75C206.471 224.75 207.707 225.986 207.707 227.511V277.369H202.185V227.511Z" fill="#F02E65"/>
+<path d="M217.833 182.988C217.833 181.463 219.069 180.226 220.594 180.226C222.12 180.226 223.356 181.463 223.356 182.988V277.369H217.833V182.988Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M217.833 210.309C217.833 208.784 219.069 207.548 220.594 207.548C222.12 207.548 223.356 208.784 223.356 210.309V277.369H217.833V210.309Z" fill="#F02E65"/>
+<path d="M233.481 202.214C233.481 200.688 234.718 199.452 236.243 199.452C237.768 199.452 239.004 200.688 239.004 202.214V277.369H233.481V202.214Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M233.481 227.511C233.481 225.986 234.718 224.75 236.243 224.75C237.768 224.75 239.004 225.986 239.004 227.511V277.369H233.481V227.511Z" fill="#F02E65"/>
+<path d="M249.129 232.571C249.129 231.046 250.365 229.809 251.89 229.809C253.415 229.809 254.652 231.046 254.652 232.571V277.369H249.129V232.571Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M249.129 251.797C249.129 250.272 250.365 249.036 251.89 249.036C253.415 249.036 254.652 250.272 254.652 251.797V277.369H249.129V251.797Z" fill="#F02E65"/>
+<path d="M264.777 213.345C264.777 211.82 266.014 210.584 267.539 210.584C269.064 210.584 270.3 211.82 270.3 213.345V277.369H264.777V213.345Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M264.777 232.571C264.777 231.046 266.014 229.809 267.539 229.809C269.064 229.809 270.3 231.046 270.3 232.571V277.369H264.777V232.571Z" fill="#F02E65"/>
+<path d="M280.426 182.988C280.426 181.463 281.662 180.227 283.187 180.227C284.712 180.227 285.949 181.463 285.949 182.988V277.37H280.426V182.988Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M280.426 210.309C280.426 208.784 281.662 207.548 283.187 207.548C284.712 207.548 285.949 208.784 285.949 210.309V277.37H280.426V210.309Z" fill="#F02E65"/>
+<path d="M296.073 213.345C296.073 211.82 297.31 210.584 298.835 210.584C300.36 210.584 301.596 211.82 301.596 213.345V277.37H296.073V213.345Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M296.073 237.631C296.073 236.106 297.31 234.87 298.835 234.87C300.36 234.87 301.596 236.106 301.596 237.631V277.37H296.073V237.631Z" fill="#F02E65"/>
+<path d="M311.722 182.988C311.722 181.463 312.958 180.226 314.483 180.226C316.008 180.226 317.245 181.463 317.245 182.988V277.369H311.722V182.988Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M311.722 210.309C311.722 208.784 312.958 207.548 314.483 207.548C316.008 207.548 317.245 208.784 317.245 210.309V277.369H311.722V210.309Z" fill="#F02E65"/>
+<path d="M327.37 213.345C327.37 211.82 328.606 210.584 330.132 210.584C331.657 210.584 332.893 211.82 332.893 213.345V277.37H327.37V213.345Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M327.37 237.631C327.37 236.106 328.606 234.87 330.132 234.87C331.657 234.87 332.893 236.106 332.893 237.631V277.37H327.37V237.631Z" fill="#F02E65"/>
+<path d="M343.018 182.988C343.018 181.463 344.254 180.227 345.779 180.227C347.304 180.227 348.54 181.463 348.54 182.988V277.37H343.018V182.988Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M343.018 214.357C343.018 212.832 344.254 211.596 345.779 211.596C347.304 211.596 348.54 212.832 348.54 214.357V277.37H343.018V214.357Z" fill="#F02E65"/>
+<path d="M359 176.253C359 174.872 360.119 173.753 361.5 173.753C362.881 173.753 364 174.872 364 176.253V277.369H359V176.253Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M359 210.526C359 209.145 360.119 208.026 361.5 208.026C362.881 208.026 364 209.145 364 210.526V277.369H359V210.526Z" fill="#F02E65"/>
+<path d="M374.314 182.988C374.314 181.463 375.551 180.227 377.076 180.227C378.601 180.227 379.837 181.463 379.837 182.988V277.37H374.314V182.988Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M374.314 213.345C374.314 211.82 375.551 210.584 377.076 210.584C378.601 210.584 379.837 211.82 379.837 213.345V277.369H374.314V213.345Z" fill="#F02E65"/>
+<path d="M389.962 213.345C389.962 211.82 391.198 210.584 392.723 210.584C394.248 210.584 395.485 211.82 395.485 213.345V277.37H389.962V213.345Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M389.962 237.631C389.962 236.106 391.198 234.87 392.723 234.87C394.248 234.87 395.485 236.106 395.485 237.631V277.37H389.962V237.631Z" fill="#F02E65"/>
+<path d="M405.61 182.988C405.61 181.463 406.847 180.226 408.372 180.226C409.897 180.226 411.133 181.463 411.133 182.988V277.369H405.61V182.988Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M405.61 191.083C405.61 189.558 406.847 188.321 408.372 188.321C409.897 188.321 411.133 189.558 411.133 191.083V277.369H405.61V191.083Z" fill="#F02E65"/>
+<path d="M421.259 213.345C421.259 211.82 422.495 210.584 424.02 210.584C425.545 210.584 426.782 211.82 426.782 213.345V277.37H421.259V213.345Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M421.259 235.606C421.259 234.081 422.495 232.845 424.02 232.845C425.545 232.845 426.782 234.081 426.782 235.606V277.369H421.259V235.606Z" fill="#F02E65"/>
+<path d="M436.906 235.496C436.906 233.971 438.143 232.734 439.668 232.734C441.193 232.734 442.429 233.971 442.429 235.496V277.369H436.906V235.496Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M436.906 244.287C436.906 242.762 438.143 241.526 439.668 241.526C441.193 241.526 442.429 242.762 442.429 244.287V277.369H436.906V244.287Z" fill="#F02E65"/>
+<path d="M452.555 213.345C452.555 211.82 453.791 210.583 455.316 210.583C456.841 210.583 458.078 211.82 458.078 213.345V277.369H452.555V213.345Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M452.555 226.499C452.555 224.974 453.791 223.738 455.316 223.738C456.841 223.738 458.078 224.974 458.078 226.499V277.369H452.555V226.499Z" fill="#F02E65"/>
+<path d="M469.123 205.208C469.123 203.683 470.36 202.447 471.885 202.447C473.41 202.447 474.646 203.683 474.646 205.208V277.203H469.123V205.208Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M469.123 219.932C469.123 218.407 470.36 217.171 471.885 217.171C473.41 217.171 474.646 218.407 474.646 219.932V277.203H469.123V219.932Z" fill="#F02E65"/>
+<path d="M485.691 213.178C485.691 211.653 486.928 210.417 488.453 210.417C489.978 210.417 491.214 211.653 491.214 213.178V277.203H485.691V213.178Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M485.691 226.333C485.691 224.808 486.928 223.571 488.453 223.571C489.978 223.571 491.214 224.808 491.214 226.333V277.202H485.691V226.333Z" fill="#F02E65"/>
+<path d="M502.261 221.149C502.261 219.624 503.497 218.388 505.022 218.388C506.547 218.388 507.784 219.624 507.784 221.149V277.203H502.261V221.149Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M502.261 232.733C502.261 231.208 503.497 229.972 505.022 229.972C506.547 229.972 507.784 231.208 507.784 232.733V277.202H502.261V232.733Z" fill="#F02E65"/>
+<path d="M518.829 198.832C518.829 197.307 520.065 196.07 521.591 196.07C523.116 196.07 524.352 197.307 524.352 198.832V278H518.829V198.832Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M518.829 214.969C518.829 213.444 520.065 212.207 521.591 212.207C523.116 212.207 524.352 213.444 524.352 214.969V278H518.829V214.969Z" fill="#F02E65"/>
+<path d="M534.478 213.345C534.478 211.82 535.714 210.584 537.239 210.584C538.764 210.584 540 211.82 540 213.345V277.37H534.478V213.345Z" fill="#F02E65" fill-opacity="0.4"/>
+<path d="M534.478 226.5C534.478 224.974 535.714 223.738 537.239 223.738C538.764 223.738 540 224.974 540 226.5V277.369H534.478V226.5Z" fill="#F02E65"/>
+<g filter="url(#filter1_d_1289_51614)">
+<rect x="596" width="572" height="340" rx="16" fill="white" stroke="#F2F2F8"/>
+<path opacity="0.5" d="M628.5 130.707V129.838L632.335 123.77H632.966V125.116H632.539L629.642 129.701V129.77H634.806V130.707H628.5ZM632.608 132.497V130.443V130.038V123.77H633.613V132.497H632.608ZM639.25 132.616C638.608 132.616 638.061 132.442 637.609 132.092C637.158 131.74 636.813 131.23 636.574 130.562C636.335 129.892 636.216 129.082 636.216 128.133C636.216 127.19 636.335 126.385 636.574 125.717C636.815 125.047 637.162 124.535 637.614 124.183C638.068 123.828 638.614 123.65 639.25 123.65C639.886 123.65 640.43 123.828 640.882 124.183C641.337 124.535 641.683 125.047 641.922 125.717C642.163 126.385 642.284 127.19 642.284 128.133C642.284 129.082 642.165 129.892 641.926 130.562C641.688 131.23 641.342 131.74 640.891 132.092C640.439 132.442 639.892 132.616 639.25 132.616ZM639.25 131.679C639.886 131.679 640.381 131.372 640.733 130.758C641.085 130.145 641.261 129.27 641.261 128.133C641.261 127.378 641.18 126.734 641.018 126.203C640.859 125.672 640.629 125.267 640.328 124.988C640.03 124.71 639.67 124.571 639.25 124.571C638.619 124.571 638.126 124.882 637.771 125.504C637.416 126.123 637.239 127 637.239 128.133C637.239 128.889 637.318 129.531 637.477 130.059C637.636 130.588 637.865 130.99 638.163 131.265C638.464 131.541 638.827 131.679 639.25 131.679ZM646.75 132.616C646.108 132.616 645.561 132.442 645.109 132.092C644.658 131.74 644.313 131.23 644.074 130.562C643.835 129.892 643.716 129.082 643.716 128.133C643.716 127.19 643.835 126.385 644.074 125.717C644.315 125.047 644.662 124.535 645.114 124.183C645.568 123.828 646.114 123.65 646.75 123.65C647.386 123.65 647.93 123.828 648.382 124.183C648.837 124.535 649.183 125.047 649.422 125.717C649.663 126.385 649.784 127.19 649.784 128.133C649.784 129.082 649.665 129.892 649.426 130.562C649.188 131.23 648.842 131.74 648.391 132.092C647.939 132.442 647.392 132.616 646.75 132.616ZM646.75 131.679C647.386 131.679 647.881 131.372 648.233 130.758C648.585 130.145 648.761 129.27 648.761 128.133C648.761 127.378 648.68 126.734 648.518 126.203C648.359 125.672 648.129 125.267 647.828 124.988C647.53 124.71 647.17 124.571 646.75 124.571C646.119 124.571 645.626 124.882 645.271 125.504C644.916 126.123 644.739 127 644.739 128.133C644.739 128.889 644.818 129.531 644.977 130.059C645.136 130.588 645.365 130.99 645.663 131.265C645.964 131.541 646.327 131.679 646.75 131.679ZM654.25 132.616C653.608 132.616 653.061 132.442 652.609 132.092C652.158 131.74 651.813 131.23 651.574 130.562C651.335 129.892 651.216 129.082 651.216 128.133C651.216 127.19 651.335 126.385 651.574 125.717C651.815 125.047 652.162 124.535 652.614 124.183C653.068 123.828 653.614 123.65 654.25 123.65C654.886 123.65 655.43 123.828 655.882 124.183C656.337 124.535 656.683 125.047 656.922 125.717C657.163 126.385 657.284 127.19 657.284 128.133C657.284 129.082 657.165 129.892 656.926 130.562C656.688 131.23 656.342 131.74 655.891 132.092C655.439 132.442 654.892 132.616 654.25 132.616ZM654.25 131.679C654.886 131.679 655.381 131.372 655.733 130.758C656.085 130.145 656.261 129.27 656.261 128.133C656.261 127.378 656.18 126.734 656.018 126.203C655.859 125.672 655.629 125.267 655.328 124.988C655.03 124.71 654.67 124.571 654.25 124.571C653.619 124.571 653.126 124.882 652.771 125.504C652.416 126.123 652.239 127 652.239 128.133C652.239 128.889 652.318 129.531 652.477 130.059C652.636 130.588 652.865 130.99 653.163 131.265C653.464 131.541 653.827 131.679 654.25 131.679Z" fill="#868EA3"/>
+<line x1="674" y1="128.247" x2="1137" y2="128.247" stroke="#E8E9F0" stroke-width="0.5"/>
+<path opacity="0.5" d="M631.712 167.886C631.149 167.886 630.648 167.789 630.207 167.596C629.77 167.403 629.422 167.134 629.163 166.791C628.908 166.444 628.768 166.042 628.746 165.585H629.82C629.842 165.866 629.939 166.109 630.109 166.313C630.28 166.515 630.503 166.671 630.778 166.782C631.054 166.893 631.359 166.948 631.695 166.948C632.07 166.948 632.402 166.883 632.692 166.752C632.982 166.622 633.209 166.44 633.374 166.207C633.538 165.974 633.621 165.704 633.621 165.397C633.621 165.076 633.541 164.793 633.382 164.549C633.223 164.302 632.99 164.109 632.683 163.97C632.376 163.83 632.001 163.761 631.558 163.761H630.859V162.823H631.558C631.905 162.823 632.209 162.761 632.47 162.636C632.734 162.511 632.94 162.335 633.088 162.107C633.239 161.88 633.314 161.613 633.314 161.306C633.314 161.011 633.249 160.754 633.118 160.535C632.987 160.316 632.803 160.146 632.564 160.024C632.328 159.901 632.05 159.84 631.729 159.84C631.428 159.84 631.143 159.896 630.876 160.007C630.612 160.114 630.396 160.272 630.229 160.48C630.061 160.684 629.97 160.931 629.956 161.221H628.933C628.95 160.764 629.088 160.363 629.347 160.019C629.605 159.673 629.943 159.403 630.361 159.21C630.781 159.016 631.243 158.92 631.746 158.92C632.286 158.92 632.749 159.029 633.135 159.248C633.521 159.464 633.818 159.749 634.026 160.105C634.233 160.46 634.337 160.843 634.337 161.255C634.337 161.747 634.207 162.166 633.949 162.512C633.693 162.859 633.345 163.099 632.905 163.232V163.301C633.456 163.391 633.886 163.626 634.196 164.004C634.506 164.379 634.661 164.843 634.661 165.397C634.661 165.872 634.531 166.298 634.273 166.676C634.017 167.051 633.668 167.346 633.224 167.562C632.781 167.778 632.277 167.886 631.712 167.886ZM639.25 167.886C638.608 167.886 638.061 167.711 637.609 167.362C637.158 167.009 636.813 166.499 636.574 165.832C636.335 165.161 636.216 164.352 636.216 163.403C636.216 162.46 636.335 161.654 636.574 160.987C636.815 160.316 637.162 159.805 637.614 159.453C638.068 159.097 638.614 158.92 639.25 158.92C639.886 158.92 640.43 159.097 640.882 159.453C641.337 159.805 641.683 160.316 641.922 160.987C642.163 161.654 642.284 162.46 642.284 163.403C642.284 164.352 642.165 165.161 641.926 165.832C641.688 166.499 641.342 167.009 640.891 167.362C640.439 167.711 639.892 167.886 639.25 167.886ZM639.25 166.948C639.886 166.948 640.381 166.641 640.733 166.028C641.085 165.414 641.261 164.539 641.261 163.403C641.261 162.647 641.18 162.004 641.018 161.472C640.859 160.941 640.629 160.536 640.328 160.258C640.03 159.98 639.67 159.84 639.25 159.84C638.619 159.84 638.126 160.151 637.771 160.774C637.416 161.393 637.239 162.269 637.239 163.403C637.239 164.159 637.318 164.801 637.477 165.329C637.636 165.857 637.865 166.259 638.163 166.535C638.464 166.811 638.827 166.948 639.25 166.948ZM646.75 167.886C646.108 167.886 645.561 167.711 645.109 167.362C644.658 167.009 644.313 166.499 644.074 165.832C643.835 165.161 643.716 164.352 643.716 163.403C643.716 162.46 643.835 161.654 644.074 160.987C644.315 160.316 644.662 159.805 645.114 159.453C645.568 159.097 646.114 158.92 646.75 158.92C647.386 158.92 647.93 159.097 648.382 159.453C648.837 159.805 649.183 160.316 649.422 160.987C649.663 161.654 649.784 162.46 649.784 163.403C649.784 164.352 649.665 165.161 649.426 165.832C649.188 166.499 648.842 167.009 648.391 167.362C647.939 167.711 647.392 167.886 646.75 167.886ZM646.75 166.948C647.386 166.948 647.881 166.641 648.233 166.028C648.585 165.414 648.761 164.539 648.761 163.403C648.761 162.647 648.68 162.004 648.518 161.472C648.359 160.941 648.129 160.536 647.828 160.258C647.53 159.98 647.17 159.84 646.75 159.84C646.119 159.84 645.626 160.151 645.271 160.774C644.916 161.393 644.739 162.269 644.739 163.403C644.739 164.159 644.818 164.801 644.977 165.329C645.136 165.857 645.365 166.259 645.663 166.535C645.964 166.811 646.327 166.948 646.75 166.948ZM654.25 167.886C653.608 167.886 653.061 167.711 652.609 167.362C652.158 167.009 651.813 166.499 651.574 165.832C651.335 165.161 651.216 164.352 651.216 163.403C651.216 162.46 651.335 161.654 651.574 160.987C651.815 160.316 652.162 159.805 652.614 159.453C653.068 159.097 653.614 158.92 654.25 158.92C654.886 158.92 655.43 159.097 655.882 159.453C656.337 159.805 656.683 160.316 656.922 160.987C657.163 161.654 657.284 162.46 657.284 163.403C657.284 164.352 657.165 165.161 656.926 165.832C656.688 166.499 656.342 167.009 655.891 167.362C655.439 167.711 654.892 167.886 654.25 167.886ZM654.25 166.948C654.886 166.948 655.381 166.641 655.733 166.028C656.085 165.414 656.261 164.539 656.261 163.403C656.261 162.647 656.18 162.004 656.018 161.472C655.859 160.941 655.629 160.536 655.328 160.258C655.03 159.98 654.67 159.84 654.25 159.84C653.619 159.84 653.126 160.151 652.771 160.774C652.416 161.393 652.239 162.269 652.239 163.403C652.239 164.159 652.318 164.801 652.477 165.329C652.636 165.857 652.865 166.259 653.163 166.535C653.464 166.811 653.827 166.948 654.25 166.948Z" fill="#868EA3"/>
+<line x1="674" y1="163.516" x2="1137" y2="163.516" stroke="#E8E9F0" stroke-width="0.5"/>
+<path opacity="0.5" d="M629.138 203.964V203.197L632.018 200.044C632.357 199.674 632.635 199.353 632.854 199.08C633.072 198.805 633.234 198.546 633.339 198.305C633.447 198.061 633.501 197.805 633.501 197.538C633.501 197.231 633.428 196.965 633.28 196.741C633.135 196.517 632.936 196.343 632.683 196.221C632.43 196.099 632.146 196.038 631.831 196.038C631.496 196.038 631.203 196.107 630.953 196.247C630.706 196.383 630.514 196.575 630.378 196.822C630.244 197.069 630.178 197.359 630.178 197.691H629.172C629.172 197.18 629.29 196.731 629.526 196.345C629.761 195.958 630.082 195.657 630.489 195.441C630.898 195.225 631.357 195.117 631.865 195.117C632.376 195.117 632.83 195.225 633.224 195.441C633.619 195.657 633.929 195.948 634.153 196.315C634.378 196.681 634.49 197.089 634.49 197.538C634.49 197.859 634.432 198.173 634.315 198.48C634.202 198.784 634.003 199.123 633.719 199.498C633.438 199.87 633.047 200.325 632.547 200.862L630.587 202.958V203.026H634.643V203.964H629.138ZM639.25 204.083C638.608 204.083 638.061 203.909 637.609 203.559C637.158 203.207 636.813 202.697 636.574 202.029C636.335 201.359 636.216 200.549 636.216 199.6C636.216 198.657 636.335 197.852 636.574 197.184C636.815 196.514 637.162 196.002 637.614 195.65C638.068 195.295 638.614 195.117 639.25 195.117C639.886 195.117 640.43 195.295 640.882 195.65C641.337 196.002 641.683 196.514 641.922 197.184C642.163 197.852 642.284 198.657 642.284 199.6C642.284 200.549 642.165 201.359 641.926 202.029C641.688 202.697 641.342 203.207 640.891 203.559C640.439 203.909 639.892 204.083 639.25 204.083ZM639.25 203.146C639.886 203.146 640.381 202.839 640.733 202.225C641.085 201.612 641.261 200.737 641.261 199.6C641.261 198.845 641.18 198.201 641.018 197.67C640.859 197.139 640.629 196.734 640.328 196.455C640.03 196.177 639.67 196.038 639.25 196.038C638.619 196.038 638.126 196.349 637.771 196.971C637.416 197.59 637.239 198.467 637.239 199.6C637.239 200.356 637.318 200.998 637.477 201.526C637.636 202.055 637.865 202.457 638.163 202.732C638.464 203.008 638.827 203.146 639.25 203.146ZM646.75 204.083C646.108 204.083 645.561 203.909 645.109 203.559C644.658 203.207 644.313 202.697 644.074 202.029C643.835 201.359 643.716 200.549 643.716 199.6C643.716 198.657 643.835 197.852 644.074 197.184C644.315 196.514 644.662 196.002 645.114 195.65C645.568 195.295 646.114 195.117 646.75 195.117C647.386 195.117 647.93 195.295 648.382 195.65C648.837 196.002 649.183 196.514 649.422 197.184C649.663 197.852 649.784 198.657 649.784 199.6C649.784 200.549 649.665 201.359 649.426 202.029C649.188 202.697 648.842 203.207 648.391 203.559C647.939 203.909 647.392 204.083 646.75 204.083ZM646.75 203.146C647.386 203.146 647.881 202.839 648.233 202.225C648.585 201.612 648.761 200.737 648.761 199.6C648.761 198.845 648.68 198.201 648.518 197.67C648.359 197.139 648.129 196.734 647.828 196.455C647.53 196.177 647.17 196.038 646.75 196.038C646.119 196.038 645.626 196.349 645.271 196.971C644.916 197.59 644.739 198.467 644.739 199.6C644.739 200.356 644.818 200.998 644.977 201.526C645.136 202.055 645.365 202.457 645.663 202.732C645.964 203.008 646.327 203.146 646.75 203.146ZM654.25 204.083C653.608 204.083 653.061 203.909 652.609 203.559C652.158 203.207 651.813 202.697 651.574 202.029C651.335 201.359 651.216 200.549 651.216 199.6C651.216 198.657 651.335 197.852 651.574 197.184C651.815 196.514 652.162 196.002 652.614 195.65C653.068 195.295 653.614 195.117 654.25 195.117C654.886 195.117 655.43 195.295 655.882 195.65C656.337 196.002 656.683 196.514 656.922 197.184C657.163 197.852 657.284 198.657 657.284 199.6C657.284 200.549 657.165 201.359 656.926 202.029C656.688 202.697 656.342 203.207 655.891 203.559C655.439 203.909 654.892 204.083 654.25 204.083ZM654.25 203.146C654.886 203.146 655.381 202.839 655.733 202.225C656.085 201.612 656.261 200.737 656.261 199.6C656.261 198.845 656.18 198.201 656.018 197.67C655.859 197.139 655.629 196.734 655.328 196.455C655.03 196.177 654.67 196.038 654.25 196.038C653.619 196.038 653.126 196.349 652.771 196.971C652.416 197.59 652.239 198.467 652.239 199.6C652.239 200.356 652.318 200.998 652.477 201.526C652.636 202.055 652.865 202.457 653.163 202.732C653.464 203.008 653.827 203.146 654.25 203.146Z" fill="#868EA3"/>
+<line x1="674" y1="199.714" x2="1137" y2="199.714" stroke="#E8E9F0" stroke-width="0.5"/>
+<path opacity="0.5" d="M633.893 230.506V239.234H632.837V231.614H632.786L630.655 233.029V231.955L632.837 230.506H633.893ZM639.25 239.353C638.608 239.353 638.061 239.178 637.609 238.829C637.158 238.477 636.813 237.967 636.574 237.299C636.335 236.629 636.216 235.819 636.216 234.87C636.216 233.927 636.335 233.122 636.574 232.454C636.815 231.783 637.162 231.272 637.614 230.92C638.068 230.565 638.614 230.387 639.25 230.387C639.886 230.387 640.43 230.565 640.882 230.92C641.337 231.272 641.683 231.783 641.922 232.454C642.163 233.122 642.284 233.927 642.284 234.87C642.284 235.819 642.165 236.629 641.926 237.299C641.688 237.967 641.342 238.477 640.891 238.829C640.439 239.178 639.892 239.353 639.25 239.353ZM639.25 238.416C639.886 238.416 640.381 238.109 640.733 237.495C641.085 236.881 641.261 236.006 641.261 234.87C641.261 234.114 641.18 233.471 641.018 232.94C640.859 232.408 640.629 232.004 640.328 231.725C640.03 231.447 639.67 231.308 639.25 231.308C638.619 231.308 638.126 231.619 637.771 232.241C637.416 232.86 637.239 233.737 637.239 234.87C637.239 235.626 637.318 236.268 637.477 236.796C637.636 237.325 637.865 237.727 638.163 238.002C638.464 238.278 638.827 238.416 639.25 238.416ZM646.75 239.353C646.108 239.353 645.561 239.178 645.109 238.829C644.658 238.477 644.313 237.967 644.074 237.299C643.835 236.629 643.716 235.819 643.716 234.87C643.716 233.927 643.835 233.122 644.074 232.454C644.315 231.783 644.662 231.272 645.114 230.92C645.568 230.565 646.114 230.387 646.75 230.387C647.386 230.387 647.93 230.565 648.382 230.92C648.837 231.272 649.183 231.783 649.422 232.454C649.663 233.122 649.784 233.927 649.784 234.87C649.784 235.819 649.665 236.629 649.426 237.299C649.188 237.967 648.842 238.477 648.391 238.829C647.939 239.178 647.392 239.353 646.75 239.353ZM646.75 238.416C647.386 238.416 647.881 238.109 648.233 237.495C648.585 236.881 648.761 236.006 648.761 234.87C648.761 234.114 648.68 233.471 648.518 232.94C648.359 232.408 648.129 232.004 647.828 231.725C647.53 231.447 647.17 231.308 646.75 231.308C646.119 231.308 645.626 231.619 645.271 232.241C644.916 232.86 644.739 233.737 644.739 234.87C644.739 235.626 644.818 236.268 644.977 236.796C645.136 237.325 645.365 237.727 645.663 238.002C645.964 238.278 646.327 238.416 646.75 238.416ZM654.25 239.353C653.608 239.353 653.061 239.178 652.609 238.829C652.158 238.477 651.813 237.967 651.574 237.299C651.335 236.629 651.216 235.819 651.216 234.87C651.216 233.927 651.335 233.122 651.574 232.454C651.815 231.783 652.162 231.272 652.614 230.92C653.068 230.565 653.614 230.387 654.25 230.387C654.886 230.387 655.43 230.565 655.882 230.92C656.337 231.272 656.683 231.783 656.922 232.454C657.163 233.122 657.284 233.927 657.284 234.87C657.284 235.819 657.165 236.629 656.926 237.299C656.688 237.967 656.342 238.477 655.891 238.829C655.439 239.178 654.892 239.353 654.25 239.353ZM654.25 238.416C654.886 238.416 655.381 238.109 655.733 237.495C656.085 236.881 656.261 236.006 656.261 234.87C656.261 234.114 656.18 233.471 656.018 232.94C655.859 232.408 655.629 232.004 655.328 231.725C655.03 231.447 654.67 231.308 654.25 231.308C653.619 231.308 653.126 231.619 652.771 232.241C652.416 232.86 652.239 233.737 652.239 234.87C652.239 235.626 652.318 236.268 652.477 236.796C652.636 237.325 652.865 237.727 653.163 238.002C653.464 238.278 653.827 238.416 654.25 238.416Z" fill="#868EA3"/>
+<line x1="674" y1="234.984" x2="1137" y2="234.984" stroke="#E8E9F0" stroke-width="0.5"/>
+<path opacity="0.5" d="M654.25 274.622C653.608 274.622 653.061 274.448 652.609 274.098C652.158 273.746 651.813 273.236 651.574 272.568C651.335 271.898 651.216 271.088 651.216 270.139C651.216 269.196 651.335 268.391 651.574 267.723C651.815 267.053 652.162 266.541 652.614 266.189C653.068 265.834 653.614 265.656 654.25 265.656C654.886 265.656 655.43 265.834 655.882 266.189C656.337 266.541 656.683 267.053 656.922 267.723C657.163 268.391 657.284 269.196 657.284 270.139C657.284 271.088 657.165 271.898 656.926 272.568C656.688 273.236 656.342 273.746 655.891 274.098C655.439 274.448 654.892 274.622 654.25 274.622ZM654.25 273.685C654.886 273.685 655.381 273.378 655.733 272.764C656.085 272.151 656.261 271.276 656.261 270.139C656.261 269.384 656.18 268.74 656.018 268.209C655.859 267.678 655.629 267.273 655.328 266.995C655.03 266.716 654.67 266.577 654.25 266.577C653.619 266.577 653.126 266.888 652.771 267.51C652.416 268.129 652.239 269.006 652.239 270.139C652.239 270.895 652.318 271.537 652.477 272.066C652.636 272.594 652.865 272.996 653.163 273.272C653.464 273.547 653.827 273.685 654.25 273.685Z" fill="#868EA3"/>
+<line x1="674" y1="270.253" x2="1137" y2="270.253" stroke="#E8E9F0" stroke-width="0.5"/>
+<g filter="url(#filter2_d_1289_51614)">
+<path d="M674.5 271C679.5 264.5 686.5 261.5 696.259 230.884C700.736 216.842 712.887 167.103 730.921 163.565C764.068 157.062 780.154 199.517 806.964 199.517C828.9 199.517 837.858 189.24 855.32 173.025C872.781 156.81 883.576 167.129 889.29 170.077C895.005 173.025 922.944 197.348 941.676 150.545C956.661 113.102 983.36 126.959 995.648 137.278C1008.62 146.122 1040.32 209.133 1061.91 198.519C1083.5 187.905 1122.84 173.025 1136 211.501" stroke="#F02E65"/>
+</g>
+</g>
+<rect x="628" y="32" width="92" height="12" rx="6" fill="url(#paint0_linear_1289_51614)"/>
+<rect x="1110" y="32" width="40" height="12" rx="6" fill="url(#paint1_linear_1289_51614)"/>
+<path d="M31.3365 72V61.8182H34.8961C35.6054 61.8182 36.1904 61.9408 36.6511 62.1861C37.1118 62.428 37.4548 62.7545 37.6802 63.1655C37.9056 63.5732 38.0183 64.0256 38.0183 64.5227C38.0183 64.9602 37.9404 65.3215 37.7846 65.6065C37.6322 65.8916 37.43 66.117 37.1781 66.2827C36.9295 66.4484 36.6594 66.571 36.3677 66.6506V66.75C36.6793 66.7699 36.9925 66.8793 37.3074 67.0781C37.6222 67.277 37.8857 67.562 38.0978 67.9332C38.31 68.3045 38.416 68.7585 38.416 69.2955C38.416 69.8059 38.3 70.2649 38.068 70.6726C37.836 71.0803 37.4698 71.4034 36.9693 71.642C36.4688 71.8807 35.8175 72 35.0154 72H31.3365ZM32.5694 70.9062H35.0154C35.8208 70.9062 36.3926 70.7505 36.7306 70.4389C37.072 70.1241 37.2427 69.7429 37.2427 69.2955C37.2427 68.9508 37.1549 68.6326 36.9792 68.3409C36.8036 68.0459 36.5533 67.8106 36.2285 67.6349C35.9037 67.456 35.5192 67.3665 35.0751 67.3665H32.5694V70.9062ZM32.5694 66.2926H34.8564C35.2276 66.2926 35.5623 66.2197 35.8606 66.0739C36.1622 65.928 36.4009 65.7225 36.5765 65.4574C36.7555 65.1922 36.845 64.8807 36.845 64.5227C36.845 64.0753 36.6892 63.6958 36.3777 63.3842C36.0661 63.0694 35.5723 62.9119 34.8961 62.9119H32.5694V66.2926ZM42.53 72.179C42.0461 72.179 41.6069 72.0878 41.2125 71.9055C40.8181 71.7199 40.5049 71.4531 40.2729 71.1051C40.0409 70.7538 39.9249 70.3295 39.9249 69.8324C39.9249 69.3949 40.0111 69.0402 40.1834 68.7685C40.3558 68.4934 40.5861 68.2779 40.8745 68.1222C41.1628 67.9664 41.481 67.8504 41.829 67.7741C42.1803 67.6946 42.5333 67.6316 42.888 67.5852C43.352 67.5256 43.7282 67.4808 44.0165 67.451C44.3082 67.4179 44.5203 67.3632 44.6529 67.2869C44.7888 67.2107 44.8567 67.0781 44.8567 66.8892V66.8494C44.8567 66.3589 44.7225 65.9777 44.454 65.706C44.1889 65.4342 43.7862 65.2983 43.2459 65.2983C42.6858 65.2983 42.2466 65.4209 41.9284 65.6662C41.6103 65.9115 41.3865 66.1733 41.2573 66.4517L40.1436 66.054C40.3425 65.59 40.6077 65.2287 40.9391 64.9702C41.2739 64.7083 41.6384 64.526 42.0328 64.4233C42.4306 64.3172 42.8217 64.2642 43.2061 64.2642C43.4514 64.2642 43.7331 64.294 44.0513 64.3537C44.3728 64.41 44.6827 64.5277 44.981 64.7067C45.2826 64.8857 45.5328 65.1558 45.7317 65.517C45.9306 65.8783 46.03 66.3622 46.03 66.9688V72H44.8567V70.9659H44.7971C44.7175 71.1316 44.5849 71.3089 44.3993 71.4979C44.2137 71.6868 43.9668 71.8475 43.6586 71.9801C43.3503 72.1127 42.9741 72.179 42.53 72.179ZM42.709 71.125C43.173 71.125 43.5641 71.0339 43.8823 70.8516C44.2038 70.6693 44.4457 70.4339 44.6081 70.1456C44.7739 69.8572 44.8567 69.554 44.8567 69.2358V68.1619C44.807 68.2216 44.6976 68.2763 44.5286 68.326C44.3629 68.3724 44.1706 68.4138 43.9519 68.4503C43.7364 68.4834 43.526 68.5133 43.3205 68.5398C43.1183 68.563 42.9542 68.5829 42.8283 68.5994C42.5234 68.6392 42.2383 68.7038 41.9732 68.7933C41.7114 68.8795 41.4992 69.0104 41.3368 69.1861C41.1777 69.3584 41.0982 69.5937 41.0982 69.892C41.0982 70.2997 41.249 70.608 41.5506 70.8168C41.8555 71.0223 42.2417 71.125 42.709 71.125ZM49.3448 67.4062V72H48.1715V64.3636H49.305V65.5568H49.4045C49.5835 65.169 49.8552 64.8575 50.2198 64.6222C50.5844 64.3835 51.055 64.2642 51.6317 64.2642C52.1488 64.2642 52.6012 64.3703 52.989 64.5824C53.3768 64.7912 53.6784 65.1094 53.8938 65.5369C54.1093 65.9612 54.217 66.4981 54.217 67.1477V72H53.0437V67.2273C53.0437 66.6274 52.8879 66.16 52.5763 65.8253C52.2648 65.4872 51.8372 65.3182 51.2937 65.3182C50.9192 65.3182 50.5844 65.3994 50.2894 65.5618C49.9978 65.7242 49.7674 65.9612 49.5984 66.2727C49.4293 66.5843 49.3448 66.9621 49.3448 67.4062ZM59.2445 72.1591C58.6081 72.1591 58.0463 71.9983 57.5591 71.6768C57.0719 71.352 56.6908 70.8946 56.4157 70.3047C56.1406 69.7114 56.003 69.0104 56.003 68.2017C56.003 67.3996 56.1406 66.7036 56.4157 66.1136C56.6908 65.5237 57.0736 65.0679 57.5641 64.7464C58.0546 64.425 58.6214 64.2642 59.2644 64.2642C59.7615 64.2642 60.1543 64.3471 60.4426 64.5128C60.7343 64.6752 60.9564 64.8608 61.1088 65.0696C61.2646 65.2751 61.3856 65.4441 61.4718 65.5767H61.5712V61.8182H62.7445V72H61.611V70.8267H61.4718C61.3856 70.9659 61.263 71.1416 61.1039 71.3537C60.9448 71.5625 60.7177 71.7498 60.4228 71.9155C60.1278 72.0779 59.735 72.1591 59.2445 72.1591ZM59.4036 71.1051C59.8742 71.1051 60.272 70.9825 60.5968 70.7372C60.9216 70.4886 61.1685 70.1456 61.3375 69.7081C61.5066 69.2673 61.5911 68.7585 61.5911 68.1818C61.5911 67.6117 61.5082 67.1129 61.3425 66.6854C61.1768 66.2545 60.9315 65.9197 60.6067 65.6811C60.2819 65.4392 59.8809 65.3182 59.4036 65.3182C58.9064 65.3182 58.4921 65.4458 58.1607 65.701C57.8326 65.9529 57.5856 66.2959 57.4199 66.7301C57.2575 67.161 57.1763 67.6449 57.1763 68.1818C57.1763 68.7254 57.2592 69.2192 57.4249 69.6634C57.5939 70.1042 57.8425 70.4555 58.1706 70.7173C58.5021 70.9759 58.9131 71.1051 59.4036 71.1051ZM66.7864 72L64.4597 64.3636H65.6926L67.3432 70.2102H67.4228L69.0534 64.3636H70.3063L71.9171 70.1903H71.9966L73.6472 64.3636H74.8801L72.5534 72H71.4L69.7296 66.1335H69.6103L67.9398 72H66.7864ZM76.4313 72V64.3636H77.6046V72H76.4313ZM77.0279 63.0909C76.7992 63.0909 76.602 63.013 76.4363 62.8572C76.2739 62.7015 76.1926 62.5142 76.1926 62.2955C76.1926 62.0767 76.2739 61.8894 76.4363 61.7337C76.602 61.5779 76.7992 61.5 77.0279 61.5C77.2566 61.5 77.4521 61.5779 77.6145 61.7337C77.7802 61.8894 77.8631 62.0767 77.8631 62.2955C77.8631 62.5142 77.7802 62.7015 77.6145 62.8572C77.4521 63.013 77.2566 63.0909 77.0279 63.0909ZM82.6371 72.1591C82.0007 72.1591 81.4389 71.9983 80.9517 71.6768C80.4645 71.352 80.0833 70.8946 79.8082 70.3047C79.5331 69.7114 79.3956 69.0104 79.3956 68.2017C79.3956 67.3996 79.5331 66.7036 79.8082 66.1136C80.0833 65.5237 80.4661 65.0679 80.9567 64.7464C81.4472 64.425 82.014 64.2642 82.657 64.2642C83.1541 64.2642 83.5469 64.3471 83.8352 64.5128C84.1269 64.6752 84.349 64.8608 84.5014 65.0696C84.6572 65.2751 84.7782 65.4441 84.8643 65.5767H84.9638V61.8182H86.1371V72H85.0036V70.8267H84.8643C84.7782 70.9659 84.6555 71.1416 84.4964 71.3537C84.3374 71.5625 84.1103 71.7498 83.8153 71.9155C83.5204 72.0779 83.1276 72.1591 82.6371 72.1591ZM82.7962 71.1051C83.2668 71.1051 83.6645 70.9825 83.9893 70.7372C84.3142 70.4886 84.5611 70.1456 84.7301 69.7081C84.8991 69.2673 84.9837 68.7585 84.9837 68.1818C84.9837 67.6117 84.9008 67.1129 84.7351 66.6854C84.5694 66.2545 84.3241 65.9197 83.9993 65.6811C83.6745 65.4392 83.2734 65.3182 82.7962 65.3182C82.299 65.3182 81.8847 65.4458 81.5533 65.701C81.2251 65.9529 80.9782 66.2959 80.8125 66.7301C80.6501 67.161 80.5689 67.6449 80.5689 68.1818C80.5689 68.7254 80.6518 69.2192 80.8175 69.6634C80.9865 70.1042 81.2351 70.4555 81.5632 70.7173C81.8946 70.9759 82.3056 71.1051 82.7962 71.1051ZM91.7699 64.3636V65.358H87.8125V64.3636H91.7699ZM88.9659 62.5341H90.1392V69.8125C90.1392 70.1439 90.1873 70.3925 90.2834 70.5582C90.3828 70.7206 90.5088 70.83 90.6612 70.8864C90.817 70.9394 90.9811 70.9659 91.1534 70.9659C91.2827 70.9659 91.3887 70.9593 91.4716 70.946C91.5545 70.9295 91.6207 70.9162 91.6705 70.9062L91.9091 71.9602C91.8295 71.9901 91.7185 72.0199 91.576 72.0497C91.4335 72.0829 91.2528 72.0994 91.0341 72.0994C90.7027 72.0994 90.3778 72.0282 90.0597 71.8857C89.7448 71.7431 89.483 71.526 89.2741 71.2344C89.0687 70.9427 88.9659 70.5748 88.9659 70.1307V62.5341ZM94.8722 67.4062V72H93.6989V61.8182H94.8722V65.5568H94.9716C95.1506 65.1624 95.419 64.8492 95.777 64.6172C96.1383 64.3819 96.6188 64.2642 97.2188 64.2642C97.7391 64.2642 98.1948 64.3686 98.5859 64.5774C98.977 64.7829 99.2803 65.0994 99.4957 65.527C99.7145 65.9512 99.8239 66.4915 99.8239 67.1477V72H98.6506V67.2273C98.6506 66.6207 98.4931 66.1518 98.1783 65.8203C97.8667 65.4856 97.4342 65.3182 96.8807 65.3182C96.4962 65.3182 96.1515 65.3994 95.8466 65.5618C95.545 65.7242 95.3063 65.9612 95.1307 66.2727C94.9583 66.5843 94.8722 66.9621 94.8722 67.4062Z" fill="#616B7C"/>
+<path d="M631.526 72V61.8182H634.966C635.762 61.8182 636.415 61.9541 636.925 62.2259C637.435 62.4943 637.813 62.8639 638.059 63.3345C638.304 63.8052 638.426 64.3404 638.426 64.9403C638.426 65.5402 638.304 66.0722 638.059 66.5362C637.813 67.0002 637.437 67.3648 636.93 67.63C636.423 67.8918 635.775 68.0227 634.986 68.0227H632.202V66.9091H634.946C635.49 66.9091 635.927 66.8295 636.259 66.6705C636.594 66.5114 636.836 66.286 636.985 65.9943C637.137 65.6993 637.213 65.348 637.213 64.9403C637.213 64.5327 637.137 64.1764 636.985 63.8714C636.832 63.5665 636.589 63.3312 636.254 63.1655C635.919 62.9964 635.477 62.9119 634.926 62.9119H632.759V72H631.526ZM636.319 67.4261L638.824 72H637.392L634.926 67.4261H636.319ZM643.442 72.1591C642.706 72.1591 642.071 71.9967 641.537 71.6719C641.007 71.3438 640.598 70.8864 640.309 70.2997C640.024 69.7098 639.882 69.0237 639.882 68.2415C639.882 67.4593 640.024 66.7699 640.309 66.1733C640.598 65.5734 640.999 65.1061 641.513 64.7713C642.03 64.4332 642.633 64.2642 643.322 64.2642C643.72 64.2642 644.113 64.3305 644.501 64.4631C644.888 64.5956 645.241 64.8111 645.559 65.1094C645.878 65.4044 646.131 65.7955 646.32 66.2827C646.509 66.7699 646.604 67.3698 646.604 68.0824V68.5795H640.717V67.5653H645.41C645.41 67.1345 645.324 66.75 645.152 66.4119C644.983 66.0739 644.741 65.8071 644.426 65.6115C644.114 65.416 643.747 65.3182 643.322 65.3182C642.855 65.3182 642.451 65.4342 642.109 65.6662C641.771 65.8949 641.511 66.1932 641.329 66.5611C641.146 66.929 641.055 67.3234 641.055 67.7443V68.4205C641.055 68.9972 641.155 69.486 641.354 69.8871C641.556 70.2848 641.836 70.5881 642.194 70.7969C642.552 71.0024 642.968 71.1051 643.442 71.1051C643.75 71.1051 644.028 71.062 644.277 70.9759C644.529 70.8864 644.746 70.7538 644.928 70.5781C645.11 70.3991 645.251 70.1771 645.351 69.9119L646.484 70.2301C646.365 70.6146 646.164 70.9527 645.883 71.2443C645.601 71.5327 645.253 71.758 644.839 71.9205C644.424 72.0795 643.959 72.1591 643.442 72.1591ZM653.599 74.8636V70.8267H653.499C653.413 70.9659 653.29 71.1416 653.131 71.3537C652.972 71.5625 652.745 71.7498 652.45 71.9155C652.155 72.0779 651.762 72.1591 651.272 72.1591C650.635 72.1591 650.074 71.9983 649.586 71.6768C649.099 71.352 648.718 70.8946 648.443 70.3047C648.168 69.7114 648.03 69.0104 648.03 68.2017C648.03 67.3996 648.168 66.7036 648.443 66.1136C648.718 65.5237 649.101 65.0679 649.591 64.7464C650.082 64.425 650.649 64.2642 651.292 64.2642C651.789 64.2642 652.182 64.3471 652.47 64.5128C652.762 64.6752 652.984 64.8608 653.136 65.0696C653.292 65.2751 653.413 65.4441 653.499 65.5767H653.638V64.3636H654.772V74.8636H653.599ZM651.431 71.1051C651.902 71.1051 652.299 70.9825 652.624 70.7372C652.949 70.4886 653.196 70.1456 653.365 69.7081C653.534 69.2673 653.618 68.7585 653.618 68.1818C653.618 67.6117 653.536 67.1129 653.37 66.6854C653.204 66.2545 652.959 65.9197 652.634 65.6811C652.309 65.4392 651.908 65.3182 651.431 65.3182C650.934 65.3182 650.519 65.4458 650.188 65.701C649.86 65.9529 649.613 66.2959 649.447 66.7301C649.285 67.161 649.204 67.6449 649.204 68.1818C649.204 68.7254 649.287 69.2192 649.452 69.6634C649.621 70.1042 649.87 70.4555 650.198 70.7173C650.529 70.9759 650.94 71.1051 651.431 71.1051ZM661.732 68.8778V64.3636H662.905V72H661.732V70.7074H661.653C661.474 71.0952 661.195 71.425 660.817 71.6967C660.439 71.9652 659.962 72.0994 659.385 72.0994C658.908 72.0994 658.484 71.995 658.113 71.7862C657.742 71.5741 657.45 71.2559 657.238 70.8317C657.026 70.4041 656.92 69.8655 656.92 69.2159V64.3636H658.093V69.1364C658.093 69.6932 658.249 70.1373 658.56 70.4688C658.875 70.8002 659.276 70.9659 659.763 70.9659C660.055 70.9659 660.352 70.8913 660.653 70.7422C660.958 70.593 661.213 70.3643 661.419 70.0561C661.628 69.7479 661.732 69.3551 661.732 68.8778ZM668.256 72.1591C667.52 72.1591 666.886 71.9967 666.352 71.6719C665.822 71.3438 665.412 70.8864 665.124 70.2997C664.839 69.7098 664.696 69.0237 664.696 68.2415C664.696 67.4593 664.839 66.7699 665.124 66.1733C665.412 65.5734 665.813 65.1061 666.327 64.7713C666.844 64.4332 667.447 64.2642 668.137 64.2642C668.534 64.2642 668.927 64.3305 669.315 64.4631C669.703 64.5956 670.056 64.8111 670.374 65.1094C670.692 65.4044 670.946 65.7955 671.135 66.2827C671.324 66.7699 671.418 67.3698 671.418 68.0824V68.5795H665.532V67.5653H670.225C670.225 67.1345 670.139 66.75 669.966 66.4119C669.797 66.0739 669.555 65.8071 669.24 65.6115C668.929 65.416 668.561 65.3182 668.137 65.3182C667.669 65.3182 667.265 65.4342 666.924 65.6662C666.586 65.8949 666.325 66.1932 666.143 66.5611C665.961 66.929 665.87 67.3234 665.87 67.7443V68.4205C665.87 68.9972 665.969 69.486 666.168 69.8871C666.37 70.2848 666.65 70.5881 667.008 70.7969C667.366 71.0024 667.782 71.1051 668.256 71.1051C668.564 71.1051 668.843 71.062 669.091 70.9759C669.343 70.8864 669.56 70.7538 669.743 70.5781C669.925 70.3991 670.066 70.1771 670.165 69.9119L671.299 70.2301C671.179 70.6146 670.979 70.9527 670.697 71.2443C670.415 71.5327 670.067 71.758 669.653 71.9205C669.239 72.0795 668.773 72.1591 668.256 72.1591ZM678.612 66.0739L677.558 66.3722C677.492 66.1965 677.394 66.0258 677.265 65.8601C677.139 65.6911 676.966 65.5518 676.748 65.4425C676.529 65.3331 676.249 65.2784 675.907 65.2784C675.44 65.2784 675.051 65.3861 674.739 65.6016C674.431 65.8137 674.277 66.0838 674.277 66.4119C674.277 66.7036 674.383 66.9339 674.595 67.103C674.807 67.272 675.138 67.4129 675.589 67.5256L676.723 67.804C677.405 67.9697 677.914 68.2232 678.249 68.5646C678.584 68.9027 678.751 69.3385 678.751 69.8722C678.751 70.3097 678.625 70.7008 678.373 71.0455C678.125 71.3902 677.777 71.6619 677.329 71.8608C676.882 72.0597 676.361 72.1591 675.768 72.1591C674.989 72.1591 674.345 71.9901 673.834 71.652C673.324 71.3139 673.001 70.8201 672.865 70.1705L673.978 69.892C674.084 70.303 674.285 70.6113 674.58 70.8168C674.878 71.0223 675.268 71.125 675.748 71.125C676.295 71.125 676.729 71.009 677.051 70.777C677.376 70.5417 677.538 70.2599 677.538 69.9318C677.538 69.6667 677.445 69.4446 677.26 69.2656C677.074 69.0833 676.789 68.9474 676.404 68.858L675.132 68.5597C674.432 68.3939 673.919 68.1371 673.591 67.7891C673.266 67.4377 673.103 66.9986 673.103 66.4716C673.103 66.0407 673.224 65.6596 673.466 65.3281C673.712 64.9967 674.045 64.7365 674.466 64.5476C674.89 64.3587 675.37 64.2642 675.907 64.2642C676.663 64.2642 677.256 64.4299 677.687 64.7614C678.121 65.0928 678.43 65.5303 678.612 66.0739ZM683.838 64.3636V65.358H679.881V64.3636H683.838ZM681.034 62.5341H682.208V69.8125C682.208 70.1439 682.256 70.3925 682.352 70.5582C682.451 70.7206 682.577 70.83 682.73 70.8864C682.885 70.9394 683.049 70.9659 683.222 70.9659C683.351 70.9659 683.457 70.9593 683.54 70.946C683.623 70.9295 683.689 70.9162 683.739 70.9062L683.977 71.9602C683.898 71.9901 683.787 72.0199 683.644 72.0497C683.502 72.0829 683.321 72.0994 683.102 72.0994C682.771 72.0994 682.446 72.0282 682.128 71.8857C681.813 71.7431 681.551 71.526 681.343 71.2344C681.137 70.9427 681.034 70.5748 681.034 70.1307V62.5341ZM690.876 66.0739L689.822 66.3722C689.755 66.1965 689.657 66.0258 689.528 65.8601C689.402 65.6911 689.23 65.5518 689.011 65.4425C688.792 65.3331 688.512 65.2784 688.171 65.2784C687.704 65.2784 687.314 65.3861 687.003 65.6016C686.694 65.8137 686.54 66.0838 686.54 66.4119C686.54 66.7036 686.646 66.9339 686.858 67.103C687.071 67.272 687.402 67.4129 687.853 67.5256L688.986 67.804C689.669 67.9697 690.178 68.2232 690.513 68.5646C690.847 68.9027 691.015 69.3385 691.015 69.8722C691.015 70.3097 690.889 70.7008 690.637 71.0455C690.388 71.3902 690.04 71.6619 689.593 71.8608C689.145 72.0597 688.625 72.1591 688.032 72.1591C687.253 72.1591 686.608 71.9901 686.098 71.652C685.587 71.3139 685.264 70.8201 685.128 70.1705L686.242 69.892C686.348 70.303 686.549 70.6113 686.844 70.8168C687.142 71.0223 687.531 71.125 688.012 71.125C688.559 71.125 688.993 71.009 689.314 70.777C689.639 70.5417 689.802 70.2599 689.802 69.9318C689.802 69.6667 689.709 69.4446 689.523 69.2656C689.338 69.0833 689.053 68.9474 688.668 68.858L687.395 68.5597C686.696 68.3939 686.182 68.1371 685.854 67.7891C685.529 67.4377 685.367 66.9986 685.367 66.4716C685.367 66.0407 685.488 65.6596 685.73 65.3281C685.975 64.9967 686.308 64.7365 686.729 64.5476C687.153 64.3587 687.634 64.2642 688.171 64.2642C688.927 64.2642 689.52 64.4299 689.951 64.7614C690.385 65.0928 690.693 65.5303 690.876 66.0739Z" fill="#616B7C"/>
+<rect x="30" y="32" width="92" height="12" rx="6" fill="url(#paint2_linear_1289_51614)"/>
+<rect x="512" y="32" width="40" height="12" rx="6" fill="url(#paint3_linear_1289_51614)"/>
+<rect x="0.5" y="0.5" width="1167" height="339" rx="15.5" fill="url(#paint4_radial_1289_51614)" stroke="#F2F2F8"/>
+<defs>
+<filter id="filter0_d_1289_51614" x="-32.5" y="-16.5" width="637" height="405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="16"/>
+<feGaussianBlur stdDeviation="16"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.215686 0 0 0 0 0.231373 0 0 0 0 0.301961 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1289_51614"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1289_51614" result="shape"/>
+</filter>
+<filter id="filter1_d_1289_51614" x="563.5" y="-16.5" width="637.393" height="405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="16"/>
+<feGaussianBlur stdDeviation="16"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.215686 0 0 0 0 0.231373 0 0 0 0 0.301961 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1289_51614"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1289_51614" result="shape"/>
+</filter>
+<filter id="filter2_d_1289_51614" x="636.104" y="102.5" width="538.369" height="221.805" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="15"/>
+<feGaussianBlur stdDeviation="19"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.941176 0 0 0 0 0.180392 0 0 0 0 0.396078 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1289_51614"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1289_51614" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_1289_51614" x1="628" y1="38" x2="712" y2="38" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#E8E9F0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1289_51614" x1="1107" y1="39" x2="1150" y2="39.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#E8E9F0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1289_51614" x1="30" y1="38" x2="114" y2="38" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#E8E9F0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1289_51614" x1="509" y1="39" x2="552" y2="39.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#E8E9F0" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint4_radial_1289_51614" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1138.42 170) rotate(180) scale(1121.88 7506.07)">
+<stop stop-color="#FCFCFF" stop-opacity="0.5"/>
+<stop offset="0.220284" stop-color="white" stop-opacity="0.9"/>
+<stop offset="0.489583" stop-color="white"/>
+<stop offset="0.756132" stop-color="white" stop-opacity="0.9"/>
+<stop offset="0.926183" stop-color="#FDFDFF" stop-opacity="0.621077"/>
+<stop offset="1" stop-color="#FCFCFF" stop-opacity="0.5"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/src/routes/console/project-[project]/overview/onboard-2-dark.svg b/src/routes/console/project-[project]/overview/onboard-2-dark.svg
new file mode 100644
index 000000000..6f455a628
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/onboard-2-dark.svg
@@ -0,0 +1,178 @@
+<svg width="1173" height="390" viewBox="0 0 1173 390" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1297_52065)">
+<rect x="796" y="2" width="374" height="340" rx="16" fill="#1B1B28"/>
+<rect x="796" y="2" width="374" height="340" rx="16" stroke="#282A3B"/>
+</g>
+<path d="M830.138 135.958V135.191L833.018 132.038C833.357 131.668 833.635 131.347 833.854 131.074C834.072 130.799 834.234 130.54 834.339 130.299C834.447 130.055 834.501 129.799 834.501 129.532C834.501 129.225 834.428 128.959 834.28 128.735C834.135 128.511 833.936 128.337 833.683 128.215C833.43 128.093 833.146 128.032 832.831 128.032C832.496 128.032 832.203 128.101 831.953 128.241C831.706 128.377 831.514 128.569 831.378 128.816C831.244 129.063 831.178 129.353 831.178 129.685H830.172C830.172 129.174 830.29 128.725 830.526 128.339C830.761 127.952 831.082 127.651 831.489 127.435C831.898 127.219 832.357 127.111 832.865 127.111C833.376 127.111 833.83 127.219 834.224 127.435C834.619 127.651 834.929 127.942 835.153 128.309C835.378 128.675 835.49 129.083 835.49 129.532C835.49 129.853 835.432 130.167 835.315 130.474C835.202 130.778 835.003 131.117 834.719 131.492C834.438 131.864 834.047 132.319 833.547 132.856L831.587 134.952V135.021H835.643V135.958H830.138ZM840.25 136.077C839.608 136.077 839.061 135.903 838.609 135.553C838.158 135.201 837.813 134.691 837.574 134.023C837.335 133.353 837.216 132.543 837.216 131.594C837.216 130.651 837.335 129.846 837.574 129.178C837.815 128.508 838.162 127.996 838.614 127.644C839.068 127.289 839.614 127.111 840.25 127.111C840.886 127.111 841.43 127.289 841.882 127.644C842.337 127.996 842.683 128.508 842.922 129.178C843.163 129.846 843.284 130.651 843.284 131.594C843.284 132.543 843.165 133.353 842.926 134.023C842.688 134.691 842.342 135.201 841.891 135.553C841.439 135.903 840.892 136.077 840.25 136.077ZM840.25 135.14C840.886 135.14 841.381 134.833 841.733 134.219C842.085 133.606 842.261 132.731 842.261 131.594C842.261 130.839 842.18 130.195 842.018 129.664C841.859 129.133 841.629 128.728 841.328 128.449C841.03 128.171 840.67 128.032 840.25 128.032C839.619 128.032 839.126 128.343 838.771 128.965C838.416 129.584 838.239 130.461 838.239 131.594C838.239 132.35 838.318 132.992 838.477 133.521C838.636 134.049 838.865 134.451 839.163 134.726C839.464 135.002 839.827 135.14 840.25 135.14Z" fill="#868EA3"/>
+<line x1="860" y1="131.708" x2="1138" y2="131.708" stroke="#868EA3" stroke-width="0.5"/>
+<path d="M835.093 165.003V173.731H834.036V166.111H833.985L831.854 167.526V166.452L834.036 165.003H835.093ZM840.33 173.85C839.83 173.85 839.38 173.751 838.979 173.552C838.578 173.353 838.257 173.08 838.016 172.734C837.775 172.387 837.642 171.992 837.62 171.549H838.642C838.682 171.944 838.861 172.27 839.179 172.529C839.5 172.785 839.884 172.913 840.33 172.913C840.688 172.913 841.006 172.829 841.284 172.661C841.566 172.493 841.786 172.263 841.945 171.971C842.107 171.675 842.188 171.342 842.188 170.969C842.188 170.589 842.104 170.249 841.936 169.951C841.772 169.65 841.544 169.413 841.255 169.239C840.965 169.066 840.634 168.978 840.262 168.975C839.995 168.972 839.721 169.013 839.439 169.099C839.158 169.181 838.926 169.288 838.745 169.418L837.756 169.299L838.284 165.003H842.819V165.941H839.171L838.864 168.515H838.915C839.094 168.373 839.319 168.255 839.588 168.161C839.858 168.067 840.14 168.02 840.432 168.02C840.966 168.02 841.442 168.148 841.86 168.404C842.28 168.657 842.61 169.003 842.848 169.444C843.09 169.884 843.211 170.387 843.211 170.952C843.211 171.509 843.086 172.006 842.836 172.444C842.588 172.878 842.248 173.222 841.813 173.475C841.378 173.725 840.884 173.85 840.33 173.85Z" fill="#868EA3"/>
+<line x1="860" y1="169.481" x2="1138" y2="169.481" stroke="#868EA3" stroke-width="0.5"/>
+<path d="M834.893 203.77V212.497H833.837V204.878H833.786L831.655 206.293V205.219L833.837 203.77H834.893ZM840.25 212.616C839.608 212.616 839.061 212.442 838.609 212.092C838.158 211.74 837.813 211.23 837.574 210.562C837.335 209.892 837.216 209.082 837.216 208.133C837.216 207.19 837.335 206.385 837.574 205.717C837.815 205.047 838.162 204.535 838.614 204.183C839.068 203.828 839.614 203.65 840.25 203.65C840.886 203.65 841.43 203.828 841.882 204.183C842.337 204.535 842.683 205.047 842.922 205.717C843.163 206.385 843.284 207.19 843.284 208.133C843.284 209.082 843.165 209.892 842.926 210.562C842.688 211.23 842.342 211.74 841.891 212.092C841.439 212.442 840.892 212.616 840.25 212.616ZM840.25 211.679C840.886 211.679 841.381 211.372 841.733 210.758C842.085 210.145 842.261 209.27 842.261 208.133C842.261 207.378 842.18 206.734 842.018 206.203C841.859 205.672 841.629 205.267 841.328 204.989C841.03 204.71 840.67 204.571 840.25 204.571C839.619 204.571 839.126 204.882 838.771 205.504C838.416 206.123 838.239 207 838.239 208.133C838.239 208.889 838.318 209.531 838.477 210.06C838.636 210.588 838.865 210.99 839.163 211.266C839.464 211.541 839.827 211.679 840.25 211.679Z" fill="#868EA3"/>
+<line x1="860" y1="208.247" x2="1138" y2="208.247" stroke="#868EA3" stroke-width="0.5"/>
+<path d="M840.33 250.389C839.83 250.389 839.38 250.29 838.979 250.091C838.578 249.892 838.257 249.619 838.016 249.273C837.775 248.926 837.642 248.531 837.62 248.088H838.642C838.682 248.483 838.861 248.81 839.179 249.068C839.5 249.324 839.884 249.452 840.33 249.452C840.688 249.452 841.006 249.368 841.284 249.2C841.566 249.033 841.786 248.802 841.945 248.51C842.107 248.214 842.188 247.881 842.188 247.508C842.188 247.128 842.104 246.788 841.936 246.49C841.772 246.189 841.544 245.952 841.255 245.778C840.965 245.605 840.634 245.517 840.262 245.514C839.995 245.511 839.721 245.552 839.439 245.638C839.158 245.72 838.926 245.827 838.745 245.957L837.756 245.838L838.284 241.543H842.819V242.48H839.171L838.864 245.054H838.915C839.094 244.912 839.319 244.794 839.588 244.7C839.858 244.606 840.14 244.56 840.432 244.56C840.966 244.56 841.442 244.687 841.86 244.943C842.28 245.196 842.61 245.543 842.848 245.983C843.09 246.423 843.211 246.926 843.211 247.491C843.211 248.048 843.086 248.545 842.836 248.983C842.588 249.418 842.248 249.761 841.813 250.014C841.378 250.264 840.884 250.389 840.33 250.389Z" fill="#868EA3"/>
+<line x1="860" y1="246.02" x2="1138" y2="246.02" stroke="#868EA3" stroke-width="0.5"/>
+<path d="M840.25 288.161C839.608 288.161 839.061 287.987 838.609 287.637C838.158 287.285 837.813 286.775 837.574 286.107C837.335 285.437 837.216 284.627 837.216 283.678C837.216 282.735 837.335 281.93 837.574 281.262C837.815 280.592 838.162 280.08 838.614 279.728C839.068 279.373 839.614 279.195 840.25 279.195C840.886 279.195 841.43 279.373 841.882 279.728C842.337 280.08 842.683 280.592 842.922 281.262C843.163 281.93 843.284 282.735 843.284 283.678C843.284 284.627 843.165 285.437 842.926 286.107C842.688 286.775 842.342 287.285 841.891 287.637C841.439 287.987 840.892 288.161 840.25 288.161ZM840.25 287.224C840.886 287.224 841.381 286.917 841.733 286.303C842.085 285.69 842.261 284.815 842.261 283.678C842.261 282.923 842.18 282.279 842.018 281.748C841.859 281.217 841.629 280.812 841.328 280.533C841.03 280.255 840.67 280.116 840.25 280.116C839.619 280.116 839.126 280.427 838.771 281.049C838.416 281.668 838.239 282.545 838.239 283.678C838.239 284.434 838.318 285.076 838.477 285.604C838.636 286.133 838.865 286.535 839.163 286.81C839.464 287.086 839.827 287.224 840.25 287.224Z" fill="#868EA3"/>
+<line x1="860" y1="283.792" x2="1138" y2="283.792" stroke="#868EA3" stroke-width="0.5"/>
+<g filter="url(#filter1_d_1297_52065)">
+<rect x="2" y="185" width="372" height="160" rx="16" fill="#1B1B28"/>
+<rect x="2" y="185" width="372" height="160" rx="16" stroke="#282A3B"/>
+</g>
+<rect x="34" y="285" width="92" height="12" rx="6" fill="url(#paint0_linear_1297_52065)"/>
+<rect x="34" y="305" width="40" height="8" rx="4" fill="url(#paint1_linear_1297_52065)"/>
+<rect x="302" y="305" width="40" height="8" rx="4" fill="url(#paint2_linear_1297_52065)"/>
+<path d="M60.0391 231H58.6414L61.782 222.273H63.3034L66.444 231H65.0462L62.5789 223.858H62.5107L60.0391 231ZM60.2735 227.582H64.8076V228.69H60.2735V227.582ZM74.7565 222.273H76.0775V228.013C76.0775 228.624 75.934 229.165 75.6471 229.636C75.3602 230.105 74.9568 230.474 74.4369 230.744C73.917 231.011 73.3076 231.145 72.6088 231.145C71.9127 231.145 71.3048 231.011 70.7849 230.744C70.265 230.474 69.8616 230.105 69.5747 229.636C69.2877 229.165 69.1443 228.624 69.1443 228.013V222.273H70.461V227.906C70.461 228.301 70.5477 228.652 70.721 228.959C70.8971 229.266 71.1457 229.507 71.4667 229.683C71.7877 229.857 72.1684 229.943 72.6088 229.943C73.0519 229.943 73.434 229.857 73.7551 229.683C74.0789 229.507 74.3261 229.266 74.4965 228.959C74.6698 228.652 74.7565 228.301 74.7565 227.906V222.273ZM79.0015 223.406V222.273H85.7558V223.406H83.0328V231H81.7203V223.406H79.0015ZM88.6883 231V222.273H90.0051V226.065H94.356V222.273H95.677V231H94.356V227.195H90.0051V231H88.6883ZM99.0346 231V222.273H104.506V223.406H100.351V226.065H104.221V227.195H100.351V229.866H104.557V231H99.0346ZM114.749 222.273V231H113.539L109.103 224.599H109.022V231H107.705V222.273H108.924L113.364 228.682H113.445V222.273H114.749ZM117.68 223.406V222.273H124.434V223.406H121.711V231H120.398V223.406H117.68ZM128.683 222.273V231H127.366V222.273H128.683ZM139.289 225.111H137.96C137.909 224.827 137.813 224.577 137.674 224.361C137.535 224.145 137.365 223.962 137.163 223.811C136.961 223.661 136.735 223.547 136.485 223.47C136.238 223.393 135.975 223.355 135.697 223.355C135.194 223.355 134.744 223.482 134.346 223.734C133.951 223.987 133.639 224.358 133.409 224.847C133.181 225.335 133.068 225.932 133.068 226.636C133.068 227.347 133.181 227.946 133.409 228.435C133.639 228.923 133.953 229.293 134.35 229.543C134.748 229.793 135.196 229.918 135.693 229.918C135.968 229.918 136.23 229.881 136.477 229.807C136.727 229.73 136.953 229.618 137.154 229.47C137.356 229.322 137.526 229.142 137.666 228.929C137.808 228.713 137.906 228.466 137.96 228.188L139.289 228.192C139.218 228.621 139.08 229.016 138.876 229.376C138.674 229.734 138.414 230.044 138.096 230.305C137.781 230.564 137.42 230.764 137.014 230.906C136.607 231.048 136.164 231.119 135.684 231.119C134.928 231.119 134.255 230.94 133.664 230.582C133.073 230.222 132.607 229.706 132.267 229.036C131.928 228.365 131.759 227.565 131.759 226.636C131.759 225.705 131.93 224.905 132.271 224.237C132.612 223.567 133.078 223.053 133.669 222.695C134.259 222.334 134.931 222.153 135.684 222.153C136.147 222.153 136.579 222.22 136.98 222.354C137.383 222.484 137.745 222.678 138.066 222.933C138.387 223.186 138.653 223.496 138.863 223.862C139.073 224.226 139.215 224.642 139.289 225.111ZM142.984 231H141.586L144.726 222.273H146.248L149.388 231H147.991L145.523 223.858H145.455L142.984 231ZM143.218 227.582H147.752V228.69H143.218V227.582ZM150.627 223.406V222.273H157.381V223.406H154.658V231H153.346V223.406H150.627ZM161.631 222.273V231H160.314V222.273H161.631ZM172.569 226.636C172.569 227.568 172.399 228.369 172.058 229.04C171.717 229.707 171.25 230.222 170.656 230.582C170.065 230.94 169.393 231.119 168.64 231.119C167.884 231.119 167.21 230.94 166.616 230.582C166.025 230.222 165.559 229.706 165.218 229.036C164.877 228.365 164.707 227.565 164.707 226.636C164.707 225.705 164.877 224.905 165.218 224.237C165.559 223.567 166.025 223.053 166.616 222.695C167.21 222.334 167.884 222.153 168.64 222.153C169.393 222.153 170.065 222.334 170.656 222.695C171.25 223.053 171.717 223.567 172.058 224.237C172.399 224.905 172.569 225.705 172.569 226.636ZM171.265 226.636C171.265 225.926 171.15 225.328 170.92 224.842C170.693 224.354 170.38 223.984 169.982 223.734C169.588 223.482 169.14 223.355 168.64 223.355C168.137 223.355 167.688 223.482 167.294 223.734C166.899 223.984 166.586 224.354 166.356 224.842C166.129 225.328 166.015 225.926 166.015 226.636C166.015 227.347 166.129 227.946 166.356 228.435C166.586 228.92 166.899 229.29 167.294 229.543C167.688 229.793 168.137 229.918 168.64 229.918C169.14 229.918 169.588 229.793 169.982 229.543C170.38 229.29 170.693 228.92 170.92 228.435C171.15 227.946 171.265 227.347 171.265 226.636ZM182.695 222.273V231H181.485L177.049 224.599H176.968V231H175.651V222.273H176.87L181.31 228.682H181.391V222.273H182.695Z" fill="#4F5769"/>
+<g filter="url(#filter2_d_1297_52065)">
+<rect x="399" y="185" width="372" height="160" rx="16" fill="#1B1B28"/>
+<rect x="399" y="185" width="372" height="160" rx="16" stroke="#282A3B"/>
+</g>
+<rect x="431" y="285" width="92" height="12" rx="6" fill="url(#paint3_linear_1297_52065)"/>
+<rect x="431" y="305" width="40" height="8" rx="4" fill="url(#paint4_linear_1297_52065)"/>
+<rect x="699" y="305" width="40" height="8" rx="4" fill="url(#paint5_linear_1297_52065)"/>
+<path d="M456.384 230V221.273H461.796V222.406H457.701V225.065H461.408V226.195H457.701V230H456.384ZM470.468 221.273H471.789V227.013C471.789 227.624 471.645 228.165 471.358 228.636C471.072 229.105 470.668 229.474 470.148 229.744C469.628 230.011 469.019 230.145 468.32 230.145C467.624 230.145 467.016 230.011 466.496 229.744C465.976 229.474 465.573 229.105 465.286 228.636C464.999 228.165 464.856 227.624 464.856 227.013V221.273H466.172V226.906C466.172 227.301 466.259 227.652 466.432 227.959C466.608 228.266 466.857 228.507 467.178 228.683C467.499 228.857 467.88 228.943 468.32 228.943C468.763 228.943 469.145 228.857 469.466 228.683C469.79 228.507 470.037 228.266 470.208 227.959C470.381 227.652 470.468 227.301 470.468 226.906V221.273ZM482.187 221.273V230H480.977L476.541 223.599H476.46V230H475.143V221.273H476.362L480.802 227.682H480.883V221.273H482.187ZM492.797 224.111H491.467C491.416 223.827 491.321 223.577 491.182 223.361C491.042 223.145 490.872 222.962 490.67 222.811C490.469 222.661 490.243 222.547 489.993 222.47C489.746 222.393 489.483 222.355 489.204 222.355C488.702 222.355 488.251 222.482 487.853 222.734C487.459 222.987 487.146 223.358 486.916 223.847C486.689 224.335 486.575 224.932 486.575 225.636C486.575 226.347 486.689 226.946 486.916 227.435C487.146 227.923 487.46 228.293 487.858 228.543C488.255 228.793 488.703 228.918 489.2 228.918C489.476 228.918 489.737 228.881 489.984 228.807C490.234 228.73 490.46 228.618 490.662 228.47C490.863 228.322 491.034 228.142 491.173 227.929C491.315 227.713 491.413 227.466 491.467 227.188L492.797 227.192C492.726 227.621 492.588 228.016 492.383 228.376C492.182 228.734 491.922 229.044 491.603 229.305C491.288 229.564 490.927 229.764 490.521 229.906C490.115 230.048 489.672 230.119 489.192 230.119C488.436 230.119 487.763 229.94 487.172 229.582C486.581 229.222 486.115 228.706 485.774 228.036C485.436 227.365 485.267 226.565 485.267 225.636C485.267 224.705 485.437 223.905 485.778 223.237C486.119 222.567 486.585 222.053 487.176 221.695C487.767 221.334 488.439 221.153 489.192 221.153C489.655 221.153 490.086 221.22 490.487 221.354C490.89 221.484 491.253 221.678 491.574 221.933C491.895 222.186 492.16 222.496 492.371 222.862C492.581 223.226 492.723 223.642 492.797 224.111ZM495.382 222.406V221.273H502.136V222.406H499.413V230H498.101V222.406H495.382ZM506.385 221.273V230H505.069V221.273H506.385ZM517.324 225.636C517.324 226.568 517.154 227.369 516.813 228.04C516.472 228.707 516.004 229.222 515.411 229.582C514.82 229.94 514.148 230.119 513.395 230.119C512.639 230.119 511.965 229.94 511.371 229.582C510.78 229.222 510.314 228.706 509.973 228.036C509.632 227.365 509.462 226.565 509.462 225.636C509.462 224.705 509.632 223.905 509.973 223.237C510.314 222.567 510.78 222.053 511.371 221.695C511.965 221.334 512.639 221.153 513.395 221.153C514.148 221.153 514.82 221.334 515.411 221.695C516.004 222.053 516.472 222.567 516.813 223.237C517.154 223.905 517.324 224.705 517.324 225.636ZM516.02 225.636C516.02 224.926 515.905 224.328 515.675 223.842C515.448 223.354 515.135 222.984 514.737 222.734C514.343 222.482 513.895 222.355 513.395 222.355C512.892 222.355 512.443 222.482 512.048 222.734C511.654 222.984 511.341 223.354 511.111 223.842C510.884 224.328 510.77 224.926 510.77 225.636C510.77 226.347 510.884 226.946 511.111 227.435C511.341 227.92 511.654 228.29 512.048 228.543C512.443 228.793 512.892 228.918 513.395 228.918C513.895 228.918 514.343 228.793 514.737 228.543C515.135 228.29 515.448 227.92 515.675 227.435C515.905 226.946 516.02 226.347 516.02 225.636ZM527.45 221.273V230H526.24L521.803 223.599H521.723V230H520.406V221.273H521.625L526.065 227.682H526.146V221.273H527.45ZM535.571 223.565C535.525 223.162 535.338 222.849 535.008 222.628C534.679 222.403 534.264 222.291 533.764 222.291C533.406 222.291 533.096 222.348 532.835 222.462C532.573 222.572 532.37 222.726 532.225 222.922C532.083 223.115 532.012 223.335 532.012 223.582C532.012 223.79 532.061 223.969 532.157 224.119C532.257 224.27 532.386 224.396 532.545 224.499C532.707 224.598 532.88 224.682 533.065 224.75C533.25 224.815 533.427 224.869 533.598 224.912L534.45 225.134C534.728 225.202 535.014 225.294 535.306 225.411C535.599 225.527 535.87 225.68 536.12 225.871C536.37 226.061 536.572 226.297 536.725 226.578C536.882 226.859 536.96 227.196 536.96 227.588C536.96 228.082 536.832 228.521 536.576 228.905C536.323 229.288 535.955 229.591 535.473 229.812C534.992 230.034 534.411 230.145 533.73 230.145C533.076 230.145 532.511 230.041 532.034 229.834C531.556 229.626 531.183 229.332 530.913 228.952C530.643 228.568 530.494 228.114 530.465 227.588H531.786C531.812 227.903 531.914 228.166 532.093 228.376C532.275 228.584 532.507 228.739 532.788 228.841C533.072 228.94 533.383 228.99 533.721 228.99C534.093 228.99 534.424 228.932 534.714 228.815C535.007 228.696 535.237 228.531 535.404 228.321C535.572 228.108 535.656 227.859 535.656 227.575C535.656 227.317 535.582 227.105 535.434 226.94C535.289 226.776 535.092 226.639 534.842 226.531C534.595 226.423 534.315 226.328 534.002 226.246L532.971 225.964C532.272 225.774 531.718 225.494 531.309 225.125C530.903 224.756 530.7 224.267 530.7 223.659C530.7 223.156 530.836 222.717 531.109 222.342C531.382 221.967 531.751 221.676 532.217 221.469C532.683 221.259 533.208 221.153 533.794 221.153C534.384 221.153 534.906 221.257 535.357 221.464C535.812 221.672 536.17 221.957 536.431 222.321C536.693 222.682 536.829 223.097 536.84 223.565H535.571Z" fill="#4F5769"/>
+<g filter="url(#filter3_d_1297_52065)">
+<rect x="2" y="2" width="372" height="160" rx="16" fill="#1B1B28"/>
+<rect x="2" y="2" width="372" height="160" rx="16" stroke="#282A3B"/>
+</g>
+<path d="M66.2832 47H63.4579V38.2727H66.3726C67.2278 38.2727 67.9621 38.4474 68.5758 38.7969C69.1894 39.1435 69.6596 39.642 69.9863 40.2926C70.3158 40.9403 70.4806 41.7173 70.4806 42.6236C70.4806 43.5327 70.3144 44.3139 69.982 44.9673C69.6525 45.6207 69.1752 46.1236 68.5502 46.4759C67.9252 46.8253 67.1695 47 66.2832 47ZM64.7746 45.8494H66.2107C66.8755 45.8494 67.428 45.7244 67.8684 45.4744C68.3087 45.2216 68.6383 44.8565 68.857 44.3793C69.0758 43.8991 69.1851 43.3139 69.1851 42.6236C69.1851 41.9389 69.0758 41.358 68.857 40.8807C68.6411 40.4034 68.3187 40.0412 67.8897 39.794C67.4607 39.5469 66.928 39.4233 66.2917 39.4233H64.7746V45.8494ZM73.8616 47H72.4639L75.6045 38.2727H77.1259L80.2665 47H78.8687L76.4014 39.858H76.3332L73.8616 47ZM74.096 43.5824H78.6301V44.6903H74.096V43.5824ZM81.5051 39.4062V38.2727H88.2594V39.4062H85.5364V47H84.2239V39.4062H81.5051ZM90.8979 47H89.5002L92.6408 38.2727H94.1621L97.3027 47H95.905L93.4377 39.858H93.3695L90.8979 47ZM91.1323 43.5824H95.6664V44.6903H91.1323V43.5824ZM100.003 47V38.2727H103.199C103.818 38.2727 104.331 38.375 104.737 38.5795C105.144 38.7812 105.448 39.0554 105.649 39.402C105.851 39.7457 105.952 40.1335 105.952 40.5653C105.952 40.929 105.885 41.2358 105.752 41.4858C105.618 41.733 105.439 41.9318 105.215 42.0824C104.993 42.2301 104.749 42.3381 104.482 42.4062V42.4915C104.771 42.5057 105.054 42.5994 105.33 42.7727C105.608 42.9432 105.838 43.1861 106.02 43.5014C106.202 43.8168 106.293 44.2003 106.293 44.652C106.293 45.098 106.188 45.4986 105.977 45.8537C105.77 46.206 105.449 46.4858 105.014 46.6932C104.58 46.8977 104.024 47 103.348 47H100.003ZM101.32 45.8707H103.22C103.851 45.8707 104.303 45.7486 104.575 45.5043C104.848 45.2599 104.985 44.9545 104.985 44.5881C104.985 44.3125 104.915 44.0597 104.776 43.8295C104.637 43.5994 104.438 43.4162 104.179 43.2798C103.923 43.1435 103.62 43.0753 103.267 43.0753H101.32V45.8707ZM101.32 42.0483H103.084C103.379 42.0483 103.645 41.9915 103.881 41.8778C104.12 41.7642 104.308 41.6051 104.448 41.4006C104.59 41.1932 104.661 40.9489 104.661 40.6676C104.661 40.3068 104.534 40.0043 104.281 39.7599C104.029 39.5156 103.641 39.3935 103.118 39.3935H101.32V42.0483ZM110.032 47H108.634L111.775 38.2727H113.296L116.437 47H115.039L112.572 39.858H112.503L110.032 47ZM110.266 43.5824H114.8V44.6903H110.266V43.5824ZM123.827 40.5653C123.781 40.1619 123.594 39.8494 123.264 39.6278C122.935 39.4034 122.52 39.2912 122.02 39.2912C121.662 39.2912 121.352 39.348 121.091 39.4616C120.829 39.5724 120.626 39.7259 120.481 39.9219C120.339 40.1151 120.268 40.3352 120.268 40.5824C120.268 40.7898 120.317 40.9687 120.413 41.1193C120.513 41.2699 120.642 41.3963 120.801 41.4986C120.963 41.598 121.136 41.6818 121.321 41.75C121.506 41.8153 121.683 41.8693 121.854 41.9119L122.706 42.1335C122.984 42.2017 123.27 42.294 123.562 42.4105C123.855 42.527 124.126 42.6804 124.376 42.8707C124.626 43.0611 124.828 43.2969 124.981 43.5781C125.138 43.8594 125.216 44.196 125.216 44.5881C125.216 45.0824 125.088 45.5213 124.832 45.9048C124.579 46.2884 124.212 46.5909 123.729 46.8125C123.248 47.0341 122.667 47.1449 121.986 47.1449C121.332 47.1449 120.767 47.0412 120.29 46.8338C119.812 46.6264 119.439 46.3324 119.169 45.9517C118.899 45.5682 118.75 45.1136 118.721 44.5881H120.042C120.068 44.9034 120.17 45.1662 120.349 45.3764C120.531 45.5838 120.763 45.7386 121.044 45.8409C121.328 45.9403 121.639 45.9901 121.977 45.9901C122.349 45.9901 122.68 45.9318 122.97 45.8153C123.263 45.696 123.493 45.5312 123.66 45.321C123.828 45.108 123.912 44.8594 123.912 44.5753C123.912 44.3168 123.838 44.1051 123.69 43.9403C123.545 43.7756 123.348 43.6392 123.098 43.5312C122.851 43.4233 122.571 43.3281 122.258 43.2457L121.227 42.9645C120.528 42.7741 119.974 42.4943 119.565 42.125C119.159 41.7557 118.956 41.267 118.956 40.6591C118.956 40.1562 119.092 39.7173 119.365 39.3423C119.638 38.9673 120.007 38.6761 120.473 38.4688C120.939 38.2585 121.464 38.1534 122.05 38.1534C122.64 38.1534 123.162 38.2571 123.613 38.4645C124.068 38.6719 124.426 38.9574 124.687 39.321C124.949 39.6818 125.085 40.0966 125.096 40.5653H123.827ZM128.229 47V38.2727H133.701V39.4062H129.546V42.0653H133.415V43.1946H129.546V45.8665H133.752V47H128.229Z" fill="#4F5769"/>
+<g filter="url(#filter4_d_1297_52065)">
+<rect x="399" y="2" width="372" height="160" rx="16" fill="#1B1B28"/>
+<rect x="399" y="2" width="372" height="160" rx="16" stroke="#282A3B"/>
+</g>
+<rect x="431" y="101" width="92" height="12" rx="6" fill="url(#paint6_linear_1297_52065)"/>
+<rect x="431" y="121" width="40" height="8" rx="4" fill="url(#paint7_linear_1297_52065)"/>
+<rect x="699" y="121" width="40" height="8" rx="4" fill="url(#paint8_linear_1297_52065)"/>
+<path d="M432.6 39.8001C432.6 38.9164 433.316 38.2001 434.2 38.2001H438.2L439.8 39.8001H443.8C444.684 39.8001 445.4 40.5164 445.4 41.4001V46.2001C445.4 47.0837 444.684 47.8001 443.8 47.8001H434.2C433.316 47.8001 432.6 47.0837 432.6 46.2001V39.8001Z" fill="#4F5769"/>
+<path d="M460.733 40.5653C460.687 40.1619 460.5 39.8494 460.17 39.6278C459.841 39.4034 459.426 39.2912 458.926 39.2912C458.568 39.2912 458.258 39.348 457.997 39.4616C457.736 39.5724 457.532 39.7259 457.388 39.9219C457.246 40.1151 457.174 40.3352 457.174 40.5824C457.174 40.7898 457.223 40.9687 457.319 41.1193C457.419 41.2699 457.548 41.3963 457.707 41.4986C457.869 41.598 458.042 41.6818 458.227 41.75C458.412 41.8153 458.589 41.8693 458.76 41.9119L459.612 42.1335C459.89 42.2017 460.176 42.294 460.469 42.4105C460.761 42.527 461.032 42.6804 461.282 42.8707C461.532 43.0611 461.734 43.2969 461.888 43.5781C462.044 43.8594 462.122 44.196 462.122 44.5881C462.122 45.0824 461.994 45.5213 461.738 45.9048C461.486 46.2884 461.118 46.5909 460.635 46.8125C460.155 47.0341 459.574 47.1449 458.892 47.1449C458.238 47.1449 457.673 47.0412 457.196 46.8338C456.719 46.6264 456.345 46.3324 456.075 45.9517C455.805 45.5682 455.656 45.1136 455.628 44.5881H456.949C456.974 44.9034 457.076 45.1662 457.255 45.3764C457.437 45.5838 457.669 45.7386 457.95 45.8409C458.234 45.9403 458.545 45.9901 458.883 45.9901C459.255 45.9901 459.586 45.9318 459.876 45.8153C460.169 45.696 460.399 45.5312 460.567 45.321C460.734 45.108 460.818 44.8594 460.818 44.5753C460.818 44.3168 460.744 44.1051 460.596 43.9403C460.451 43.7756 460.254 43.6392 460.004 43.5312C459.757 43.4233 459.477 43.3281 459.165 43.2457L458.133 42.9645C457.434 42.7741 456.88 42.4943 456.471 42.125C456.065 41.7557 455.862 41.267 455.862 40.6591C455.862 40.1562 455.998 39.7173 456.271 39.3423C456.544 38.9673 456.913 38.6761 457.379 38.4688C457.845 38.2585 458.371 38.1534 458.956 38.1534C459.547 38.1534 460.068 38.2571 460.52 38.4645C460.974 38.6719 461.332 38.9574 461.594 39.321C461.855 39.6818 461.991 40.0966 462.003 40.5653H460.733ZM464.705 39.4062V38.2727H471.459V39.4062H468.736V47H467.424V39.4062H464.705ZM481.598 42.6364C481.598 43.5682 481.427 44.3693 481.086 45.0398C480.746 45.7074 480.278 46.2216 479.684 46.5824C479.094 46.9403 478.422 47.1193 477.669 47.1193C476.913 47.1193 476.238 46.9403 475.645 46.5824C475.054 46.2216 474.588 45.706 474.247 45.0355C473.906 44.3651 473.736 43.5653 473.736 42.6364C473.736 41.7045 473.906 40.9048 474.247 40.2372C474.588 39.5668 475.054 39.0526 475.645 38.6946C476.238 38.3338 476.913 38.1534 477.669 38.1534C478.422 38.1534 479.094 38.3338 479.684 38.6946C480.278 39.0526 480.746 39.5668 481.086 40.2372C481.427 40.9048 481.598 41.7045 481.598 42.6364ZM480.294 42.6364C480.294 41.9261 480.179 41.3281 479.949 40.8423C479.721 40.3537 479.409 39.9844 479.011 39.7344C478.616 39.4815 478.169 39.3551 477.669 39.3551C477.166 39.3551 476.717 39.4815 476.322 39.7344C475.927 39.9844 475.615 40.3537 475.385 40.8423C475.157 41.3281 475.044 41.9261 475.044 42.6364C475.044 43.3466 475.157 43.946 475.385 44.4347C475.615 44.9205 475.927 45.2898 476.322 45.5426C476.717 45.7926 477.166 45.9176 477.669 45.9176C478.169 45.9176 478.616 45.7926 479.011 45.5426C479.409 45.2898 479.721 44.9205 479.949 44.4347C480.179 43.946 480.294 43.3466 480.294 42.6364ZM484.68 47V38.2727H487.79C488.466 38.2727 489.028 38.3892 489.474 38.6222C489.922 38.8551 490.258 39.1776 490.479 39.5895C490.701 39.9986 490.812 40.4716 490.812 41.0085C490.812 41.5426 490.699 42.0128 490.475 42.419C490.253 42.8224 489.918 43.1364 489.469 43.3608C489.023 43.5852 488.462 43.6974 487.786 43.6974H485.43V42.5639H487.667C488.093 42.5639 488.439 42.5028 488.706 42.3807C488.976 42.2585 489.174 42.081 489.299 41.848C489.424 41.6151 489.486 41.3352 489.486 41.0085C489.486 40.679 489.422 40.3935 489.295 40.152C489.17 39.9105 488.972 39.7259 488.702 39.598C488.435 39.4673 488.084 39.402 487.65 39.402H485.996V47H484.68ZM488.988 43.0625L491.144 47H489.644L487.53 43.0625H488.988ZM494.591 47H493.193L496.334 38.2727H497.855L500.996 47H499.598L497.131 39.858H497.063L494.591 47ZM494.825 43.5824H499.36V44.6903H494.825V43.5824ZM509.192 41.0298C509.11 40.7713 508.999 40.5398 508.86 40.3352C508.724 40.1278 508.56 39.9517 508.37 39.8068C508.18 39.6591 507.962 39.5469 507.718 39.4702C507.476 39.3935 507.211 39.3551 506.921 39.3551C506.43 39.3551 505.986 39.4815 505.591 39.7344C505.197 39.9872 504.884 40.358 504.654 40.8466C504.427 41.3324 504.313 41.9276 504.313 42.6321C504.313 43.3395 504.428 43.9375 504.658 44.4261C504.888 44.9148 505.204 45.2855 505.604 45.5384C506.005 45.7912 506.461 45.9176 506.972 45.9176C507.447 45.9176 507.86 45.821 508.212 45.6278C508.567 45.4347 508.841 45.1619 509.035 44.8097C509.231 44.4545 509.329 44.0369 509.329 43.5568L509.67 43.6207H507.172V42.5341H510.603V43.527C510.603 44.2599 510.447 44.8963 510.134 45.4361C509.824 45.973 509.395 46.3878 508.847 46.6804C508.302 46.973 507.677 47.1193 506.972 47.1193C506.182 47.1193 505.489 46.9375 504.893 46.5739C504.299 46.2102 503.836 45.6946 503.503 45.027C503.171 44.3565 503.005 43.5611 503.005 42.6406C503.005 41.9446 503.101 41.3196 503.295 40.7656C503.488 40.2116 503.759 39.7415 504.109 39.3551C504.461 38.9659 504.874 38.669 505.349 38.4645C505.826 38.2571 506.347 38.1534 506.912 38.1534C507.384 38.1534 507.823 38.223 508.229 38.3622C508.638 38.5014 509.002 38.6989 509.32 38.9545C509.641 39.2102 509.907 39.5142 510.117 39.8665C510.327 40.2159 510.469 40.6037 510.543 41.0298H509.192ZM513.714 47V38.2727H519.186V39.4062H515.031V42.0653H518.9V43.1946H515.031V45.8665H519.237V47H513.714Z" fill="#4F5769"/>
+<path d="M36.3999 43.6V46C36.3999 47.3255 38.9071 48.4 41.9999 48.4C45.0927 48.4 47.5999 47.3255 47.5999 46V43.6C47.5999 44.9255 45.0927 46 41.9999 46C38.9071 46 36.3999 44.9255 36.3999 43.6Z" fill="#4F5769"/>
+<path d="M36.3999 39.6V42C36.3999 43.3255 38.9071 44.4 41.9999 44.4C45.0927 44.4 47.5999 43.3255 47.5999 42V39.6C47.5999 40.9255 45.0927 42 41.9999 42C38.9071 42 36.3999 40.9255 36.3999 39.6Z" fill="#4F5769"/>
+<path d="M47.5999 38C47.5999 39.3255 45.0927 40.4 41.9999 40.4C38.9071 40.4 36.3999 39.3255 36.3999 38C36.3999 36.6745 38.9071 35.6 41.9999 35.6C45.0927 35.6 47.5999 36.6745 47.5999 38Z" fill="#4F5769"/>
+<path d="M44.4003 221.8C44.4003 223.126 43.3258 224.2 42.0003 224.2C40.6748 224.2 39.6003 223.126 39.6003 221.8C39.6003 220.475 40.6748 219.4 42.0003 219.4C43.3258 219.4 44.4003 220.475 44.4003 221.8Z" fill="#4F5769"/>
+<path d="M48.4003 223.4C48.4003 224.284 47.6839 225 46.8003 225C45.9166 225 45.2003 224.284 45.2003 223.4C45.2003 222.516 45.9166 221.8 46.8003 221.8C47.6839 221.8 48.4003 222.516 48.4003 223.4Z" fill="#4F5769"/>
+<path d="M45.2003 229C45.2003 227.233 43.7676 225.8 42.0003 225.8C40.233 225.8 38.8003 227.233 38.8003 229V231.4H45.2003V229Z" fill="#4F5769"/>
+<path d="M38.8003 223.4C38.8003 224.284 38.0839 225 37.2003 225C36.3166 225 35.6003 224.284 35.6003 223.4C35.6003 222.516 36.3166 221.8 37.2003 221.8C38.0839 221.8 38.8003 222.516 38.8003 223.4Z" fill="#4F5769"/>
+<path d="M46.8003 231.4V229C46.8003 228.157 46.5828 227.364 46.2009 226.675C46.3925 226.626 46.5933 226.6 46.8003 226.6C48.1258 226.6 49.2003 227.675 49.2003 229V231.4H46.8003Z" fill="#4F5769"/>
+<path d="M37.7997 226.675C37.4178 227.364 37.2003 228.157 37.2003 229V231.4H34.8003V229C34.8003 227.675 35.8748 226.6 37.2003 226.6C37.4073 226.6 37.6081 226.626 37.7997 226.675Z" fill="#4F5769"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M440.04 217.837C440.373 217.942 440.6 218.251 440.6 218.6V222.6L443.8 222.6C444.098 222.6 444.372 222.766 444.509 223.031C444.647 223.295 444.626 223.614 444.455 223.859L438.855 231.859C438.655 232.145 438.292 232.268 437.959 232.163C437.626 232.058 437.4 231.749 437.4 231.4L437.4 227.4H434.2C433.902 227.4 433.628 227.234 433.49 226.969C433.353 226.705 433.373 226.386 433.545 226.141L439.145 218.141C439.345 217.855 439.707 217.732 440.04 217.837Z" fill="#4F5769"/>
+<rect x="820" y="34" width="92" height="12" rx="6" fill="url(#paint9_linear_1297_52065)"/>
+<path d="M821.71 72V61.8182H825.15C825.945 61.8182 826.598 61.9541 827.109 62.2259C827.619 62.4943 827.997 62.8639 828.242 63.3345C828.487 63.8052 828.61 64.3404 828.61 64.9403C828.61 65.5402 828.487 66.0722 828.242 66.5362C827.997 67.0002 827.621 67.3648 827.114 67.63C826.607 67.8918 825.959 68.0227 825.17 68.0227H822.386V66.9091H825.13C825.674 66.9091 826.111 66.8295 826.442 66.6705C826.777 66.5114 827.019 66.286 827.168 65.9943C827.321 65.6993 827.397 65.348 827.397 64.9403C827.397 64.5327 827.321 64.1764 827.168 63.8714C827.016 63.5665 826.772 63.3312 826.438 63.1655C826.103 62.9964 825.66 62.9119 825.11 62.9119H822.942V72H821.71ZM826.502 67.4261L829.008 72H827.576L825.11 67.4261H826.502ZM833.625 72.1591C832.889 72.1591 832.255 71.9967 831.721 71.6719C831.191 71.3438 830.781 70.8864 830.493 70.2997C830.208 69.7098 830.066 69.0237 830.066 68.2415C830.066 67.4593 830.208 66.7699 830.493 66.1733C830.781 65.5734 831.182 65.1061 831.696 64.7713C832.213 64.4332 832.816 64.2642 833.506 64.2642C833.904 64.2642 834.296 64.3305 834.684 64.4631C835.072 64.5956 835.425 64.8111 835.743 65.1094C836.061 65.4044 836.315 65.7955 836.504 66.2827C836.693 66.7699 836.787 67.3698 836.787 68.0824V68.5795H830.901V67.5653H835.594C835.594 67.1345 835.508 66.75 835.335 66.4119C835.166 66.0739 834.924 65.8071 834.61 65.6115C834.298 65.416 833.93 65.3182 833.506 65.3182C833.039 65.3182 832.634 65.4342 832.293 65.6662C831.955 65.8949 831.695 66.1932 831.512 66.5611C831.33 66.929 831.239 67.3234 831.239 67.7443V68.4205C831.239 68.9972 831.338 69.486 831.537 69.8871C831.739 70.2848 832.019 70.5881 832.377 70.7969C832.735 71.0024 833.151 71.1051 833.625 71.1051C833.933 71.1051 834.212 71.062 834.46 70.9759C834.712 70.8864 834.929 70.7538 835.112 70.5781C835.294 70.3991 835.435 70.1771 835.534 69.9119L836.668 70.2301C836.548 70.6146 836.348 70.9527 836.066 71.2443C835.785 71.5327 835.436 71.758 835.022 71.9205C834.608 72.0795 834.142 72.1591 833.625 72.1591ZM840.819 72.179C840.335 72.179 839.896 72.0878 839.502 71.9055C839.107 71.7199 838.794 71.4531 838.562 71.1051C838.33 70.7538 838.214 70.3295 838.214 69.8324C838.214 69.3949 838.3 69.0402 838.472 68.7685C838.645 68.4934 838.875 68.2779 839.164 68.1222C839.452 67.9664 839.77 67.8504 840.118 67.7741C840.469 67.6946 840.822 67.6316 841.177 67.5852C841.641 67.5256 842.017 67.4808 842.306 67.451C842.597 67.4179 842.809 67.3632 842.942 67.2869C843.078 67.2107 843.146 67.0781 843.146 66.8892V66.8494C843.146 66.3589 843.012 65.9777 842.743 65.706C842.478 65.4342 842.075 65.2983 841.535 65.2983C840.975 65.2983 840.536 65.4209 840.218 65.6662C839.899 65.9115 839.676 66.1733 839.546 66.4517L838.433 66.054C838.632 65.59 838.897 65.2287 839.228 64.9702C839.563 64.7083 839.927 64.526 840.322 64.4233C840.72 64.3172 841.111 64.2642 841.495 64.2642C841.74 64.2642 842.022 64.294 842.34 64.3537C842.662 64.41 842.972 64.5277 843.27 64.7067C843.572 64.8857 843.822 65.1558 844.021 65.517C844.22 65.8783 844.319 66.3622 844.319 66.9688V72H843.146V70.9659H843.086C843.007 71.1316 842.874 71.3089 842.688 71.4979C842.503 71.6868 842.256 71.8475 841.948 71.9801C841.639 72.1127 841.263 72.179 840.819 72.179ZM840.998 71.125C841.462 71.125 841.853 71.0339 842.171 70.8516C842.493 70.6693 842.735 70.4339 842.897 70.1456C843.063 69.8572 843.146 69.554 843.146 69.2358V68.1619C843.096 68.2216 842.987 68.2763 842.818 68.326C842.652 68.3724 842.46 68.4138 842.241 68.4503C842.026 68.4834 841.815 68.5133 841.61 68.5398C841.407 68.563 841.243 68.5829 841.117 68.5994C840.812 68.6392 840.527 68.7038 840.262 68.7933C840 68.8795 839.788 69.0104 839.626 69.1861C839.467 69.3584 839.387 69.5937 839.387 69.892C839.387 70.2997 839.538 70.608 839.84 70.8168C840.145 71.0223 840.531 71.125 840.998 71.125ZM847.634 61.8182V72H846.461V61.8182H847.634ZM853.104 64.3636V65.358H849.146V64.3636H853.104ZM850.3 62.5341H851.473V69.8125C851.473 70.1439 851.521 70.3925 851.617 70.5582C851.717 70.7206 851.843 70.83 851.995 70.8864C852.151 70.9394 852.315 70.9659 852.487 70.9659C852.617 70.9659 852.723 70.9593 852.806 70.946C852.888 70.9295 852.955 70.9162 853.004 70.9062L853.243 71.9602C853.164 71.9901 853.052 72.0199 852.91 72.0497C852.767 72.0829 852.587 72.0994 852.368 72.0994C852.037 72.0994 851.712 72.0282 851.394 71.8857C851.079 71.7431 850.817 71.526 850.608 71.2344C850.403 70.9427 850.3 70.5748 850.3 70.1307V62.5341ZM854.869 72V64.3636H856.042V72H854.869ZM855.465 63.0909C855.237 63.0909 855.039 63.013 854.874 62.8572C854.711 62.7015 854.63 62.5142 854.63 62.2955C854.63 62.0767 854.711 61.8894 854.874 61.7337C855.039 61.5779 855.237 61.5 855.465 61.5C855.694 61.5 855.89 61.5779 856.052 61.7337C856.218 61.8894 856.301 62.0767 856.301 62.2955C856.301 62.5142 856.218 62.7015 856.052 62.8572C855.89 63.013 855.694 63.0909 855.465 63.0909ZM858.191 72V64.3636H859.325V65.5568H859.424C859.583 65.1491 859.84 64.8326 860.195 64.6072C860.549 64.3786 860.975 64.2642 861.472 64.2642C861.976 64.2642 862.395 64.3786 862.73 64.6072C863.068 64.8326 863.332 65.1491 863.521 65.5568H863.6C863.796 65.1624 864.089 64.8492 864.48 64.6172C864.871 64.3819 865.34 64.2642 865.887 64.2642C866.57 64.2642 867.128 64.478 867.562 64.9055C867.997 65.3298 868.214 65.991 868.214 66.8892V72H867.04V66.8892C867.04 66.3258 866.886 65.9231 866.578 65.6811C866.27 65.4392 865.907 65.3182 865.489 65.3182C864.952 65.3182 864.536 65.4806 864.241 65.8054C863.946 66.1269 863.799 66.5346 863.799 67.0284V72H862.606V66.7699C862.606 66.3357 862.465 65.986 862.183 65.7209C861.902 65.4524 861.539 65.3182 861.094 65.3182C860.79 65.3182 860.504 65.3994 860.239 65.5618C859.978 65.7242 859.765 65.9496 859.603 66.2379C859.444 66.523 859.364 66.8527 859.364 67.2273V72H858.191ZM873.561 72.1591C872.825 72.1591 872.19 71.9967 871.657 71.6719C871.126 71.3438 870.717 70.8864 870.429 70.2997C870.144 69.7098 870.001 69.0237 870.001 68.2415C870.001 67.4593 870.144 66.7699 870.429 66.1733C870.717 65.5734 871.118 65.1061 871.632 64.7713C872.149 64.4332 872.752 64.2642 873.441 64.2642C873.839 64.2642 874.232 64.3305 874.62 64.4631C875.007 64.5956 875.36 64.8111 875.679 65.1094C875.997 65.4044 876.25 65.7955 876.439 66.2827C876.628 66.7699 876.723 67.3698 876.723 68.0824V68.5795H870.836V67.5653H875.529C875.529 67.1345 875.443 66.75 875.271 66.4119C875.102 66.0739 874.86 65.8071 874.545 65.6115C874.234 65.416 873.866 65.3182 873.441 65.3182C872.974 65.3182 872.57 65.4342 872.228 65.6662C871.89 65.8949 871.63 66.1932 871.448 66.5611C871.266 66.929 871.174 67.3234 871.174 67.7443V68.4205C871.174 68.9972 871.274 69.486 871.473 69.8871C871.675 70.2848 871.955 70.5881 872.313 70.7969C872.671 71.0024 873.087 71.1051 873.561 71.1051C873.869 71.1051 874.147 71.062 874.396 70.9759C874.648 70.8864 874.865 70.7538 875.047 70.5781C875.23 70.3991 875.37 70.1771 875.47 69.9119L876.603 70.2301C876.484 70.6146 876.283 70.9527 876.002 71.2443C875.72 71.5327 875.372 71.758 874.958 71.9205C874.543 72.0795 874.078 72.1591 873.561 72.1591ZM890.797 65H889.564C889.491 64.6454 889.364 64.3338 889.181 64.0653C889.002 63.7969 888.784 63.5715 888.525 63.3892C888.27 63.2036 887.987 63.0644 887.675 62.9716C887.364 62.8788 887.039 62.8324 886.701 62.8324C886.084 62.8324 885.526 62.9882 885.025 63.2997C884.528 63.6113 884.132 64.0703 883.837 64.6768C883.545 65.2834 883.4 66.0275 883.4 66.9091C883.4 67.7907 883.545 68.5348 883.837 69.1413C884.132 69.7479 884.528 70.2069 885.025 70.5185C885.526 70.83 886.084 70.9858 886.701 70.9858C887.039 70.9858 887.364 70.9394 887.675 70.8466C887.987 70.7538 888.27 70.6162 888.525 70.4339C888.784 70.2483 889.002 70.0213 889.181 69.7528C889.364 69.4811 889.491 69.1695 889.564 68.8182H890.797C890.704 69.3385 890.535 69.8042 890.29 70.2152C890.045 70.6262 889.74 70.9759 889.375 71.2642C889.011 71.5492 888.601 71.7663 888.147 71.9155C887.697 72.0646 887.214 72.1392 886.701 72.1392C885.832 72.1392 885.06 71.9271 884.384 71.5028C883.708 71.0786 883.176 70.4754 882.788 69.6932C882.4 68.911 882.206 67.983 882.206 66.9091C882.206 65.8352 882.4 64.9072 882.788 64.125C883.176 63.3428 883.708 62.7396 884.384 62.3153C885.06 61.8911 885.832 61.679 886.701 61.679C887.214 61.679 887.697 61.7536 888.147 61.9027C888.601 62.0518 889.011 62.2706 889.375 62.5589C889.74 62.844 890.045 63.192 890.29 63.603C890.535 64.0107 890.704 64.4763 890.797 65ZM895.733 72.1591C895.043 72.1591 894.439 71.995 893.918 71.6669C893.401 71.3388 892.997 70.8797 892.705 70.2898C892.417 69.6998 892.273 69.0104 892.273 68.2216C892.273 67.4261 892.417 66.7318 892.705 66.1385C892.997 65.5452 893.401 65.0845 893.918 64.7564C894.439 64.4283 895.043 64.2642 895.733 64.2642C896.422 64.2642 897.025 64.4283 897.542 64.7564C898.063 65.0845 898.467 65.5452 898.756 66.1385C899.047 66.7318 899.193 67.4261 899.193 68.2216C899.193 69.0104 899.047 69.6998 898.756 70.2898C898.467 70.8797 898.063 71.3388 897.542 71.6669C897.025 71.995 896.422 72.1591 895.733 72.1591ZM895.733 71.1051C896.256 71.1051 896.687 70.9709 897.025 70.7024C897.363 70.4339 897.614 70.081 897.776 69.6435C897.939 69.206 898.02 68.732 898.02 68.2216C898.02 67.7112 897.939 67.2356 897.776 66.7947C897.614 66.3539 897.363 65.9976 897.025 65.7259C896.687 65.4541 896.256 65.3182 895.733 65.3182C895.209 65.3182 894.778 65.4541 894.44 65.7259C894.102 65.9976 893.852 66.3539 893.689 66.7947C893.527 67.2356 893.446 67.7112 893.446 68.2216C893.446 68.732 893.527 69.206 893.689 69.6435C893.852 70.081 894.102 70.4339 894.44 70.7024C894.778 70.9709 895.209 71.1051 895.733 71.1051ZM902.157 67.4062V72H900.984V64.3636H902.118V65.5568H902.217C902.396 65.169 902.668 64.8575 903.032 64.6222C903.397 64.3835 903.868 64.2642 904.444 64.2642C904.961 64.2642 905.414 64.3703 905.801 64.5824C906.189 64.7912 906.491 65.1094 906.706 65.5369C906.922 65.9612 907.029 66.4981 907.029 67.1477V72H905.856V67.2273C905.856 66.6274 905.7 66.16 905.389 65.8253C905.077 65.4872 904.65 65.3182 904.106 65.3182C903.732 65.3182 903.397 65.3994 903.102 65.5618C902.81 65.7242 902.58 65.9612 902.411 66.2727C902.242 66.5843 902.157 66.9621 902.157 67.4062ZM910.347 67.4062V72H909.173V64.3636H910.307V65.5568H910.406C910.585 65.169 910.857 64.8575 911.222 64.6222C911.586 64.3835 912.057 64.2642 912.634 64.2642C913.151 64.2642 913.603 64.3703 913.991 64.5824C914.379 64.7912 914.68 65.1094 914.896 65.5369C915.111 65.9612 915.219 66.4981 915.219 67.1477V72H914.046V67.2273C914.046 66.6274 913.89 66.16 913.578 65.8253C913.267 65.4872 912.839 65.3182 912.296 65.3182C911.921 65.3182 911.586 65.3994 911.291 65.5618C911 65.7242 910.769 65.9612 910.6 66.2727C910.431 66.5843 910.347 66.9621 910.347 67.4062ZM920.565 72.1591C919.829 72.1591 919.194 71.9967 918.661 71.6719C918.13 71.3438 917.721 70.8864 917.433 70.2997C917.147 69.7098 917.005 69.0237 917.005 68.2415C917.005 67.4593 917.147 66.7699 917.433 66.1733C917.721 65.5734 918.122 65.1061 918.636 64.7713C919.153 64.4332 919.756 64.2642 920.445 64.2642C920.843 64.2642 921.236 64.3305 921.624 64.4631C922.011 64.5956 922.364 64.8111 922.683 65.1094C923.001 65.4044 923.254 65.7955 923.443 66.2827C923.632 66.7699 923.727 67.3698 923.727 68.0824V68.5795H917.84V67.5653H922.533C922.533 67.1345 922.447 66.75 922.275 66.4119C922.106 66.0739 921.864 65.8071 921.549 65.6115C921.237 65.416 920.87 65.3182 920.445 65.3182C919.978 65.3182 919.574 65.4342 919.232 65.6662C918.894 65.8949 918.634 66.1932 918.452 66.5611C918.269 66.929 918.178 67.3234 918.178 67.7443V68.4205C918.178 68.9972 918.278 69.486 918.477 69.8871C918.679 70.2848 918.959 70.5881 919.317 70.7969C919.675 71.0024 920.091 71.1051 920.565 71.1051C920.873 71.1051 921.151 71.062 921.4 70.9759C921.652 70.8864 921.869 70.7538 922.051 70.5781C922.233 70.3991 922.374 70.1771 922.474 69.9119L923.607 70.2301C923.488 70.6146 923.287 70.9527 923.006 71.2443C922.724 71.5327 922.376 71.758 921.962 71.9205C921.547 72.0795 921.082 72.1591 920.565 72.1591ZM928.614 72.1591C927.898 72.1591 927.281 71.9901 926.764 71.652C926.247 71.3139 925.849 70.8482 925.571 70.255C925.293 69.6617 925.153 68.9839 925.153 68.2216C925.153 67.446 925.296 66.7616 925.581 66.1683C925.869 65.5717 926.27 65.1061 926.784 64.7713C927.301 64.4332 927.904 64.2642 928.594 64.2642C929.131 64.2642 929.615 64.3636 930.045 64.5625C930.476 64.7614 930.829 65.0398 931.104 65.3977C931.379 65.7557 931.55 66.1733 931.616 66.6506H930.443C930.354 66.3026 930.155 65.9943 929.847 65.7259C929.542 65.4541 929.131 65.3182 928.614 65.3182C928.156 65.3182 927.755 65.4375 927.411 65.6761C927.069 65.9115 926.802 66.2446 926.61 66.6754C926.421 67.103 926.327 67.6051 926.327 68.1818C926.327 68.7718 926.42 69.2855 926.605 69.723C926.794 70.1605 927.059 70.5002 927.401 70.7422C927.745 70.9841 928.15 71.1051 928.614 71.1051C928.919 71.1051 929.195 71.0521 929.444 70.946C929.692 70.84 929.903 70.6875 930.075 70.4886C930.248 70.2898 930.37 70.0511 930.443 69.7727H931.616C931.55 70.2235 931.386 70.6295 931.124 70.9908C930.866 71.3487 930.523 71.6338 930.095 71.8459C929.671 72.0547 929.177 72.1591 928.614 72.1591ZM936.653 64.3636V65.358H932.695V64.3636H936.653ZM933.849 62.5341H935.022V69.8125C935.022 70.1439 935.07 70.3925 935.166 70.5582C935.266 70.7206 935.392 70.83 935.544 70.8864C935.7 70.9394 935.864 70.9659 936.036 70.9659C936.165 70.9659 936.272 70.9593 936.354 70.946C936.437 70.9295 936.504 70.9162 936.553 70.9062L936.792 71.9602C936.712 71.9901 936.601 72.0199 936.459 72.0497C936.316 72.0829 936.136 72.0994 935.917 72.0994C935.585 72.0994 935.261 72.0282 934.942 71.8857C934.628 71.7431 934.366 71.526 934.157 71.2344C933.951 70.9427 933.849 70.5748 933.849 70.1307V62.5341ZM938.418 72V64.3636H939.591V72H938.418ZM939.014 63.0909C938.786 63.0909 938.588 63.013 938.423 62.8572C938.26 62.7015 938.179 62.5142 938.179 62.2955C938.179 62.0767 938.26 61.8894 938.423 61.7337C938.588 61.5779 938.786 61.5 939.014 61.5C939.243 61.5 939.438 61.5779 939.601 61.7337C939.767 61.8894 939.849 62.0767 939.849 62.2955C939.849 62.5142 939.767 62.7015 939.601 62.8572C939.438 63.013 939.243 63.0909 939.014 63.0909ZM944.842 72.1591C944.153 72.1591 943.548 71.995 943.028 71.6669C942.51 71.3388 942.106 70.8797 941.814 70.2898C941.526 69.6998 941.382 69.0104 941.382 68.2216C941.382 67.4261 941.526 66.7318 941.814 66.1385C942.106 65.5452 942.51 65.0845 943.028 64.7564C943.548 64.4283 944.153 64.2642 944.842 64.2642C945.532 64.2642 946.135 64.4283 946.652 64.7564C947.172 65.0845 947.577 65.5452 947.865 66.1385C948.157 66.7318 948.302 67.4261 948.302 68.2216C948.302 69.0104 948.157 69.6998 947.865 70.2898C947.577 70.8797 947.172 71.3388 946.652 71.6669C946.135 71.995 945.532 72.1591 944.842 72.1591ZM944.842 71.1051C945.366 71.1051 945.797 70.9709 946.135 70.7024C946.473 70.4339 946.723 70.081 946.885 69.6435C947.048 69.206 947.129 68.732 947.129 68.2216C947.129 67.7112 947.048 67.2356 946.885 66.7947C946.723 66.3539 946.473 65.9976 946.135 65.7259C945.797 65.4541 945.366 65.3182 944.842 65.3182C944.318 65.3182 943.888 65.4541 943.55 65.7259C943.211 65.9976 942.961 66.3539 942.799 66.7947C942.636 67.2356 942.555 67.7112 942.555 68.2216C942.555 68.732 942.636 69.206 942.799 69.6435C942.961 70.081 943.211 70.4339 943.55 70.7024C943.888 70.9709 944.318 71.1051 944.842 71.1051ZM951.267 67.4062V72H950.093V64.3636H951.227V65.5568H951.326C951.505 65.169 951.777 64.8575 952.142 64.6222C952.506 64.3835 952.977 64.2642 953.554 64.2642C954.071 64.2642 954.523 64.3703 954.911 64.5824C955.299 64.7912 955.6 65.1094 955.816 65.5369C956.031 65.9612 956.139 66.4981 956.139 67.1477V72H954.966V67.2273C954.966 66.6274 954.81 66.16 954.498 65.8253C954.187 65.4872 953.759 65.3182 953.216 65.3182C952.841 65.3182 952.506 65.3994 952.211 65.5618C951.92 65.7242 951.689 65.9612 951.52 66.2727C951.351 66.5843 951.267 66.9621 951.267 67.4062ZM963.692 66.0739L962.638 66.3722C962.572 66.1965 962.474 66.0258 962.345 65.8601C962.219 65.6911 962.046 65.5518 961.828 65.4425C961.609 65.3331 961.329 65.2784 960.987 65.2784C960.52 65.2784 960.131 65.3861 959.819 65.6016C959.511 65.8137 959.357 66.0838 959.357 66.4119C959.357 66.7036 959.463 66.9339 959.675 67.103C959.887 67.272 960.218 67.4129 960.669 67.5256L961.803 67.804C962.485 67.9697 962.994 68.2232 963.329 68.5646C963.664 68.9027 963.831 69.3385 963.831 69.8722C963.831 70.3097 963.705 70.7008 963.453 71.0455C963.205 71.3902 962.857 71.6619 962.409 71.8608C961.962 72.0597 961.441 72.1591 960.848 72.1591C960.069 72.1591 959.425 71.9901 958.914 71.652C958.404 71.3139 958.081 70.8201 957.945 70.1705L959.058 69.892C959.164 70.303 959.365 70.6113 959.66 70.8168C959.958 71.0223 960.348 71.125 960.828 71.125C961.375 71.125 961.809 71.009 962.131 70.777C962.456 70.5417 962.618 70.2599 962.618 69.9318C962.618 69.6667 962.525 69.4446 962.34 69.2656C962.154 69.0833 961.869 68.9474 961.485 68.858L960.212 68.5597C959.512 68.3939 958.999 68.1371 958.671 67.7891C958.346 67.4377 958.183 66.9986 958.183 66.4716C958.183 66.0407 958.304 65.6596 958.546 65.3281C958.792 64.9967 959.125 64.7365 959.546 64.5476C959.97 64.3587 960.45 64.2642 960.987 64.2642C961.743 64.2642 962.336 64.4299 962.767 64.7614C963.201 65.0928 963.51 65.5303 963.692 66.0739Z" fill="#616B7C"/>
+<path d="M859 189.906C859 188.301 860.301 187 861.906 187V187C863.511 187 864.812 188.301 864.812 189.906V283.646H859V189.906Z" fill="#F02E65"/>
+<path d="M883.812 221.841C883.812 220.236 885.113 218.935 886.717 218.935V218.935C888.322 218.935 889.623 220.236 889.623 221.841V283.646H883.812V221.841Z" fill="#F02E65"/>
+<path d="M908.623 247.053C908.623 245.448 909.924 244.147 911.529 244.147V244.147C913.134 244.147 914.435 245.448 914.435 247.053V283.646H908.623V247.053Z" fill="#F02E65"/>
+<path d="M933.436 231.086C933.436 229.481 934.737 228.18 936.341 228.18V228.18C937.946 228.18 939.247 229.481 939.247 231.086V283.646H933.436V231.086Z" fill="#F02E65"/>
+<path d="M958.247 205.873C958.247 204.268 959.548 202.967 961.153 202.967V202.967C962.758 202.967 964.059 204.268 964.059 205.873V283.646H958.247V205.873Z" fill="#F02E65"/>
+<path d="M983.059 189.906C983.059 188.301 984.36 187 985.965 187V187C987.569 187 988.87 188.301 988.87 189.906V283.646H983.059V189.906Z" fill="#F02E65"/>
+<path d="M1007.87 221.841C1007.87 220.236 1009.17 218.935 1010.78 218.935V218.935C1012.38 218.935 1013.68 220.236 1013.68 221.841V283.646H1007.87V221.841Z" fill="#F02E65"/>
+<path d="M1032.68 247.053C1032.68 245.448 1033.98 244.147 1035.59 244.147V244.147C1037.19 244.147 1038.49 245.448 1038.49 247.053V283.646H1032.68V247.053Z" fill="#F02E65"/>
+<path d="M1057.49 231.086C1057.49 229.481 1058.8 228.18 1060.4 228.18V228.18C1062 228.18 1063.31 229.481 1063.31 231.086V283.646H1057.49V231.086Z" fill="#F02E65"/>
+<path d="M1082.31 205.873C1082.31 204.268 1083.61 202.967 1085.21 202.967V202.967C1086.82 202.967 1088.12 204.268 1088.12 205.873V283.646H1082.31V205.873Z" fill="#F02E65"/>
+<path d="M1107.12 221.841C1107.12 220.236 1108.42 218.935 1110.02 218.935V218.935C1111.63 218.935 1112.93 220.236 1112.93 221.841V283.646H1107.12V221.841Z" fill="#F02E65"/>
+<path d="M1131.93 247.053C1131.93 245.448 1133.23 244.147 1134.84 244.147V244.147C1136.44 244.147 1137.74 245.448 1137.74 247.053V283.646H1131.93V247.053Z" fill="#F02E65"/>
+<rect x="34" y="101" width="92" height="12" rx="6" fill="url(#paint10_linear_1297_52065)"/>
+<rect x="34" y="121" width="40" height="8" rx="4" fill="url(#paint11_linear_1297_52065)"/>
+<rect x="302" y="121" width="40" height="8" rx="4" fill="url(#paint12_linear_1297_52065)"/>
+<rect width="1173" height="390" rx="19" fill="url(#paint13_linear_1297_52065)"/>
+<defs>
+<filter id="filter0_d_1297_52065" x="763.5" y="-14.5" width="439" height="405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="16"/>
+<feGaussianBlur stdDeviation="16"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.215686 0 0 0 0 0.231373 0 0 0 0 0.301961 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1297_52065"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1297_52065" result="shape"/>
+</filter>
+<filter id="filter1_d_1297_52065" x="-30.5" y="168.5" width="437" height="225" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="16"/>
+<feGaussianBlur stdDeviation="16"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.215686 0 0 0 0 0.231373 0 0 0 0 0.301961 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1297_52065"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1297_52065" result="shape"/>
+</filter>
+<filter id="filter2_d_1297_52065" x="366.5" y="168.5" width="437" height="225" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="16"/>
+<feGaussianBlur stdDeviation="16"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.215686 0 0 0 0 0.231373 0 0 0 0 0.301961 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1297_52065"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1297_52065" result="shape"/>
+</filter>
+<filter id="filter3_d_1297_52065" x="-30.5" y="-14.5" width="437" height="225" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="16"/>
+<feGaussianBlur stdDeviation="16"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.215686 0 0 0 0 0.231373 0 0 0 0 0.301961 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1297_52065"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1297_52065" result="shape"/>
+</filter>
+<filter id="filter4_d_1297_52065" x="366.5" y="-14.5" width="437" height="225" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="16"/>
+<feGaussianBlur stdDeviation="16"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.215686 0 0 0 0 0.231373 0 0 0 0 0.301961 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1297_52065"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1297_52065" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_1297_52065" x1="34" y1="291" x2="118" y2="291" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F697A"/>
+<stop offset="1" stop-color="#383B4E"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1297_52065" x1="31" y1="309.667" x2="73.9927" y2="310.417" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F697A"/>
+<stop offset="1" stop-color="#383B4E"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1297_52065" x1="299" y1="309.667" x2="341.993" y2="310.417" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F697A"/>
+<stop offset="1" stop-color="#383B4E"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1297_52065" x1="431" y1="291" x2="515" y2="291" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F697A"/>
+<stop offset="1" stop-color="#383B4E"/>
+</linearGradient>
+<linearGradient id="paint4_linear_1297_52065" x1="428" y1="309.667" x2="470.993" y2="310.417" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F697A"/>
+<stop offset="1" stop-color="#383B4E"/>
+</linearGradient>
+<linearGradient id="paint5_linear_1297_52065" x1="696" y1="309.667" x2="738.993" y2="310.417" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F697A"/>
+<stop offset="1" stop-color="#383B4E"/>
+</linearGradient>
+<linearGradient id="paint6_linear_1297_52065" x1="431" y1="107" x2="515" y2="107" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F697A"/>
+<stop offset="1" stop-color="#383B4E"/>
+</linearGradient>
+<linearGradient id="paint7_linear_1297_52065" x1="428" y1="125.667" x2="470.993" y2="126.417" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F697A"/>
+<stop offset="1" stop-color="#383B4E"/>
+</linearGradient>
+<linearGradient id="paint8_linear_1297_52065" x1="696" y1="125.667" x2="738.993" y2="126.417" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F697A"/>
+<stop offset="1" stop-color="#383B4E"/>
+</linearGradient>
+<linearGradient id="paint9_linear_1297_52065" x1="820" y1="40" x2="904" y2="40" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F697A"/>
+<stop offset="1" stop-color="#383B4E"/>
+</linearGradient>
+<linearGradient id="paint10_linear_1297_52065" x1="34" y1="107" x2="118" y2="107" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F697A"/>
+<stop offset="1" stop-color="#383B4E"/>
+</linearGradient>
+<linearGradient id="paint11_linear_1297_52065" x1="31" y1="125.667" x2="73.9927" y2="126.417" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F697A"/>
+<stop offset="1" stop-color="#383B4E"/>
+</linearGradient>
+<linearGradient id="paint12_linear_1297_52065" x1="299" y1="125.667" x2="341.993" y2="126.417" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F697A"/>
+<stop offset="1" stop-color="#383B4E"/>
+</linearGradient>
+<linearGradient id="paint13_linear_1297_52065" x1="586.5" y1="0" x2="586.5" y2="390" gradientUnits="userSpaceOnUse">
+<stop stop-color="#14141F" stop-opacity="0.2"/>
+<stop offset="0.713542" stop-color="#14141F" stop-opacity="0.78"/>
+<stop offset="1" stop-color="#14141F"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/routes/console/project-[project]/overview/onboard-2-light.svg b/src/routes/console/project-[project]/overview/onboard-2-light.svg
new file mode 100644
index 000000000..b3f995770
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/onboard-2-light.svg
@@ -0,0 +1,178 @@
+<svg width="1170" height="388" viewBox="0 0 1170 388" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1297_52063)">
+<rect x="796" width="374" height="340" rx="16" fill="white"/>
+<rect x="796" width="374" height="340" rx="16" stroke="#F2F2F8"/>
+</g>
+<path d="M830.138 133.958V133.191L833.018 130.038C833.357 129.668 833.635 129.347 833.854 129.074C834.072 128.799 834.234 128.54 834.339 128.299C834.447 128.055 834.501 127.799 834.501 127.532C834.501 127.225 834.428 126.959 834.28 126.735C834.135 126.511 833.936 126.337 833.683 126.215C833.43 126.093 833.146 126.032 832.831 126.032C832.496 126.032 832.203 126.101 831.953 126.241C831.706 126.377 831.514 126.569 831.378 126.816C831.244 127.063 831.178 127.353 831.178 127.685H830.172C830.172 127.174 830.29 126.725 830.526 126.339C830.761 125.952 831.082 125.651 831.489 125.435C831.898 125.219 832.357 125.111 832.865 125.111C833.376 125.111 833.83 125.219 834.224 125.435C834.619 125.651 834.929 125.942 835.153 126.309C835.378 126.675 835.49 127.083 835.49 127.532C835.49 127.853 835.432 128.167 835.315 128.474C835.202 128.778 835.003 129.117 834.719 129.492C834.438 129.864 834.047 130.319 833.547 130.856L831.587 132.952V133.021H835.643V133.958H830.138ZM840.25 134.077C839.608 134.077 839.061 133.903 838.609 133.553C838.158 133.201 837.813 132.691 837.574 132.023C837.335 131.353 837.216 130.543 837.216 129.594C837.216 128.651 837.335 127.846 837.574 127.178C837.815 126.508 838.162 125.996 838.614 125.644C839.068 125.289 839.614 125.111 840.25 125.111C840.886 125.111 841.43 125.289 841.882 125.644C842.337 125.996 842.683 126.508 842.922 127.178C843.163 127.846 843.284 128.651 843.284 129.594C843.284 130.543 843.165 131.353 842.926 132.023C842.688 132.691 842.342 133.201 841.891 133.553C841.439 133.903 840.892 134.077 840.25 134.077ZM840.25 133.14C840.886 133.14 841.381 132.833 841.733 132.219C842.085 131.606 842.261 130.731 842.261 129.594C842.261 128.839 842.18 128.195 842.018 127.664C841.859 127.133 841.629 126.728 841.328 126.449C841.03 126.171 840.67 126.032 840.25 126.032C839.619 126.032 839.126 126.343 838.771 126.965C838.416 127.584 838.239 128.461 838.239 129.594C838.239 130.35 838.318 130.992 838.477 131.521C838.636 132.049 838.865 132.451 839.163 132.726C839.464 133.002 839.827 133.14 840.25 133.14Z" fill="#868EA3"/>
+<line x1="860" y1="129.708" x2="1138" y2="129.708" stroke="#E8E9F0" stroke-width="0.5"/>
+<path d="M835.093 163.003V171.731H834.036V164.111H833.985L831.854 165.526V164.452L834.036 163.003H835.093ZM840.33 171.85C839.83 171.85 839.38 171.751 838.979 171.552C838.578 171.353 838.257 171.08 838.016 170.734C837.775 170.387 837.642 169.992 837.62 169.549H838.642C838.682 169.944 838.861 170.27 839.179 170.529C839.5 170.785 839.884 170.913 840.33 170.913C840.688 170.913 841.006 170.829 841.284 170.661C841.566 170.493 841.786 170.263 841.945 169.971C842.107 169.675 842.188 169.342 842.188 168.969C842.188 168.589 842.104 168.249 841.936 167.951C841.772 167.65 841.544 167.413 841.255 167.239C840.965 167.066 840.634 166.978 840.262 166.975C839.995 166.972 839.721 167.013 839.439 167.099C839.158 167.181 838.926 167.288 838.745 167.418L837.756 167.299L838.284 163.003H842.819V163.941H839.171L838.864 166.515H838.915C839.094 166.373 839.319 166.255 839.588 166.161C839.858 166.067 840.14 166.02 840.432 166.02C840.966 166.02 841.442 166.148 841.86 166.404C842.28 166.657 842.61 167.003 842.848 167.444C843.09 167.884 843.211 168.387 843.211 168.952C843.211 169.509 843.086 170.006 842.836 170.444C842.588 170.878 842.248 171.222 841.813 171.475C841.378 171.725 840.884 171.85 840.33 171.85Z" fill="#868EA3"/>
+<line x1="860" y1="167.481" x2="1138" y2="167.481" stroke="#E8E9F0" stroke-width="0.5"/>
+<path d="M834.893 201.77V210.497H833.837V202.878H833.786L831.655 204.293V203.219L833.837 201.77H834.893ZM840.25 210.616C839.608 210.616 839.061 210.442 838.609 210.092C838.158 209.74 837.813 209.23 837.574 208.562C837.335 207.892 837.216 207.082 837.216 206.133C837.216 205.19 837.335 204.385 837.574 203.717C837.815 203.047 838.162 202.535 838.614 202.183C839.068 201.828 839.614 201.65 840.25 201.65C840.886 201.65 841.43 201.828 841.882 202.183C842.337 202.535 842.683 203.047 842.922 203.717C843.163 204.385 843.284 205.19 843.284 206.133C843.284 207.082 843.165 207.892 842.926 208.562C842.688 209.23 842.342 209.74 841.891 210.092C841.439 210.442 840.892 210.616 840.25 210.616ZM840.25 209.679C840.886 209.679 841.381 209.372 841.733 208.758C842.085 208.145 842.261 207.27 842.261 206.133C842.261 205.378 842.18 204.734 842.018 204.203C841.859 203.672 841.629 203.267 841.328 202.989C841.03 202.71 840.67 202.571 840.25 202.571C839.619 202.571 839.126 202.882 838.771 203.504C838.416 204.123 838.239 205 838.239 206.133C838.239 206.889 838.318 207.531 838.477 208.06C838.636 208.588 838.865 208.99 839.163 209.266C839.464 209.541 839.827 209.679 840.25 209.679Z" fill="#868EA3"/>
+<line x1="860" y1="206.247" x2="1138" y2="206.247" stroke="#E8E9F0" stroke-width="0.5"/>
+<path d="M840.33 248.389C839.83 248.389 839.38 248.29 838.979 248.091C838.578 247.892 838.257 247.619 838.016 247.273C837.775 246.926 837.642 246.531 837.62 246.088H838.642C838.682 246.483 838.861 246.81 839.179 247.068C839.5 247.324 839.884 247.452 840.33 247.452C840.688 247.452 841.006 247.368 841.284 247.2C841.566 247.033 841.786 246.802 841.945 246.51C842.107 246.214 842.188 245.881 842.188 245.508C842.188 245.128 842.104 244.788 841.936 244.49C841.772 244.189 841.544 243.952 841.255 243.778C840.965 243.605 840.634 243.517 840.262 243.514C839.995 243.511 839.721 243.552 839.439 243.638C839.158 243.72 838.926 243.827 838.745 243.957L837.756 243.838L838.284 239.543H842.819V240.48H839.171L838.864 243.054H838.915C839.094 242.912 839.319 242.794 839.588 242.7C839.858 242.606 840.14 242.56 840.432 242.56C840.966 242.56 841.442 242.687 841.86 242.943C842.28 243.196 842.61 243.543 842.848 243.983C843.09 244.423 843.211 244.926 843.211 245.491C843.211 246.048 843.086 246.545 842.836 246.983C842.588 247.418 842.248 247.761 841.813 248.014C841.378 248.264 840.884 248.389 840.33 248.389Z" fill="#868EA3"/>
+<line x1="860" y1="244.02" x2="1138" y2="244.02" stroke="#E8E9F0" stroke-width="0.5"/>
+<path d="M840.25 286.161C839.608 286.161 839.061 285.987 838.609 285.637C838.158 285.285 837.813 284.775 837.574 284.107C837.335 283.437 837.216 282.627 837.216 281.678C837.216 280.735 837.335 279.93 837.574 279.262C837.815 278.592 838.162 278.08 838.614 277.728C839.068 277.373 839.614 277.195 840.25 277.195C840.886 277.195 841.43 277.373 841.882 277.728C842.337 278.08 842.683 278.592 842.922 279.262C843.163 279.93 843.284 280.735 843.284 281.678C843.284 282.627 843.165 283.437 842.926 284.107C842.688 284.775 842.342 285.285 841.891 285.637C841.439 285.987 840.892 286.161 840.25 286.161ZM840.25 285.224C840.886 285.224 841.381 284.917 841.733 284.303C842.085 283.69 842.261 282.815 842.261 281.678C842.261 280.923 842.18 280.279 842.018 279.748C841.859 279.217 841.629 278.812 841.328 278.533C841.03 278.255 840.67 278.116 840.25 278.116C839.619 278.116 839.126 278.427 838.771 279.049C838.416 279.668 838.239 280.545 838.239 281.678C838.239 282.434 838.318 283.076 838.477 283.604C838.636 284.133 838.865 284.535 839.163 284.81C839.464 285.086 839.827 285.224 840.25 285.224Z" fill="#868EA3"/>
+<line x1="860" y1="281.792" x2="1138" y2="281.792" stroke="#E8E9F0" stroke-width="0.5"/>
+<g filter="url(#filter1_d_1297_52063)">
+<rect x="2" y="183" width="372" height="160" rx="16" fill="white"/>
+<rect x="2" y="183" width="372" height="160" rx="16" stroke="#F2F2F8"/>
+</g>
+<rect x="34" y="283" width="92" height="12" rx="6" fill="url(#paint0_linear_1297_52063)"/>
+<rect x="34" y="303" width="40" height="8" rx="4" fill="url(#paint1_linear_1297_52063)"/>
+<rect x="302" y="303" width="40" height="8" rx="4" fill="url(#paint2_linear_1297_52063)"/>
+<path d="M60.0391 229H58.6414L61.782 220.273H63.3034L66.444 229H65.0462L62.5789 221.858H62.5107L60.0391 229ZM60.2735 225.582H64.8076V226.69H60.2735V225.582ZM74.7565 220.273H76.0775V226.013C76.0775 226.624 75.934 227.165 75.6471 227.636C75.3602 228.105 74.9568 228.474 74.4369 228.744C73.917 229.011 73.3076 229.145 72.6088 229.145C71.9127 229.145 71.3048 229.011 70.7849 228.744C70.265 228.474 69.8616 228.105 69.5747 227.636C69.2877 227.165 69.1443 226.624 69.1443 226.013V220.273H70.461V225.906C70.461 226.301 70.5477 226.652 70.721 226.959C70.8971 227.266 71.1457 227.507 71.4667 227.683C71.7877 227.857 72.1684 227.943 72.6088 227.943C73.0519 227.943 73.434 227.857 73.7551 227.683C74.0789 227.507 74.3261 227.266 74.4965 226.959C74.6698 226.652 74.7565 226.301 74.7565 225.906V220.273ZM79.0015 221.406V220.273H85.7558V221.406H83.0328V229H81.7203V221.406H79.0015ZM88.6883 229V220.273H90.0051V224.065H94.356V220.273H95.677V229H94.356V225.195H90.0051V229H88.6883ZM99.0346 229V220.273H104.506V221.406H100.351V224.065H104.221V225.195H100.351V227.866H104.557V229H99.0346ZM114.749 220.273V229H113.539L109.103 222.599H109.022V229H107.705V220.273H108.924L113.364 226.682H113.445V220.273H114.749ZM117.68 221.406V220.273H124.434V221.406H121.711V229H120.398V221.406H117.68ZM128.683 220.273V229H127.366V220.273H128.683ZM139.289 223.111H137.96C137.909 222.827 137.813 222.577 137.674 222.361C137.535 222.145 137.365 221.962 137.163 221.811C136.961 221.661 136.735 221.547 136.485 221.47C136.238 221.393 135.975 221.355 135.697 221.355C135.194 221.355 134.744 221.482 134.346 221.734C133.951 221.987 133.639 222.358 133.409 222.847C133.181 223.335 133.068 223.932 133.068 224.636C133.068 225.347 133.181 225.946 133.409 226.435C133.639 226.923 133.953 227.293 134.35 227.543C134.748 227.793 135.196 227.918 135.693 227.918C135.968 227.918 136.23 227.881 136.477 227.807C136.727 227.73 136.953 227.618 137.154 227.47C137.356 227.322 137.526 227.142 137.666 226.929C137.808 226.713 137.906 226.466 137.96 226.188L139.289 226.192C139.218 226.621 139.08 227.016 138.876 227.376C138.674 227.734 138.414 228.044 138.096 228.305C137.781 228.564 137.42 228.764 137.014 228.906C136.607 229.048 136.164 229.119 135.684 229.119C134.928 229.119 134.255 228.94 133.664 228.582C133.073 228.222 132.607 227.706 132.267 227.036C131.928 226.365 131.759 225.565 131.759 224.636C131.759 223.705 131.93 222.905 132.271 222.237C132.612 221.567 133.078 221.053 133.669 220.695C134.259 220.334 134.931 220.153 135.684 220.153C136.147 220.153 136.579 220.22 136.98 220.354C137.383 220.484 137.745 220.678 138.066 220.933C138.387 221.186 138.653 221.496 138.863 221.862C139.073 222.226 139.215 222.642 139.289 223.111ZM142.984 229H141.586L144.726 220.273H146.248L149.388 229H147.991L145.523 221.858H145.455L142.984 229ZM143.218 225.582H147.752V226.69H143.218V225.582ZM150.627 221.406V220.273H157.381V221.406H154.658V229H153.346V221.406H150.627ZM161.631 220.273V229H160.314V220.273H161.631ZM172.569 224.636C172.569 225.568 172.399 226.369 172.058 227.04C171.717 227.707 171.25 228.222 170.656 228.582C170.065 228.94 169.393 229.119 168.64 229.119C167.884 229.119 167.21 228.94 166.616 228.582C166.025 228.222 165.559 227.706 165.218 227.036C164.877 226.365 164.707 225.565 164.707 224.636C164.707 223.705 164.877 222.905 165.218 222.237C165.559 221.567 166.025 221.053 166.616 220.695C167.21 220.334 167.884 220.153 168.64 220.153C169.393 220.153 170.065 220.334 170.656 220.695C171.25 221.053 171.717 221.567 172.058 222.237C172.399 222.905 172.569 223.705 172.569 224.636ZM171.265 224.636C171.265 223.926 171.15 223.328 170.92 222.842C170.693 222.354 170.38 221.984 169.982 221.734C169.588 221.482 169.14 221.355 168.64 221.355C168.137 221.355 167.688 221.482 167.294 221.734C166.899 221.984 166.586 222.354 166.356 222.842C166.129 223.328 166.015 223.926 166.015 224.636C166.015 225.347 166.129 225.946 166.356 226.435C166.586 226.92 166.899 227.29 167.294 227.543C167.688 227.793 168.137 227.918 168.64 227.918C169.14 227.918 169.588 227.793 169.982 227.543C170.38 227.29 170.693 226.92 170.92 226.435C171.15 225.946 171.265 225.347 171.265 224.636ZM182.695 220.273V229H181.485L177.049 222.599H176.968V229H175.651V220.273H176.87L181.31 226.682H181.391V220.273H182.695Z" fill="#A3A8BD"/>
+<g filter="url(#filter2_d_1297_52063)">
+<rect x="399" y="183" width="372" height="160" rx="16" fill="white"/>
+<rect x="399" y="183" width="372" height="160" rx="16" stroke="#F2F2F8"/>
+</g>
+<rect x="431" y="283" width="92" height="12" rx="6" fill="url(#paint3_linear_1297_52063)"/>
+<rect x="431" y="303" width="40" height="8" rx="4" fill="url(#paint4_linear_1297_52063)"/>
+<rect x="699" y="303" width="40" height="8" rx="4" fill="url(#paint5_linear_1297_52063)"/>
+<path d="M456.384 228V219.273H461.796V220.406H457.701V223.065H461.408V224.195H457.701V228H456.384ZM470.468 219.273H471.789V225.013C471.789 225.624 471.645 226.165 471.358 226.636C471.072 227.105 470.668 227.474 470.148 227.744C469.628 228.011 469.019 228.145 468.32 228.145C467.624 228.145 467.016 228.011 466.496 227.744C465.976 227.474 465.573 227.105 465.286 226.636C464.999 226.165 464.856 225.624 464.856 225.013V219.273H466.172V224.906C466.172 225.301 466.259 225.652 466.432 225.959C466.608 226.266 466.857 226.507 467.178 226.683C467.499 226.857 467.88 226.943 468.32 226.943C468.763 226.943 469.145 226.857 469.466 226.683C469.79 226.507 470.037 226.266 470.208 225.959C470.381 225.652 470.468 225.301 470.468 224.906V219.273ZM482.187 219.273V228H480.977L476.541 221.599H476.46V228H475.143V219.273H476.362L480.802 225.682H480.883V219.273H482.187ZM492.797 222.111H491.467C491.416 221.827 491.321 221.577 491.182 221.361C491.042 221.145 490.872 220.962 490.67 220.811C490.469 220.661 490.243 220.547 489.993 220.47C489.746 220.393 489.483 220.355 489.204 220.355C488.702 220.355 488.251 220.482 487.853 220.734C487.459 220.987 487.146 221.358 486.916 221.847C486.689 222.335 486.575 222.932 486.575 223.636C486.575 224.347 486.689 224.946 486.916 225.435C487.146 225.923 487.46 226.293 487.858 226.543C488.255 226.793 488.703 226.918 489.2 226.918C489.476 226.918 489.737 226.881 489.984 226.807C490.234 226.73 490.46 226.618 490.662 226.47C490.863 226.322 491.034 226.142 491.173 225.929C491.315 225.713 491.413 225.466 491.467 225.188L492.797 225.192C492.726 225.621 492.588 226.016 492.383 226.376C492.182 226.734 491.922 227.044 491.603 227.305C491.288 227.564 490.927 227.764 490.521 227.906C490.115 228.048 489.672 228.119 489.192 228.119C488.436 228.119 487.763 227.94 487.172 227.582C486.581 227.222 486.115 226.706 485.774 226.036C485.436 225.365 485.267 224.565 485.267 223.636C485.267 222.705 485.437 221.905 485.778 221.237C486.119 220.567 486.585 220.053 487.176 219.695C487.767 219.334 488.439 219.153 489.192 219.153C489.655 219.153 490.086 219.22 490.487 219.354C490.89 219.484 491.253 219.678 491.574 219.933C491.895 220.186 492.16 220.496 492.371 220.862C492.581 221.226 492.723 221.642 492.797 222.111ZM495.382 220.406V219.273H502.136V220.406H499.413V228H498.101V220.406H495.382ZM506.385 219.273V228H505.069V219.273H506.385ZM517.324 223.636C517.324 224.568 517.154 225.369 516.813 226.04C516.472 226.707 516.004 227.222 515.411 227.582C514.82 227.94 514.148 228.119 513.395 228.119C512.639 228.119 511.965 227.94 511.371 227.582C510.78 227.222 510.314 226.706 509.973 226.036C509.632 225.365 509.462 224.565 509.462 223.636C509.462 222.705 509.632 221.905 509.973 221.237C510.314 220.567 510.78 220.053 511.371 219.695C511.965 219.334 512.639 219.153 513.395 219.153C514.148 219.153 514.82 219.334 515.411 219.695C516.004 220.053 516.472 220.567 516.813 221.237C517.154 221.905 517.324 222.705 517.324 223.636ZM516.02 223.636C516.02 222.926 515.905 222.328 515.675 221.842C515.448 221.354 515.135 220.984 514.737 220.734C514.343 220.482 513.895 220.355 513.395 220.355C512.892 220.355 512.443 220.482 512.048 220.734C511.654 220.984 511.341 221.354 511.111 221.842C510.884 222.328 510.77 222.926 510.77 223.636C510.77 224.347 510.884 224.946 511.111 225.435C511.341 225.92 511.654 226.29 512.048 226.543C512.443 226.793 512.892 226.918 513.395 226.918C513.895 226.918 514.343 226.793 514.737 226.543C515.135 226.29 515.448 225.92 515.675 225.435C515.905 224.946 516.02 224.347 516.02 223.636ZM527.45 219.273V228H526.24L521.803 221.599H521.723V228H520.406V219.273H521.625L526.065 225.682H526.146V219.273H527.45ZM535.571 221.565C535.525 221.162 535.338 220.849 535.008 220.628C534.679 220.403 534.264 220.291 533.764 220.291C533.406 220.291 533.096 220.348 532.835 220.462C532.573 220.572 532.37 220.726 532.225 220.922C532.083 221.115 532.012 221.335 532.012 221.582C532.012 221.79 532.061 221.969 532.157 222.119C532.257 222.27 532.386 222.396 532.545 222.499C532.707 222.598 532.88 222.682 533.065 222.75C533.25 222.815 533.427 222.869 533.598 222.912L534.45 223.134C534.728 223.202 535.014 223.294 535.306 223.411C535.599 223.527 535.87 223.68 536.12 223.871C536.37 224.061 536.572 224.297 536.725 224.578C536.882 224.859 536.96 225.196 536.96 225.588C536.96 226.082 536.832 226.521 536.576 226.905C536.323 227.288 535.955 227.591 535.473 227.812C534.992 228.034 534.411 228.145 533.73 228.145C533.076 228.145 532.511 228.041 532.034 227.834C531.556 227.626 531.183 227.332 530.913 226.952C530.643 226.568 530.494 226.114 530.465 225.588H531.786C531.812 225.903 531.914 226.166 532.093 226.376C532.275 226.584 532.507 226.739 532.788 226.841C533.072 226.94 533.383 226.99 533.721 226.99C534.093 226.99 534.424 226.932 534.714 226.815C535.007 226.696 535.237 226.531 535.404 226.321C535.572 226.108 535.656 225.859 535.656 225.575C535.656 225.317 535.582 225.105 535.434 224.94C535.289 224.776 535.092 224.639 534.842 224.531C534.595 224.423 534.315 224.328 534.002 224.246L532.971 223.964C532.272 223.774 531.718 223.494 531.309 223.125C530.903 222.756 530.7 222.267 530.7 221.659C530.7 221.156 530.836 220.717 531.109 220.342C531.382 219.967 531.751 219.676 532.217 219.469C532.683 219.259 533.208 219.153 533.794 219.153C534.384 219.153 534.906 219.257 535.357 219.464C535.812 219.672 536.17 219.957 536.431 220.321C536.693 220.682 536.829 221.097 536.84 221.565H535.571Z" fill="#A3A8BD"/>
+<g filter="url(#filter3_d_1297_52063)">
+<rect x="2" width="372" height="160" rx="16" fill="white"/>
+<rect x="2" width="372" height="160" rx="16" stroke="#F2F2F8"/>
+</g>
+<path d="M66.2832 45H63.4579V36.2727H66.3726C67.2278 36.2727 67.9621 36.4474 68.5758 36.7969C69.1894 37.1435 69.6596 37.642 69.9863 38.2926C70.3158 38.9403 70.4806 39.7173 70.4806 40.6236C70.4806 41.5327 70.3144 42.3139 69.982 42.9673C69.6525 43.6207 69.1752 44.1236 68.5502 44.4759C67.9252 44.8253 67.1695 45 66.2832 45ZM64.7746 43.8494H66.2107C66.8755 43.8494 67.428 43.7244 67.8684 43.4744C68.3087 43.2216 68.6383 42.8565 68.857 42.3793C69.0758 41.8991 69.1851 41.3139 69.1851 40.6236C69.1851 39.9389 69.0758 39.358 68.857 38.8807C68.6411 38.4034 68.3187 38.0412 67.8897 37.794C67.4607 37.5469 66.928 37.4233 66.2917 37.4233H64.7746V43.8494ZM73.8616 45H72.4639L75.6045 36.2727H77.1259L80.2665 45H78.8687L76.4014 37.858H76.3332L73.8616 45ZM74.096 41.5824H78.6301V42.6903H74.096V41.5824ZM81.5051 37.4062V36.2727H88.2594V37.4062H85.5364V45H84.2239V37.4062H81.5051ZM90.8979 45H89.5002L92.6408 36.2727H94.1621L97.3027 45H95.905L93.4377 37.858H93.3695L90.8979 45ZM91.1323 41.5824H95.6664V42.6903H91.1323V41.5824ZM100.003 45V36.2727H103.199C103.818 36.2727 104.331 36.375 104.737 36.5795C105.144 36.7812 105.448 37.0554 105.649 37.402C105.851 37.7457 105.952 38.1335 105.952 38.5653C105.952 38.929 105.885 39.2358 105.752 39.4858C105.618 39.733 105.439 39.9318 105.215 40.0824C104.993 40.2301 104.749 40.3381 104.482 40.4062V40.4915C104.771 40.5057 105.054 40.5994 105.33 40.7727C105.608 40.9432 105.838 41.1861 106.02 41.5014C106.202 41.8168 106.293 42.2003 106.293 42.652C106.293 43.098 106.188 43.4986 105.977 43.8537C105.77 44.206 105.449 44.4858 105.014 44.6932C104.58 44.8977 104.024 45 103.348 45H100.003ZM101.32 43.8707H103.22C103.851 43.8707 104.303 43.7486 104.575 43.5043C104.848 43.2599 104.985 42.9545 104.985 42.5881C104.985 42.3125 104.915 42.0597 104.776 41.8295C104.637 41.5994 104.438 41.4162 104.179 41.2798C103.923 41.1435 103.62 41.0753 103.267 41.0753H101.32V43.8707ZM101.32 40.0483H103.084C103.379 40.0483 103.645 39.9915 103.881 39.8778C104.12 39.7642 104.308 39.6051 104.448 39.4006C104.59 39.1932 104.661 38.9489 104.661 38.6676C104.661 38.3068 104.534 38.0043 104.281 37.7599C104.029 37.5156 103.641 37.3935 103.118 37.3935H101.32V40.0483ZM110.032 45H108.634L111.775 36.2727H113.296L116.437 45H115.039L112.572 37.858H112.503L110.032 45ZM110.266 41.5824H114.8V42.6903H110.266V41.5824ZM123.827 38.5653C123.781 38.1619 123.594 37.8494 123.264 37.6278C122.935 37.4034 122.52 37.2912 122.02 37.2912C121.662 37.2912 121.352 37.348 121.091 37.4616C120.829 37.5724 120.626 37.7259 120.481 37.9219C120.339 38.1151 120.268 38.3352 120.268 38.5824C120.268 38.7898 120.317 38.9687 120.413 39.1193C120.513 39.2699 120.642 39.3963 120.801 39.4986C120.963 39.598 121.136 39.6818 121.321 39.75C121.506 39.8153 121.683 39.8693 121.854 39.9119L122.706 40.1335C122.984 40.2017 123.27 40.294 123.562 40.4105C123.855 40.527 124.126 40.6804 124.376 40.8707C124.626 41.0611 124.828 41.2969 124.981 41.5781C125.138 41.8594 125.216 42.196 125.216 42.5881C125.216 43.0824 125.088 43.5213 124.832 43.9048C124.579 44.2884 124.212 44.5909 123.729 44.8125C123.248 45.0341 122.667 45.1449 121.986 45.1449C121.332 45.1449 120.767 45.0412 120.29 44.8338C119.812 44.6264 119.439 44.3324 119.169 43.9517C118.899 43.5682 118.75 43.1136 118.721 42.5881H120.042C120.068 42.9034 120.17 43.1662 120.349 43.3764C120.531 43.5838 120.763 43.7386 121.044 43.8409C121.328 43.9403 121.639 43.9901 121.977 43.9901C122.349 43.9901 122.68 43.9318 122.97 43.8153C123.263 43.696 123.493 43.5312 123.66 43.321C123.828 43.108 123.912 42.8594 123.912 42.5753C123.912 42.3168 123.838 42.1051 123.69 41.9403C123.545 41.7756 123.348 41.6392 123.098 41.5312C122.851 41.4233 122.571 41.3281 122.258 41.2457L121.227 40.9645C120.528 40.7741 119.974 40.4943 119.565 40.125C119.159 39.7557 118.956 39.267 118.956 38.6591C118.956 38.1562 119.092 37.7173 119.365 37.3423C119.638 36.9673 120.007 36.6761 120.473 36.4688C120.939 36.2585 121.464 36.1534 122.05 36.1534C122.64 36.1534 123.162 36.2571 123.613 36.4645C124.068 36.6719 124.426 36.9574 124.687 37.321C124.949 37.6818 125.085 38.0966 125.096 38.5653H123.827ZM128.229 45V36.2727H133.701V37.4062H129.546V40.0653H133.415V41.1946H129.546V43.8665H133.752V45H128.229Z" fill="#A3A8BD"/>
+<g filter="url(#filter4_d_1297_52063)">
+<rect x="399" width="372" height="160" rx="16" fill="white"/>
+<rect x="399" width="372" height="160" rx="16" stroke="#F2F2F8"/>
+</g>
+<rect x="431" y="99" width="92" height="12" rx="6" fill="url(#paint6_linear_1297_52063)"/>
+<rect x="431" y="119" width="40" height="8" rx="4" fill="url(#paint7_linear_1297_52063)"/>
+<rect x="699" y="119" width="40" height="8" rx="4" fill="url(#paint8_linear_1297_52063)"/>
+<path d="M432.6 37.8001C432.6 36.9164 433.317 36.2001 434.2 36.2001H438.2L439.8 37.8001H443.8C444.684 37.8001 445.4 38.5164 445.4 39.4001V44.2001C445.4 45.0837 444.684 45.8001 443.8 45.8001H434.2C433.317 45.8001 432.6 45.0837 432.6 44.2001V37.8001Z" fill="#A3A8BD"/>
+<path d="M460.733 38.5653C460.687 38.1619 460.5 37.8494 460.17 37.6278C459.841 37.4034 459.426 37.2912 458.926 37.2912C458.568 37.2912 458.258 37.348 457.997 37.4616C457.736 37.5724 457.532 37.7259 457.388 37.9219C457.246 38.1151 457.174 38.3352 457.174 38.5824C457.174 38.7898 457.223 38.9687 457.319 39.1193C457.419 39.2699 457.548 39.3963 457.707 39.4986C457.869 39.598 458.042 39.6818 458.227 39.75C458.412 39.8153 458.589 39.8693 458.76 39.9119L459.612 40.1335C459.89 40.2017 460.176 40.294 460.469 40.4105C460.761 40.527 461.032 40.6804 461.282 40.8707C461.532 41.0611 461.734 41.2969 461.888 41.5781C462.044 41.8594 462.122 42.196 462.122 42.5881C462.122 43.0824 461.994 43.5213 461.738 43.9048C461.486 44.2884 461.118 44.5909 460.635 44.8125C460.155 45.0341 459.574 45.1449 458.892 45.1449C458.238 45.1449 457.673 45.0412 457.196 44.8338C456.719 44.6264 456.345 44.3324 456.075 43.9517C455.805 43.5682 455.656 43.1136 455.628 42.5881H456.949C456.974 42.9034 457.076 43.1662 457.255 43.3764C457.437 43.5838 457.669 43.7386 457.95 43.8409C458.234 43.9403 458.545 43.9901 458.883 43.9901C459.255 43.9901 459.586 43.9318 459.876 43.8153C460.169 43.696 460.399 43.5312 460.567 43.321C460.734 43.108 460.818 42.8594 460.818 42.5753C460.818 42.3168 460.744 42.1051 460.596 41.9403C460.451 41.7756 460.254 41.6392 460.004 41.5312C459.757 41.4233 459.477 41.3281 459.165 41.2457L458.133 40.9645C457.434 40.7741 456.88 40.4943 456.471 40.125C456.065 39.7557 455.862 39.267 455.862 38.6591C455.862 38.1562 455.998 37.7173 456.271 37.3423C456.544 36.9673 456.913 36.6761 457.379 36.4688C457.845 36.2585 458.371 36.1534 458.956 36.1534C459.547 36.1534 460.068 36.2571 460.52 36.4645C460.974 36.6719 461.332 36.9574 461.594 37.321C461.855 37.6818 461.991 38.0966 462.003 38.5653H460.733ZM464.705 37.4062V36.2727H471.459V37.4062H468.736V45H467.424V37.4062H464.705ZM481.598 40.6364C481.598 41.5682 481.427 42.3693 481.086 43.0398C480.746 43.7074 480.278 44.2216 479.684 44.5824C479.094 44.9403 478.422 45.1193 477.669 45.1193C476.913 45.1193 476.238 44.9403 475.645 44.5824C475.054 44.2216 474.588 43.706 474.247 43.0355C473.906 42.3651 473.736 41.5653 473.736 40.6364C473.736 39.7045 473.906 38.9048 474.247 38.2372C474.588 37.5668 475.054 37.0526 475.645 36.6946C476.238 36.3338 476.913 36.1534 477.669 36.1534C478.422 36.1534 479.094 36.3338 479.684 36.6946C480.278 37.0526 480.746 37.5668 481.086 38.2372C481.427 38.9048 481.598 39.7045 481.598 40.6364ZM480.294 40.6364C480.294 39.9261 480.179 39.3281 479.949 38.8423C479.721 38.3537 479.409 37.9844 479.011 37.7344C478.616 37.4815 478.169 37.3551 477.669 37.3551C477.166 37.3551 476.717 37.4815 476.322 37.7344C475.927 37.9844 475.615 38.3537 475.385 38.8423C475.157 39.3281 475.044 39.9261 475.044 40.6364C475.044 41.3466 475.157 41.946 475.385 42.4347C475.615 42.9205 475.927 43.2898 476.322 43.5426C476.717 43.7926 477.166 43.9176 477.669 43.9176C478.169 43.9176 478.616 43.7926 479.011 43.5426C479.409 43.2898 479.721 42.9205 479.949 42.4347C480.179 41.946 480.294 41.3466 480.294 40.6364ZM484.68 45V36.2727H487.79C488.466 36.2727 489.028 36.3892 489.474 36.6222C489.922 36.8551 490.258 37.1776 490.479 37.5895C490.701 37.9986 490.812 38.4716 490.812 39.0085C490.812 39.5426 490.699 40.0128 490.475 40.419C490.253 40.8224 489.918 41.1364 489.469 41.3608C489.023 41.5852 488.462 41.6974 487.786 41.6974H485.43V40.5639H487.667C488.093 40.5639 488.439 40.5028 488.706 40.3807C488.976 40.2585 489.174 40.081 489.299 39.848C489.424 39.6151 489.486 39.3352 489.486 39.0085C489.486 38.679 489.422 38.3935 489.295 38.152C489.17 37.9105 488.972 37.7259 488.702 37.598C488.435 37.4673 488.084 37.402 487.65 37.402H485.996V45H484.68ZM488.988 41.0625L491.144 45H489.644L487.53 41.0625H488.988ZM494.591 45H493.193L496.334 36.2727H497.855L500.996 45H499.598L497.131 37.858H497.063L494.591 45ZM494.825 41.5824H499.36V42.6903H494.825V41.5824ZM509.192 39.0298C509.11 38.7713 508.999 38.5398 508.86 38.3352C508.724 38.1278 508.56 37.9517 508.37 37.8068C508.18 37.6591 507.962 37.5469 507.718 37.4702C507.476 37.3935 507.211 37.3551 506.921 37.3551C506.43 37.3551 505.986 37.4815 505.591 37.7344C505.197 37.9872 504.884 38.358 504.654 38.8466C504.427 39.3324 504.313 39.9276 504.313 40.6321C504.313 41.3395 504.428 41.9375 504.658 42.4261C504.888 42.9148 505.204 43.2855 505.604 43.5384C506.005 43.7912 506.461 43.9176 506.972 43.9176C507.447 43.9176 507.86 43.821 508.212 43.6278C508.567 43.4347 508.841 43.1619 509.035 42.8097C509.231 42.4545 509.329 42.0369 509.329 41.5568L509.67 41.6207H507.172V40.5341H510.603V41.527C510.603 42.2599 510.447 42.8963 510.134 43.4361C509.824 43.973 509.395 44.3878 508.847 44.6804C508.302 44.973 507.677 45.1193 506.972 45.1193C506.182 45.1193 505.489 44.9375 504.893 44.5739C504.299 44.2102 503.836 43.6946 503.503 43.027C503.171 42.3565 503.005 41.5611 503.005 40.6406C503.005 39.9446 503.101 39.3196 503.295 38.7656C503.488 38.2116 503.759 37.7415 504.109 37.3551C504.461 36.9659 504.874 36.669 505.349 36.4645C505.826 36.2571 506.347 36.1534 506.912 36.1534C507.384 36.1534 507.823 36.223 508.229 36.3622C508.638 36.5014 509.002 36.6989 509.32 36.9545C509.641 37.2102 509.907 37.5142 510.117 37.8665C510.327 38.2159 510.469 38.6037 510.543 39.0298H509.192ZM513.714 45V36.2727H519.186V37.4062H515.031V40.0653H518.9V41.1946H515.031V43.8665H519.237V45H513.714Z" fill="#A3A8BD"/>
+<path d="M36.3997 41.6V44C36.3997 45.3255 38.9069 46.4 41.9997 46.4C45.0925 46.4 47.5997 45.3255 47.5997 44V41.6C47.5997 42.9255 45.0925 44 41.9997 44C38.9069 44 36.3997 42.9255 36.3997 41.6Z" fill="#A3A8BD"/>
+<path d="M36.3997 37.6V40C36.3997 41.3255 38.9069 42.4 41.9997 42.4C45.0925 42.4 47.5997 41.3255 47.5997 40V37.6C47.5997 38.9255 45.0925 40 41.9997 40C38.9069 40 36.3997 38.9255 36.3997 37.6Z" fill="#A3A8BD"/>
+<path d="M47.5997 36C47.5997 37.3255 45.0925 38.4 41.9997 38.4C38.9069 38.4 36.3997 37.3255 36.3997 36C36.3997 34.6745 38.9069 33.6 41.9997 33.6C45.0925 33.6 47.5997 34.6745 47.5997 36Z" fill="#A3A8BD"/>
+<path d="M44.4 219.8C44.4 221.126 43.3255 222.2 42 222.2C40.6746 222.2 39.6 221.126 39.6 219.8C39.6 218.475 40.6746 217.4 42 217.4C43.3255 217.4 44.4 218.475 44.4 219.8Z" fill="#A3A8BD"/>
+<path d="M48.4 221.4C48.4 222.284 47.6837 223 46.8 223C45.9164 223 45.2 222.284 45.2 221.4C45.2 220.516 45.9164 219.8 46.8 219.8C47.6837 219.8 48.4 220.516 48.4 221.4Z" fill="#A3A8BD"/>
+<path d="M45.2 227C45.2 225.233 43.7674 223.8 42 223.8C40.2327 223.8 38.8 225.233 38.8 227V229.4H45.2V227Z" fill="#A3A8BD"/>
+<path d="M38.8 221.4C38.8 222.284 38.0837 223 37.2 223C36.3164 223 35.6 222.284 35.6 221.4C35.6 220.516 36.3164 219.8 37.2 219.8C38.0837 219.8 38.8 220.516 38.8 221.4Z" fill="#A3A8BD"/>
+<path d="M46.8 229.4V227C46.8 226.157 46.5826 225.364 46.2006 224.675C46.3922 224.626 46.5931 224.6 46.8 224.6C48.1255 224.6 49.2 225.675 49.2 227V229.4H46.8Z" fill="#A3A8BD"/>
+<path d="M37.7995 224.675C37.4175 225.364 37.2 226.157 37.2 227V229.4H34.8V227C34.8 225.675 35.8746 224.6 37.2 224.6C37.407 224.6 37.6079 224.626 37.7995 224.675Z" fill="#A3A8BD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M440.04 215.837C440.373 215.942 440.6 216.251 440.6 216.6V220.6L443.8 220.6C444.098 220.6 444.371 220.766 444.509 221.031C444.647 221.295 444.626 221.614 444.455 221.859L438.855 229.859C438.655 230.145 438.292 230.268 437.959 230.163C437.626 230.058 437.4 229.749 437.4 229.4V225.4H434.2C433.901 225.4 433.628 225.234 433.49 224.969C433.352 224.705 433.373 224.386 433.544 224.141L439.144 216.141C439.345 215.855 439.707 215.732 440.04 215.837Z" fill="#A3A8BD"/>
+<rect x="820" y="32" width="92" height="12" rx="6" fill="url(#paint9_linear_1297_52063)"/>
+<path d="M821.71 70V59.8182H825.15C825.945 59.8182 826.598 59.9541 827.109 60.2259C827.619 60.4943 827.997 60.8639 828.242 61.3345C828.487 61.8052 828.61 62.3404 828.61 62.9403C828.61 63.5402 828.487 64.0722 828.242 64.5362C827.997 65.0002 827.621 65.3648 827.114 65.63C826.607 65.8918 825.959 66.0227 825.17 66.0227H822.386V64.9091H825.13C825.674 64.9091 826.111 64.8295 826.442 64.6705C826.777 64.5114 827.019 64.286 827.168 63.9943C827.321 63.6993 827.397 63.348 827.397 62.9403C827.397 62.5327 827.321 62.1764 827.168 61.8714C827.016 61.5665 826.772 61.3312 826.438 61.1655C826.103 60.9964 825.66 60.9119 825.11 60.9119H822.942V70H821.71ZM826.502 65.4261L829.008 70H827.576L825.11 65.4261H826.502ZM833.625 70.1591C832.889 70.1591 832.255 69.9967 831.721 69.6719C831.191 69.3438 830.781 68.8864 830.493 68.2997C830.208 67.7098 830.066 67.0237 830.066 66.2415C830.066 65.4593 830.208 64.7699 830.493 64.1733C830.781 63.5734 831.182 63.1061 831.696 62.7713C832.213 62.4332 832.816 62.2642 833.506 62.2642C833.904 62.2642 834.296 62.3305 834.684 62.4631C835.072 62.5956 835.425 62.8111 835.743 63.1094C836.061 63.4044 836.315 63.7955 836.504 64.2827C836.693 64.7699 836.787 65.3698 836.787 66.0824V66.5795H830.901V65.5653H835.594C835.594 65.1345 835.508 64.75 835.335 64.4119C835.166 64.0739 834.924 63.8071 834.61 63.6115C834.298 63.416 833.93 63.3182 833.506 63.3182C833.039 63.3182 832.634 63.4342 832.293 63.6662C831.955 63.8949 831.695 64.1932 831.512 64.5611C831.33 64.929 831.239 65.3234 831.239 65.7443V66.4205C831.239 66.9972 831.338 67.486 831.537 67.8871C831.739 68.2848 832.019 68.5881 832.377 68.7969C832.735 69.0024 833.151 69.1051 833.625 69.1051C833.933 69.1051 834.212 69.062 834.46 68.9759C834.712 68.8864 834.929 68.7538 835.112 68.5781C835.294 68.3991 835.435 68.1771 835.534 67.9119L836.668 68.2301C836.548 68.6146 836.348 68.9527 836.066 69.2443C835.785 69.5327 835.436 69.758 835.022 69.9205C834.608 70.0795 834.142 70.1591 833.625 70.1591ZM840.819 70.179C840.335 70.179 839.896 70.0878 839.502 69.9055C839.107 69.7199 838.794 69.4531 838.562 69.1051C838.33 68.7538 838.214 68.3295 838.214 67.8324C838.214 67.3949 838.3 67.0402 838.472 66.7685C838.645 66.4934 838.875 66.2779 839.164 66.1222C839.452 65.9664 839.77 65.8504 840.118 65.7741C840.469 65.6946 840.822 65.6316 841.177 65.5852C841.641 65.5256 842.017 65.4808 842.306 65.451C842.597 65.4179 842.809 65.3632 842.942 65.2869C843.078 65.2107 843.146 65.0781 843.146 64.8892V64.8494C843.146 64.3589 843.012 63.9777 842.743 63.706C842.478 63.4342 842.075 63.2983 841.535 63.2983C840.975 63.2983 840.536 63.4209 840.218 63.6662C839.899 63.9115 839.676 64.1733 839.546 64.4517L838.433 64.054C838.632 63.59 838.897 63.2287 839.228 62.9702C839.563 62.7083 839.927 62.526 840.322 62.4233C840.72 62.3172 841.111 62.2642 841.495 62.2642C841.74 62.2642 842.022 62.294 842.34 62.3537C842.662 62.41 842.972 62.5277 843.27 62.7067C843.572 62.8857 843.822 63.1558 844.021 63.517C844.22 63.8783 844.319 64.3622 844.319 64.9688V70H843.146V68.9659H843.086C843.007 69.1316 842.874 69.3089 842.688 69.4979C842.503 69.6868 842.256 69.8475 841.948 69.9801C841.639 70.1127 841.263 70.179 840.819 70.179ZM840.998 69.125C841.462 69.125 841.853 69.0339 842.171 68.8516C842.493 68.6693 842.735 68.4339 842.897 68.1456C843.063 67.8572 843.146 67.554 843.146 67.2358V66.1619C843.096 66.2216 842.987 66.2763 842.818 66.326C842.652 66.3724 842.46 66.4138 842.241 66.4503C842.026 66.4834 841.815 66.5133 841.61 66.5398C841.407 66.563 841.243 66.5829 841.117 66.5994C840.812 66.6392 840.527 66.7038 840.262 66.7933C840 66.8795 839.788 67.0104 839.626 67.1861C839.467 67.3584 839.387 67.5937 839.387 67.892C839.387 68.2997 839.538 68.608 839.84 68.8168C840.145 69.0223 840.531 69.125 840.998 69.125ZM847.634 59.8182V70H846.461V59.8182H847.634ZM853.104 62.3636V63.358H849.146V62.3636H853.104ZM850.3 60.5341H851.473V67.8125C851.473 68.1439 851.521 68.3925 851.617 68.5582C851.717 68.7206 851.843 68.83 851.995 68.8864C852.151 68.9394 852.315 68.9659 852.487 68.9659C852.617 68.9659 852.723 68.9593 852.806 68.946C852.888 68.9295 852.955 68.9162 853.004 68.9062L853.243 69.9602C853.164 69.9901 853.052 70.0199 852.91 70.0497C852.767 70.0829 852.587 70.0994 852.368 70.0994C852.037 70.0994 851.712 70.0282 851.394 69.8857C851.079 69.7431 850.817 69.526 850.608 69.2344C850.403 68.9427 850.3 68.5748 850.3 68.1307V60.5341ZM854.869 70V62.3636H856.042V70H854.869ZM855.465 61.0909C855.237 61.0909 855.039 61.013 854.874 60.8572C854.711 60.7015 854.63 60.5142 854.63 60.2955C854.63 60.0767 854.711 59.8894 854.874 59.7337C855.039 59.5779 855.237 59.5 855.465 59.5C855.694 59.5 855.89 59.5779 856.052 59.7337C856.218 59.8894 856.301 60.0767 856.301 60.2955C856.301 60.5142 856.218 60.7015 856.052 60.8572C855.89 61.013 855.694 61.0909 855.465 61.0909ZM858.191 70V62.3636H859.325V63.5568H859.424C859.583 63.1491 859.84 62.8326 860.195 62.6072C860.549 62.3786 860.975 62.2642 861.472 62.2642C861.976 62.2642 862.395 62.3786 862.73 62.6072C863.068 62.8326 863.332 63.1491 863.521 63.5568H863.6C863.796 63.1624 864.089 62.8492 864.48 62.6172C864.871 62.3819 865.34 62.2642 865.887 62.2642C866.57 62.2642 867.128 62.478 867.562 62.9055C867.997 63.3298 868.214 63.991 868.214 64.8892V70H867.04V64.8892C867.04 64.3258 866.886 63.9231 866.578 63.6811C866.27 63.4392 865.907 63.3182 865.489 63.3182C864.952 63.3182 864.536 63.4806 864.241 63.8054C863.946 64.1269 863.799 64.5346 863.799 65.0284V70H862.606V64.7699C862.606 64.3357 862.465 63.986 862.183 63.7209C861.902 63.4524 861.539 63.3182 861.094 63.3182C860.79 63.3182 860.504 63.3994 860.239 63.5618C859.978 63.7242 859.765 63.9496 859.603 64.2379C859.444 64.523 859.364 64.8527 859.364 65.2273V70H858.191ZM873.561 70.1591C872.825 70.1591 872.19 69.9967 871.657 69.6719C871.126 69.3438 870.717 68.8864 870.429 68.2997C870.144 67.7098 870.001 67.0237 870.001 66.2415C870.001 65.4593 870.144 64.7699 870.429 64.1733C870.717 63.5734 871.118 63.1061 871.632 62.7713C872.149 62.4332 872.752 62.2642 873.441 62.2642C873.839 62.2642 874.232 62.3305 874.62 62.4631C875.007 62.5956 875.36 62.8111 875.679 63.1094C875.997 63.4044 876.25 63.7955 876.439 64.2827C876.628 64.7699 876.723 65.3698 876.723 66.0824V66.5795H870.836V65.5653H875.529C875.529 65.1345 875.443 64.75 875.271 64.4119C875.102 64.0739 874.86 63.8071 874.545 63.6115C874.234 63.416 873.866 63.3182 873.441 63.3182C872.974 63.3182 872.57 63.4342 872.228 63.6662C871.89 63.8949 871.63 64.1932 871.448 64.5611C871.266 64.929 871.174 65.3234 871.174 65.7443V66.4205C871.174 66.9972 871.274 67.486 871.473 67.8871C871.675 68.2848 871.955 68.5881 872.313 68.7969C872.671 69.0024 873.087 69.1051 873.561 69.1051C873.869 69.1051 874.147 69.062 874.396 68.9759C874.648 68.8864 874.865 68.7538 875.047 68.5781C875.23 68.3991 875.37 68.1771 875.47 67.9119L876.603 68.2301C876.484 68.6146 876.283 68.9527 876.002 69.2443C875.72 69.5327 875.372 69.758 874.958 69.9205C874.543 70.0795 874.078 70.1591 873.561 70.1591ZM890.797 63H889.564C889.491 62.6454 889.364 62.3338 889.181 62.0653C889.002 61.7969 888.784 61.5715 888.525 61.3892C888.27 61.2036 887.987 61.0644 887.675 60.9716C887.364 60.8788 887.039 60.8324 886.701 60.8324C886.084 60.8324 885.526 60.9882 885.025 61.2997C884.528 61.6113 884.132 62.0703 883.837 62.6768C883.545 63.2834 883.4 64.0275 883.4 64.9091C883.4 65.7907 883.545 66.5348 883.837 67.1413C884.132 67.7479 884.528 68.2069 885.025 68.5185C885.526 68.83 886.084 68.9858 886.701 68.9858C887.039 68.9858 887.364 68.9394 887.675 68.8466C887.987 68.7538 888.27 68.6162 888.525 68.4339C888.784 68.2483 889.002 68.0213 889.181 67.7528C889.364 67.4811 889.491 67.1695 889.564 66.8182H890.797C890.704 67.3385 890.535 67.8042 890.29 68.2152C890.045 68.6262 889.74 68.9759 889.375 69.2642C889.011 69.5492 888.601 69.7663 888.147 69.9155C887.697 70.0646 887.214 70.1392 886.701 70.1392C885.832 70.1392 885.06 69.9271 884.384 69.5028C883.708 69.0786 883.176 68.4754 882.788 67.6932C882.4 66.911 882.206 65.983 882.206 64.9091C882.206 63.8352 882.4 62.9072 882.788 62.125C883.176 61.3428 883.708 60.7396 884.384 60.3153C885.06 59.8911 885.832 59.679 886.701 59.679C887.214 59.679 887.697 59.7536 888.147 59.9027C888.601 60.0518 889.011 60.2706 889.375 60.5589C889.74 60.844 890.045 61.192 890.29 61.603C890.535 62.0107 890.704 62.4763 890.797 63ZM895.733 70.1591C895.043 70.1591 894.439 69.995 893.918 69.6669C893.401 69.3388 892.997 68.8797 892.705 68.2898C892.417 67.6998 892.273 67.0104 892.273 66.2216C892.273 65.4261 892.417 64.7318 892.705 64.1385C892.997 63.5452 893.401 63.0845 893.918 62.7564C894.439 62.4283 895.043 62.2642 895.733 62.2642C896.422 62.2642 897.025 62.4283 897.542 62.7564C898.063 63.0845 898.467 63.5452 898.756 64.1385C899.047 64.7318 899.193 65.4261 899.193 66.2216C899.193 67.0104 899.047 67.6998 898.756 68.2898C898.467 68.8797 898.063 69.3388 897.542 69.6669C897.025 69.995 896.422 70.1591 895.733 70.1591ZM895.733 69.1051C896.256 69.1051 896.687 68.9709 897.025 68.7024C897.363 68.4339 897.614 68.081 897.776 67.6435C897.939 67.206 898.02 66.732 898.02 66.2216C898.02 65.7112 897.939 65.2356 897.776 64.7947C897.614 64.3539 897.363 63.9976 897.025 63.7259C896.687 63.4541 896.256 63.3182 895.733 63.3182C895.209 63.3182 894.778 63.4541 894.44 63.7259C894.102 63.9976 893.852 64.3539 893.689 64.7947C893.527 65.2356 893.446 65.7112 893.446 66.2216C893.446 66.732 893.527 67.206 893.689 67.6435C893.852 68.081 894.102 68.4339 894.44 68.7024C894.778 68.9709 895.209 69.1051 895.733 69.1051ZM902.157 65.4062V70H900.984V62.3636H902.118V63.5568H902.217C902.396 63.169 902.668 62.8575 903.032 62.6222C903.397 62.3835 903.868 62.2642 904.444 62.2642C904.961 62.2642 905.414 62.3703 905.801 62.5824C906.189 62.7912 906.491 63.1094 906.706 63.5369C906.922 63.9612 907.029 64.4981 907.029 65.1477V70H905.856V65.2273C905.856 64.6274 905.7 64.16 905.389 63.8253C905.077 63.4872 904.65 63.3182 904.106 63.3182C903.732 63.3182 903.397 63.3994 903.102 63.5618C902.81 63.7242 902.58 63.9612 902.411 64.2727C902.242 64.5843 902.157 64.9621 902.157 65.4062ZM910.347 65.4062V70H909.173V62.3636H910.307V63.5568H910.406C910.585 63.169 910.857 62.8575 911.222 62.6222C911.586 62.3835 912.057 62.2642 912.634 62.2642C913.151 62.2642 913.603 62.3703 913.991 62.5824C914.379 62.7912 914.68 63.1094 914.896 63.5369C915.111 63.9612 915.219 64.4981 915.219 65.1477V70H914.046V65.2273C914.046 64.6274 913.89 64.16 913.578 63.8253C913.267 63.4872 912.839 63.3182 912.296 63.3182C911.921 63.3182 911.586 63.3994 911.291 63.5618C911 63.7242 910.769 63.9612 910.6 64.2727C910.431 64.5843 910.347 64.9621 910.347 65.4062ZM920.565 70.1591C919.829 70.1591 919.194 69.9967 918.661 69.6719C918.13 69.3438 917.721 68.8864 917.433 68.2997C917.147 67.7098 917.005 67.0237 917.005 66.2415C917.005 65.4593 917.147 64.7699 917.433 64.1733C917.721 63.5734 918.122 63.1061 918.636 62.7713C919.153 62.4332 919.756 62.2642 920.445 62.2642C920.843 62.2642 921.236 62.3305 921.624 62.4631C922.011 62.5956 922.364 62.8111 922.683 63.1094C923.001 63.4044 923.254 63.7955 923.443 64.2827C923.632 64.7699 923.727 65.3698 923.727 66.0824V66.5795H917.84V65.5653H922.533C922.533 65.1345 922.447 64.75 922.275 64.4119C922.106 64.0739 921.864 63.8071 921.549 63.6115C921.237 63.416 920.87 63.3182 920.445 63.3182C919.978 63.3182 919.574 63.4342 919.232 63.6662C918.894 63.8949 918.634 64.1932 918.452 64.5611C918.269 64.929 918.178 65.3234 918.178 65.7443V66.4205C918.178 66.9972 918.278 67.486 918.477 67.8871C918.679 68.2848 918.959 68.5881 919.317 68.7969C919.675 69.0024 920.091 69.1051 920.565 69.1051C920.873 69.1051 921.151 69.062 921.4 68.9759C921.652 68.8864 921.869 68.7538 922.051 68.5781C922.233 68.3991 922.374 68.1771 922.474 67.9119L923.607 68.2301C923.488 68.6146 923.287 68.9527 923.006 69.2443C922.724 69.5327 922.376 69.758 921.962 69.9205C921.547 70.0795 921.082 70.1591 920.565 70.1591ZM928.614 70.1591C927.898 70.1591 927.281 69.9901 926.764 69.652C926.247 69.3139 925.849 68.8482 925.571 68.255C925.293 67.6617 925.153 66.9839 925.153 66.2216C925.153 65.446 925.296 64.7616 925.581 64.1683C925.869 63.5717 926.27 63.1061 926.784 62.7713C927.301 62.4332 927.904 62.2642 928.594 62.2642C929.131 62.2642 929.615 62.3636 930.045 62.5625C930.476 62.7614 930.829 63.0398 931.104 63.3977C931.379 63.7557 931.55 64.1733 931.616 64.6506H930.443C930.354 64.3026 930.155 63.9943 929.847 63.7259C929.542 63.4541 929.131 63.3182 928.614 63.3182C928.156 63.3182 927.755 63.4375 927.411 63.6761C927.069 63.9115 926.802 64.2446 926.61 64.6754C926.421 65.103 926.327 65.6051 926.327 66.1818C926.327 66.7718 926.42 67.2855 926.605 67.723C926.794 68.1605 927.059 68.5002 927.401 68.7422C927.745 68.9841 928.15 69.1051 928.614 69.1051C928.919 69.1051 929.195 69.0521 929.444 68.946C929.692 68.84 929.903 68.6875 930.075 68.4886C930.248 68.2898 930.37 68.0511 930.443 67.7727H931.616C931.55 68.2235 931.386 68.6295 931.124 68.9908C930.866 69.3487 930.523 69.6338 930.095 69.8459C929.671 70.0547 929.177 70.1591 928.614 70.1591ZM936.653 62.3636V63.358H932.695V62.3636H936.653ZM933.849 60.5341H935.022V67.8125C935.022 68.1439 935.07 68.3925 935.166 68.5582C935.266 68.7206 935.392 68.83 935.544 68.8864C935.7 68.9394 935.864 68.9659 936.036 68.9659C936.165 68.9659 936.272 68.9593 936.354 68.946C936.437 68.9295 936.504 68.9162 936.553 68.9062L936.792 69.9602C936.712 69.9901 936.601 70.0199 936.459 70.0497C936.316 70.0829 936.136 70.0994 935.917 70.0994C935.585 70.0994 935.261 70.0282 934.942 69.8857C934.628 69.7431 934.366 69.526 934.157 69.2344C933.951 68.9427 933.849 68.5748 933.849 68.1307V60.5341ZM938.418 70V62.3636H939.591V70H938.418ZM939.014 61.0909C938.786 61.0909 938.588 61.013 938.423 60.8572C938.26 60.7015 938.179 60.5142 938.179 60.2955C938.179 60.0767 938.26 59.8894 938.423 59.7337C938.588 59.5779 938.786 59.5 939.014 59.5C939.243 59.5 939.438 59.5779 939.601 59.7337C939.767 59.8894 939.849 60.0767 939.849 60.2955C939.849 60.5142 939.767 60.7015 939.601 60.8572C939.438 61.013 939.243 61.0909 939.014 61.0909ZM944.842 70.1591C944.153 70.1591 943.548 69.995 943.028 69.6669C942.51 69.3388 942.106 68.8797 941.814 68.2898C941.526 67.6998 941.382 67.0104 941.382 66.2216C941.382 65.4261 941.526 64.7318 941.814 64.1385C942.106 63.5452 942.51 63.0845 943.028 62.7564C943.548 62.4283 944.153 62.2642 944.842 62.2642C945.532 62.2642 946.135 62.4283 946.652 62.7564C947.172 63.0845 947.577 63.5452 947.865 64.1385C948.157 64.7318 948.302 65.4261 948.302 66.2216C948.302 67.0104 948.157 67.6998 947.865 68.2898C947.577 68.8797 947.172 69.3388 946.652 69.6669C946.135 69.995 945.532 70.1591 944.842 70.1591ZM944.842 69.1051C945.366 69.1051 945.797 68.9709 946.135 68.7024C946.473 68.4339 946.723 68.081 946.885 67.6435C947.048 67.206 947.129 66.732 947.129 66.2216C947.129 65.7112 947.048 65.2356 946.885 64.7947C946.723 64.3539 946.473 63.9976 946.135 63.7259C945.797 63.4541 945.366 63.3182 944.842 63.3182C944.318 63.3182 943.888 63.4541 943.55 63.7259C943.211 63.9976 942.961 64.3539 942.799 64.7947C942.636 65.2356 942.555 65.7112 942.555 66.2216C942.555 66.732 942.636 67.206 942.799 67.6435C942.961 68.081 943.211 68.4339 943.55 68.7024C943.888 68.9709 944.318 69.1051 944.842 69.1051ZM951.267 65.4062V70H950.093V62.3636H951.227V63.5568H951.326C951.505 63.169 951.777 62.8575 952.142 62.6222C952.506 62.3835 952.977 62.2642 953.554 62.2642C954.071 62.2642 954.523 62.3703 954.911 62.5824C955.299 62.7912 955.6 63.1094 955.816 63.5369C956.031 63.9612 956.139 64.4981 956.139 65.1477V70H954.966V65.2273C954.966 64.6274 954.81 64.16 954.498 63.8253C954.187 63.4872 953.759 63.3182 953.216 63.3182C952.841 63.3182 952.506 63.3994 952.211 63.5618C951.92 63.7242 951.689 63.9612 951.52 64.2727C951.351 64.5843 951.267 64.9621 951.267 65.4062ZM963.692 64.0739L962.638 64.3722C962.572 64.1965 962.474 64.0258 962.345 63.8601C962.219 63.6911 962.046 63.5518 961.828 63.4425C961.609 63.3331 961.329 63.2784 960.987 63.2784C960.52 63.2784 960.131 63.3861 959.819 63.6016C959.511 63.8137 959.357 64.0838 959.357 64.4119C959.357 64.7036 959.463 64.9339 959.675 65.103C959.887 65.272 960.218 65.4129 960.669 65.5256L961.803 65.804C962.485 65.9697 962.994 66.2232 963.329 66.5646C963.664 66.9027 963.831 67.3385 963.831 67.8722C963.831 68.3097 963.705 68.7008 963.453 69.0455C963.205 69.3902 962.857 69.6619 962.409 69.8608C961.962 70.0597 961.441 70.1591 960.848 70.1591C960.069 70.1591 959.425 69.9901 958.914 69.652C958.404 69.3139 958.081 68.8201 957.945 68.1705L959.058 67.892C959.164 68.303 959.365 68.6113 959.66 68.8168C959.958 69.0223 960.348 69.125 960.828 69.125C961.375 69.125 961.809 69.009 962.131 68.777C962.456 68.5417 962.618 68.2599 962.618 67.9318C962.618 67.6667 962.525 67.4446 962.34 67.2656C962.154 67.0833 961.869 66.9474 961.485 66.858L960.212 66.5597C959.512 66.3939 958.999 66.1371 958.671 65.7891C958.346 65.4377 958.183 64.9986 958.183 64.4716C958.183 64.0407 958.304 63.6596 958.546 63.3281C958.792 62.9967 959.125 62.7365 959.546 62.5476C959.97 62.3587 960.45 62.2642 960.987 62.2642C961.743 62.2642 962.336 62.4299 962.767 62.7614C963.201 63.0928 963.51 63.5303 963.692 64.0739Z" fill="#616B7C"/>
+<path d="M859 187.906C859 186.301 860.301 185 861.906 185C863.511 185 864.812 186.301 864.812 187.906V281.646H859V187.906Z" fill="#F02E65"/>
+<path d="M883.812 219.841C883.812 218.236 885.113 216.935 886.717 216.935C888.322 216.935 889.623 218.236 889.623 219.841V281.646H883.812V219.841Z" fill="#F02E65"/>
+<path d="M908.623 245.053C908.623 243.448 909.924 242.147 911.529 242.147C913.134 242.147 914.435 243.448 914.435 245.053V281.646H908.623V245.053Z" fill="#F02E65"/>
+<path d="M933.436 229.086C933.436 227.481 934.737 226.18 936.341 226.18C937.946 226.18 939.247 227.481 939.247 229.086V281.646H933.436V229.086Z" fill="#F02E65"/>
+<path d="M958.247 203.873C958.247 202.268 959.548 200.967 961.153 200.967C962.758 200.967 964.059 202.268 964.059 203.873V281.646H958.247V203.873Z" fill="#F02E65"/>
+<path d="M983.059 187.906C983.059 186.301 984.36 185 985.965 185C987.569 185 988.87 186.301 988.87 187.906V281.646H983.059V187.906Z" fill="#F02E65"/>
+<path d="M1007.87 219.841C1007.87 218.236 1009.17 216.935 1010.78 216.935C1012.38 216.935 1013.68 218.236 1013.68 219.841V281.646H1007.87V219.841Z" fill="#F02E65"/>
+<path d="M1032.68 245.053C1032.68 243.448 1033.98 242.147 1035.59 242.147C1037.19 242.147 1038.49 243.448 1038.49 245.053V281.646H1032.68V245.053Z" fill="#F02E65"/>
+<path d="M1057.49 229.086C1057.49 227.481 1058.8 226.18 1060.4 226.18C1062 226.18 1063.31 227.481 1063.31 229.086V281.646H1057.49V229.086Z" fill="#F02E65"/>
+<path d="M1082.31 203.873C1082.31 202.268 1083.61 200.967 1085.21 200.967C1086.82 200.967 1088.12 202.268 1088.12 203.873V281.646H1082.31V203.873Z" fill="#F02E65"/>
+<path d="M1107.12 219.841C1107.12 218.236 1108.42 216.935 1110.02 216.935C1111.63 216.935 1112.93 218.236 1112.93 219.841V281.646H1107.12V219.841Z" fill="#F02E65"/>
+<path d="M1131.93 245.053C1131.93 243.448 1133.23 242.147 1134.84 242.147C1136.44 242.147 1137.74 243.448 1137.74 245.053V281.646H1131.93V245.053Z" fill="#F02E65"/>
+<rect x="34" y="99" width="92" height="12" rx="6" fill="url(#paint10_linear_1297_52063)"/>
+<rect x="34" y="119" width="40" height="8" rx="4" fill="url(#paint11_linear_1297_52063)"/>
+<rect x="302" y="119" width="40" height="8" rx="4" fill="url(#paint12_linear_1297_52063)"/>
+<rect width="1170" height="388" rx="19" fill="url(#paint13_linear_1297_52063)"/>
+<defs>
+<filter id="filter0_d_1297_52063" x="763.5" y="-16.5" width="439" height="405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="16"/>
+<feGaussianBlur stdDeviation="16"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.215686 0 0 0 0 0.231373 0 0 0 0 0.301961 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1297_52063"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1297_52063" result="shape"/>
+</filter>
+<filter id="filter1_d_1297_52063" x="-30.5" y="166.5" width="437" height="225" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="16"/>
+<feGaussianBlur stdDeviation="16"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.215686 0 0 0 0 0.231373 0 0 0 0 0.301961 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1297_52063"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1297_52063" result="shape"/>
+</filter>
+<filter id="filter2_d_1297_52063" x="366.5" y="166.5" width="437" height="225" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="16"/>
+<feGaussianBlur stdDeviation="16"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.215686 0 0 0 0 0.231373 0 0 0 0 0.301961 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1297_52063"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1297_52063" result="shape"/>
+</filter>
+<filter id="filter3_d_1297_52063" x="-30.5" y="-16.5" width="437" height="225" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="16"/>
+<feGaussianBlur stdDeviation="16"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.215686 0 0 0 0 0.231373 0 0 0 0 0.301961 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1297_52063"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1297_52063" result="shape"/>
+</filter>
+<filter id="filter4_d_1297_52063" x="366.5" y="-16.5" width="437" height="225" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="16"/>
+<feGaussianBlur stdDeviation="16"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.215686 0 0 0 0 0.231373 0 0 0 0 0.301961 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1297_52063"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1297_52063" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_1297_52063" x1="34" y1="289" x2="118" y2="289" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#E8E9F0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1297_52063" x1="31" y1="307.667" x2="73.9927" y2="308.417" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#E8E9F0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1297_52063" x1="299" y1="307.667" x2="341.993" y2="308.417" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#E8E9F0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1297_52063" x1="431" y1="289" x2="515" y2="289" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#E8E9F0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_1297_52063" x1="428" y1="307.667" x2="470.993" y2="308.417" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#E8E9F0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_1297_52063" x1="696" y1="307.667" x2="738.993" y2="308.417" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#E8E9F0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_1297_52063" x1="431" y1="105" x2="515" y2="105" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#E8E9F0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_1297_52063" x1="428" y1="123.667" x2="470.993" y2="124.417" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#E8E9F0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_1297_52063" x1="696" y1="123.667" x2="738.993" y2="124.417" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#E8E9F0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_1297_52063" x1="820" y1="38" x2="904" y2="38" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#E8E9F0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_1297_52063" x1="34" y1="105" x2="118" y2="105" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#E8E9F0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint11_linear_1297_52063" x1="31" y1="123.667" x2="73.9927" y2="124.417" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#E8E9F0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint12_linear_1297_52063" x1="299" y1="123.667" x2="341.993" y2="124.417" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#E8E9F0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint13_linear_1297_52063" x1="585" y1="0" x2="585" y2="388" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.2"/>
+<stop offset="0.702208" stop-color="#FDFDFF"/>
+<stop offset="1" stop-color="#FCFCFF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/routes/console/project-[project]/overview/onboard.svelte b/src/routes/console/project-[project]/overview/onboard.svelte
new file mode 100644
index 000000000..ca9439443
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/onboard.svelte
@@ -0,0 +1,173 @@
+<script lang="ts">
+    import { addPlatform, Platform } from './platforms/+page.svelte';
+    import OnboardDarkIntro from './intro-dark.svg';
+    import OnboardDark1 from './onboard-1-dark.svg';
+    import OnboardDark2 from './onboard-2-dark.svg';
+    import OnboardLightIntro from './intro-light.svg';
+    import OnboardLight1 from './onboard-1-light.svg';
+    import OnboardLight2 from './onboard-2-light.svg';
+    import { app } from '$lib/stores/app';
+    import { wizard } from '$lib/stores/wizard';
+    import Wizard from './keys/wizard.svelte';
+
+    export let projectId: string;
+
+    const platforms = [
+        {
+            title: 'Web App',
+            icon: 'grayscale/code',
+            platform: Platform.Web
+        },
+        {
+            title: 'Flutter App',
+            icon: 'color/flutter',
+            platform: Platform.Flutter
+        },
+        {
+            title: 'Apple App',
+            icon: 'color/apple',
+            platform: Platform.Apple
+        },
+        {
+            title: 'Android App',
+            icon: 'color/android',
+            platform: Platform.Android
+        }
+    ];
+
+    function createKey() {
+        wizard.start(Wizard);
+    }
+
+    $: onBoardIntro = $app.themeInUse === 'dark' ? OnboardDarkIntro : OnboardLightIntro;
+    $: onBoardImage1 = $app.themeInUse === 'dark' ? OnboardDark1 : OnboardLight1;
+    $: onBoardImage2 = $app.themeInUse === 'dark' ? OnboardDark2 : OnboardLight2;
+</script>
+
+<div class="card">
+    <header class="card-header common-section grid-1-2">
+        <div class="grid-1-2-col-1">
+            <h2 class="heading-level-5">Getting Started Guide</h2>
+            <p class="u-line-height-1-5">Let's get your project up and running</p>
+        </div>
+        <div class="grid-1-2-col-2 u-flex u-main-end u-cross-end is-no-mobile">
+            <img src={onBoardIntro} alt="" class="card-header-image" />
+        </div>
+    </header>
+
+    <section class="common-section card-separator grid-1-2">
+        <div class="grid-1-2-col-1">
+            <h3 class="heading-level-7">Add a Platform</h3>
+            <p class="u-line-height-1-5">
+                Our SDK's make it possible to easily add any platform that you want to use.
+            </p>
+        </div>
+        <div class="grid-1-2-col-2">
+            <ul class="grid-box">
+                {#each platforms as platform}
+                    <li class="grid-box-item">
+                        <button
+                            type="button"
+                            class="card u-width-full-line"
+                            on:click={() => addPlatform(platform.platform)}>
+                            <span class="u-flex u-cross-center u-gap-16">
+                                <div class="avatar is-medium" aria-hidden="true">
+                                    <img
+                                        src={`/icons/${$app.themeInUse}/${platform.icon}.svg`}
+                                        alt="technology" />
+                                </div>
+                                <span class="text">{platform.title}</span>
+                                <span
+                                    class="icon-plus u-margin-inline-start-auto"
+                                    style="font-size: var(--icon-size-large);"
+                                    aria-hidden="true" />
+                            </span>
+                        </button>
+                    </li>
+                {/each}
+            </ul>
+        </div>
+    </section>
+
+    <div class="separator-with-text">
+        <span class="text">OR</span>
+    </div>
+
+    <section class="common-section grid-1-2">
+        <div class="grid-1-2-col-1">
+            <h3 class="heading-level-7">Integrate With Your Server</h3>
+            <p class="u-line-height-1-5">
+                Our SDK's make it possible to easily add any platform that you want to use.
+            </p>
+        </div>
+        <div class="grid-1-2-col-2">
+            <ul class="grid-box">
+                <li class="grid-box-item">
+                    <button type="button" class="card u-width-full-line" on:click={createKey}>
+                        <span class="u-flex u-cross-center u-gap-16">
+                            <div class="avatar is-medium" aria-hidden="true">
+                                <img
+                                    src={`/icons/${$app.themeInUse}/grayscale/code.svg`}
+                                    alt="technology" />
+                            </div>
+                            <span class="text">API Key</span>
+                            <span
+                                class="icon-plus u-margin-inline-start-auto"
+                                style="font-size: var(--icon-size-large);"
+                                aria-hidden="true" />
+                        </span>
+                    </button>
+                </li>
+                <li class="grid-box-item">
+                    <a
+                        href={`/console/project-${projectId}/settings/webhooks`}
+                        style="line-height: 1.5;"
+                        class="card u-width-full-line">
+                        <span class="u-flex u-cross-center u-gap-16">
+                            <div class="avatar is-medium" aria-hidden="true">
+                                <img
+                                    src={`/icons/${$app.themeInUse}/grayscale/code.svg`}
+                                    alt="technology" />
+                            </div>
+                            <span class="text">Webhook</span>
+                            <span
+                                class="icon-plus u-margin-inline-start-auto"
+                                style="font-size: var(--icon-size-large);"
+                                aria-hidden="true" />
+                        </span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </section>
+</div>
+
+<article
+    class="card u-grid u-width-full-line common-section onboard-cover"
+    style={`background-image: url(${onBoardImage1});`}>
+    <div class="u-flex u-flex-vertical u-cross-center">
+        <div class="avatar">
+            <i class="icon-lock-closed" />
+        </div>
+        <div class="common-section">
+            <h7 class="heading-level-7">Add a Platform to View Data About Your Project</h7>
+        </div>
+        <div class="common-section">
+            Get insights on bandwidth usage, requests, realtime connections and more after making
+            your first API call
+        </div>
+    </div>
+</article>
+
+<img src={onBoardImage2} class="common-section" alt="statistics" />
+
+<style>
+    .onboard-cover {
+        height: 342px;
+        background: none;
+        background-position: top center;
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+        border: none;
+    }
+</style>
diff --git a/src/routes/console/project-[project]/overview/platforms/+page.svelte b/src/routes/console/project-[project]/overview/platforms/+page.svelte
index e4e6bde22..879c78909 100644
--- a/src/routes/console/project-[project]/overview/platforms/+page.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/+page.svelte
@@ -1,37 +1,61 @@
-<script lang="ts">
-    import { page } from '$app/stores';
-    import { DropList, DropListItem, GridItem1, Heading } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
-    import { toLocaleDateTime } from '$lib/helpers/date';
+<script lang="ts" context="module">
     import { wizard } from '$lib/stores/wizard';
-    import { project } from '../../store';
+    import { versions } from './wizard/store';
+    import SearchLight from '$lib/images/search-light.svg';
+    import SearchDark from '$lib/images/search-dark.svg';
     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';
 
-    let showDropdown = false;
-    const path = `/console/project-${$page.params.project}/overview/platforms`;
-
-    enum Platform {
+    export enum Platform {
         Web,
         Flutter,
         Android,
         Apple
     }
 
+    export async function addPlatform(type: Platform) {
+        await versions.load();
+        wizard.start(platforms[type]);
+    }
+
     const platforms = {
         [Platform.Web]: CreateWeb,
         [Platform.Flutter]: CreateFlutter,
         [Platform.Android]: CreateAndroid,
         [Platform.Apple]: CreateApple
     };
+</script>
 
-    async function addPlatform(type: Platform) {
-        await versions.load();
-        wizard.start(platforms[type]);
-    }
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { DropList, DropListItem, Heading } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { base } from '$app/paths';
+    import { app } from '$lib/stores/app';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
+
+    let showDropdown = false;
+    let showDropdownEmpty = false;
+    const path = `/console/project-${$page.params.project}/overview/platforms`;
+
+    const getPlatformInfo = (platform: string) => {
+        if (platform.includes('flutter')) {
+            return 'color/flutter';
+        } else if (platform.includes('apple')) {
+            return 'color/apple';
+        } else if (platform.includes('android')) {
+            return 'color/android';
+        } else if (platform.includes('web')) {
+            return 'grayscale/code';
+        } else {
+            return 'unknown';
+        }
+    };
 </script>
 
 <div class="common-section u-flex u-gap-12">
@@ -56,14 +80,78 @@
     </span>
 </div>
 
-<div class="grid-box u-margin-block-start-32" style="--grid-gap:1.5rem; --grid-item-size:25rem;">
-    {#each $project.platforms as platform}
-        <GridItem1 href={`${path}/${platform.$id}`}>
-            <svelte:fragment slot="title">{platform.name}</svelte:fragment>
-            <div class="grid-item-1-end-start">
-                <p>Last Updated</p>
-                <p>{toLocaleDateTime(platform.$updatedAt)}</p>
-            </div>
-        </GridItem1>
-    {/each}
-</div>
+{#if data.platforms.platforms.length}
+    <div
+        class="grid-box u-margin-block-start-32"
+        style="--grid-gap:1.5rem; --grid-item-size:20rem;">
+        {#each data.platforms.platforms as platform}
+            <a class="card" href={`${path}/${platform.$id}`}>
+                <div class="grid-item-1" style="min-block-size: calc(182 / 16 * 1rem)">
+                    <div class="grid-item-1-start-start">
+                        <div class="u-flex u-gap-8 u-cross-center">
+                            <div class="avatar is-medium" aria-hidden="true">
+                                <img
+                                    src={`${base}/icons/${$app.themeInUse}/${getPlatformInfo(
+                                        platform.type.toLowerCase()
+                                    )}.svg`}
+                                    alt="technology" />
+                            </div>
+                            <span class="text">{platform.name}</span>
+                        </div>
+                    </div>
+
+                    <div class="grid-item-1-end-start">
+                        <div class="u-flex u-gap-16 u-flex-wrap">
+                            <div class="grid-item-1-end-start">
+                                <p class="eyebrow-heading-3">Last Updated</p>
+                                <p>{toLocaleDateTime(platform.$updatedAt)}</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </a>
+        {/each}
+    </div>
+{:else}
+    <article class="card u-grid u-cross-center u-width-full-line common-section">
+        <div class="u-flex u-flex-vertical u-cross-center u-gap-24">
+            {#if $app.themeInUse === 'dark'}
+                <img src={SearchDark} alt="empty" aria-hidden="true" />
+            {:else}
+                <img src={SearchLight} alt="empty" aria-hidden="true" />
+            {/if}
+            <slot>
+                <div class="u-text-center">
+                    <Heading size="7" tag="h4">Create your first platform to get started.</Heading>
+                    <p class="body-text-2 u-margin-block-start-4">
+                        Need a hand? Check out our documentation.
+                    </p>
+                </div>
+                <div class="u-flex u-gap-16 u-main-center">
+                    <Button external href="https://appwrite.io/docs/sdks" text>
+                        Documentation
+                    </Button>
+                    <DropList bind:show={showDropdownEmpty} placement="bottom-start">
+                        <Button secondary on:click={() => (showDropdownEmpty = !showDropdownEmpty)}>
+                            <span class="text">Add platform</span>
+                        </Button>
+                        <svelte:fragment slot="list">
+                            <DropListItem on:click={() => addPlatform(Platform.Web)}>
+                                Web App
+                            </DropListItem>
+                            <DropListItem on:click={() => addPlatform(Platform.Flutter)}>
+                                Flutter App
+                            </DropListItem>
+                            <DropListItem on:click={() => addPlatform(Platform.Android)}>
+                                Android App
+                            </DropListItem>
+                            <DropListItem on:click={() => addPlatform(Platform.Apple)}>
+                                Apple App
+                            </DropListItem>
+                        </svelte:fragment>
+                    </DropList>
+                </div>
+            </slot>
+        </div>
+    </article>
+{/if}
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 000000000..80b6a91fe
--- /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 000000000..2779bbeb7
--- /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,
+        breadcrumbs: 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 9a4b4f0bc..baec0ded4 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,16 +1,4 @@
 <script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { base } from '$app/paths';
-    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';
@@ -23,9 +11,20 @@
     import AppleWatchOs from './appleWatchOS.svelte';
     import AppleTvos from './appleTvOS.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,
@@ -40,45 +39,17 @@
         'flutter-windows': FlutterWindows
     };
 
-    let loaded = false;
     let showDelete = false;
     let name: string = null;
 
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle(event = null) {
-        if ($platform?.$id !== platformId) {
-            await platform.load(projectId, platformId);
-        }
-
-        name ??= $platform.name;
-
-        updateLayout({
-            navigate: event,
-            back: `${base}/console/project-${projectId}/overview/platforms`,
-            title: $platform.name,
-            level: 4,
-            breadcrumbs: [
-                {
-                    level: 3,
-                    href: 'platforms',
-                    title: 'Platforms'
-                },
-                {
-                    level: 4,
-                    href: platformId,
-                    title: $platform.name
-                }
-            ]
-        });
-        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'
@@ -93,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 danger>
+        <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 a3b42a25c..de95db47c 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 8e75bf735..5fb5c85b2 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 8e75bf735..5fb5c85b2 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 8e75bf735..5fb5c85b2 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 8e75bf735..5fb5c85b2 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]/breadcrumbs.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/breadcrumbs.svelte
new file mode 100644
index 000000000..f07a84a65
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/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 { platform } from './store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization.$id}`,
+            title: $organization.name
+        },
+        {
+            href: `/console/project-${$project.$id}`,
+            title: $project.name
+        },
+        {
+            href: `/console/project-${$project.$id}/overview/platforms`,
+            title: 'Platforms'
+        },
+        {
+            href: `/console/project-${$project.$id}/overview/platforms/${$platform.$id}`,
+            title: $platform.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
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 14c384daf..3aa450e49 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 d3c39bba3..119e6c20c 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 8e75bf735..5fb5c85b2 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 313722e74..361a4c842 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 8e75bf735..5fb5c85b2 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 313722e74..361a4c842 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
new file mode 100644
index 000000000..22728fd6a
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/header.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Cover, CoverTitle } from '$lib/layout';
+    import { platform } from './store';
+
+    const projectId = $page.params.project;
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <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 cd0ea032e..cacaef309 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 7fb051347..bd4561f95 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 d2bc06936..2ed2b4860 100644
--- a/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
@@ -1,20 +1,21 @@
 <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 { Dependencies } from '$lib/constants';
+    import { onboarding } from '../../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;
-
-    async function create() {
-        project.load(projectId);
+    async function onFinish() {
+        if ($onboarding) {
+            invalidate(Dependencies.PROJECT);
+        }
+        invalidate(Dependencies.PLATFORMS);
         createPlatform.reset();
         wizard.hide();
     }
@@ -48,6 +49,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 6a08eff4c..52d6b5208 100644
--- a/src/routes/console/project-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createApple.svelte
@@ -1,20 +1,21 @@
 <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';
+    import { Dependencies } from '$lib/constants';
+    import { onboarding } from '../../store';
 
-    const projectId = $page.params.project;
-
-    async function create() {
-        project.load(projectId);
+    async function onFinish() {
+        if ($onboarding) {
+            invalidate(Dependencies.PROJECT);
+        }
+        invalidate(Dependencies.PLATFORMS);
         createPlatform.reset();
         wizard.hide();
     }
@@ -48,6 +49,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 c243b7bcd..8e9d5a152 100644
--- a/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
@@ -1,20 +1,21 @@
 <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';
+    import { Dependencies } from '$lib/constants';
+    import { onboarding } from '../../store';
 
-    const projectId = $page.params.project;
-
-    async function create() {
-        project.load(projectId);
+    async function onFinish() {
+        if ($onboarding) {
+            invalidate(Dependencies.PROJECT);
+        }
+        invalidate(Dependencies.PLATFORMS);
         createPlatform.reset();
         wizard.hide();
     }
@@ -48,6 +49,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 1b2aebfe5..57eb2b89c 100644
--- a/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
@@ -1,20 +1,21 @@
 <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';
+    import { Dependencies } from '$lib/constants';
+    import { onboarding } from '../../store';
 
-    const projectId = $page.params.project;
-
-    async function create() {
-        project.load(projectId);
+    async function onFinish() {
+        if ($onboarding) {
+            invalidate(Dependencies.PROJECT);
+        }
+        invalidate(Dependencies.PLATFORMS);
         createPlatform.reset();
         wizard.hide();
     }
@@ -48,6 +49,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]/overview/platforms/wizard/android/dark.svg b/src/routes/console/project-[project]/overview/platforms/wizard/android/dark.svg
new file mode 100644
index 000000000..f199ac507
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/android/dark.svg
@@ -0,0 +1,198 @@
+<svg width="307" height="290" viewBox="0 0 307 290" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.6704 157.002L64.2175 201.477L215.821 130.058L65.7018 42.4055L11.6704 157.002Z" fill="url(#paint0_linear_1208_54009)" />
+    <path d="M63.3384 200.552L53.7234 84.0257C53.2124 77.8327 57.1557 72.144 63.1342 70.4494L226.762 24.0695C227.101 23.9732 227.461 23.9685 227.803 24.056L230.954 24.8618L236.442 139.925L298.956 196.341C301.129 198.302 300.528 201.857 297.831 202.996L126.064 275.492C124.404 276.193 122.48 275.697 121.366 274.281L63.3384 200.552Z" fill="url(#paint1_linear_1208_54009)" />
+    <path d="M125.229 269.56L67.3418 198.277L235.847 139.925L301.248 196.778L285.031 203.503L266.44 210.623L198.801 239.893L125.229 269.56Z" fill="url(#paint2_linear_1208_54009)" />
+    <path d="M121.7 253.819L87.2109 210.494L241.524 153.267L279.875 184.644C282.212 186.557 281.668 190.27 278.881 191.432L126.369 255.02C124.719 255.708 122.813 255.218 121.7 253.819Z" fill="#373B4D" />
+    <path d="M67.4787 198.36L58.7996 83.0807C58.4056 77.8475 61.7634 73.0647 66.8194 71.6576L228.753 26.5917C230.011 26.2415 231.262 27.172 231.289 28.478L233.61 142.983L67.4787 198.36Z" fill="url(#paint3_linear_1208_54009)" />
+    <path d="M71.4339 197.568L64.4884 81.6836C64.3773 79.8291 65.5576 78.1423 67.3378 77.6112L226.559 30.1146C227.786 29.7486 229.036 30.6139 229.126 31.8913L236.774 141.005L71.4339 197.568Z" fill="url(#paint4_linear_1208_54009)" />
+    <path d="M91.7659 225.254L248.189 163.404" stroke="url(#paint5_radial_1208_54009)" stroke-opacity="0.2" />
+    <path d="M98.8048 234.022L255.25 169.799" stroke="url(#paint6_radial_1208_54009)" stroke-opacity="0.2" />
+    <path d="M103.456 244.35L263.856 180.163" stroke="url(#paint7_radial_1208_54009)" stroke-opacity="0.2" />
+    <path d="M111.309 250.75L270.127 186.549" stroke="url(#paint8_radial_1208_54009)" stroke-opacity="0.2" />
+    <path d="M115.73 200.158L150.165 240.823" stroke="url(#paint9_radial_1208_54009)" stroke-opacity="0.2" />
+    <path d="M124.49 193.91L158.926 234.575" stroke="url(#paint10_radial_1208_54009)" stroke-opacity="0.2" />
+    <path d="M137.206 187.699L171.641 228.364" stroke="url(#paint11_radial_1208_54009)" stroke-opacity="0.2" />
+    <path d="M149.122 182.27L183.558 222.934" stroke="url(#paint12_radial_1208_54009)" stroke-opacity="0.2" />
+    <path d="M162.607 178.439L197.042 219.104" stroke="url(#paint13_radial_1208_54009)" stroke-opacity="0.2" />
+    <path d="M172.95 172.205L207.385 212.87" stroke="url(#paint14_radial_1208_54009)" stroke-opacity="0.2" />
+    <path d="M185.644 168.367L220.079 209.032" stroke="url(#paint15_radial_1208_54009)" stroke-opacity="0.2" />
+    <path d="M204.658 165.377L221.875 185.709L239.093 206.042" stroke="url(#paint16_radial_1208_54009)" stroke-opacity="0.2" />
+    <path d="M220.559 156.82L237.777 177.153L254.995 197.485" stroke="url(#paint17_radial_1208_54009)" stroke-opacity="0.2" />
+    <path d="M87.3515 214.948L87.3515 210.482L121.977 251.497C123.659 253.489 126.437 254.167 128.848 253.173L279.102 191.24L279.278 194.71L127.47 257.146C125.46 257.972 123.147 257.406 121.746 255.744L87.3515 214.948Z" fill="url(#paint18_linear_1208_54009)" />
+    <path d="M172.321 125.22C172.266 127.429 173.91 128.622 175.994 127.884C178.077 127.146 179.81 124.757 179.865 122.548C179.919 120.339 178.275 119.146 176.192 119.884C174.109 120.621 172.376 123.01 172.321 125.22Z" fill="url(#paint19_linear_1208_54009)" />
+    <path d="M177.561 122.698C177.187 121.29 175.109 122.026 174.657 123.726L171.837 134.344C171.54 135.461 172.238 136.219 173.238 135.864L178.399 134.037C179.399 133.683 180.147 132.413 179.901 131.489L177.561 122.698Z" fill="url(#paint20_linear_1208_54009)" />
+    <path d="M296.889 112.159C298.402 112.96 299.512 113.728 300.188 114.457L299.821 114.797C300.349 115.366 300.502 115.816 300.46 116.163C300.418 116.511 300.162 116.911 299.513 117.338L299.788 117.756C298.957 118.302 297.696 118.783 296.035 119.199L295.914 118.714C294.806 118.992 293.511 119.241 292.035 119.463L292.109 119.957C290.902 120.138 289.579 120.3 288.146 120.442L288.096 119.944C286.852 120.068 285.522 120.177 284.111 120.271L284.144 120.77C282.869 120.855 281.529 120.928 280.125 120.989L280.103 120.49C278.819 120.546 277.482 120.592 276.094 120.628L276.107 121.128C274.814 121.162 273.476 121.187 272.096 121.203L272.09 120.703C270.794 120.719 269.46 120.726 268.09 120.727L268.09 121.227C266.788 121.227 265.454 121.22 264.087 121.207L264.092 120.707C262.788 120.694 261.454 120.676 260.093 120.65L260.083 121.15C258.773 121.126 257.436 121.096 256.075 121.061L256.088 120.561C254.774 120.527 253.436 120.487 252.076 120.442L252.059 120.942C250.739 120.898 249.397 120.85 248.034 120.796L248.054 120.297C246.742 120.245 245.411 120.189 244.061 120.128L244.039 120.627C242.723 120.568 241.39 120.505 240.04 120.437L240.065 119.937C238.744 119.871 237.407 119.8 236.054 119.725L236.026 120.224C234.703 120.151 233.365 120.074 232.012 119.993L232.042 119.494C230.727 119.415 229.398 119.332 228.055 119.246L228.023 119.745C226.7 119.66 225.364 119.571 224.016 119.479L224.05 118.98C222.726 118.889 221.389 118.795 220.041 118.697L220.005 119.196C218.687 119.1 217.358 119.002 216.018 118.899L216.056 118.401C214.731 118.3 213.396 118.196 212.051 118.088L212.011 118.587C210.688 118.481 209.355 118.372 208.013 118.26L208.055 117.762C206.734 117.652 205.404 117.538 204.066 117.422L204.022 117.92C202.694 117.805 201.357 117.686 200.011 117.565L200.056 117.067C198.738 116.948 197.411 116.827 196.077 116.702L196.031 117.2C194.706 117.076 193.373 116.95 192.032 116.82L192.08 116.323C190.757 116.195 189.427 116.065 188.09 115.931L188.04 116.429C186.718 116.297 185.388 116.163 184.053 116.026L184.104 115.528C182.777 115.392 181.444 115.254 180.105 115.112L180.053 115.61C178.733 115.47 177.406 115.328 176.075 115.184L176.129 114.687C174.802 114.543 173.47 114.396 172.133 114.247L172.077 114.744C170.757 114.597 169.431 114.448 168.1 114.296L168.157 113.799C166.832 113.648 165.503 113.494 164.169 113.338L164.11 113.835C162.788 113.68 161.461 113.523 160.129 113.363L160.189 112.867C159.523 112.787 158.857 112.707 158.189 112.626C157.522 112.545 156.856 112.463 156.19 112.382L156.13 112.878C154.799 112.715 153.472 112.55 152.151 112.385L152.213 111.889C150.881 111.721 149.553 111.553 148.231 111.383L148.167 111.879C146.838 111.709 145.515 111.537 144.198 111.365L144.263 110.869C142.928 110.694 141.6 110.518 140.277 110.341L140.211 110.836C138.883 110.658 137.562 110.479 136.246 110.299L136.314 109.804C134.98 109.621 133.653 109.437 132.332 109.252L132.263 109.748C130.933 109.561 129.61 109.374 128.295 109.186L128.365 108.691C127.035 108.501 125.712 108.31 124.397 108.118L124.325 108.612C122.992 108.418 121.668 108.222 120.351 108.026L120.425 107.531C119.1 107.333 117.783 107.135 116.474 106.935L116.399 107.429C115.063 107.226 113.737 107.021 112.419 106.816L112.496 106.321C111.168 106.114 109.85 105.907 108.541 105.698L108.462 106.192C107.133 105.98 105.812 105.767 104.503 105.554L104.583 105.06C103.251 104.843 101.929 104.625 100.619 104.407L100.537 104.9C99.2113 104.679 97.8972 104.458 96.5946 104.236L96.6787 103.743C95.3462 103.515 94.0259 103.288 92.7181 103.059L92.6321 103.552C91.3007 103.319 89.9823 103.086 88.6773 102.853L88.7653 102.361C87.4413 102.124 86.1311 101.886 84.8351 101.649L84.745 102.14C83.4119 101.896 82.094 101.651 80.7916 101.406L80.8841 100.915C79.5524 100.664 78.2371 100.413 76.9386 100.162L76.8437 100.653C75.5164 100.396 74.2067 100.14 72.9151 99.8829L73.0126 99.3925C71.6875 99.129 70.3816 98.8655 69.0953 98.6022L68.995 99.092C67.6591 98.8184 66.3444 98.545 65.0516 98.2718L65.155 97.7826C63.8233 97.5011 62.5149 97.22 61.2306 96.9393L61.1238 97.4278C59.7932 97.137 58.4884 96.8466 57.2101 96.5569L57.3206 96.0693C55.9924 95.7683 54.693 95.468 53.4232 95.1687L53.3085 95.6553C51.9785 95.3417 50.6809 95.0292 49.4168 94.7178L49.5364 94.2323C48.206 93.9046 46.9128 93.5783 45.6582 93.2537L45.533 93.7378C44.1967 93.392 42.9038 93.0481 41.6559 92.7064L41.7879 92.2241C40.4484 91.8573 39.1612 91.4931 37.9279 91.132L37.7874 91.6118C36.4391 91.217 35.1548 90.8256 33.9369 90.4382L34.0884 89.9617C32.7409 89.5332 31.4759 89.1098 30.2966 88.6925L30.1298 89.1639C28.7721 88.6834 27.526 88.2103 26.3967 87.7459L26.5869 87.2835C25.2073 86.7161 24.0093 86.164 22.9998 85.6298L22.7659 86.0717C21.2526 85.2708 20.1431 84.5025 19.4667 83.7735L19.8332 83.4334C19.3052 82.8642 19.1527 82.4149 19.1949 82.0669C19.237 81.719 19.4925 81.3191 20.1413 80.8926L19.8666 80.4748C20.6976 79.9285 21.9586 79.4476 23.6194 79.0314L23.7409 79.5164C24.8488 79.2389 26.144 78.9891 27.6193 78.7678L27.5451 78.2733C28.7527 78.0921 30.0756 77.9305 31.5089 77.7884L31.5582 78.286C32.8031 78.1625 34.1326 78.0537 35.5435 77.9595L35.5102 77.4606C36.7853 77.3755 38.126 77.3023 39.5296 77.241L39.5514 77.7405C40.8352 77.6845 42.1722 77.6385 43.5605 77.6023L43.5475 77.1025C44.8409 77.0689 46.1785 77.0438 47.5588 77.0274L47.5647 77.5273C48.8606 77.5119 50.1942 77.504 51.5644 77.5037L51.5643 77.0037C52.8662 77.0034 54.2008 77.01 55.5672 77.0233L55.5624 77.5233C56.8668 77.536 58.2004 77.5549 59.562 77.5799L59.5712 77.08C60.8817 77.1042 62.2182 77.134 63.5797 77.1696L63.5666 77.6694C64.8808 77.7037 66.2185 77.7433 67.5789 77.7882L67.5954 77.2885C68.916 77.3321 70.258 77.3807 71.6205 77.4343L71.6009 77.9339C72.9128 77.9855 74.2439 78.0417 75.5935 78.1025L75.616 77.603C76.9316 77.6622 78.2647 77.7258 79.6149 77.7938L79.5897 78.2932C80.9106 78.3597 82.2477 78.4303 83.6007 78.5052L83.6283 78.0059C84.9515 78.0791 86.2898 78.1563 87.6427 78.2374L87.6127 78.7365C88.9279 78.8154 90.2569 78.898 91.5992 78.9844L91.6313 78.4854C92.9542 78.5705 94.2901 78.6592 95.6385 78.7516L95.6043 79.2504C96.9288 79.3412 98.2654 79.4354 99.6135 79.5331L99.6497 79.0344C100.968 79.1299 102.297 79.2288 103.636 79.3309L103.598 79.8295C104.923 79.9305 106.258 80.0348 107.604 80.1423L107.644 79.6439C108.966 79.7496 110.299 79.8585 111.641 79.9704L111.6 80.4687C112.92 80.5789 114.25 80.6921 115.589 80.8083L115.632 80.3102C116.961 80.4256 118.298 80.5439 119.644 80.6652L119.599 81.1632C120.917 81.2821 122.243 81.4037 123.577 81.5283L123.624 81.0304C124.949 81.1542 126.282 81.2807 127.622 81.4101L127.574 81.9077C128.897 82.0354 130.228 82.1659 131.565 82.299L131.614 81.8015C132.937 81.9332 134.266 82.0675 135.602 82.2046L135.551 82.702C136.877 82.8381 138.21 82.9768 139.549 83.1181L139.602 82.6209C140.922 82.7603 142.248 82.9022 143.58 83.0466L143.526 83.5437C144.852 83.6876 146.185 83.834 147.522 83.983L147.577 83.486C148.898 83.6331 150.224 83.7827 151.555 83.9346L151.498 84.4314C152.823 84.5827 154.152 84.7364 155.486 84.8925L155.544 84.3959C156.867 84.5507 158.194 84.7078 159.525 84.8674L159.466 85.3638C160.131 85.4436 160.798 85.5239 161.465 85.6048C162.133 85.6857 162.799 85.767 163.464 85.8486L163.525 85.3523C164.856 85.5155 166.182 85.68 167.503 85.8457L167.441 86.3418C168.774 86.5089 170.102 86.6774 171.424 86.847L171.488 86.351C172.816 86.5214 174.139 86.693 175.457 86.8658L175.392 87.3615C176.726 87.5365 178.055 87.7126 179.377 87.8898L179.444 87.3943C180.771 87.5722 182.093 87.7512 183.408 87.9314L183.34 88.4267C184.674 88.6094 186.002 88.7932 187.323 88.978L187.392 88.4829C188.721 88.6689 190.044 88.8561 191.36 89.0442L191.289 89.5392C192.619 89.7294 193.942 89.9206 195.258 90.1127L195.33 89.618C196.662 89.8126 197.987 90.0083 199.303 90.2048L199.23 90.6993C200.555 90.8971 201.872 91.0959 203.18 91.2954L203.256 90.8012C204.591 91.0049 205.918 91.2095 207.236 91.4149L207.159 91.9089C208.486 92.1159 209.805 92.3238 211.113 92.5323L211.192 92.0386C212.522 92.2505 213.842 92.4632 215.152 92.6767L215.072 93.1702C216.404 93.3872 217.725 93.605 219.036 93.8235L219.118 93.3303C220.443 93.5512 221.757 93.7728 223.06 93.9949L222.976 94.4878C224.308 94.7151 225.629 94.9429 226.937 95.1713L227.023 94.6787C228.354 94.9112 229.672 95.1443 230.977 95.3777L230.889 95.8699C232.213 96.1068 233.524 96.3441 234.819 96.5818L234.91 96.09C236.243 96.3344 237.561 96.5793 238.863 96.8244L238.771 97.3158C240.102 97.5664 241.418 97.8173 242.716 98.0683L242.811 97.5774C244.138 97.834 245.448 98.0907 246.74 98.3475L246.642 98.8379C247.967 99.1014 249.273 99.3649 250.559 99.6283L250.66 99.1384C251.995 99.412 253.31 99.6854 254.603 99.9587L254.5 100.448C255.831 100.729 257.14 101.01 258.424 101.291L258.531 100.803C259.861 101.093 261.166 101.384 262.445 101.674L262.334 102.161C263.662 102.462 264.962 102.762 266.231 103.062L266.346 102.575C267.676 102.889 268.974 103.201 270.238 103.513L270.118 103.998C271.449 104.326 272.742 104.652 273.996 104.977L274.122 104.493C275.458 104.838 276.751 105.182 277.999 105.524L277.867 106.006C279.206 106.373 280.493 106.737 281.727 107.098L281.867 106.619C283.215 107.013 284.5 107.405 285.718 107.792L285.566 108.269C286.914 108.697 288.179 109.121 289.358 109.538L289.525 109.067C290.883 109.547 292.129 110.02 293.258 110.485L293.068 110.947C294.447 111.514 295.645 112.066 296.655 112.601L296.889 112.159Z" stroke="url(#paint21_linear_1208_54009)" stroke-dasharray="4 4" />
+    <g opacity="0.9">
+        <g filter="url(#filter0_d_1208_54009)">
+            <ellipse rx="18.3575" ry="24.1091" transform="matrix(0.977376 0.227267 -0.161319 0.994776 283.832 120.282)" fill="url(#paint22_linear_1208_54009)" shape-rendering="crispEdges" />
+        </g>
+        <ellipse rx="16.5001" ry="24.1091" transform="matrix(0.977376 0.227267 -0.161319 0.994776 286.19 119.733)" fill="url(#paint23_linear_1208_54009)" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M278.047 122.823L281.704 117.938L278.657 118.841L275 123.726L278.2 126.105L281.247 125.202L278.047 122.823ZM284.114 127.333V127.363L284.142 127.354L284.114 127.333ZM284.142 114.681L284.114 114.719V114.689L284.142 114.681ZM290.237 112.876L290.265 112.867V112.897L290.237 112.876ZM296.331 117.407L292.674 114.688L295.722 113.785L299.379 116.504L296.179 120.779L293.132 121.681L296.331 117.407ZM290.265 125.511L290.237 125.549L290.265 125.54V125.511ZM287.951 110.384L284.142 130.523L286.428 129.846L290.237 109.707L287.951 110.384Z" fill="#43485C" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M279.047 122.823L282.704 117.938L279.657 118.841L276 123.726L279.2 126.105L282.247 125.202L279.047 122.823ZM285.114 127.333V127.363L285.142 127.354L285.114 127.333ZM285.142 114.681L285.114 114.719V114.689L285.142 114.681ZM291.237 112.876L291.265 112.867V112.897L291.237 112.876ZM297.331 117.407L293.674 114.688L296.722 113.785L300.379 116.504L297.179 120.779L294.132 121.681L297.331 117.407ZM291.265 125.511L291.237 125.549L291.265 125.54V125.511ZM288.951 110.384L285.142 130.523L287.428 129.846L291.237 109.707L288.951 110.384Z" fill="#5A607B" />
+    </g>
+    <g opacity="0.8">
+        <g filter="url(#filter1_d_1208_54009)">
+            <ellipse rx="19.5" ry="22" transform="matrix(0.989651 0.143493 0 1 27.2568 86.3723)" fill="#424254" />
+        </g>
+        <ellipse rx="19.5" ry="21.5" transform="matrix(0.989651 0.143493 0 1 23.2982 85.2981)" fill="#292B3A" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M15.3869 87.2058L12.9804 83.7478L24.7879 75.5597L30.7714 76.5074L15.3869 87.2058ZM16.6435 89.0583L22.9951 84.6414L28.9477 85.5841L22.6439 89.9679L26.9311 96.1194L20.993 95.1789L19.0791 92.4468L19.0665 92.4556L16.6435 89.0583Z" fill="#43485F" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.3869 87.2058L11.9804 83.7478L23.7879 75.5597L29.7714 76.5074L14.3869 87.2058ZM15.6435 89.0583L21.9951 84.6414L27.9477 85.5841L21.6439 89.9679L25.9311 96.1194L19.993 95.1789L18.0791 92.4468L18.0665 92.4556L15.6435 89.0583Z" fill="#5A607B" />
+    </g>
+    <circle cx="153.498" cy="113.422" r="44.5" fill="url(#paint24_linear_1208_54009)" />
+    <circle cx="155.5" cy="113.5" r="44.5" fill="url(#paint25_linear_1208_54009)" />
+    <path d="M147.666 123.489C149.433 123.233 150.866 124.473 150.866 126.259V140.129C150.866 141.915 149.433 143.57 147.666 143.826C145.899 144.082 144.466 142.843 144.466 141.057V127.186C144.466 125.401 145.899 123.746 147.666 123.489V123.489Z" fill="#171723" />
+    <path d="M140.361 107.872C140.35 107.996 140.341 108.122 140.341 108.247V129.262C140.341 131.522 142.112 133.086 144.309 132.767L165.459 129.701C167.657 129.382 169.427 127.304 169.427 125.044V104.03C169.427 103.904 169.423 103.781 169.412 103.66L140.361 107.872Z" fill="#171723" />
+    <path d="M162.102 121.396C163.87 121.14 165.302 122.38 165.302 124.166V138.036C165.302 139.822 163.87 141.477 162.102 141.733C160.335 141.989 158.903 140.75 158.903 138.964V125.094C158.903 123.308 160.335 121.653 162.102 121.397V121.396ZM135.2 110.491C136.967 110.235 138.4 111.475 138.4 113.261V127.131C138.4 128.917 136.967 130.572 135.2 130.828C133.433 131.085 132 129.845 132 128.059V114.189C132 112.403 133.432 110.748 135.2 110.491ZM174.569 104.783C176.336 104.527 177.769 105.767 177.769 107.553V121.423C177.769 123.209 176.336 124.864 174.569 125.12C172.802 125.376 171.369 124.136 171.369 122.351V108.481C171.369 106.695 172.802 105.039 174.569 104.783ZM140.454 106.479C140.543 100.011 146.119 93.9101 153.276 92.1749L156.492 91.7086C163.65 91.3685 169.225 95.8528 169.314 102.294L140.454 106.479Z" fill="#171723" />
+    <path d="M141.567 93.25L144.943 98.6683M168.201 89.3882L164.826 95.7854" stroke="#171723" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M150.586 99.2247C150.589 100.127 149.85 100.967 148.935 101.102C148.021 101.237 147.278 100.616 147.275 99.7139V99.7048C147.273 98.8026 148.012 97.9621 148.926 97.827C149.84 97.692 150.583 98.3133 150.586 99.2156V99.2247ZM162.944 97.433C162.946 98.3349 162.207 99.1756 161.293 99.3107C160.379 99.4455 159.635 98.824 159.633 97.9221V97.913C159.63 97.0109 160.369 96.1704 161.284 96.0353C162.198 95.9003 162.941 96.5215 162.944 97.4239V97.433Z" fill="#282A39" />
+    <path d="M148.666 121.489C150.433 121.233 151.866 122.473 151.866 124.259V138.129C151.866 139.915 150.433 141.57 148.666 141.826C146.899 142.082 145.466 140.843 145.466 139.057V125.186C145.466 123.401 146.899 121.746 148.666 121.489V121.489Z" fill="#A4C639" />
+    <path d="M141.361 105.872C141.35 105.996 141.341 106.122 141.341 106.247V127.262C141.341 129.522 143.112 131.086 145.309 130.767L166.459 127.701C168.657 127.382 170.427 125.304 170.427 123.044V102.03C170.427 101.904 170.423 101.781 170.412 101.66L141.361 105.872Z" fill="#A4C639" />
+    <path d="M163.102 119.396C164.87 119.14 166.302 120.38 166.302 122.166V136.036C166.302 137.822 164.87 139.477 163.102 139.733C161.335 139.989 159.903 138.75 159.903 136.964V123.094C159.903 121.308 161.335 119.653 163.102 119.397V119.396ZM136.2 108.491C137.967 108.235 139.4 109.475 139.4 111.261V125.131C139.4 126.917 137.967 128.572 136.2 128.828C134.433 129.085 133 127.845 133 126.059V112.189C133 110.403 134.432 108.748 136.2 108.491ZM175.569 102.783C177.336 102.527 178.769 103.767 178.769 105.553V119.423C178.769 121.209 177.336 122.864 175.569 123.12C173.802 123.376 172.369 122.136 172.369 120.351V106.481C172.369 104.695 173.802 103.039 175.569 102.783ZM141.454 104.479C141.543 98.011 147.119 91.9101 154.276 90.1749L157.492 89.7086C164.65 89.3685 170.225 93.8528 170.314 100.294L141.454 104.479Z" fill="#A4C639" />
+    <path d="M142.567 91.25L145.943 96.6683M169.201 87.3882L165.826 93.7854" stroke="#A4C639" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M151.586 97.2247C151.589 98.1266 150.85 98.9674 149.935 99.1025C149.021 99.2373 148.278 98.6158 148.275 97.7139V97.7048C148.273 96.8026 149.012 95.9621 149.926 95.827C150.84 95.692 151.583 96.3133 151.586 97.2156V97.2247ZM163.944 95.433C163.946 96.3349 163.207 97.1756 162.293 97.3107C161.379 97.4455 160.635 96.824 160.633 95.9221V95.913C160.63 95.0109 161.369 94.1704 162.284 94.0353C163.198 93.9003 163.941 94.5215 163.944 95.4239V95.433Z" fill="#282A39" />
+    <path d="M37.9132 244.944C35.1997 241.458 36.2527 237.131 40.2651 235.282L59.5058 226.412C63.5182 224.562 68.9706 225.889 71.6841 229.376L101.683 267.925C104.397 271.412 103.344 275.738 99.3312 277.588L76.458 288.133C74.4518 289.058 71.7256 288.394 70.3688 286.651L37.9132 244.944Z" fill="url(#paint26_linear_1208_54009)" />
+    <rect x="0.380573" y="0.0926329" width="33.7568" height="63.446" rx="3.75" transform="matrix(0.908143 -0.41866 0.614147 0.789191 35.5308 237.521)" fill="url(#paint27_linear_1208_54009)" stroke="url(#paint28_linear_1208_54009)" stroke-width="0.5" />
+    <defs>
+        <filter id="filter0_d_1208_54009" x="261.469" y="95.9355" width="44.7256" height="56.6934" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dy="4" />
+            <feGaussianBlur stdDeviation="2" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1208_54009" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1208_54009" result="shape" />
+        </filter>
+        <filter id="filter1_d_1208_54009" x="0.958618" y="53.1934" width="68.5964" height="74.3594" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dx="8" dy="4" />
+            <feGaussianBlur stdDeviation="7.5" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1208_54009" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1208_54009" result="shape" />
+        </filter>
+        <linearGradient id="paint0_linear_1208_54009" x1="138.161" y1="228.355" x2="34.8507" y2="146.164" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#2D3041" stop-opacity="0.45" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint1_linear_1208_54009" x1="23.5005" y1="100.5" x2="615.497" y2="286.111" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#333749" />
+            <stop offset="0.34172" stop-color="#1F212B" />
+            <stop offset="0.489488" stop-color="#3C4158" />
+        </linearGradient>
+        <linearGradient id="paint2_linear_1208_54009" x1="291.934" y1="84.043" x2="-108.241" y2="692.017" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#282A3B" />
+            <stop offset="1" stop-color="#14141F" />
+        </linearGradient>
+        <linearGradient id="paint3_linear_1208_54009" x1="79.8786" y1="143.145" x2="322.391" y2="44.1851" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#1B1B28" />
+            <stop offset="1" stop-color="#4F5769" />
+        </linearGradient>
+        <linearGradient id="paint4_linear_1208_54009" x1="416.5" y1="-96.0005" x2="21.123" y2="235.911" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#373B4D" />
+            <stop offset="0.851966" stop-color="#171723" stop-opacity="0.8" />
+        </linearGradient>
+        <radialGradient id="paint5_radial_1208_54009" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(169.977 194.329) rotate(90.5277) scale(31.644 77.9233)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint6_radial_1208_54009" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(177.027 201.91) rotate(90.5277) scale(32.8306 77.9233)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint7_radial_1208_54009" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(183.656 212.256) rotate(90.5277) scale(32.8306 79.901)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint8_radial_1208_54009" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(190.718 218.65) rotate(90.5277) scale(32.8306 79.1099)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint9_radial_1208_54009" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(132.948 220.491) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint10_radial_1208_54009" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(141.708 214.243) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint11_radial_1208_54009" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(154.423 208.032) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint12_radial_1208_54009" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(166.34 202.602) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint13_radial_1208_54009" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(179.824 198.772) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint14_radial_1208_54009" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(190.167 192.538) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint15_radial_1208_54009" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(202.861 188.7) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint16_radial_1208_54009" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(221.875 185.709) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint17_radial_1208_54009" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(237.777 177.153) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <linearGradient id="paint18_linear_1208_54009" x1="125.388" y1="267.973" x2="338.823" y2="134.011" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#4F5469" />
+            <stop offset="0.738994" stop-color="#4F5469" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint19_linear_1208_54009" x1="176.413" y1="114.406" x2="180.115" y2="135.231" gradientUnits="userSpaceOnUse">
+            <stop offset="0.186067" stop-color="white" stop-opacity="0.07" />
+            <stop offset="0.312763" stop-color="white" stop-opacity="0.858597" />
+            <stop offset="0.603529" stop-color="white" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint20_linear_1208_54009" x1="176.413" y1="114.406" x2="180.115" y2="135.231" gradientUnits="userSpaceOnUse">
+            <stop offset="0.186067" stop-color="white" stop-opacity="0.07" />
+            <stop offset="0.312763" stop-color="white" stop-opacity="0.858597" />
+            <stop offset="0.603529" stop-color="white" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint21_linear_1208_54009" x1="158.42" y1="113.157" x2="161.816" y2="85.1437" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#798196" stop-opacity="0.53" />
+            <stop offset="1" stop-color="#798196" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint22_linear_1208_54009" x1="18.3575" y1="0" x2="18.3575" y2="48.2182" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#424254" />
+            <stop offset="1" stop-color="#3B3B55" stop-opacity="0.33" />
+        </linearGradient>
+        <linearGradient id="paint23_linear_1208_54009" x1="-31.4299" y1="-5.38633" x2="95.5878" y2="14.7331" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#1D1E2B" />
+            <stop offset="1" stop-color="#2B2D3D" />
+        </linearGradient>
+        <linearGradient id="paint24_linear_1208_54009" x1="114" y1="108" x2="193.781" y2="170.733" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#171723" />
+            <stop offset="0.940675" stop-color="#171723" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint25_linear_1208_54009" x1="45.498" y1="47.4214" x2="334.998" y2="252.921" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#45495C" />
+            <stop offset="1" stop-color="#171723" />
+        </linearGradient>
+        <linearGradient id="paint26_linear_1208_54009" x1="72" y1="292.5" x2="103.799" y2="168.326" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#424659" />
+            <stop offset="1" stop-color="#272839" />
+        </linearGradient>
+        <linearGradient id="paint27_linear_1208_54009" x1="-20.5779" y1="-29.0892" x2="48.668" y2="110.752" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#373B4D" />
+            <stop offset="1" stop-color="#171723" stop-opacity="0.8" />
+        </linearGradient>
+        <linearGradient id="paint28_linear_1208_54009" x1="4.81289" y1="-8.01685" x2="34.0683" y2="76.9259" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#686982" />
+            <stop offset="1" stop-color="#686982" stop-opacity="0" />
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/android/light.svg b/src/routes/console/project-[project]/overview/platforms/wizard/android/light.svg
new file mode 100644
index 000000000..45b4b3b60
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/android/light.svg
@@ -0,0 +1,203 @@
+<svg width="307" height="290" viewBox="0 0 307 290" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.6704 157.098L64.2175 201.572L215.821 130.154L65.7018 42.5012L11.6704 157.098Z" fill="url(#paint0_linear_1208_53191)" />
+    <path d="M63.3384 200.647L53.7234 84.1214C53.2124 77.9284 57.1557 72.2397 63.1342 70.5451L226.762 24.1652C227.101 24.0689 227.461 24.0642 227.803 24.1517L230.954 24.9575L236.442 140.02L298.956 196.437C301.129 198.398 300.528 201.953 297.831 203.091L126.064 275.588C124.404 276.288 122.48 275.792 121.366 274.376L63.3384 200.647Z" fill="url(#paint1_linear_1208_53191)" />
+    <path d="M125.229 269.655L67.3418 198.373L235.847 140.021L301.248 196.874L285.031 203.599L266.44 210.718L198.801 239.989L125.229 269.655Z" fill="url(#paint2_linear_1208_53191)" />
+    <path d="M121.7 253.915L87.2109 210.59L241.524 153.363L279.875 184.74C282.212 186.652 281.668 190.366 278.881 191.528L126.369 255.116C124.719 255.804 122.813 255.313 121.7 253.915Z" fill="white" />
+    <path d="M67.4787 198.456L58.7996 83.1764C58.4056 77.9432 61.7634 73.1604 66.8194 71.7533L228.753 26.6874C230.011 26.3372 231.262 27.2677 231.289 28.5737L233.61 143.079L67.4787 198.456Z" fill="url(#paint3_linear_1208_53191)" />
+    <path d="M71.4339 197.664L64.4884 81.7793C64.3773 79.9248 65.5576 78.238 67.3378 77.7069L226.559 30.2103C227.786 29.8443 229.036 30.7097 229.126 31.987L236.774 141.1L71.4339 197.664Z" fill="url(#paint4_linear_1208_53191)" />
+    <path d="M91.7659 225.35L248.189 163.5" stroke="url(#paint5_radial_1208_53191)" />
+    <path d="M98.8048 234.117L255.25 169.894" stroke="url(#paint6_radial_1208_53191)" />
+    <path d="M103.456 244.446L263.856 180.259" stroke="url(#paint7_radial_1208_53191)" />
+    <path d="M111.309 250.846L270.127 186.645" stroke="url(#paint8_radial_1208_53191)" />
+    <path d="M115.73 200.254L150.165 240.919" stroke="url(#paint9_radial_1208_53191)" />
+    <path d="M124.491 194.006L158.926 234.671" stroke="url(#paint10_radial_1208_53191)" />
+    <path d="M137.206 187.795L171.641 228.46" stroke="url(#paint11_radial_1208_53191)" />
+    <path d="M149.122 182.365L183.558 223.03" stroke="url(#paint12_radial_1208_53191)" />
+    <path d="M162.607 178.535L197.042 219.2" stroke="url(#paint13_radial_1208_53191)" />
+    <path d="M172.95 172.301L207.385 212.966" stroke="url(#paint14_radial_1208_53191)" />
+    <path d="M185.644 168.463L220.079 209.128" stroke="url(#paint15_radial_1208_53191)" />
+    <path d="M204.658 165.473L221.875 185.805L239.093 206.138" stroke="url(#paint16_radial_1208_53191)" />
+    <path d="M220.559 156.916L237.777 177.248L254.995 197.581" stroke="url(#paint17_radial_1208_53191)" />
+    <path d="M87.3515 215.044L87.3515 210.578L121.977 251.592C123.659 253.585 126.437 254.263 128.848 253.269L279.102 191.336L279.278 194.806L127.47 257.241C125.46 258.068 123.147 257.502 121.746 255.84L87.3515 215.044Z" fill="url(#paint18_linear_1208_53191)" />
+    <path d="M205.567 37.6267C204.639 38.6455 204.719 40.2247 205.744 41.1447L207.631 42.8375C208.671 43.7703 210.281 43.635 211.151 42.5418C211.925 41.5683 211.838 40.1671 210.949 39.297L209.138 37.5239C208.133 36.5405 206.513 36.5871 205.567 37.6267Z" fill="url(#paint19_linear_1208_53191)" fill-opacity="0.4" />
+    <path d="M296.889 112.254C298.402 113.055 299.512 113.824 300.188 114.553L299.821 114.893C300.349 115.462 300.502 115.911 300.46 116.259C300.418 116.607 300.162 117.007 299.513 117.434L299.788 117.851C298.957 118.398 297.696 118.879 296.035 119.295L295.914 118.81C294.806 119.087 293.511 119.337 292.035 119.558L292.109 120.053C290.902 120.234 289.579 120.396 288.146 120.538L288.096 120.04C286.852 120.164 285.522 120.272 284.111 120.367L284.144 120.866C282.869 120.951 281.529 121.024 280.125 121.085L280.103 120.586C278.819 120.642 277.482 120.688 276.094 120.724L276.107 121.224C274.814 121.257 273.476 121.282 272.096 121.299L272.09 120.799C270.794 120.814 269.46 120.822 268.09 120.822L268.09 121.322C266.788 121.323 265.454 121.316 264.087 121.303L264.092 120.803C262.788 120.79 261.454 120.771 260.093 120.746L260.083 121.246C258.773 121.222 257.436 121.192 256.075 121.157L256.088 120.657C254.774 120.622 253.436 120.583 252.076 120.538L252.059 121.038C250.739 120.994 249.397 120.945 248.034 120.892L248.054 120.392C246.742 120.341 245.411 120.284 244.061 120.224L244.039 120.723C242.723 120.664 241.39 120.6 240.04 120.532L240.065 120.033C238.744 119.966 237.407 119.896 236.054 119.821L236.026 120.32C234.703 120.247 233.365 120.17 232.012 120.089L232.042 119.59C230.727 119.511 229.398 119.428 228.055 119.342L228.023 119.841C226.7 119.756 225.364 119.667 224.016 119.575L224.05 119.076C222.726 118.985 221.389 118.891 220.041 118.793L220.005 119.292C218.687 119.196 217.358 119.097 216.018 118.995L216.056 118.497C214.731 118.396 213.396 118.291 212.051 118.184L212.011 118.682C210.688 118.577 209.355 118.468 208.013 118.356L208.055 117.857C206.734 117.747 205.404 117.634 204.066 117.518L204.022 118.016C202.694 117.901 201.357 117.782 200.011 117.661L200.056 117.163C198.738 117.044 197.411 116.922 196.077 116.798L196.031 117.296C194.706 117.172 193.373 117.045 192.032 116.916L192.08 116.418C190.757 116.291 189.427 116.16 188.09 116.027L188.04 116.525C186.718 116.393 185.388 116.259 184.053 116.122L184.104 115.624C182.777 115.488 181.444 115.349 180.105 115.208L180.053 115.705C178.733 115.566 177.406 115.424 176.075 115.279L176.129 114.782C174.802 114.639 173.47 114.492 172.133 114.343L172.077 114.84C170.757 114.693 169.431 114.543 168.1 114.391L168.157 113.895C166.832 113.743 165.503 113.59 164.169 113.434L164.11 113.93C162.788 113.775 161.461 113.618 160.129 113.459L160.189 112.962C159.523 112.883 158.857 112.802 158.189 112.721C157.522 112.64 156.856 112.559 156.19 112.478L156.13 112.974C154.799 112.811 153.472 112.646 152.151 112.48L152.213 111.984C150.881 111.817 149.553 111.649 148.231 111.479L148.167 111.975C146.838 111.805 145.515 111.633 144.198 111.46L144.263 110.965C142.928 110.79 141.6 110.614 140.277 110.436L140.211 110.932C138.883 110.754 137.562 110.575 136.246 110.395L136.314 109.899C134.98 109.717 133.653 109.533 132.332 109.348L132.263 109.843C130.933 109.657 129.61 109.47 128.295 109.282L128.365 108.787C127.035 108.597 125.712 108.406 124.397 108.213L124.325 108.708C122.992 108.513 121.668 108.318 120.351 108.121L120.425 107.627C119.1 107.429 117.783 107.23 116.474 107.031L116.399 107.525C115.063 107.321 113.737 107.117 112.419 106.911L112.496 106.417C111.168 106.21 109.85 106.002 108.541 105.794L108.462 106.288C107.133 106.076 105.812 105.863 104.503 105.649L104.583 105.156C103.251 104.939 101.929 104.721 100.619 104.503L100.537 104.996C99.2113 104.775 97.8972 104.553 96.5946 104.331L96.6787 103.838C95.3462 103.611 94.0259 103.383 92.7181 103.155L92.6321 103.647C91.3007 103.415 89.9823 103.182 88.6773 102.948L88.7653 102.456C87.4413 102.219 86.1311 101.982 84.8351 101.744L84.745 102.236C83.4119 101.992 82.094 101.747 80.7916 101.502L80.8841 101.01C79.5524 100.76 78.2371 100.509 76.9386 100.258L76.8437 100.749C75.5164 100.492 74.2067 100.235 72.9151 99.9786L73.0126 99.4882C71.6875 99.2247 70.3816 98.9612 69.0953 98.6979L68.995 99.1877C67.6591 98.9141 66.3444 98.6407 65.0516 98.3675L65.155 97.8783C63.8233 97.5968 62.5149 97.3157 61.2306 97.035L61.1238 97.5235C59.7932 97.2327 58.4884 96.9423 57.2101 96.6526L57.3206 96.165C55.9924 95.864 54.693 95.5637 53.4232 95.2644L53.3085 95.751C51.9785 95.4374 50.6809 95.1249 49.4168 94.8135L49.5364 94.328C48.206 94.0003 46.9128 93.6741 45.6582 93.3494L45.533 93.8335C44.1967 93.4877 42.9038 93.1438 41.6559 92.8021L41.7879 92.3198C40.4484 91.953 39.1612 91.5889 37.9279 91.2277L37.7874 91.7075C36.4391 91.3127 35.1548 90.9213 33.9369 90.5339L34.0884 90.0575C32.7409 89.6289 31.4759 89.2055 30.2966 88.7882L30.1298 89.2596C28.7721 88.7791 27.526 88.306 26.3967 87.8416L26.5869 87.3792C25.2073 86.8118 24.0093 86.2597 22.9998 85.7255L22.7659 86.1674C21.2526 85.3665 20.1431 84.5982 19.4667 83.8692L19.8332 83.5291C19.3052 82.9599 19.1527 82.5106 19.1949 82.1626C19.237 81.8147 19.4925 81.4148 20.1413 80.9883L19.8666 80.5705C20.6976 80.0242 21.9586 79.5433 23.6194 79.1271L23.7409 79.6121C24.8488 79.3346 26.144 79.0848 27.6193 78.8635L27.5451 78.369C28.7527 78.1878 30.0756 78.0262 31.5089 77.8841L31.5582 78.3817C32.8031 78.2582 34.1326 78.1494 35.5435 78.0552L35.5102 77.5563C36.7853 77.4712 38.126 77.398 39.5296 77.3367L39.5514 77.8363C40.8352 77.7802 42.1722 77.7342 43.5605 77.698L43.5475 77.1982C44.8409 77.1646 46.1785 77.1395 47.5588 77.1231L47.5647 77.623C48.8606 77.6076 50.1942 77.5997 51.5644 77.5994L51.5643 77.0994C52.8662 77.0992 54.2008 77.1057 55.5672 77.119L55.5624 77.619C56.8668 77.6317 58.2004 77.6506 59.562 77.6756L59.5712 77.1757C60.8817 77.1999 62.2182 77.2297 63.5797 77.2653L63.5666 77.7651C64.8808 77.7994 66.2185 77.839 67.5789 77.8839L67.5954 77.3842C68.916 77.4278 70.258 77.4764 71.6205 77.53L71.6009 78.0296C72.9128 78.0812 74.2439 78.1374 75.5935 78.1982L75.616 77.6987C76.9316 77.7579 78.2647 77.8215 79.6149 77.8895L79.5897 78.3889C80.9106 78.4554 82.2477 78.5261 83.6007 78.6009L83.6283 78.1016C84.9515 78.1748 86.2898 78.252 87.6427 78.3331L87.6127 78.8322C88.9279 78.9111 90.2569 78.9937 91.5992 79.0801L91.6313 78.5811C92.9542 78.6662 94.2901 78.755 95.6385 78.8473L95.6043 79.3461C96.9288 79.4369 98.2654 79.5311 99.6135 79.6288L99.6497 79.1301C100.968 79.2256 102.297 79.3245 103.636 79.4266L103.598 79.9252C104.923 80.0262 106.258 80.1305 107.604 80.238L107.644 79.7396C108.966 79.8453 110.299 79.9542 111.641 80.0661L111.6 80.5644C112.92 80.6746 114.25 80.7878 115.589 80.904L115.632 80.4059C116.961 80.5213 118.298 80.6396 119.644 80.7609L119.599 81.2589C120.917 81.3778 122.243 81.4994 123.577 81.624L123.624 81.1262C124.949 81.2499 126.282 81.3764 127.622 81.5058L127.574 82.0035C128.897 82.1311 130.228 82.2616 131.565 82.3947L131.614 81.8972C132.937 82.0289 134.266 82.1632 135.602 82.3003L135.551 82.7977C136.877 82.9338 138.21 83.0725 139.549 83.2138L139.602 82.7166C140.922 82.856 142.248 82.9979 143.58 83.1423L143.526 83.6394C144.852 83.7833 146.185 83.9297 147.522 84.0787L147.577 83.5817C148.898 83.7288 150.224 83.8784 151.555 84.0303L151.498 84.5271C152.823 84.6784 154.152 84.8321 155.486 84.9882L155.544 84.4916C156.867 84.6464 158.194 84.8036 159.525 84.9631L159.466 85.4595C160.131 85.5393 160.798 85.6196 161.465 85.7005C162.133 85.7814 162.799 85.8627 163.464 85.9443L163.525 85.448C164.856 85.6112 166.182 85.7757 167.503 85.9414L167.441 86.4375C168.774 86.6046 170.102 86.7731 171.424 86.9427L171.488 86.4467C172.816 86.6171 174.139 86.7887 175.457 86.9615L175.392 87.4573C176.726 87.6322 178.055 87.8083 179.377 87.9855L179.444 87.49C180.771 87.6679 182.093 87.8469 183.408 88.0271L183.34 88.5224C184.674 88.7051 186.002 88.8889 187.323 89.0737L187.392 88.5786C188.721 88.7646 190.044 88.9518 191.36 89.1399L191.289 89.6349C192.619 89.8251 193.942 90.0163 195.258 90.2085L195.33 89.7137C196.662 89.9083 197.987 90.104 199.303 90.3005L199.23 90.795C200.555 90.9928 201.872 91.1916 203.18 91.3911L203.256 90.8969C204.591 91.1006 205.918 91.3052 207.236 91.5106L207.159 92.0046C208.486 92.2116 209.805 92.4195 211.113 92.628L211.192 92.1343C212.522 92.3462 213.842 92.5589 215.152 92.7724L215.072 93.2659C216.404 93.4829 217.725 93.7007 219.036 93.9192L219.118 93.426C220.443 93.6469 221.757 93.8685 223.06 94.0906L222.976 94.5835C224.308 94.8108 225.629 95.0386 226.937 95.267L227.023 94.7744C228.354 95.0069 229.672 95.24 230.977 95.4734L230.889 95.9656C232.213 96.2025 233.524 96.4398 234.819 96.6775L234.91 96.1857C236.243 96.4301 237.561 96.675 238.863 96.9201L238.771 97.4115C240.102 97.6621 241.418 97.913 242.716 98.164L242.811 97.6731C244.138 97.9297 245.448 98.1864 246.74 98.4432L246.642 98.9336C247.967 99.1971 249.273 99.4606 250.559 99.724L250.66 99.2341C251.995 99.5077 253.31 99.7812 254.603 100.054L254.5 100.544C255.831 100.825 257.14 101.106 258.424 101.387L258.531 100.898C259.861 101.189 261.166 101.48 262.445 101.769L262.334 102.257C263.662 102.558 264.962 102.858 266.231 103.157L266.346 102.671C267.676 102.984 268.974 103.297 270.238 103.608L270.118 104.094C271.449 104.421 272.742 104.748 273.996 105.072L274.122 104.588C275.458 104.934 276.751 105.278 277.999 105.62L277.867 106.102C279.206 106.469 280.493 106.833 281.727 107.194L281.867 106.714C283.215 107.109 284.5 107.501 285.718 107.888L285.566 108.364C286.914 108.793 288.179 109.216 289.358 109.634L289.525 109.162C290.883 109.643 292.129 110.116 293.258 110.58L293.068 111.043C294.447 111.61 295.645 112.162 296.655 112.696L296.889 112.254Z" stroke="url(#paint20_linear_1208_53191)" stroke-dasharray="4 4" />
+    <g opacity="0.9">
+        <g filter="url(#filter0_d_1208_53191)">
+            <ellipse rx="18.3575" ry="24.1091" transform="matrix(0.977376 0.227267 -0.161319 0.994776 283.831 120.378)" fill="url(#paint21_linear_1208_53191)" />
+        </g>
+        <ellipse rx="16.5001" ry="24.1091" transform="matrix(0.977376 0.227267 -0.161319 0.994776 286.19 119.829)" fill="url(#paint22_linear_1208_53191)" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M278.047 122.919L281.704 118.034L278.657 118.936L275 123.821L278.2 126.2L281.247 125.298L278.047 122.919ZM284.114 127.429V127.458L284.142 127.45L284.114 127.429ZM284.142 114.777L284.114 114.815V114.785L284.142 114.777ZM290.237 112.971L290.265 112.963V112.992L290.237 112.971ZM296.331 117.503L292.674 114.784L295.722 113.881L299.379 116.6L296.179 120.875L293.132 121.777L296.331 117.503ZM290.265 125.607L290.237 125.645L290.265 125.636V125.607ZM287.951 110.48L284.142 130.618L286.428 129.941L290.237 109.803L287.951 110.48Z" fill="url(#paint23_linear_1208_53191)" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M279.047 122.919L282.704 118.034L279.657 118.936L276 123.821L279.2 126.2L282.247 125.298L279.047 122.919ZM285.114 127.429V127.458L285.142 127.45L285.114 127.429ZM285.142 114.777L285.114 114.815V114.785L285.142 114.777ZM291.237 112.971L291.265 112.963V112.992L291.237 112.971ZM297.331 117.503L293.674 114.784L296.722 113.881L300.379 116.6L297.179 120.875L294.132 121.777L297.331 117.503ZM291.265 125.607L291.237 125.645L291.265 125.636V125.607ZM288.951 110.48L285.142 130.618L287.428 129.941L291.237 109.803L288.951 110.48Z" fill="#C5C7D8" />
+    </g>
+    <circle cx="153.498" cy="113.518" r="44.5" fill="url(#paint24_linear_1208_53191)" />
+    <circle cx="155.501" cy="113.674" r="44.5" fill="url(#paint25_linear_1208_53191)" />
+    <path d="M147.666 121.585C149.433 121.329 150.866 122.569 150.866 124.354V138.225C150.866 140.01 149.433 141.665 147.666 141.922C145.899 142.178 144.466 140.938 144.466 139.153V125.282C144.466 123.497 145.899 121.841 147.666 121.585V121.585Z" fill="#B7B8BE" />
+    <path d="M140.361 105.968C140.35 106.092 140.341 106.217 140.341 106.343V127.357C140.341 129.617 142.112 131.181 144.309 130.863L165.459 127.796C167.657 127.478 169.427 125.4 169.427 123.14V102.125C169.427 102 169.423 101.876 169.412 101.756L140.361 105.968Z" fill="#B7B8BE" />
+    <path d="M162.102 119.492C163.87 119.236 165.302 120.476 165.302 122.261V136.132C165.302 137.918 163.87 139.573 162.102 139.829C160.335 140.085 158.903 138.845 158.903 137.06V123.189C158.903 121.404 160.335 119.749 162.102 119.492V119.492ZM135.2 108.587C136.967 108.331 138.4 109.571 138.4 111.356V125.227C138.4 127.012 136.967 128.668 135.2 128.924C133.433 129.18 132 127.94 132 126.155V112.285C132 110.499 133.432 108.843 135.2 108.587ZM174.569 102.879C176.336 102.623 177.769 103.863 177.769 105.648V119.519C177.769 121.304 176.336 122.96 174.569 123.216C172.802 123.472 171.369 122.232 171.369 120.447V106.576C171.369 104.791 172.802 103.135 174.569 102.879ZM140.454 104.575C140.543 98.1067 146.119 92.0058 153.276 90.2706L156.492 89.8043C163.65 89.4642 169.225 93.9485 169.314 100.39L140.454 104.575Z" fill="#B7B8BE" />
+    <path d="M141.567 91.3457L144.943 96.7641M168.201 87.484L164.826 93.8812" stroke="#B7B8BE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M150.586 97.3204C150.589 98.2223 149.85 99.0631 148.935 99.1982C148.021 99.333 147.278 98.7115 147.275 97.8096V97.8005C147.273 96.8983 148.012 96.0578 148.926 95.9228C149.84 95.7877 150.583 96.409 150.586 97.3113V97.3204ZM162.944 95.5287C162.946 96.4306 162.207 97.2713 161.293 97.4064C160.379 97.5412 159.635 96.9197 159.633 96.0178V96.0087C159.63 95.1066 160.369 94.2661 161.284 94.131C162.198 93.996 162.941 94.6172 162.944 95.5196V95.5287Z" fill="white" />
+    <path d="M148.666 121.585C150.433 121.329 151.866 122.569 151.866 124.354V138.225C151.866 140.01 150.433 141.665 148.666 141.922C146.899 142.178 145.466 140.938 145.466 139.153V125.282C145.466 123.497 146.899 121.841 148.666 121.585V121.585Z" fill="#A4C639" />
+    <path d="M141.361 105.968C141.35 106.092 141.341 106.217 141.341 106.343V127.357C141.341 129.617 143.112 131.181 145.309 130.863L166.459 127.796C168.657 127.478 170.427 125.4 170.427 123.14V102.125C170.427 102 170.423 101.876 170.412 101.756L141.361 105.968Z" fill="#A4C639" />
+    <path d="M163.102 119.492C164.87 119.236 166.302 120.476 166.302 122.261V136.132C166.302 137.918 164.87 139.573 163.102 139.829C161.335 140.085 159.903 138.845 159.903 137.06V123.189C159.903 121.404 161.335 119.749 163.102 119.492V119.492ZM136.2 108.587C137.967 108.331 139.4 109.571 139.4 111.356V125.227C139.4 127.012 137.967 128.668 136.2 128.924C134.433 129.18 133 127.94 133 126.155V112.285C133 110.499 134.432 108.843 136.2 108.587ZM175.569 102.879C177.336 102.623 178.769 103.863 178.769 105.648V119.519C178.769 121.304 177.336 122.96 175.569 123.216C173.802 123.472 172.369 122.232 172.369 120.447V106.576C172.369 104.791 173.802 103.135 175.569 102.879ZM141.454 104.575C141.543 98.1067 147.119 92.0058 154.276 90.2706L157.492 89.8043C164.65 89.4642 170.225 93.9485 170.314 100.39L141.454 104.575Z" fill="#A4C639" />
+    <path d="M142.567 91.3457L145.943 96.7641M169.201 87.484L165.826 93.8812" stroke="#A4C639" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M151.586 97.3204C151.589 98.2223 150.85 99.0631 149.935 99.1982C149.021 99.333 148.278 98.7115 148.275 97.8096V97.8005C148.273 96.8983 149.012 96.0578 149.926 95.9228C150.84 95.7877 151.583 96.409 151.586 97.3113V97.3204ZM163.944 95.5287C163.946 96.4306 163.207 97.2713 162.293 97.4064C161.379 97.5412 160.635 96.9197 160.633 96.0178V96.0087C160.63 95.1066 161.369 94.2661 162.284 94.131C163.198 93.996 163.941 94.6172 163.944 95.5196V95.5287Z" fill="white" />
+    <g opacity="0.8">
+        <g filter="url(#filter1_d_1208_53191)">
+            <ellipse rx="19.5" ry="22" transform="matrix(0.989651 0.143493 0 1 27.2568 86.47)" fill="#E1E2EB" />
+        </g>
+        <ellipse rx="19.5" ry="21.5" transform="matrix(0.989651 0.143493 0 1 23.2982 85.3958)" fill="#F7F7FD" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M15.3869 87.3015L12.9804 83.8436L24.7879 75.6554L30.7714 76.6031L15.3869 87.3015ZM16.6435 89.154L22.9951 84.7371L28.9477 85.6798L22.6439 90.0636L26.9311 96.2151L20.993 95.2746L19.0791 92.5425L19.0665 92.5513L16.6435 89.154Z" fill="url(#paint26_linear_1208_53191)" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.3869 87.3015L11.9804 83.8436L23.7879 75.6554L29.7714 76.6031L14.3869 87.3015ZM15.6435 89.154L21.9951 84.7371L27.9477 85.6798L21.6439 90.0636L25.9311 96.2151L19.993 95.2746L18.0791 92.5425L18.0665 92.5513L15.6435 89.154Z" fill="url(#paint27_linear_1208_53191)" />
+    </g>
+    <path d="M37.9132 245.04C35.1997 241.553 36.2527 237.227 40.2651 235.377L59.5058 226.507C63.5182 224.657 68.9706 225.985 71.6841 229.471L101.683 268.021C104.397 271.508 103.344 275.834 99.3312 277.684L76.458 288.228C74.4518 289.153 71.7256 288.49 70.3688 286.746L37.9132 245.04Z" fill="url(#paint28_linear_1208_53191)" />
+    <rect x="0.380573" y="0.0926329" width="33.7568" height="63.446" rx="3.75" transform="matrix(0.908143 -0.41866 0.614147 0.789191 35.5308 237.616)" fill="url(#paint29_linear_1208_53191)" stroke="url(#paint30_linear_1208_53191)" stroke-width="0.5" />
+    <defs>
+        <filter id="filter0_d_1208_53191" x="261.469" y="96.0312" width="44.7255" height="56.6934" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dy="4" />
+            <feGaussianBlur stdDeviation="2" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1208_53191" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1208_53191" result="shape" />
+        </filter>
+        <filter id="filter1_d_1208_53191" x="0.958618" y="53.291" width="68.5964" height="74.3594" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dx="8" dy="4" />
+            <feGaussianBlur stdDeviation="7.5" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1208_53191" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1208_53191" result="shape" />
+        </filter>
+        <linearGradient id="paint0_linear_1208_53191" x1="138.161" y1="228.451" x2="34.8507" y2="146.26" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#798196" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint1_linear_1208_53191" x1="17.2333" y1="267.535" x2="615.497" y2="286.207" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="0.34172" stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#FCFCFF" />
+        </linearGradient>
+        <linearGradient id="paint2_linear_1208_53191" x1="291.934" y1="84.1387" x2="-108.241" y2="692.112" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FAFAFF" />
+            <stop offset="1" stop-color="#FAFAFF" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint3_linear_1208_53191" x1="79.8786" y1="143.24" x2="381.993" y2="143.302" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#FCFCFF" />
+        </linearGradient>
+        <linearGradient id="paint4_linear_1208_53191" x1="384.396" y1="-113.462" x2="135.163" y2="137.192" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#FCFCFF" />
+        </linearGradient>
+        <radialGradient id="paint5_radial_1208_53191" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(169.977 194.425) rotate(90.5277) scale(31.644 77.9233)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint6_radial_1208_53191" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(177.027 202.006) rotate(90.5277) scale(32.8306 77.9233)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint7_radial_1208_53191" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(183.656 212.352) rotate(90.5277) scale(32.8306 79.901)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint8_radial_1208_53191" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(190.718 218.745) rotate(90.5277) scale(32.8306 79.1099)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint9_radial_1208_53191" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(132.948 220.586) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint10_radial_1208_53191" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(141.708 214.338) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint11_radial_1208_53191" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(154.423 208.127) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint12_radial_1208_53191" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(166.34 202.698) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint13_radial_1208_53191" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(179.824 198.868) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint14_radial_1208_53191" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(190.167 192.633) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint15_radial_1208_53191" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(202.861 188.795) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint16_radial_1208_53191" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(221.875 185.805) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint17_radial_1208_53191" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(237.777 177.248) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <linearGradient id="paint18_linear_1208_53191" x1="125.388" y1="268.069" x2="338.823" y2="134.107" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="0.441811" stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#EBEBEB" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint19_linear_1208_53191" x1="211.713" y1="33.8213" x2="205.831" y2="44.1918" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E6ECEF" />
+            <stop offset="1" stop-color="#E6ECEF" stop-opacity="0" />
+            <stop offset="1" stop-color="#EAF4FA" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint20_linear_1208_53191" x1="158.42" y1="113.253" x2="161.816" y2="85.2394" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#798196" stop-opacity="0.53" />
+            <stop offset="1" stop-color="#798196" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint21_linear_1208_53191" x1="18.3575" y1="0" x2="18.3575" y2="48.2182" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#D5D7E3" />
+            <stop offset="1" stop-color="#DADBE6" />
+        </linearGradient>
+        <linearGradient id="paint22_linear_1208_53191" x1="-31.4299" y1="-5.38633" x2="39.5002" y2="43.8833" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E6E7F0" />
+            <stop offset="1" stop-color="#FAFAFF" />
+        </linearGradient>
+        <linearGradient id="paint23_linear_1208_53191" x1="248.5" y1="97.5952" x2="334.574" y2="118.099" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C5C7D8" />
+            <stop offset="1" stop-color="#C5C7D8" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint24_linear_1208_53191" x1="114" y1="108.096" x2="193.781" y2="170.829" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C6C8D9" />
+            <stop offset="0.940675" stop-color="#ECEEF8" />
+        </linearGradient>
+        <linearGradient id="paint25_linear_1208_53191" x1="257.001" y1="273.674" x2="80.0011" y2="8.67383" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E6E7F0" />
+            <stop offset="1" stop-color="white" />
+        </linearGradient>
+        <linearGradient id="paint26_linear_1208_53191" x1="28.4991" y1="108.596" x2="16.7809" y2="67.0807" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="1" stop-color="#A3A8BD" />
+        </linearGradient>
+        <linearGradient id="paint27_linear_1208_53191" x1="27.4991" y1="108.596" x2="15.7809" y2="67.0807" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="1" stop-color="white" />
+        </linearGradient>
+        <linearGradient id="paint28_linear_1208_53191" x1="78.4961" y1="287.393" x2="90.0387" y2="198.584" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="1" stop-color="#F7F7FD" />
+        </linearGradient>
+        <linearGradient id="paint29_linear_1208_53191" x1="-112.765" y1="-150.853" x2="2.78202" y2="46.8081" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#FCFCFF" />
+        </linearGradient>
+        <linearGradient id="paint30_linear_1208_53191" x1="16.9204" y1="3.47454" x2="36.34" y2="75.953" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="1" stop-color="#C4C6D7" stop-opacity="0" />
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/android/step1.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/android/step1.svelte
index 28988253a..2f91a2b20 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/android/step1.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/android/step1.svelte
@@ -4,6 +4,12 @@
     import { WizardStep } from '$lib/layout';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { createPlatform } from '../store';
+    import { wizard } from '$lib/stores/wizard';
+    import { app } from '$lib/stores/app';
+    import Light from './light.svg';
+    import Dark from './dark.svg';
+
+    $wizard.media = $app.themeInUse === 'dark' ? Dark : Light;
 
     const projectId = $page.params.project;
 
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/apple/dark.svg b/src/routes/console/project-[project]/overview/platforms/wizard/apple/dark.svg
new file mode 100644
index 000000000..0a0d2574f
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/apple/dark.svg
@@ -0,0 +1,224 @@
+<svg width="307" height="290" viewBox="0 0 307 290" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.6704 157.002L64.2175 201.477L215.821 130.058L65.7018 42.4055L11.6704 157.002Z" fill="url(#paint0_linear_1208_52938)" />
+    <path d="M63.3384 200.552L53.7234 84.0257C53.2124 77.8327 57.1557 72.144 63.1342 70.4494L226.762 24.0695C227.101 23.9732 227.461 23.9685 227.803 24.056L230.954 24.8618L236.442 139.925L298.956 196.341C301.129 198.302 300.528 201.857 297.831 202.996L126.064 275.492C124.404 276.193 122.48 275.697 121.366 274.281L63.3384 200.552Z" fill="url(#paint1_linear_1208_52938)" />
+    <path d="M125.229 269.56L67.3418 198.277L235.847 139.925L301.248 196.778L285.031 203.503L266.44 210.623L198.801 239.893L125.229 269.56Z" fill="url(#paint2_linear_1208_52938)" />
+    <path d="M121.7 253.819L87.2109 210.494L241.524 153.267L279.875 184.644C282.212 186.557 281.668 190.27 278.881 191.432L126.369 255.02C124.719 255.708 122.813 255.218 121.7 253.819Z" fill="#373B4D" />
+    <path d="M67.4787 198.36L58.7996 83.0807C58.4056 77.8475 61.7634 73.0647 66.8194 71.6576L228.753 26.5917C230.011 26.2415 231.262 27.172 231.289 28.478L233.61 142.983L67.4787 198.36Z" fill="url(#paint3_linear_1208_52938)" />
+    <path d="M71.4339 197.568L64.4884 81.6836C64.3773 79.8291 65.5576 78.1423 67.3378 77.6112L226.559 30.1146C227.786 29.7486 229.036 30.6139 229.126 31.8913L236.774 141.005L71.4339 197.568Z" fill="url(#paint4_linear_1208_52938)" />
+    <path d="M91.7659 225.254L248.189 163.404" stroke="url(#paint5_radial_1208_52938)" stroke-opacity="0.2" />
+    <path d="M98.8048 234.022L255.25 169.799" stroke="url(#paint6_radial_1208_52938)" stroke-opacity="0.2" />
+    <path d="M103.456 244.35L263.856 180.163" stroke="url(#paint7_radial_1208_52938)" stroke-opacity="0.2" />
+    <path d="M111.309 250.75L270.127 186.549" stroke="url(#paint8_radial_1208_52938)" stroke-opacity="0.2" />
+    <path d="M115.73 200.158L150.165 240.823" stroke="url(#paint9_radial_1208_52938)" stroke-opacity="0.2" />
+    <path d="M124.49 193.91L158.926 234.575" stroke="url(#paint10_radial_1208_52938)" stroke-opacity="0.2" />
+    <path d="M137.206 187.699L171.641 228.364" stroke="url(#paint11_radial_1208_52938)" stroke-opacity="0.2" />
+    <path d="M149.122 182.27L183.558 222.934" stroke="url(#paint12_radial_1208_52938)" stroke-opacity="0.2" />
+    <path d="M162.607 178.439L197.042 219.104" stroke="url(#paint13_radial_1208_52938)" stroke-opacity="0.2" />
+    <path d="M172.95 172.205L207.385 212.87" stroke="url(#paint14_radial_1208_52938)" stroke-opacity="0.2" />
+    <path d="M185.644 168.367L220.079 209.032" stroke="url(#paint15_radial_1208_52938)" stroke-opacity="0.2" />
+    <path d="M204.658 165.377L221.875 185.709L239.093 206.042" stroke="url(#paint16_radial_1208_52938)" stroke-opacity="0.2" />
+    <path d="M220.559 156.82L237.777 177.153L254.995 197.485" stroke="url(#paint17_radial_1208_52938)" stroke-opacity="0.2" />
+    <path d="M87.3515 214.948L87.3515 210.482L121.977 251.497C123.659 253.489 126.437 254.167 128.848 253.173L279.102 191.24L279.278 194.71L127.47 257.146C125.46 257.972 123.147 257.406 121.746 255.744L87.3515 214.948Z" fill="url(#paint18_linear_1208_52938)" />
+    <path d="M172.321 125.22C172.266 127.429 173.91 128.622 175.994 127.884C178.077 127.146 179.81 124.757 179.865 122.548C179.919 120.339 178.275 119.146 176.192 119.884C174.109 120.621 172.376 123.01 172.321 125.22Z" fill="url(#paint19_linear_1208_52938)" />
+    <path d="M177.561 122.698C177.187 121.29 175.109 122.026 174.657 123.726L171.837 134.344C171.54 135.461 172.238 136.219 173.238 135.864L178.399 134.037C179.399 133.683 180.147 132.413 179.901 131.489L177.561 122.698Z" fill="url(#paint20_linear_1208_52938)" />
+    <path d="M296.889 112.159C298.402 112.96 299.512 113.728 300.188 114.457L299.821 114.797C300.349 115.366 300.502 115.816 300.46 116.163C300.418 116.511 300.162 116.911 299.513 117.338L299.788 117.756C298.957 118.302 297.696 118.783 296.035 119.199L295.914 118.714C294.806 118.992 293.511 119.241 292.035 119.463L292.109 119.957C290.902 120.138 289.579 120.3 288.146 120.442L288.096 119.944C286.852 120.068 285.522 120.177 284.111 120.271L284.144 120.77C282.869 120.855 281.529 120.928 280.125 120.989L280.103 120.49C278.819 120.546 277.482 120.592 276.094 120.628L276.107 121.128C274.814 121.162 273.476 121.187 272.096 121.203L272.09 120.703C270.794 120.719 269.46 120.726 268.09 120.727L268.09 121.227C266.788 121.227 265.454 121.22 264.087 121.207L264.092 120.707C262.788 120.694 261.454 120.676 260.093 120.65L260.083 121.15C258.773 121.126 257.436 121.096 256.075 121.061L256.088 120.561C254.774 120.527 253.436 120.487 252.076 120.442L252.059 120.942C250.739 120.898 249.397 120.85 248.034 120.796L248.054 120.297C246.742 120.245 245.411 120.189 244.061 120.128L244.039 120.627C242.723 120.568 241.39 120.505 240.04 120.437L240.065 119.937C238.744 119.871 237.407 119.8 236.054 119.725L236.026 120.224C234.703 120.151 233.365 120.074 232.012 119.993L232.042 119.494C230.727 119.415 229.398 119.332 228.055 119.246L228.023 119.745C226.7 119.66 225.364 119.571 224.016 119.479L224.05 118.98C222.726 118.889 221.389 118.795 220.041 118.697L220.005 119.196C218.687 119.1 217.358 119.002 216.018 118.899L216.056 118.401C214.731 118.3 213.396 118.196 212.051 118.088L212.011 118.587C210.688 118.481 209.355 118.372 208.013 118.26L208.055 117.762C206.734 117.652 205.404 117.538 204.066 117.422L204.022 117.92C202.694 117.805 201.357 117.686 200.011 117.565L200.056 117.067C198.738 116.948 197.411 116.827 196.077 116.702L196.031 117.2C194.706 117.076 193.373 116.95 192.032 116.82L192.08 116.323C190.757 116.195 189.427 116.065 188.09 115.931L188.04 116.429C186.718 116.297 185.388 116.163 184.053 116.026L184.104 115.528C182.777 115.392 181.444 115.254 180.105 115.112L180.053 115.61C178.733 115.47 177.406 115.328 176.075 115.184L176.129 114.687C174.802 114.543 173.47 114.396 172.133 114.247L172.077 114.744C170.757 114.597 169.431 114.448 168.1 114.296L168.157 113.799C166.832 113.648 165.503 113.494 164.169 113.338L164.11 113.835C162.788 113.68 161.461 113.523 160.129 113.363L160.189 112.867C159.523 112.787 158.857 112.707 158.189 112.626C157.522 112.545 156.856 112.463 156.19 112.382L156.13 112.878C154.799 112.715 153.472 112.55 152.151 112.385L152.213 111.889C150.881 111.721 149.553 111.553 148.231 111.383L148.167 111.879C146.838 111.709 145.515 111.537 144.198 111.365L144.263 110.869C142.928 110.694 141.6 110.518 140.277 110.341L140.211 110.836C138.883 110.658 137.562 110.479 136.246 110.299L136.314 109.804C134.98 109.621 133.653 109.437 132.332 109.252L132.263 109.748C130.933 109.561 129.61 109.374 128.295 109.186L128.365 108.691C127.035 108.501 125.712 108.31 124.397 108.118L124.325 108.612C122.992 108.418 121.668 108.222 120.351 108.026L120.425 107.531C119.1 107.333 117.783 107.135 116.474 106.935L116.399 107.429C115.063 107.226 113.737 107.021 112.419 106.816L112.496 106.321C111.168 106.114 109.85 105.907 108.541 105.698L108.462 106.192C107.133 105.98 105.812 105.767 104.503 105.554L104.583 105.06C103.251 104.843 101.929 104.625 100.619 104.407L100.537 104.9C99.2113 104.679 97.8972 104.458 96.5946 104.236L96.6787 103.743C95.3462 103.515 94.0259 103.288 92.7181 103.059L92.6321 103.552C91.3007 103.319 89.9823 103.086 88.6773 102.853L88.7653 102.361C87.4413 102.124 86.1311 101.886 84.8351 101.649L84.745 102.14C83.4119 101.896 82.094 101.651 80.7916 101.406L80.8841 100.915C79.5524 100.664 78.2371 100.413 76.9386 100.162L76.8437 100.653C75.5164 100.396 74.2067 100.14 72.9151 99.8829L73.0126 99.3925C71.6875 99.129 70.3816 98.8655 69.0953 98.6022L68.995 99.092C67.6591 98.8184 66.3444 98.545 65.0516 98.2718L65.155 97.7826C63.8233 97.5011 62.5149 97.22 61.2306 96.9393L61.1238 97.4278C59.7932 97.137 58.4884 96.8466 57.2101 96.5569L57.3206 96.0693C55.9924 95.7683 54.693 95.468 53.4232 95.1687L53.3085 95.6553C51.9785 95.3417 50.6809 95.0292 49.4168 94.7178L49.5364 94.2323C48.206 93.9046 46.9128 93.5783 45.6582 93.2537L45.533 93.7378C44.1967 93.392 42.9038 93.0481 41.6559 92.7064L41.7879 92.2241C40.4484 91.8573 39.1612 91.4931 37.9279 91.132L37.7874 91.6118C36.4391 91.217 35.1548 90.8256 33.9369 90.4382L34.0884 89.9617C32.7409 89.5332 31.4759 89.1098 30.2966 88.6925L30.1298 89.1639C28.7721 88.6834 27.526 88.2103 26.3967 87.7459L26.5869 87.2835C25.2073 86.7161 24.0093 86.164 22.9998 85.6298L22.7659 86.0717C21.2526 85.2708 20.1431 84.5025 19.4667 83.7735L19.8332 83.4334C19.3052 82.8642 19.1527 82.4149 19.1949 82.0669C19.237 81.719 19.4925 81.3191 20.1413 80.8926L19.8666 80.4748C20.6976 79.9285 21.9586 79.4476 23.6194 79.0314L23.7409 79.5164C24.8488 79.2389 26.144 78.9891 27.6193 78.7678L27.5451 78.2733C28.7527 78.0921 30.0756 77.9305 31.5089 77.7884L31.5582 78.286C32.8031 78.1625 34.1326 78.0537 35.5435 77.9595L35.5102 77.4606C36.7853 77.3755 38.126 77.3023 39.5296 77.241L39.5514 77.7405C40.8352 77.6845 42.1722 77.6385 43.5605 77.6023L43.5475 77.1025C44.8409 77.0689 46.1785 77.0438 47.5588 77.0274L47.5647 77.5273C48.8606 77.5119 50.1942 77.504 51.5644 77.5037L51.5643 77.0037C52.8662 77.0034 54.2008 77.01 55.5672 77.0233L55.5624 77.5233C56.8668 77.536 58.2004 77.5549 59.562 77.5799L59.5712 77.08C60.8817 77.1042 62.2182 77.134 63.5797 77.1696L63.5666 77.6694C64.8808 77.7037 66.2185 77.7433 67.5789 77.7882L67.5954 77.2885C68.916 77.3321 70.258 77.3807 71.6205 77.4343L71.6009 77.9339C72.9128 77.9855 74.2439 78.0417 75.5935 78.1025L75.616 77.603C76.9316 77.6622 78.2647 77.7258 79.6149 77.7938L79.5897 78.2932C80.9106 78.3597 82.2477 78.4303 83.6007 78.5052L83.6283 78.0059C84.9515 78.0791 86.2898 78.1563 87.6427 78.2374L87.6127 78.7365C88.9279 78.8154 90.2569 78.898 91.5992 78.9844L91.6313 78.4854C92.9542 78.5705 94.2901 78.6592 95.6385 78.7516L95.6043 79.2504C96.9288 79.3412 98.2654 79.4354 99.6135 79.5331L99.6497 79.0344C100.968 79.1299 102.297 79.2288 103.636 79.3309L103.598 79.8295C104.923 79.9305 106.258 80.0348 107.604 80.1423L107.644 79.6439C108.966 79.7496 110.299 79.8585 111.641 79.9704L111.6 80.4687C112.92 80.5789 114.25 80.6921 115.589 80.8083L115.632 80.3102C116.961 80.4256 118.298 80.5439 119.644 80.6652L119.599 81.1632C120.917 81.2821 122.243 81.4037 123.577 81.5283L123.624 81.0304C124.949 81.1542 126.282 81.2807 127.622 81.4101L127.574 81.9077C128.897 82.0354 130.228 82.1659 131.565 82.299L131.614 81.8015C132.937 81.9332 134.266 82.0675 135.602 82.2046L135.551 82.702C136.877 82.8381 138.21 82.9768 139.549 83.1181L139.602 82.6209C140.922 82.7603 142.248 82.9022 143.58 83.0466L143.526 83.5437C144.852 83.6876 146.185 83.834 147.522 83.983L147.577 83.486C148.898 83.6331 150.224 83.7827 151.555 83.9346L151.498 84.4314C152.823 84.5827 154.152 84.7364 155.486 84.8925L155.544 84.3959C156.867 84.5507 158.194 84.7078 159.525 84.8674L159.466 85.3638C160.131 85.4436 160.798 85.5239 161.465 85.6048C162.133 85.6857 162.799 85.767 163.464 85.8486L163.525 85.3523C164.856 85.5155 166.182 85.68 167.503 85.8457L167.441 86.3418C168.774 86.5089 170.102 86.6774 171.424 86.847L171.488 86.351C172.816 86.5214 174.139 86.693 175.457 86.8658L175.392 87.3615C176.726 87.5365 178.055 87.7126 179.377 87.8898L179.444 87.3943C180.771 87.5722 182.093 87.7512 183.408 87.9314L183.34 88.4267C184.674 88.6094 186.002 88.7932 187.323 88.978L187.392 88.4829C188.721 88.6689 190.044 88.8561 191.36 89.0442L191.289 89.5392C192.619 89.7294 193.942 89.9206 195.258 90.1127L195.33 89.618C196.662 89.8126 197.987 90.0083 199.303 90.2048L199.23 90.6993C200.555 90.8971 201.872 91.0959 203.18 91.2954L203.256 90.8012C204.591 91.0049 205.918 91.2095 207.236 91.4149L207.159 91.9089C208.486 92.1159 209.805 92.3238 211.113 92.5323L211.192 92.0386C212.522 92.2505 213.842 92.4632 215.152 92.6767L215.072 93.1702C216.404 93.3872 217.725 93.605 219.036 93.8235L219.118 93.3303C220.443 93.5512 221.757 93.7728 223.06 93.9949L222.976 94.4878C224.308 94.7151 225.629 94.9429 226.937 95.1713L227.023 94.6787C228.354 94.9112 229.672 95.1443 230.977 95.3777L230.889 95.8699C232.213 96.1068 233.524 96.3441 234.819 96.5818L234.91 96.09C236.243 96.3344 237.561 96.5793 238.863 96.8244L238.771 97.3158C240.102 97.5664 241.418 97.8173 242.716 98.0683L242.811 97.5774C244.138 97.834 245.448 98.0907 246.74 98.3475L246.642 98.8379C247.967 99.1014 249.273 99.3649 250.559 99.6283L250.66 99.1384C251.995 99.412 253.31 99.6854 254.603 99.9587L254.5 100.448C255.831 100.729 257.14 101.01 258.424 101.291L258.531 100.803C259.861 101.093 261.166 101.384 262.445 101.674L262.334 102.161C263.662 102.462 264.962 102.762 266.231 103.062L266.346 102.575C267.676 102.889 268.974 103.201 270.238 103.513L270.118 103.998C271.449 104.326 272.742 104.652 273.996 104.977L274.122 104.493C275.458 104.838 276.751 105.182 277.999 105.524L277.867 106.006C279.206 106.373 280.493 106.737 281.727 107.098L281.867 106.619C283.215 107.013 284.5 107.405 285.718 107.792L285.566 108.269C286.914 108.697 288.179 109.121 289.358 109.538L289.525 109.067C290.883 109.547 292.129 110.02 293.258 110.485L293.068 110.947C294.447 111.514 295.645 112.066 296.655 112.601L296.889 112.159Z" stroke="url(#paint21_linear_1208_52938)" stroke-dasharray="4 4" />
+    <g opacity="0.9">
+        <g filter="url(#filter0_d_1208_52938)">
+            <ellipse rx="18.3575" ry="24.1091" transform="matrix(0.977376 0.227267 -0.161319 0.994776 283.832 120.282)" fill="url(#paint22_linear_1208_52938)" shape-rendering="crispEdges" />
+        </g>
+        <ellipse rx="16.5001" ry="24.1091" transform="matrix(0.977376 0.227267 -0.161319 0.994776 286.19 119.733)" fill="url(#paint23_linear_1208_52938)" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M280.778 130.158L279.697 119.859L282.92 119.495L287.481 134.259L284.589 135.588L280.778 130.158Z" fill="#43485F" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M279.65 119.803L282.462 118.511L285.39 119.244L292.03 123.391L289.21 124.688L280.281 125.557L279.65 119.803Z" fill="#43485F" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M278.752 110.901L279.353 116.714L293.255 115.36L296.058 114.071L289.415 109.888L281.577 109.602L278.752 110.901Z" fill="#43485F" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M282.507 118.491L288.247 117.932L292.067 123.375L283.138 124.245L282.507 118.491Z" fill="#5A607B" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M281.607 109.588L282.208 115.401L296.11 114.047L292.27 108.575L281.607 109.588Z" fill="#5A607B" />
+    </g>
+    <g opacity="0.8">
+        <g filter="url(#filter1_d_1208_52938)">
+            <ellipse rx="19.5" ry="22" transform="matrix(0.989651 0.143493 0 1 27.2568 86.3723)" fill="#424254" />
+        </g>
+        <ellipse rx="19.5" ry="21.5" transform="matrix(0.989651 0.143493 0 1 23.2982 85.2981)" fill="#292B3A" />
+        <g filter="url(#filter2_f_1208_52938)">
+            <path d="M31.7544 83.3847L29.2195 82.5077L32.2613 87.6919L29.2195 90.8695L31.6819 91.7215L34.7238 88.6422L31.7544 83.3847Z" fill="#373B4D" fill-opacity="0.44" />
+        </g>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M18.9117 79.5958L16.3769 78.7188L13.4075 81.9215L16.4493 87.1056L17.1003 87.3309L15.1462 87.2446L17.5362 88.0715L18.9113 87.9575L18.9117 87.9576L18.9116 87.9574L18.9123 87.9574L18.9114 87.9571L15.8699 82.6751L18.9117 79.5958Z" fill="#43485F" />
+        <g filter="url(#filter3_f_1208_52938)">
+            <path d="M17.2675 78.4707L19.8023 79.3478L16.7605 82.427L19.8023 87.7096L17.3399 86.8576L14.2981 81.6734L17.2675 78.4707Z" fill="#373B4D" />
+        </g>
+        <g filter="url(#filter4_f_1208_52938)">
+            <path d="M25.5993 74.3675L27.4824 75.019L23.7163 94.9648L21.8333 94.3133L25.5993 74.3675Z" fill="#373B4D" />
+        </g>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M28.3289 82.7527L30.8638 83.6297L33.8332 88.8872L30.7913 91.9665L28.3289 91.1145L31.3707 87.9369L28.3289 82.7527ZM27.0227 91.2537L29.4851 92.1056L30.7888 91.9664L29.8473 91.6407L27.0227 91.2537Z" fill="#43485F" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M26.591 75.2654L24.7079 74.6139L20.9419 94.5597L22.8249 95.2112L26.591 75.2654ZM19.637 94.6994L21.5924 94.7857L22.8236 95.2117L21.5924 95.3759L19.637 94.6994Z" fill="#43485F" />
+        <path d="M15.0741 78.8574L17.609 79.7345L14.5672 82.8138L17.609 88.0963L15.1466 87.2443L12.1047 82.0602L15.0741 78.8574Z" fill="#5A607B" />
+        <path d="M29.5584 83.7695L27.0236 82.8925L30.0654 88.0766L27.0236 91.2543L29.486 92.1063L32.5278 89.027L29.5584 83.7695Z" fill="#5A607B" />
+        <path d="M23.4027 74.7542L25.2857 75.4057L21.5196 95.3515L19.6366 94.7L23.4027 74.7542Z" fill="#5A607B" />
+        <path d="M16.379 78.7167L15.0753 78.8559L17.6102 79.7329L18.9138 79.5937L16.379 78.7167Z" fill="#777E9B" />
+        <path d="M24.7071 74.6151L23.4034 74.7543L25.2865 75.4058L26.5901 75.2666L24.7071 74.6151Z" fill="#777E9B" />
+        <path d="M28.3259 82.7538L27.0222 82.893L29.5571 83.77L30.8607 83.6308L28.3259 82.7538Z" fill="#777E9B" />
+    </g>
+    <circle cx="153.498" cy="113.422" r="44.5" fill="url(#paint24_linear_1208_52938)" />
+    <circle cx="155.502" cy="113.578" r="44.5" fill="url(#paint25_linear_1208_52938)" />
+    <path d="M171.51 101.658C171.227 101.908 166.223 105.262 166.223 111.549C166.223 118.822 172.59 120.725 172.781 120.769C172.752 120.929 171.769 124.399 169.424 128.075C167.332 131.314 165.148 134.557 161.825 134.907C158.503 135.256 157.647 133.41 153.812 133.813C150.073 134.206 148.744 136.345 145.705 136.665C142.665 136.984 140.545 134.414 138.106 131.24C135.282 127.508 133 121.49 133 115.551C133 106.024 139.177 100.323 145.255 99.6838C148.485 99.3443 151.178 101.188 153.206 100.975C155.136 100.772 158.146 98.2015 161.82 97.8153C163.213 97.669 168.217 97.2705 171.51 101.658ZM160.076 93.9656C161.596 91.9976 162.671 89.3755 162.671 86.8665C162.671 86.5185 162.641 86.1688 162.578 85.8912C160.105 86.2442 157.164 88.1118 155.39 90.3613C153.997 92.0954 152.697 94.7411 152.697 97.2845C152.697 97.6667 152.761 98.0423 152.79 98.1617C152.947 98.1747 153.201 98.1822 153.455 98.1555C155.673 97.9224 158.463 96.1394 160.076 93.9656Z" fill="#171723" />
+    <path d="M172.51 101.84C172.227 102.09 167.223 105.444 167.223 111.731C167.223 119.003 173.59 120.907 173.781 120.95C173.752 121.11 172.769 124.58 170.424 128.257C168.332 131.496 166.148 134.739 162.825 135.088C159.503 135.438 158.647 133.592 154.812 133.995C151.073 134.388 149.744 136.527 146.705 136.846C143.665 137.166 141.545 134.595 139.106 131.421C136.282 127.69 134 121.672 134 115.732C134 106.206 140.177 100.504 146.255 99.8655C149.485 99.526 152.178 101.37 154.206 101.157C156.136 100.954 159.146 98.3832 162.82 97.997C164.213 97.8506 169.217 97.4521 172.51 101.84ZM161.076 94.1472C162.596 92.1792 163.671 89.5572 163.671 87.0481C163.671 86.7002 163.641 86.3504 163.578 86.0729C161.105 86.4259 158.164 88.2934 156.39 90.5429C154.997 92.2771 153.697 94.9227 153.697 97.4661C153.697 97.8483 153.761 98.2239 153.79 98.3433C153.947 98.3563 154.201 98.3639 154.455 98.3372C156.673 98.104 159.463 96.321 161.076 94.1472Z" fill="#8A94A7" />
+    <path d="M37.9132 244.944C35.1997 241.458 36.2527 237.131 40.2651 235.282L59.5058 226.412C63.5182 224.562 68.9706 225.889 71.6841 229.376L101.683 267.925C104.397 271.412 103.344 275.738 99.3312 277.588L76.458 288.133C74.4518 289.058 71.7256 288.394 70.3688 286.651L37.9132 244.944Z" fill="url(#paint26_linear_1208_52938)" />
+    <rect x="0.380573" y="0.0926329" width="33.7568" height="63.446" rx="3.75" transform="matrix(0.908143 -0.41866 0.614147 0.789191 35.5308 237.521)" fill="url(#paint27_linear_1208_52938)" stroke="url(#paint28_linear_1208_52938)" stroke-width="0.5" />
+    <defs>
+        <filter id="filter0_d_1208_52938" x="261.469" y="95.9355" width="44.7256" height="56.6934" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dy="4" />
+            <feGaussianBlur stdDeviation="2" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1208_52938" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1208_52938" result="shape" />
+        </filter>
+        <filter id="filter1_d_1208_52938" x="0.958618" y="53.1934" width="68.5964" height="74.3594" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dx="8" dy="4" />
+            <feGaussianBlur stdDeviation="7.5" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1208_52938" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1208_52938" result="shape" />
+        </filter>
+        <filter id="filter2_f_1208_52938" x="17.2195" y="70.5078" width="29.5043" height="33.2129" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_1208_52938" />
+        </filter>
+        <filter id="filter3_f_1208_52938" x="2.2981" y="66.4707" width="29.5043" height="33.2383" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_1208_52938" />
+        </filter>
+        <filter id="filter4_f_1208_52938" x="9.83325" y="62.3672" width="29.649" height="44.5977" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_1208_52938" />
+        </filter>
+        <linearGradient id="paint0_linear_1208_52938" x1="138.161" y1="228.355" x2="34.8507" y2="146.164" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#2D3041" stop-opacity="0.45" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint1_linear_1208_52938" x1="23.5005" y1="100.5" x2="615.497" y2="286.111" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#333749" />
+            <stop offset="0.34172" stop-color="#1F212B" />
+            <stop offset="0.489488" stop-color="#3C4158" />
+        </linearGradient>
+        <linearGradient id="paint2_linear_1208_52938" x1="291.934" y1="84.043" x2="-108.241" y2="692.017" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#282A3B" />
+            <stop offset="1" stop-color="#14141F" />
+        </linearGradient>
+        <linearGradient id="paint3_linear_1208_52938" x1="79.8786" y1="143.145" x2="322.391" y2="44.1851" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#1B1B28" />
+            <stop offset="1" stop-color="#4F5769" />
+        </linearGradient>
+        <linearGradient id="paint4_linear_1208_52938" x1="416.5" y1="-96.0005" x2="21.123" y2="235.911" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#373B4D" />
+            <stop offset="0.851966" stop-color="#171723" stop-opacity="0.8" />
+        </linearGradient>
+        <radialGradient id="paint5_radial_1208_52938" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(169.977 194.329) rotate(90.5277) scale(31.644 77.9233)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint6_radial_1208_52938" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(177.027 201.91) rotate(90.5277) scale(32.8306 77.9233)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint7_radial_1208_52938" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(183.656 212.256) rotate(90.5277) scale(32.8306 79.901)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint8_radial_1208_52938" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(190.718 218.65) rotate(90.5277) scale(32.8306 79.1099)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint9_radial_1208_52938" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(132.948 220.491) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint10_radial_1208_52938" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(141.708 214.243) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint11_radial_1208_52938" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(154.423 208.032) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint12_radial_1208_52938" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(166.34 202.602) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint13_radial_1208_52938" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(179.824 198.772) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint14_radial_1208_52938" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(190.167 192.538) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint15_radial_1208_52938" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(202.861 188.7) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint16_radial_1208_52938" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(221.875 185.709) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint17_radial_1208_52938" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(237.777 177.153) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <linearGradient id="paint18_linear_1208_52938" x1="125.388" y1="267.973" x2="338.823" y2="134.011" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#4F5469" />
+            <stop offset="0.738994" stop-color="#4F5469" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint19_linear_1208_52938" x1="176.413" y1="114.406" x2="180.115" y2="135.231" gradientUnits="userSpaceOnUse">
+            <stop offset="0.186067" stop-color="white" stop-opacity="0.07" />
+            <stop offset="0.312763" stop-color="white" stop-opacity="0.858597" />
+            <stop offset="0.603529" stop-color="white" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint20_linear_1208_52938" x1="176.413" y1="114.406" x2="180.115" y2="135.231" gradientUnits="userSpaceOnUse">
+            <stop offset="0.186067" stop-color="white" stop-opacity="0.07" />
+            <stop offset="0.312763" stop-color="white" stop-opacity="0.858597" />
+            <stop offset="0.603529" stop-color="white" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint21_linear_1208_52938" x1="158.42" y1="113.157" x2="161.816" y2="85.1437" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#798196" stop-opacity="0.53" />
+            <stop offset="1" stop-color="#798196" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint22_linear_1208_52938" x1="18.3575" y1="0" x2="18.3575" y2="48.2182" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#424254" />
+            <stop offset="1" stop-color="#3B3B55" stop-opacity="0.33" />
+        </linearGradient>
+        <linearGradient id="paint23_linear_1208_52938" x1="-31.4299" y1="-5.38633" x2="95.5878" y2="14.7331" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#1D1E2B" />
+            <stop offset="1" stop-color="#2B2D3D" />
+        </linearGradient>
+        <linearGradient id="paint24_linear_1208_52938" x1="114" y1="108" x2="193.781" y2="170.733" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#171723" />
+            <stop offset="0.940675" stop-color="#171723" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint25_linear_1208_52938" x1="45.5" y1="47.4995" x2="335" y2="253" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#45495C" />
+            <stop offset="1" stop-color="#171723" />
+        </linearGradient>
+        <linearGradient id="paint26_linear_1208_52938" x1="72" y1="292.5" x2="103.799" y2="168.326" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#424659" />
+            <stop offset="1" stop-color="#272839" />
+        </linearGradient>
+        <linearGradient id="paint27_linear_1208_52938" x1="-20.5779" y1="-29.0892" x2="48.668" y2="110.752" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#373B4D" />
+            <stop offset="1" stop-color="#171723" stop-opacity="0.8" />
+        </linearGradient>
+        <linearGradient id="paint28_linear_1208_52938" x1="4.81289" y1="-8.01685" x2="34.0683" y2="76.9259" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#686982" />
+            <stop offset="1" stop-color="#686982" stop-opacity="0" />
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/apple/light.svg b/src/routes/console/project-[project]/overview/platforms/wizard/apple/light.svg
new file mode 100644
index 000000000..1eaa7d895
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/apple/light.svg
@@ -0,0 +1,279 @@
+<svg width="307" height="290" viewBox="0 0 307 290" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.6704 157.098L64.2175 201.572L215.821 130.154L65.7018 42.5012L11.6704 157.098Z" fill="url(#paint0_linear_1208_52085)" />
+    <path d="M63.3384 200.647L53.7233 84.1214C53.2123 77.9284 57.1556 72.2397 63.1341 70.5451L226.762 24.1652C227.101 24.0689 227.461 24.0642 227.803 24.1517L230.954 24.9575L236.442 140.02L298.956 196.437C301.129 198.398 300.528 201.953 297.831 203.091L126.064 275.588C124.404 276.288 122.48 275.792 121.366 274.376L63.3384 200.647Z" fill="url(#paint1_linear_1208_52085)" />
+    <path d="M125.229 269.655L67.3417 198.373L235.847 140.021L301.248 196.874L285.031 203.599L266.44 210.718L198.801 239.989L125.229 269.655Z" fill="url(#paint2_linear_1208_52085)" />
+    <path d="M121.7 253.915L87.2108 210.59L241.524 153.363L279.875 184.74C282.212 186.652 281.668 190.366 278.881 191.528L126.369 255.116C124.719 255.804 122.813 255.313 121.7 253.915Z" fill="white" />
+    <path d="M67.4786 198.456L58.7996 83.1764C58.4056 77.9432 61.7634 73.1604 66.8193 71.7533L228.753 26.6874C230.011 26.3372 231.262 27.2677 231.288 28.5737L233.61 143.079L67.4786 198.456Z" fill="url(#paint3_linear_1208_52085)" />
+    <path d="M71.4338 197.664L64.4883 81.7793C64.3771 79.9248 65.5574 78.238 67.3377 77.7069L226.559 30.2103C227.786 29.8443 229.036 30.7097 229.125 31.987L236.774 141.1L71.4338 197.664Z" fill="url(#paint4_linear_1208_52085)" />
+    <path d="M91.7658 225.35L248.189 163.5" stroke="url(#paint5_radial_1208_52085)" />
+    <path d="M98.8048 234.117L255.249 169.894" stroke="url(#paint6_radial_1208_52085)" />
+    <path d="M103.456 244.446L263.856 180.259" stroke="url(#paint7_radial_1208_52085)" />
+    <path d="M111.309 250.846L270.127 186.645" stroke="url(#paint8_radial_1208_52085)" />
+    <path d="M115.73 200.254L150.165 240.919" stroke="url(#paint9_radial_1208_52085)" />
+    <path d="M124.49 194.006L158.926 234.671" stroke="url(#paint10_radial_1208_52085)" />
+    <path d="M137.205 187.795L171.641 228.46" stroke="url(#paint11_radial_1208_52085)" />
+    <path d="M149.122 182.365L183.558 223.03" stroke="url(#paint12_radial_1208_52085)" />
+    <path d="M162.607 178.535L197.042 219.2" stroke="url(#paint13_radial_1208_52085)" />
+    <path d="M172.95 172.301L207.385 212.966" stroke="url(#paint14_radial_1208_52085)" />
+    <path d="M185.644 168.463L220.079 209.128" stroke="url(#paint15_radial_1208_52085)" />
+    <path d="M204.658 165.473L221.875 185.805L239.093 206.138" stroke="url(#paint16_radial_1208_52085)" />
+    <path d="M220.559 156.916L237.777 177.248L254.995 197.581" stroke="url(#paint17_radial_1208_52085)" />
+    <path d="M87.3515 215.044L87.3514 210.578L121.977 251.592C123.659 253.585 126.437 254.263 128.848 253.269L279.102 191.336L279.278 194.806L127.47 257.241C125.46 258.068 123.146 257.502 121.746 255.84L87.3515 215.044Z" fill="url(#paint18_linear_1208_52085)" />
+    <path d="M205.567 37.6267C204.639 38.6455 204.719 40.2247 205.744 41.1447L207.631 42.8375C208.671 43.7703 210.281 43.635 211.151 42.5418C211.925 41.5683 211.838 40.1671 210.949 39.297L209.138 37.5239C208.133 36.5405 206.513 36.5871 205.567 37.6267Z" fill="url(#paint19_linear_1208_52085)" fill-opacity="0.4" />
+    <path d="M172.321 125.315C172.266 127.524 173.91 128.717 175.994 127.98C178.077 127.242 179.81 124.853 179.864 122.644C179.919 120.435 178.275 119.242 176.192 119.979C174.109 120.717 172.376 123.106 172.321 125.315Z" fill="url(#paint20_linear_1208_52085)" />
+    <path d="M177.561 122.794C177.187 121.386 175.109 122.121 174.657 123.822L171.837 134.44C171.54 135.557 172.238 136.314 173.238 135.96L178.398 134.133C179.399 133.779 180.147 132.509 179.901 131.584L177.561 122.794Z" fill="url(#paint21_linear_1208_52085)" />
+    <path d="M296.889 112.254C298.402 113.055 299.512 113.824 300.188 114.553L299.821 114.893C300.349 115.462 300.502 115.911 300.46 116.259C300.418 116.607 300.162 117.007 299.513 117.434L299.788 117.851C298.957 118.398 297.696 118.879 296.035 119.295L295.914 118.81C294.806 119.087 293.511 119.337 292.035 119.558L292.109 120.053C290.902 120.234 289.579 120.396 288.146 120.538L288.096 120.04C286.852 120.164 285.522 120.272 284.111 120.367L284.144 120.866C282.869 120.951 281.529 121.024 280.125 121.085L280.103 120.586C278.819 120.642 277.482 120.688 276.094 120.724L276.107 121.224C274.814 121.257 273.476 121.282 272.096 121.299L272.09 120.799C270.794 120.814 269.46 120.822 268.09 120.822L268.09 121.322C266.788 121.323 265.454 121.316 264.087 121.303L264.092 120.803C262.788 120.79 261.454 120.771 260.093 120.746L260.083 121.246C258.773 121.222 257.436 121.192 256.075 121.157L256.088 120.657C254.774 120.622 253.436 120.583 252.076 120.538L252.059 121.038C250.739 120.994 249.397 120.945 248.034 120.892L248.054 120.392C246.742 120.341 245.411 120.284 244.061 120.224L244.039 120.723C242.723 120.664 241.39 120.6 240.04 120.532L240.065 120.033C238.744 119.966 237.407 119.896 236.054 119.821L236.026 120.32C234.703 120.247 233.365 120.17 232.012 120.089L232.042 119.59C230.727 119.511 229.398 119.428 228.055 119.342L228.023 119.841C226.7 119.756 225.364 119.667 224.016 119.575L224.05 119.076C222.726 118.985 221.389 118.891 220.041 118.793L220.005 119.292C218.687 119.196 217.358 119.097 216.018 118.995L216.056 118.497C214.731 118.396 213.396 118.291 212.051 118.184L212.011 118.682C210.688 118.577 209.355 118.468 208.013 118.356L208.055 117.857C206.734 117.747 205.404 117.634 204.066 117.518L204.022 118.016C202.694 117.901 201.357 117.782 200.011 117.661L200.056 117.163C198.738 117.044 197.411 116.922 196.077 116.798L196.031 117.296C194.706 117.172 193.373 117.045 192.032 116.916L192.08 116.418C190.757 116.291 189.427 116.16 188.09 116.027L188.04 116.525C186.718 116.393 185.388 116.259 184.053 116.122L184.104 115.624C182.777 115.488 181.444 115.349 180.105 115.208L180.053 115.705C178.733 115.566 177.406 115.424 176.075 115.279L176.129 114.782C174.802 114.639 173.47 114.492 172.133 114.343L172.077 114.84C170.757 114.693 169.431 114.543 168.1 114.391L168.157 113.895C166.832 113.743 165.503 113.59 164.169 113.434L164.11 113.93C162.788 113.775 161.461 113.618 160.129 113.459L160.189 112.962C159.523 112.883 158.857 112.802 158.189 112.721C157.522 112.64 156.856 112.559 156.19 112.478L156.13 112.974C154.799 112.811 153.472 112.646 152.151 112.48L152.213 111.984C150.881 111.817 149.553 111.649 148.231 111.479L148.167 111.975C146.838 111.805 145.515 111.633 144.198 111.46L144.263 110.965C142.928 110.79 141.6 110.614 140.277 110.436L140.211 110.932C138.883 110.754 137.562 110.575 136.246 110.395L136.314 109.899C134.98 109.717 133.653 109.533 132.332 109.348L132.263 109.843C130.933 109.657 129.61 109.47 128.295 109.282L128.365 108.787C127.035 108.597 125.712 108.406 124.397 108.213L124.325 108.708C122.992 108.513 121.668 108.318 120.351 108.121L120.425 107.627C119.1 107.429 117.783 107.23 116.474 107.031L116.399 107.525C115.063 107.321 113.737 107.117 112.419 106.911L112.496 106.417C111.168 106.21 109.85 106.002 108.541 105.794L108.462 106.288C107.133 106.076 105.812 105.863 104.503 105.649L104.583 105.156C103.251 104.939 101.929 104.721 100.619 104.503L100.537 104.996C99.2113 104.775 97.8972 104.553 96.5946 104.331L96.6787 103.838C95.3462 103.611 94.0259 103.383 92.7181 103.155L92.6321 103.647C91.3007 103.415 89.9823 103.182 88.6773 102.948L88.7653 102.456C87.4413 102.219 86.1311 101.982 84.8351 101.744L84.745 102.236C83.4119 101.992 82.094 101.747 80.7916 101.502L80.8841 101.01C79.5524 100.76 78.2371 100.509 76.9386 100.258L76.8437 100.749C75.5164 100.492 74.2067 100.235 72.9151 99.9786L73.0126 99.4882C71.6875 99.2247 70.3816 98.9612 69.0953 98.6979L68.995 99.1877C67.6591 98.9141 66.3444 98.6407 65.0516 98.3675L65.155 97.8783C63.8233 97.5968 62.5149 97.3157 61.2306 97.035L61.1238 97.5235C59.7932 97.2327 58.4884 96.9423 57.2101 96.6526L57.3206 96.165C55.9924 95.864 54.693 95.5637 53.4232 95.2644L53.3085 95.751C51.9785 95.4374 50.6809 95.1249 49.4168 94.8135L49.5364 94.328C48.206 94.0003 46.9128 93.6741 45.6582 93.3494L45.533 93.8335C44.1967 93.4877 42.9038 93.1438 41.6559 92.8021L41.7879 92.3198C40.4484 91.953 39.1612 91.5889 37.9279 91.2277L37.7874 91.7075C36.4391 91.3127 35.1548 90.9213 33.9369 90.5339L34.0884 90.0575C32.7409 89.6289 31.4759 89.2055 30.2966 88.7882L30.1298 89.2596C28.7721 88.7791 27.526 88.306 26.3967 87.8416L26.5869 87.3792C25.2073 86.8118 24.0093 86.2597 22.9998 85.7255L22.7659 86.1674C21.2526 85.3665 20.1431 84.5982 19.4667 83.8692L19.8332 83.5291C19.3052 82.9599 19.1527 82.5106 19.1949 82.1626C19.237 81.8147 19.4925 81.4148 20.1413 80.9883L19.8666 80.5705C20.6976 80.0242 21.9586 79.5433 23.6194 79.1271L23.7409 79.6121C24.8488 79.3346 26.144 79.0848 27.6193 78.8635L27.5451 78.369C28.7527 78.1878 30.0756 78.0262 31.5089 77.8841L31.5582 78.3817C32.8031 78.2582 34.1326 78.1494 35.5435 78.0552L35.5102 77.5563C36.7853 77.4712 38.126 77.398 39.5296 77.3367L39.5514 77.8363C40.8352 77.7802 42.1722 77.7342 43.5605 77.698L43.5475 77.1982C44.8409 77.1646 46.1785 77.1395 47.5588 77.1231L47.5647 77.623C48.8606 77.6076 50.1942 77.5997 51.5644 77.5994L51.5643 77.0994C52.8662 77.0992 54.2008 77.1057 55.5672 77.119L55.5624 77.619C56.8668 77.6317 58.2004 77.6506 59.562 77.6756L59.5712 77.1757C60.8817 77.1999 62.2182 77.2297 63.5797 77.2653L63.5666 77.7651C64.8808 77.7994 66.2185 77.839 67.5789 77.8839L67.5954 77.3842C68.916 77.4278 70.258 77.4764 71.6205 77.53L71.6009 78.0296C72.9128 78.0812 74.2439 78.1374 75.5935 78.1982L75.616 77.6987C76.9316 77.7579 78.2647 77.8215 79.6149 77.8895L79.5897 78.3889C80.9106 78.4554 82.2477 78.5261 83.6007 78.6009L83.6283 78.1016C84.9515 78.1748 86.2898 78.252 87.6427 78.3331L87.6127 78.8322C88.9279 78.9111 90.2569 78.9937 91.5992 79.0801L91.6313 78.5811C92.9542 78.6662 94.2901 78.755 95.6385 78.8473L95.6043 79.3461C96.9288 79.4369 98.2654 79.5311 99.6135 79.6288L99.6497 79.1301C100.968 79.2256 102.297 79.3245 103.636 79.4266L103.598 79.9252C104.923 80.0262 106.258 80.1305 107.604 80.238L107.644 79.7396C108.966 79.8453 110.299 79.9542 111.641 80.0661L111.6 80.5644C112.92 80.6746 114.25 80.7878 115.589 80.904L115.632 80.4059C116.961 80.5213 118.298 80.6396 119.644 80.7609L119.599 81.2589C120.917 81.3778 122.243 81.4994 123.577 81.624L123.624 81.1262C124.949 81.2499 126.282 81.3764 127.622 81.5058L127.574 82.0035C128.897 82.1311 130.228 82.2616 131.565 82.3947L131.614 81.8972C132.937 82.0289 134.266 82.1632 135.602 82.3003L135.551 82.7977C136.877 82.9338 138.21 83.0725 139.549 83.2138L139.602 82.7166C140.922 82.856 142.248 82.9979 143.58 83.1423L143.526 83.6394C144.852 83.7833 146.185 83.9297 147.522 84.0787L147.577 83.5817C148.898 83.7288 150.224 83.8784 151.555 84.0303L151.498 84.5271C152.823 84.6784 154.152 84.8321 155.486 84.9882L155.544 84.4916C156.867 84.6464 158.194 84.8036 159.525 84.9631L159.466 85.4595C160.131 85.5393 160.798 85.6196 161.465 85.7005C162.133 85.7814 162.799 85.8627 163.464 85.9443L163.525 85.448C164.856 85.6112 166.182 85.7757 167.503 85.9414L167.441 86.4375C168.774 86.6046 170.102 86.7731 171.424 86.9427L171.488 86.4467C172.816 86.6171 174.139 86.7887 175.457 86.9615L175.392 87.4573C176.726 87.6322 178.055 87.8083 179.377 87.9855L179.444 87.49C180.771 87.6679 182.093 87.8469 183.408 88.0271L183.34 88.5224C184.674 88.7051 186.002 88.8889 187.323 89.0737L187.392 88.5786C188.721 88.7646 190.044 88.9518 191.36 89.1399L191.289 89.6349C192.619 89.8251 193.942 90.0163 195.258 90.2085L195.33 89.7137C196.662 89.9083 197.987 90.104 199.303 90.3005L199.23 90.795C200.555 90.9928 201.872 91.1916 203.18 91.3911L203.256 90.8969C204.591 91.1006 205.918 91.3052 207.236 91.5106L207.159 92.0046C208.486 92.2116 209.805 92.4195 211.113 92.628L211.192 92.1343C212.522 92.3462 213.842 92.5589 215.152 92.7724L215.072 93.2659C216.404 93.4829 217.725 93.7007 219.036 93.9192L219.118 93.426C220.443 93.6469 221.757 93.8685 223.06 94.0906L222.976 94.5835C224.308 94.8108 225.629 95.0386 226.937 95.267L227.023 94.7744C228.354 95.0069 229.672 95.24 230.977 95.4734L230.889 95.9656C232.213 96.2025 233.524 96.4398 234.819 96.6775L234.91 96.1857C236.243 96.4301 237.561 96.675 238.863 96.9201L238.771 97.4115C240.102 97.6621 241.418 97.913 242.716 98.164L242.811 97.6731C244.138 97.9297 245.448 98.1864 246.74 98.4432L246.642 98.9336C247.967 99.1971 249.273 99.4606 250.559 99.724L250.66 99.2341C251.995 99.5077 253.31 99.7812 254.603 100.054L254.5 100.544C255.831 100.825 257.14 101.106 258.424 101.387L258.531 100.898C259.861 101.189 261.166 101.48 262.445 101.769L262.334 102.257C263.662 102.558 264.962 102.858 266.231 103.157L266.346 102.671C267.676 102.984 268.974 103.297 270.238 103.608L270.118 104.094C271.449 104.421 272.742 104.748 273.996 105.072L274.122 104.588C275.458 104.934 276.751 105.278 277.999 105.62L277.867 106.102C279.206 106.469 280.493 106.833 281.727 107.194L281.867 106.714C283.215 107.109 284.5 107.501 285.718 107.888L285.566 108.364C286.914 108.793 288.179 109.216 289.358 109.634L289.525 109.162C290.883 109.643 292.129 110.116 293.258 110.58L293.068 111.043C294.447 111.61 295.645 112.162 296.655 112.696L296.889 112.254Z" stroke="url(#paint22_linear_1208_52085)" stroke-dasharray="4 4" />
+    <g opacity="0.9">
+        <g filter="url(#filter0_d_1208_52085)">
+            <ellipse rx="18.3575" ry="24.1091" transform="matrix(0.977376 0.227267 -0.161319 0.994776 283.831 120.378)" fill="url(#paint23_linear_1208_52085)" />
+        </g>
+        <ellipse rx="16.5001" ry="24.1091" transform="matrix(0.977376 0.227267 -0.161319 0.994776 286.19 119.829)" fill="url(#paint24_linear_1208_52085)" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M280.778 130.254L279.697 119.955L282.92 119.591L287.481 134.355L284.589 135.684L280.778 130.254Z" fill="url(#paint25_linear_1208_52085)" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M279.65 119.899L282.462 118.606L285.39 119.34L292.03 123.487L289.21 124.783L280.281 125.653L279.65 119.899Z" fill="url(#paint26_linear_1208_52085)" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M278.752 110.996L279.353 116.81L293.255 115.456L296.058 114.167L289.415 109.984L281.577 109.698L278.752 110.996Z" fill="url(#paint27_linear_1208_52085)" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M282.507 118.586L288.247 118.028L292.067 123.471L283.138 124.341L282.507 118.586Z" fill="#C5C7D8" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M281.607 109.683L282.208 115.497L296.11 114.143L292.27 108.671L281.607 109.683Z" fill="#C5C7D8" />
+    </g>
+    <g opacity="0.8">
+        <g filter="url(#filter1_d_1208_52085)">
+            <ellipse rx="19.5" ry="22" transform="matrix(0.989651 0.143493 0 1 27.2568 86.468)" fill="#E1E2EB" />
+        </g>
+        <ellipse rx="19.5" ry="21.5" transform="matrix(0.989651 0.143493 0 1 23.2982 85.3938)" fill="#F7F7FD" />
+        <g filter="url(#filter2_f_1208_52085)">
+            <path d="M17.2683 78.5664L19.8031 79.4435L16.7613 82.5227L19.8031 87.8053L17.3407 86.9533L14.2989 81.7692L17.2683 78.5664Z" fill="#A3A8BD" fill-opacity="0.44" />
+        </g>
+        <g filter="url(#filter3_f_1208_52085)">
+            <path d="M31.7542 83.4804L29.2194 82.6034L32.2612 87.7876L29.2194 90.9652L31.6818 91.8172L34.7236 88.7379L31.7542 83.4804Z" fill="#A3A8BD" fill-opacity="0.44" />
+        </g>
+        <g filter="url(#filter4_f_1208_52085)">
+            <path d="M25.5985 74.4632L27.4816 75.1147L23.7155 95.0605L21.8325 94.409L25.5985 74.4632Z" fill="#A3A8BD" fill-opacity="0.44" />
+        </g>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M18.9117 79.6915L16.3768 78.8145L13.4074 82.0172L16.4492 87.2013L17.1002 87.4266L15.1462 87.3403L17.5362 88.1672L18.9113 88.0532L18.9117 88.0533L18.9116 88.0531L18.9122 88.0531L18.9114 88.0528L15.8698 82.7708L18.9117 79.6915Z" fill="url(#paint28_linear_1208_52085)" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M28.3287 82.8484L30.8635 83.7254L33.8329 88.9829L30.7911 92.0622L28.3287 91.2102L31.3705 88.0326L28.3287 82.8484ZM27.0225 91.3494L29.4849 92.2013L30.7885 92.0621L29.847 91.7364L27.0225 91.3494Z" fill="url(#paint29_linear_1208_52085)" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M26.5909 75.3611L24.7079 74.7096L20.9418 94.6554L22.8248 95.3069L26.5909 75.3611ZM19.6369 94.7951L21.5924 94.8814L22.8236 95.3074L21.5924 95.4716L19.6369 94.7951Z" fill="url(#paint30_linear_1208_52085)" />
+        <path d="M15.0741 78.9531L17.6089 79.8302L14.5671 82.9095L17.6089 88.192L15.1465 87.34L12.1047 82.1559L15.0741 78.9531Z" fill="url(#paint31_linear_1208_52085)" />
+        <path d="M29.5584 83.8652L27.0235 82.9882L30.0653 88.1723L27.0235 91.35L29.4859 92.202L32.5278 89.1227L29.5584 83.8652Z" fill="url(#paint32_linear_1208_52085)" />
+        <path d="M23.4027 74.8499L25.2857 75.5014L21.5196 95.4472L19.6366 94.7957L23.4027 74.8499Z" fill="url(#paint33_linear_1208_52085)" />
+        <path d="M16.3788 78.8124L15.0752 78.9516L17.61 79.8286L18.9137 79.6894L16.3788 78.8124Z" fill="url(#paint34_linear_1208_52085)" />
+        <path d="M24.707 74.7108L23.4034 74.85L25.2864 75.5015L26.5901 75.3623L24.707 74.7108Z" fill="url(#paint35_linear_1208_52085)" />
+        <path d="M28.3259 82.8495L27.0222 82.9887L29.5571 83.8657L30.8607 83.7265L28.3259 82.8495Z" fill="url(#paint36_linear_1208_52085)" />
+    </g>
+    <circle cx="153.498" cy="113.518" r="44.5" fill="url(#paint37_linear_1208_52085)" />
+    <circle cx="155.501" cy="113.674" r="44.5" fill="url(#paint38_linear_1208_52085)" />
+    <path d="M171.51 101.754C171.227 102.004 166.223 105.358 166.223 111.645C166.223 118.917 172.59 120.821 172.781 120.865C172.752 121.024 171.769 124.494 169.424 128.171C167.332 131.41 165.148 134.653 161.825 135.002C158.503 135.352 157.647 133.506 153.812 133.909C150.073 134.302 148.744 136.441 145.705 136.76C142.665 137.08 140.545 134.509 138.106 131.335C135.282 127.604 133 121.586 133 115.647C133 106.12 139.177 100.418 145.255 99.7795C148.485 99.44 151.178 101.284 153.206 101.071C155.136 100.868 158.146 98.2973 161.82 97.911C163.213 97.7647 168.217 97.3662 171.51 101.754ZM160.076 94.0613C161.596 92.0933 162.671 89.4712 162.671 86.9622C162.671 86.6142 162.641 86.2645 162.578 85.9869C160.105 86.3399 157.164 88.2075 155.39 90.457C153.997 92.1911 152.697 94.8368 152.697 97.3802C152.697 97.7624 152.761 98.138 152.79 98.2574C152.947 98.2704 153.201 98.278 153.455 98.2512C155.673 98.0181 158.463 96.2351 160.076 94.0613Z" fill="#B7B8BE" />
+    <path d="M172.51 101.936C172.227 102.186 167.223 105.539 167.223 111.827C167.223 119.099 173.59 121.003 173.781 121.046C173.752 121.206 172.769 124.676 170.424 128.353C168.332 131.591 166.148 134.835 162.825 135.184C159.503 135.533 158.647 133.687 154.812 134.091C151.073 134.483 149.744 136.623 146.705 136.942C143.665 137.261 141.545 134.691 139.106 131.517C136.282 127.786 134 121.768 134 115.828C134 106.302 140.177 100.6 146.255 99.9612C149.485 99.6217 152.178 101.465 154.206 101.252C156.136 101.049 159.146 98.4789 162.82 98.0927C164.213 97.9463 169.217 97.5478 172.51 101.936ZM161.076 94.2429C162.596 92.2749 163.671 89.6529 163.671 87.1438C163.671 86.7959 163.641 86.4461 163.578 86.1686C161.105 86.5216 158.164 88.3891 156.39 90.6386C154.997 92.3728 153.697 95.0184 153.697 97.5618C153.697 97.944 153.761 98.3196 153.79 98.439C153.947 98.452 154.201 98.4596 154.455 98.4329C156.673 98.1997 159.463 96.4167 161.076 94.2429Z" fill="#4E4E4E" />
+    <path d="M37.9132 245.04C35.1997 241.553 36.2527 237.227 40.2651 235.377L59.5058 226.507C63.5182 224.657 68.9706 225.985 71.6841 229.471L101.683 268.021C104.397 271.508 103.344 275.834 99.3312 277.684L76.458 288.228C74.4518 289.153 71.7256 288.49 70.3688 286.746L37.9132 245.04Z" fill="url(#paint39_linear_1208_52085)" />
+    <rect x="0.380573" y="0.0926329" width="33.7568" height="63.446" rx="3.75" transform="matrix(0.908143 -0.41866 0.614147 0.789191 35.5308 237.616)" fill="url(#paint40_linear_1208_52085)" stroke="url(#paint41_linear_1208_52085)" stroke-width="0.5" />
+    <defs>
+        <filter id="filter0_d_1208_52085" x="261.469" y="96.0312" width="44.7255" height="56.6934" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dy="4" />
+            <feGaussianBlur stdDeviation="2" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1208_52085" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1208_52085" result="shape" />
+        </filter>
+        <filter id="filter1_d_1208_52085" x="0.958618" y="53.2891" width="68.5964" height="74.3594" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dx="8" dy="4" />
+            <feGaussianBlur stdDeviation="7.5" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1208_52085" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1208_52085" result="shape" />
+        </filter>
+        <filter id="filter2_f_1208_52085" x="2.29889" y="66.5664" width="29.5043" height="33.2383" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_1208_52085" />
+        </filter>
+        <filter id="filter3_f_1208_52085" x="17.2194" y="70.6035" width="29.5043" height="33.2129" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_1208_52085" />
+        </filter>
+        <filter id="filter4_f_1208_52085" x="9.83246" y="62.4629" width="29.6491" height="44.5977" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_1208_52085" />
+        </filter>
+        <linearGradient id="paint0_linear_1208_52085" x1="138.161" y1="228.451" x2="34.8507" y2="146.26" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#798196" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint1_linear_1208_52085" x1="17.2333" y1="267.535" x2="615.497" y2="286.207" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="0.34172" stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#FCFCFF" />
+        </linearGradient>
+        <linearGradient id="paint2_linear_1208_52085" x1="291.934" y1="84.1387" x2="-108.241" y2="692.112" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FAFAFF" />
+            <stop offset="1" stop-color="#FAFAFF" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint3_linear_1208_52085" x1="79.8786" y1="143.24" x2="381.993" y2="143.302" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#FCFCFF" />
+        </linearGradient>
+        <linearGradient id="paint4_linear_1208_52085" x1="384.395" y1="-113.462" x2="135.163" y2="137.192" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#FCFCFF" />
+        </linearGradient>
+        <radialGradient id="paint5_radial_1208_52085" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(169.977 194.425) rotate(90.5277) scale(31.644 77.9233)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint6_radial_1208_52085" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(177.027 202.006) rotate(90.5277) scale(32.8306 77.9233)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint7_radial_1208_52085" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(183.656 212.352) rotate(90.5277) scale(32.8306 79.901)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint8_radial_1208_52085" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(190.718 218.745) rotate(90.5277) scale(32.8306 79.1099)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint9_radial_1208_52085" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(132.948 220.586) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint10_radial_1208_52085" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(141.708 214.338) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint11_radial_1208_52085" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(154.423 208.127) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint12_radial_1208_52085" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(166.34 202.698) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint13_radial_1208_52085" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(179.824 198.868) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint14_radial_1208_52085" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(190.167 192.633) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint15_radial_1208_52085" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(202.861 188.795) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint16_radial_1208_52085" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(221.875 185.805) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint17_radial_1208_52085" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(237.777 177.248) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <linearGradient id="paint18_linear_1208_52085" x1="125.388" y1="268.069" x2="338.823" y2="134.107" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="0.441811" stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#EBEBEB" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint19_linear_1208_52085" x1="211.713" y1="33.8213" x2="205.831" y2="44.1918" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E6ECEF" />
+            <stop offset="1" stop-color="#E6ECEF" stop-opacity="0" />
+            <stop offset="1" stop-color="#EAF4FA" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint20_linear_1208_52085" x1="176.413" y1="114.502" x2="180.115" y2="135.326" gradientUnits="userSpaceOnUse">
+            <stop offset="0.186067" stop-color="white" stop-opacity="0.07" />
+            <stop offset="0.312763" stop-color="white" stop-opacity="0.858597" />
+            <stop offset="0.603529" stop-color="white" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint21_linear_1208_52085" x1="176.413" y1="114.502" x2="180.115" y2="135.326" gradientUnits="userSpaceOnUse">
+            <stop offset="0.186067" stop-color="white" stop-opacity="0.07" />
+            <stop offset="0.312763" stop-color="white" stop-opacity="0.858597" />
+            <stop offset="0.603529" stop-color="white" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint22_linear_1208_52085" x1="158.42" y1="113.253" x2="161.816" y2="85.2394" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#798196" stop-opacity="0.53" />
+            <stop offset="1" stop-color="#798196" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint23_linear_1208_52085" x1="18.3575" y1="0" x2="18.3575" y2="48.2182" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#D5D7E3" />
+            <stop offset="1" stop-color="#DADBE6" />
+        </linearGradient>
+        <linearGradient id="paint24_linear_1208_52085" x1="-31.4299" y1="-5.38633" x2="39.5002" y2="43.8833" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E6E7F0" />
+            <stop offset="1" stop-color="#FAFAFF" />
+        </linearGradient>
+        <linearGradient id="paint25_linear_1208_52085" x1="284.645" y1="122.048" x2="278.196" y2="126.574" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#C4C6D7" />
+        </linearGradient>
+        <linearGradient id="paint26_linear_1208_52085" x1="285.601" y1="119.641" x2="279.209" y2="124.126" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#C4C6D7" />
+        </linearGradient>
+        <linearGradient id="paint27_linear_1208_52085" x1="288.175" y1="108.218" x2="278.224" y2="115.201" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#C4C6D7" />
+        </linearGradient>
+        <linearGradient id="paint28_linear_1208_52085" x1="17.0154" y1="78.4662" x2="12.9856" y2="85.9912" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#A3A8BD" />
+            <stop offset="1" stop-color="#C4C6D7" />
+        </linearGradient>
+        <linearGradient id="paint29_linear_1208_52085" x1="32.6144" y1="82.3442" x2="21.2693" y2="93.0355" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="1" stop-color="#A3A8BD" />
+        </linearGradient>
+        <linearGradient id="paint30_linear_1208_52085" x1="24.9719" y1="74.4679" x2="6.35763" y2="102.161" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="1" stop-color="#A3A8BD" />
+        </linearGradient>
+        <linearGradient id="paint31_linear_1208_52085" x1="16.41" y1="80.685" x2="12.3921" y2="78.9648" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="1" stop-color="white" />
+        </linearGradient>
+        <linearGradient id="paint32_linear_1208_52085" x1="34.3765" y1="89.6594" x2="19.7844" y2="77.941" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#A3A8BD" />
+            <stop offset="1" stop-color="white" />
+        </linearGradient>
+        <linearGradient id="paint33_linear_1208_52085" x1="28.191" y1="80.2891" x2="18.2172" y2="75.9771" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="1" stop-color="white" />
+        </linearGradient>
+        <linearGradient id="paint34_linear_1208_52085" x1="15.4393" y1="78.3172" x2="17.9845" y2="82.1086" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#A3A8BD" />
+            <stop offset="1" stop-color="white" />
+        </linearGradient>
+        <linearGradient id="paint35_linear_1208_52085" x1="23.8243" y1="74.3472" x2="25.5161" y2="77.06" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#A3A8BD" />
+            <stop offset="1" stop-color="white" />
+        </linearGradient>
+        <linearGradient id="paint36_linear_1208_52085" x1="27.7232" y1="82.798" x2="30.4601" y2="85.8644" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#A3A8BD" />
+            <stop offset="1" stop-color="white" />
+        </linearGradient>
+        <linearGradient id="paint37_linear_1208_52085" x1="114" y1="108.096" x2="193.781" y2="170.829" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C6C8D9" />
+            <stop offset="0.940675" stop-color="#ECEEF8" />
+        </linearGradient>
+        <linearGradient id="paint38_linear_1208_52085" x1="257.001" y1="273.674" x2="80.0011" y2="8.67383" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E6E7F0" />
+            <stop offset="1" stop-color="white" />
+        </linearGradient>
+        <linearGradient id="paint39_linear_1208_52085" x1="78.4961" y1="287.393" x2="90.0387" y2="198.584" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="1" stop-color="#F7F7FD" />
+        </linearGradient>
+        <linearGradient id="paint40_linear_1208_52085" x1="-112.765" y1="-150.853" x2="2.78202" y2="46.8081" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#FCFCFF" />
+        </linearGradient>
+        <linearGradient id="paint41_linear_1208_52085" x1="16.9204" y1="3.47454" x2="36.34" y2="75.953" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="1" stop-color="#C4C6D7" stop-opacity="0" />
+        </linearGradient>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step1.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step1.svelte
index 7478cd44f..6ff6292f0 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step1.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step1.svelte
@@ -1,11 +1,16 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Alert } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { FormItem, FormList, InputText } from '$lib/elements/forms';
     import { WizardStep } from '$lib/layout';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { createPlatform } from '../store';
+    import { wizard } from '$lib/stores/wizard';
+    import { app } from '$lib/stores/app';
+    import Light from './light.svg';
+    import Dark from './dark.svg';
+
+    $wizard.media = $app.themeInUse === 'dark' ? Dark : Light;
 
     enum Platform {
         iOS = 'apple-ios',
@@ -46,11 +51,7 @@
 </script>
 
 <WizardStep {beforeSubmit}>
-    <svelte:fragment slot="title">Register your Flutter app</svelte:fragment>
-    <Alert type="warning">
-        Note: If you are building your Flutter application for multiple devices, you will have to
-        follow this process for each different device.
-    </Alert>
+    <svelte:fragment slot="title">Register your Apple app</svelte:fragment>
 
     <FormList isCommonSection>
         <FormItem>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/dark.svg b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/dark.svg
new file mode 100644
index 000000000..61e5eb054
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/dark.svg
@@ -0,0 +1,202 @@
+<svg width="307" height="290" viewBox="0 0 307 290" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.6704 157.003L64.2175 201.478L215.821 130.059L65.7018 42.4065L11.6704 157.003Z" fill="url(#paint0_linear_1208_57830)" />
+    <path d="M63.3384 200.552L53.7234 84.0257C53.2124 77.8327 57.1557 72.144 63.1342 70.4494L226.762 24.0695C227.101 23.9732 227.461 23.9685 227.803 24.056L230.954 24.8618L236.442 139.925L298.956 196.341C301.129 198.302 300.528 201.857 297.831 202.996L126.064 275.492C124.404 276.193 122.48 275.697 121.366 274.281L63.3384 200.552Z" fill="url(#paint1_linear_1208_57830)" />
+    <path d="M125.229 269.559L67.3418 198.276L235.847 139.924L301.248 196.777L285.031 203.502L266.44 210.622L198.801 239.892L125.229 269.559Z" fill="url(#paint2_linear_1208_57830)" />
+    <path d="M121.7 253.82L87.2109 210.495L241.524 153.268L279.875 184.645C282.212 186.558 281.668 190.271 278.881 191.433L126.369 255.021C124.719 255.709 122.813 255.219 121.7 253.82Z" fill="#373B4D" />
+    <path d="M67.4787 198.36L58.7996 83.0807C58.4056 77.8475 61.7634 73.0647 66.8194 71.6576L228.753 26.5917C230.011 26.2415 231.262 27.172 231.289 28.478L233.61 142.983L67.4787 198.36Z" fill="url(#paint3_linear_1208_57830)" />
+    <path d="M71.4339 197.569L64.4884 81.6846C64.3773 79.8301 65.5576 78.1432 67.3378 77.6122L226.559 30.1156C227.786 29.7496 229.036 30.6149 229.126 31.8923L236.774 141.006L71.4339 197.569Z" fill="url(#paint4_linear_1208_57830)" />
+    <path d="M91.7659 225.255L248.189 163.405" stroke="url(#paint5_radial_1208_57830)" stroke-opacity="0.2" />
+    <path d="M98.8048 234.022L255.25 169.799" stroke="url(#paint6_radial_1208_57830)" stroke-opacity="0.2" />
+    <path d="M103.456 244.349L263.856 180.162" stroke="url(#paint7_radial_1208_57830)" stroke-opacity="0.2" />
+    <path d="M111.309 250.751L270.127 186.55" stroke="url(#paint8_radial_1208_57830)" stroke-opacity="0.2" />
+    <path d="M115.73 200.159L150.165 240.824" stroke="url(#paint9_radial_1208_57830)" stroke-opacity="0.2" />
+    <path d="M124.49 193.91L158.926 234.575" stroke="url(#paint10_radial_1208_57830)" stroke-opacity="0.2" />
+    <path d="M137.206 187.698L171.641 228.363" stroke="url(#paint11_radial_1208_57830)" stroke-opacity="0.2" />
+    <path d="M149.122 182.271L183.558 222.935" stroke="url(#paint12_radial_1208_57830)" stroke-opacity="0.2" />
+    <path d="M162.607 178.439L197.042 219.104" stroke="url(#paint13_radial_1208_57830)" stroke-opacity="0.2" />
+    <path d="M172.95 172.205L207.385 212.87" stroke="url(#paint14_radial_1208_57830)" stroke-opacity="0.2" />
+    <path d="M185.644 168.366L220.079 209.031" stroke="url(#paint15_radial_1208_57830)" stroke-opacity="0.2" />
+    <path d="M204.658 165.377L221.875 185.709L239.093 206.042" stroke="url(#paint16_radial_1208_57830)" stroke-opacity="0.2" />
+    <path d="M220.559 156.821L237.777 177.154L254.995 197.486" stroke="url(#paint17_radial_1208_57830)" stroke-opacity="0.2" />
+    <path d="M87.3515 214.948L87.3515 210.482L121.977 251.497C123.659 253.489 126.437 254.167 128.848 253.173L279.102 191.24L279.278 194.71L127.47 257.146C125.46 257.972 123.147 257.406 121.746 255.744L87.3515 214.948Z" fill="url(#paint18_linear_1208_57830)" />
+    <path d="M172.321 125.221C172.266 127.43 173.91 128.623 175.994 127.885C178.077 127.147 179.81 124.758 179.865 122.549C179.919 120.34 178.275 119.147 176.192 119.885C174.109 120.622 172.376 123.011 172.321 125.221Z" fill="url(#paint19_linear_1208_57830)" />
+    <path d="M177.561 122.699C177.187 121.291 175.109 122.027 174.657 123.727L171.837 134.345C171.54 135.462 172.238 136.22 173.238 135.865L178.399 134.038C179.399 133.684 180.147 132.414 179.901 131.49L177.561 122.699Z" fill="url(#paint20_linear_1208_57830)" />
+    <path d="M296.889 112.159C298.402 112.96 299.512 113.728 300.188 114.457L299.821 114.797C300.349 115.366 300.502 115.816 300.46 116.163C300.418 116.511 300.162 116.911 299.513 117.338L299.788 117.756C298.957 118.302 297.696 118.783 296.035 119.199L295.914 118.714C294.806 118.992 293.511 119.241 292.035 119.463L292.109 119.957C290.902 120.138 289.579 120.3 288.146 120.442L288.096 119.944C286.852 120.068 285.522 120.177 284.111 120.271L284.144 120.77C282.869 120.855 281.529 120.928 280.125 120.989L280.103 120.49C278.819 120.546 277.482 120.592 276.094 120.628L276.107 121.128C274.814 121.162 273.476 121.187 272.096 121.203L272.09 120.703C270.794 120.719 269.46 120.726 268.09 120.727L268.09 121.227C266.788 121.227 265.454 121.22 264.087 121.207L264.092 120.707C262.788 120.694 261.454 120.676 260.093 120.65L260.083 121.15C258.773 121.126 257.436 121.096 256.075 121.061L256.088 120.561C254.774 120.527 253.436 120.487 252.076 120.442L252.059 120.942C250.739 120.898 249.397 120.85 248.034 120.796L248.054 120.297C246.742 120.245 245.411 120.189 244.061 120.128L244.039 120.627C242.723 120.568 241.39 120.505 240.04 120.437L240.065 119.937C238.744 119.871 237.407 119.8 236.054 119.725L236.026 120.224C234.703 120.151 233.365 120.074 232.012 119.993L232.042 119.494C230.727 119.415 229.398 119.332 228.055 119.246L228.023 119.745C226.7 119.66 225.364 119.571 224.016 119.479L224.05 118.98C222.726 118.889 221.389 118.795 220.041 118.697L220.005 119.196C218.687 119.1 217.358 119.002 216.018 118.899L216.056 118.401C214.731 118.3 213.396 118.196 212.051 118.088L212.011 118.587C210.688 118.481 209.355 118.372 208.013 118.26L208.055 117.762C206.734 117.652 205.404 117.538 204.066 117.422L204.022 117.92C202.694 117.805 201.357 117.687 200.011 117.565L200.056 117.067C198.738 116.948 197.411 116.827 196.077 116.702L196.031 117.2C194.706 117.076 193.373 116.95 192.032 116.82L192.08 116.323C190.757 116.195 189.427 116.065 188.09 115.931L188.04 116.429C186.718 116.297 185.388 116.163 184.053 116.026L184.104 115.528C182.777 115.392 181.444 115.254 180.105 115.112L180.053 115.61C178.733 115.47 177.406 115.328 176.075 115.184L176.129 114.687C174.802 114.543 173.47 114.396 172.133 114.247L172.077 114.744C170.757 114.597 169.431 114.448 168.1 114.296L168.157 113.799C166.832 113.648 165.503 113.494 164.169 113.338L164.11 113.835C162.788 113.68 161.461 113.523 160.129 113.363L160.189 112.867C159.523 112.787 158.857 112.707 158.189 112.626C157.522 112.545 156.856 112.463 156.19 112.382L156.13 112.878C154.799 112.715 153.472 112.55 152.151 112.385L152.213 111.889C150.881 111.721 149.553 111.553 148.231 111.383L148.167 111.879C146.838 111.709 145.515 111.537 144.198 111.365L144.263 110.869C142.928 110.694 141.6 110.518 140.277 110.341L140.211 110.836C138.883 110.658 137.562 110.479 136.246 110.299L136.314 109.804C134.98 109.621 133.653 109.437 132.332 109.252L132.263 109.748C130.933 109.561 129.61 109.374 128.295 109.186L128.365 108.691C127.035 108.501 125.712 108.31 124.397 108.118L124.325 108.612C122.992 108.418 121.668 108.222 120.351 108.026L120.425 107.531C119.1 107.333 117.783 107.135 116.474 106.935L116.399 107.429C115.063 107.226 113.737 107.021 112.419 106.816L112.496 106.321C111.168 106.114 109.85 105.907 108.541 105.698L108.462 106.192C107.133 105.98 105.812 105.767 104.503 105.554L104.583 105.06C103.251 104.843 101.929 104.625 100.619 104.407L100.537 104.9C99.2113 104.679 97.8972 104.458 96.5946 104.236L96.6787 103.743C95.3462 103.515 94.0259 103.288 92.7181 103.059L92.6321 103.552C91.3007 103.319 89.9823 103.086 88.6773 102.853L88.7653 102.361C87.4413 102.124 86.1311 101.886 84.8351 101.649L84.745 102.14C83.4119 101.896 82.094 101.651 80.7916 101.406L80.8841 100.915C79.5524 100.664 78.2371 100.413 76.9386 100.162L76.8437 100.653C75.5164 100.396 74.2067 100.14 72.9151 99.8829L73.0126 99.3925C71.6875 99.129 70.3816 98.8655 69.0953 98.6022L68.995 99.092C67.6591 98.8184 66.3444 98.545 65.0516 98.2718L65.155 97.7826C63.8233 97.5011 62.5149 97.22 61.2306 96.9393L61.1238 97.4278C59.7932 97.137 58.4884 96.8466 57.2101 96.5569L57.3206 96.0693C55.9924 95.7683 54.693 95.468 53.4232 95.1687L53.3085 95.6553C51.9785 95.3417 50.6809 95.0292 49.4168 94.7178L49.5364 94.2323C48.206 93.9046 46.9128 93.5783 45.6582 93.2537L45.533 93.7378C44.1967 93.392 42.9038 93.0481 41.6559 92.7064L41.7879 92.2241C40.4484 91.8573 39.1612 91.4931 37.9279 91.132L37.7874 91.6118C36.4391 91.217 35.1548 90.8256 33.9369 90.4382L34.0884 89.9617C32.7409 89.5332 31.4759 89.1098 30.2966 88.6925L30.1298 89.1639C28.7721 88.6834 27.526 88.2103 26.3967 87.7459L26.5869 87.2835C25.2073 86.7161 24.0093 86.164 22.9998 85.6298L22.7659 86.0717C21.2526 85.2708 20.1431 84.5025 19.4667 83.7735L19.8332 83.4334C19.3052 82.8642 19.1527 82.4149 19.1949 82.0669C19.237 81.719 19.4925 81.3191 20.1413 80.8926L19.8666 80.4748C20.6976 79.9285 21.9586 79.4476 23.6194 79.0314L23.7409 79.5164C24.8488 79.2389 26.144 78.9891 27.6193 78.7678L27.5451 78.2733C28.7527 78.0921 30.0756 77.9305 31.5089 77.7884L31.5582 78.286C32.8031 78.1625 34.1326 78.0537 35.5435 77.9595L35.5102 77.4606C36.7853 77.3755 38.126 77.3023 39.5296 77.241L39.5514 77.7405C40.8352 77.6845 42.1722 77.6385 43.5605 77.6023L43.5475 77.1025C44.8409 77.0689 46.1785 77.0438 47.5588 77.0274L47.5647 77.5273C48.8606 77.5119 50.1942 77.504 51.5644 77.5037L51.5643 77.0037C52.8662 77.0034 54.2008 77.01 55.5672 77.0233L55.5624 77.5233C56.8668 77.536 58.2004 77.5549 59.562 77.5799L59.5712 77.08C60.8817 77.1042 62.2182 77.134 63.5797 77.1696L63.5666 77.6694C64.8808 77.7037 66.2185 77.7433 67.5789 77.7882L67.5954 77.2885C68.916 77.3321 70.258 77.3807 71.6205 77.4343L71.6009 77.9339C72.9128 77.9855 74.2439 78.0417 75.5935 78.1025L75.616 77.603C76.9316 77.6622 78.2647 77.7258 79.6149 77.7938L79.5897 78.2932C80.9106 78.3597 82.2477 78.4303 83.6007 78.5052L83.6283 78.0059C84.9515 78.0791 86.2898 78.1563 87.6427 78.2374L87.6127 78.7365C88.9279 78.8154 90.2569 78.898 91.5992 78.9844L91.6313 78.4854C92.9542 78.5705 94.2901 78.6592 95.6385 78.7516L95.6043 79.2504C96.9288 79.3412 98.2654 79.4354 99.6135 79.5331L99.6497 79.0344C100.968 79.1299 102.297 79.2288 103.636 79.3309L103.598 79.8295C104.923 79.9305 106.258 80.0348 107.604 80.1423L107.644 79.6439C108.966 79.7496 110.299 79.8585 111.641 79.9704L111.6 80.4687C112.92 80.5789 114.25 80.6921 115.589 80.8083L115.632 80.3102C116.961 80.4256 118.298 80.5439 119.644 80.6652L119.599 81.1632C120.917 81.2821 122.243 81.4037 123.577 81.5283L123.624 81.0304C124.949 81.1542 126.282 81.2807 127.622 81.4101L127.574 81.9077C128.897 82.0354 130.228 82.1659 131.565 82.299L131.614 81.8015C132.937 81.9332 134.266 82.0675 135.602 82.2046L135.551 82.702C136.877 82.8381 138.21 82.9768 139.549 83.1181L139.602 82.6209C140.922 82.7603 142.248 82.9022 143.58 83.0466L143.526 83.5437C144.852 83.6876 146.185 83.834 147.522 83.983L147.577 83.486C148.898 83.6331 150.224 83.7827 151.555 83.9346L151.498 84.4314C152.823 84.5827 154.152 84.7364 155.486 84.8925L155.544 84.3959C156.867 84.5507 158.194 84.7078 159.525 84.8674L159.466 85.3638C160.131 85.4436 160.798 85.5239 161.465 85.6048C162.133 85.6857 162.799 85.767 163.464 85.8486L163.525 85.3523C164.856 85.5155 166.182 85.68 167.503 85.8457L167.441 86.3418C168.774 86.5089 170.102 86.6774 171.424 86.847L171.488 86.351C172.816 86.5214 174.139 86.693 175.457 86.8658L175.392 87.3615C176.726 87.5365 178.055 87.7126 179.377 87.8898L179.444 87.3943C180.771 87.5722 182.093 87.7512 183.408 87.9314L183.34 88.4267C184.674 88.6094 186.002 88.7932 187.323 88.978L187.392 88.4829C188.721 88.6689 190.044 88.8561 191.36 89.0442L191.289 89.5392C192.619 89.7294 193.942 89.9206 195.258 90.1127L195.33 89.618C196.662 89.8126 197.987 90.0083 199.303 90.2048L199.23 90.6993C200.555 90.8971 201.872 91.0959 203.18 91.2954L203.256 90.8012C204.591 91.0049 205.918 91.2095 207.236 91.4149L207.159 91.9089C208.486 92.1159 209.805 92.3238 211.113 92.5323L211.192 92.0386C212.522 92.2505 213.842 92.4632 215.152 92.6767L215.072 93.1702C216.404 93.3872 217.725 93.605 219.036 93.8235L219.118 93.3303C220.443 93.5512 221.757 93.7728 223.06 93.9949L222.976 94.4878C224.308 94.7151 225.629 94.9429 226.937 95.1713L227.023 94.6787C228.354 94.9112 229.672 95.1443 230.977 95.3777L230.889 95.8699C232.213 96.1068 233.524 96.3441 234.819 96.5818L234.91 96.09C236.243 96.3344 237.561 96.5793 238.863 96.8244L238.771 97.3158C240.102 97.5664 241.418 97.8173 242.716 98.0683L242.811 97.5774C244.138 97.834 245.448 98.0907 246.74 98.3475L246.642 98.8379C247.967 99.1014 249.273 99.3649 250.559 99.6283L250.66 99.1384C251.995 99.412 253.31 99.6854 254.603 99.9587L254.5 100.448C255.831 100.729 257.14 101.01 258.424 101.291L258.531 100.803C259.861 101.093 261.166 101.384 262.445 101.674L262.334 102.161C263.662 102.462 264.962 102.762 266.231 103.062L266.346 102.575C267.676 102.889 268.974 103.201 270.238 103.513L270.118 103.998C271.449 104.326 272.742 104.652 273.996 104.977L274.122 104.493C275.458 104.838 276.751 105.182 277.999 105.524L277.867 106.006C279.206 106.373 280.493 106.737 281.727 107.098L281.867 106.619C283.215 107.013 284.5 107.405 285.718 107.792L285.566 108.269C286.914 108.697 288.179 109.121 289.358 109.538L289.525 109.067C290.883 109.547 292.129 110.02 293.258 110.485L293.068 110.947C294.447 111.514 295.645 112.066 296.655 112.601L296.889 112.159Z" stroke="url(#paint21_linear_1208_57830)" stroke-dasharray="4 4" />
+    <g opacity="0.9">
+        <g filter="url(#filter0_d_1208_57830)">
+            <ellipse rx="18.3575" ry="24.1091" transform="matrix(0.977376 0.227267 -0.161319 0.994776 283.832 120.282)" fill="url(#paint22_linear_1208_57830)" shape-rendering="crispEdges" />
+        </g>
+        <ellipse rx="16.5001" ry="24.1091" transform="matrix(0.977376 0.227267 -0.161319 0.994776 286.19 119.733)" fill="url(#paint23_linear_1208_57830)" />
+        <path d="M282.405 124.775C283.082 124.686 283.652 125.259 283.678 126.054L283.882 132.233C283.909 133.028 283.381 133.745 282.704 133.834C282.028 133.924 281.458 133.351 281.431 132.556L281.228 126.377C281.201 125.581 281.729 124.864 282.405 124.775L282.405 124.775Z" fill="#43485F" />
+        <path d="M279.311 117.738C279.308 117.794 279.306 117.851 279.307 117.908L279.621 127.422C279.655 128.445 280.478 129.164 281.466 129.034L290.97 127.783C291.958 127.653 292.727 126.724 292.693 125.701L292.379 116.187C292.377 116.13 292.373 116.074 292.367 116.019L279.311 117.738Z" fill="#43485F" />
+        <path d="M288.89 123.755C289.678 123.651 290.339 124.224 290.366 125.034L290.574 131.325C290.6 132.135 289.983 132.876 289.194 132.98C288.406 133.084 287.745 132.511 287.718 131.701L287.51 125.41C287.483 124.6 288.101 123.859 288.89 123.755L288.89 123.755ZM276.663 118.62C277.451 118.516 278.112 119.089 278.139 119.899L278.347 126.19C278.373 127 277.756 127.741 276.967 127.845C276.179 127.948 275.518 127.376 275.491 126.566L275.283 120.275C275.257 119.465 275.874 118.724 276.663 118.62ZM294.231 116.307C295.02 116.203 295.681 116.776 295.707 117.586L295.915 123.877C295.942 124.687 295.324 125.428 294.536 125.532C293.747 125.636 293.086 125.063 293.059 124.253L292.852 117.962C292.825 117.152 293.443 116.411 294.231 116.307V116.307ZM278.959 116.837C278.902 113.904 281.311 111.175 284.494 110.439L285.929 110.25C289.134 110.146 291.701 112.219 291.837 115.141L278.959 116.837Z" fill="#43485F" />
+        <path d="M279.085 111.15L280.719 113.417M291.339 109.537L289.868 112.212" stroke="#43485F" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M283.199 113.918C283.215 114.371 282.88 114.786 282.451 114.843C282.022 114.901 281.661 114.58 281.645 114.127L281.645 114.122C281.629 113.669 281.964 113.255 282.393 113.197C282.822 113.139 283.182 113.46 283.199 113.913L283.199 113.918ZM288.998 113.154C289.014 113.608 288.679 114.022 288.25 114.08C287.821 114.138 287.46 113.817 287.444 113.364L287.444 113.359C287.428 112.905 287.763 112.491 288.192 112.433C288.62 112.376 288.981 112.696 288.998 113.15L288.998 113.154Z" fill="#242533" />
+        <path d="M283.405 124.775C284.082 124.686 284.652 125.259 284.678 126.054L284.882 132.233C284.909 133.028 284.381 133.745 283.704 133.834C283.028 133.924 282.458 133.351 282.431 132.556L282.228 126.377C282.201 125.581 282.729 124.864 283.405 124.775L283.405 124.775Z" fill="#5A607B" />
+        <path d="M280.311 117.738C280.308 117.794 280.306 117.851 280.307 117.908L280.621 127.422C280.655 128.445 281.478 129.164 282.466 129.034L291.97 127.783C292.958 127.653 293.727 126.724 293.693 125.701L293.379 116.187C293.377 116.13 293.373 116.074 293.367 116.019L280.311 117.738Z" fill="#5A607B" />
+        <path d="M289.89 123.755C290.678 123.651 291.339 124.224 291.366 125.034L291.574 131.325C291.6 132.135 290.983 132.876 290.194 132.98C289.406 133.084 288.745 132.511 288.718 131.701L288.51 125.41C288.483 124.6 289.101 123.859 289.89 123.755L289.89 123.755ZM277.663 118.62C278.451 118.516 279.112 119.089 279.139 119.899L279.347 126.19C279.373 127 278.756 127.741 277.967 127.845C277.179 127.948 276.518 127.376 276.491 126.566L276.283 120.275C276.257 119.465 276.874 118.724 277.663 118.62ZM295.231 116.307C296.02 116.203 296.681 116.776 296.707 117.586L296.915 123.877C296.942 124.687 296.324 125.428 295.536 125.532C294.747 125.636 294.086 125.063 294.059 124.253L293.852 117.962C293.825 117.152 294.443 116.411 295.231 116.307V116.307ZM279.959 116.837C279.902 113.904 282.311 111.175 285.494 110.439L286.929 110.25C290.134 110.146 292.701 112.219 292.837 115.141L279.959 116.837Z" fill="#5A607B" />
+        <path d="M280.085 111.15L281.719 113.417M292.339 109.537L290.868 112.212" stroke="#5A607B" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M284.199 113.918C284.215 114.371 283.88 114.786 283.451 114.843C283.022 114.901 282.661 114.58 282.645 114.127L282.645 114.122C282.629 113.669 282.964 113.255 283.393 113.197C283.822 113.139 284.182 113.46 284.199 113.913L284.199 113.918ZM289.998 113.154C290.014 113.608 289.679 114.022 289.25 114.08C288.821 114.138 288.46 113.817 288.444 113.364L288.444 113.359C288.428 112.905 288.763 112.491 289.192 112.433C289.62 112.376 289.981 112.696 289.998 113.15L289.998 113.154Z" fill="#232532" />
+    </g>
+    <g opacity="0.8">
+        <g filter="url(#filter1_d_1208_57830)">
+            <ellipse rx="19.5" ry="22" transform="matrix(0.989651 0.143493 0 1 27.2568 86.3723)" fill="#424254" />
+        </g>
+        <ellipse rx="19.5" ry="21.5" transform="matrix(0.989651 0.143493 0 1 23.2982 85.2981)" fill="#292B3A" />
+        <path d="M31.3387 82.1542C31.1976 82.2316 28.7801 83.1024 28.3424 86.021C27.8361 89.3967 30.4825 91.1531 30.5627 91.1995C30.5388 91.2697 29.8685 92.7457 28.5888 94.131C27.4504 95.3477 26.2713 96.5539 24.7967 96.2605C23.3221 95.9672 23.0773 94.9932 21.375 94.6546C19.7161 94.3246 18.987 95.1354 17.6382 94.8671C16.2894 94.5988 15.5427 93.115 14.6994 91.3074C13.7264 89.1882 13.1494 86.0818 13.5629 83.3248C14.2262 78.9026 17.319 77.1025 20.0167 77.6391C21.4501 77.9243 22.4969 79.1492 23.3968 79.3282C24.2534 79.4986 25.7462 78.7179 27.3769 79.0423C27.995 79.1652 30.2067 79.666 31.3387 82.1542ZM26.8836 77.0161C27.6839 76.3109 28.3356 75.2411 28.5103 74.0764C28.5346 73.9149 28.5461 73.7485 28.5377 73.611C27.4339 73.4359 26.02 73.8996 25.0892 74.7007C24.3606 75.3148 23.6091 76.3648 23.432 77.5454C23.4054 77.7228 23.4069 77.9059 23.4114 77.9653C23.4788 77.9928 23.5892 78.0311 23.7019 78.0536C24.6864 78.2494 26.0284 77.8042 26.8836 77.0161Z" fill="#43485F" />
+        <path d="M30.3387 82.1542C30.1976 82.2316 27.7801 83.1024 27.3424 86.021C26.8361 89.3967 29.4825 91.1531 29.5627 91.1995C29.5388 91.2697 28.8685 92.7457 27.5888 94.131C26.4504 95.3477 25.2713 96.5539 23.7967 96.2605C22.3221 95.9672 22.0773 94.9932 20.375 94.6546C18.7161 94.3246 17.987 95.1354 16.6382 94.8671C15.2894 94.5988 14.5427 93.115 13.6994 91.3074C12.7264 89.1882 12.1494 86.0818 12.5629 83.3248C13.2262 78.9026 16.319 77.1025 19.0167 77.6391C20.4501 77.9243 21.4969 79.1492 22.3968 79.3282C23.2534 79.4986 24.7462 78.7179 26.3769 79.0423C26.995 79.1652 29.2067 79.666 30.3387 82.1542ZM25.8836 77.0161C26.6839 76.3109 27.3356 75.2411 27.5103 74.0764C27.5346 73.9149 27.5461 73.7485 27.5377 73.611C26.4339 73.4359 25.02 73.8996 24.0892 74.7007C23.3606 75.3148 22.6091 76.3648 22.432 77.5454C22.4054 77.7228 22.4069 77.9059 22.4114 77.9653C22.4788 77.9928 22.5892 78.0311 22.7019 78.0536C23.6864 78.2494 25.0284 77.8042 25.8836 77.0161Z" fill="#5A607B" />
+    </g>
+    <circle cx="153.498" cy="113.422" r="44.5" fill="url(#paint24_linear_1208_57830)" />
+    <circle cx="155.5" cy="113.5" r="44.5" fill="url(#paint25_linear_1208_57830)" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M156.967 136.832L144.688 126.286L151.474 118.325L170.616 134.853L156.967 136.832Z" fill="#171723" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M144.536 126.316L156.706 112.254L170.388 110.27L151.455 132.146L144.536 126.316Z" fill="#171723" fill-opacity="0.85" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M134 117.117L140.91 123.093L170.387 89.0327L156.634 91.0268L134 117.117Z" fill="#171723" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M157.967 136.832L145.688 126.286L152.474 118.325L171.616 134.853L157.967 136.832Z" fill="#02539A" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M145.536 126.316L157.706 112.254L171.388 110.27L152.455 132.146L145.536 126.316Z" fill="#45D1FD" fill-opacity="0.85" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M135 117.117L141.91 123.093L171.387 89.0327L157.634 91.0268L135 117.117Z" fill="#45D1FD" />
+    <path d="M37.9132 244.945C35.1997 241.458 36.2527 237.132 40.2651 235.283L59.5058 226.412C63.5182 224.563 68.9706 225.89 71.6841 229.377L101.683 267.926C104.397 271.413 103.344 275.739 99.3312 277.589L76.458 288.134C74.4518 289.059 71.7256 288.395 70.3688 286.652L37.9132 244.945Z" fill="url(#paint26_linear_1208_57830)" />
+    <rect x="0.380573" y="0.0926329" width="33.7568" height="63.446" rx="3.75" transform="matrix(0.908143 -0.41866 0.614147 0.789191 35.5308 237.521)" fill="url(#paint27_linear_1208_57830)" stroke="url(#paint28_linear_1208_57830)" stroke-width="0.5" />
+    <defs>
+        <filter id="filter0_d_1208_57830" x="261.469" y="95.9346" width="44.7256" height="56.6953" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dy="4" />
+            <feGaussianBlur stdDeviation="2" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1208_57830" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1208_57830" result="shape" />
+        </filter>
+        <filter id="filter1_d_1208_57830" x="0.958618" y="53.1924" width="68.5964" height="74.3594" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dx="8" dy="4" />
+            <feGaussianBlur stdDeviation="7.5" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1208_57830" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1208_57830" result="shape" />
+        </filter>
+        <linearGradient id="paint0_linear_1208_57830" x1="138.161" y1="228.356" x2="34.8507" y2="146.165" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#2D3041" stop-opacity="0.45" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint1_linear_1208_57830" x1="23.5005" y1="100.5" x2="615.497" y2="286.111" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#333749" />
+            <stop offset="0.34172" stop-color="#1F212B" />
+            <stop offset="0.489488" stop-color="#3C4158" />
+        </linearGradient>
+        <linearGradient id="paint2_linear_1208_57830" x1="291.934" y1="84.0421" x2="-108.241" y2="692.016" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#282A3B" />
+            <stop offset="1" stop-color="#14141F" />
+        </linearGradient>
+        <linearGradient id="paint3_linear_1208_57830" x1="79.8786" y1="143.145" x2="322.391" y2="44.1851" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#1B1B28" />
+            <stop offset="1" stop-color="#4F5769" />
+        </linearGradient>
+        <linearGradient id="paint4_linear_1208_57830" x1="416.5" y1="-95.9995" x2="21.123" y2="235.912" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#373B4D" />
+            <stop offset="0.851966" stop-color="#171723" stop-opacity="0.8" />
+        </linearGradient>
+        <radialGradient id="paint5_radial_1208_57830" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(169.977 194.33) rotate(90.5277) scale(31.644 77.9233)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint6_radial_1208_57830" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(177.027 201.91) rotate(90.5277) scale(32.8306 77.9233)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint7_radial_1208_57830" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(183.656 212.256) rotate(90.5277) scale(32.8306 79.901)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint8_radial_1208_57830" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(190.718 218.651) rotate(90.5277) scale(32.8306 79.1099)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint9_radial_1208_57830" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(132.948 220.492) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint10_radial_1208_57830" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(141.708 214.243) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint11_radial_1208_57830" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(154.423 208.031) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint12_radial_1208_57830" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(166.34 202.603) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint13_radial_1208_57830" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(179.824 198.772) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint14_radial_1208_57830" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(190.167 192.538) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint15_radial_1208_57830" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(202.861 188.699) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint16_radial_1208_57830" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(221.875 185.709) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint17_radial_1208_57830" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(237.777 177.154) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <linearGradient id="paint18_linear_1208_57830" x1="125.388" y1="267.973" x2="338.823" y2="134.011" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#4F5469" />
+            <stop offset="0.738994" stop-color="#4F5469" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint19_linear_1208_57830" x1="176.413" y1="114.407" x2="180.115" y2="135.232" gradientUnits="userSpaceOnUse">
+            <stop offset="0.186067" stop-color="white" stop-opacity="0.07" />
+            <stop offset="0.312763" stop-color="white" stop-opacity="0.858597" />
+            <stop offset="0.603529" stop-color="white" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint20_linear_1208_57830" x1="176.413" y1="114.407" x2="180.115" y2="135.232" gradientUnits="userSpaceOnUse">
+            <stop offset="0.186067" stop-color="white" stop-opacity="0.07" />
+            <stop offset="0.312763" stop-color="white" stop-opacity="0.858597" />
+            <stop offset="0.603529" stop-color="white" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint21_linear_1208_57830" x1="158.42" y1="113.157" x2="161.816" y2="85.1437" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#798196" stop-opacity="0.53" />
+            <stop offset="1" stop-color="#798196" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint22_linear_1208_57830" x1="18.3575" y1="0" x2="18.3575" y2="48.2182" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#424254" />
+            <stop offset="1" stop-color="#3B3B55" stop-opacity="0.33" />
+        </linearGradient>
+        <linearGradient id="paint23_linear_1208_57830" x1="-31.4299" y1="-5.38633" x2="95.5878" y2="14.7331" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#1D1E2B" />
+            <stop offset="1" stop-color="#2B2D3D" />
+        </linearGradient>
+        <linearGradient id="paint24_linear_1208_57830" x1="114" y1="108" x2="193.781" y2="170.733" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#171723" />
+            <stop offset="0.940675" stop-color="#171723" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint25_linear_1208_57830" x1="45.498" y1="47.4214" x2="334.998" y2="252.921" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#45495C" />
+            <stop offset="1" stop-color="#171723" />
+        </linearGradient>
+        <linearGradient id="paint26_linear_1208_57830" x1="72" y1="292.5" x2="103.799" y2="168.327" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#424659" />
+            <stop offset="1" stop-color="#272839" />
+        </linearGradient>
+        <linearGradient id="paint27_linear_1208_57830" x1="-20.5779" y1="-29.0892" x2="48.668" y2="110.752" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#373B4D" />
+            <stop offset="1" stop-color="#171723" stop-opacity="0.8" />
+        </linearGradient>
+        <linearGradient id="paint28_linear_1208_57830" x1="4.81289" y1="-8.01685" x2="34.0683" y2="76.9259" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#686982" />
+            <stop offset="1" stop-color="#686982" stop-opacity="0" />
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/light.svg b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/light.svg
new file mode 100644
index 000000000..83d21a59d
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/light.svg
@@ -0,0 +1,220 @@
+<svg width="307" height="290" viewBox="0 0 307 290" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.6703 157.099L64.2175 201.573L215.821 130.155L65.7017 42.5022L11.6703 157.099Z" fill="url(#paint0_linear_1208_54246)" />
+    <path d="M63.3383 200.647L53.7233 84.1214C53.2122 77.9284 57.1555 72.2397 63.1341 70.5451L226.762 24.1652C227.101 24.0689 227.46 24.0642 227.803 24.1517L230.954 24.9575L236.442 140.02L298.955 196.437C301.129 198.398 300.528 201.953 297.831 203.091L126.064 275.588C124.404 276.288 122.48 275.792 121.366 274.376L63.3383 200.647Z" fill="url(#paint1_linear_1208_54246)" />
+    <path d="M125.229 269.654L67.3416 198.372L235.847 140.02L301.248 196.873L285.031 203.598L266.44 210.717L198.801 239.988L125.229 269.654Z" fill="url(#paint2_linear_1208_54246)" />
+    <path d="M121.7 253.916L87.2108 210.591L241.524 153.364L279.874 184.741C282.212 186.653 281.668 190.367 278.881 191.529L126.369 255.117C124.719 255.805 122.813 255.314 121.7 253.916Z" fill="white" />
+    <path d="M67.4785 198.456L58.7995 83.1764C58.4055 77.9432 61.7633 73.1604 66.8192 71.7533L228.753 26.6874C230.011 26.3372 231.262 27.2677 231.288 28.5737L233.609 143.079L67.4785 198.456Z" fill="url(#paint3_linear_1208_54246)" />
+    <path d="M71.4337 197.665L64.4882 81.7803C64.3771 79.9258 65.5574 78.2389 67.3376 77.7079L226.558 30.2113C227.786 29.8453 229.036 30.7106 229.125 31.988L236.774 141.101L71.4337 197.665Z" fill="url(#paint4_linear_1208_54246)" />
+    <path d="M91.7657 225.351L248.189 163.501" stroke="url(#paint5_radial_1208_54246)" />
+    <path d="M98.8047 234.117L255.249 169.894" stroke="url(#paint6_radial_1208_54246)" />
+    <path d="M103.456 244.445L263.856 180.258" stroke="url(#paint7_radial_1208_54246)" />
+    <path d="M111.309 250.847L270.127 186.646" stroke="url(#paint8_radial_1208_54246)" />
+    <path d="M115.73 200.255L150.165 240.92" stroke="url(#paint9_radial_1208_54246)" />
+    <path d="M124.49 194.006L158.926 234.671" stroke="url(#paint10_radial_1208_54246)" />
+    <path d="M137.205 187.794L171.641 228.459" stroke="url(#paint11_radial_1208_54246)" />
+    <path d="M149.122 182.366L183.558 223.031" stroke="url(#paint12_radial_1208_54246)" />
+    <path d="M162.607 178.535L197.042 219.2" stroke="url(#paint13_radial_1208_54246)" />
+    <path d="M172.95 172.301L207.385 212.966" stroke="url(#paint14_radial_1208_54246)" />
+    <path d="M185.643 168.462L220.079 209.127" stroke="url(#paint15_radial_1208_54246)" />
+    <path d="M204.658 165.473L221.875 185.805L239.093 206.138" stroke="url(#paint16_radial_1208_54246)" />
+    <path d="M220.559 156.917L237.777 177.249L254.995 197.582" stroke="url(#paint17_radial_1208_54246)" />
+    <path d="M87.3514 215.044L87.3514 210.578L121.977 251.592C123.659 253.585 126.437 254.263 128.848 253.269L279.102 191.336L279.278 194.806L127.47 257.241C125.46 258.068 123.146 257.502 121.746 255.84L87.3514 215.044Z" fill="url(#paint18_linear_1208_54246)" />
+    <path d="M205.566 37.6277C204.639 38.6465 204.719 40.2258 205.744 41.1458L207.631 42.8385C208.671 43.7713 210.281 43.636 211.151 42.5429V42.5429C211.925 41.5694 211.838 40.1681 210.949 39.2981L209.138 37.525C208.133 36.5415 206.513 36.5882 205.566 37.6277V37.6277Z" fill="url(#paint19_linear_1208_54246)" fill-opacity="0.4" />
+    <path d="M296.889 112.254C298.402 113.055 299.512 113.824 300.188 114.553L299.821 114.893C300.349 115.462 300.502 115.911 300.46 116.259C300.418 116.607 300.162 117.007 299.513 117.434L299.788 117.851C298.957 118.398 297.696 118.879 296.035 119.295L295.914 118.81C294.806 119.087 293.511 119.337 292.035 119.558L292.109 120.053C290.902 120.234 289.579 120.396 288.146 120.538L288.096 120.04C286.852 120.164 285.522 120.272 284.111 120.367L284.144 120.866C282.869 120.951 281.529 121.024 280.125 121.085L280.103 120.586C278.819 120.642 277.482 120.688 276.094 120.724L276.107 121.224C274.814 121.257 273.476 121.282 272.096 121.299L272.09 120.799C270.794 120.814 269.46 120.822 268.09 120.822L268.09 121.322C266.788 121.323 265.454 121.316 264.087 121.303L264.092 120.803C262.788 120.79 261.454 120.771 260.093 120.746L260.083 121.246C258.773 121.222 257.436 121.192 256.075 121.157L256.088 120.657C254.774 120.622 253.436 120.583 252.076 120.538L252.059 121.038C250.739 120.994 249.397 120.945 248.034 120.892L248.054 120.392C246.742 120.341 245.411 120.284 244.061 120.224L244.039 120.723C242.723 120.664 241.39 120.6 240.04 120.532L240.065 120.033C238.744 119.966 237.407 119.896 236.054 119.821L236.026 120.32C234.703 120.247 233.365 120.17 232.012 120.089L232.042 119.59C230.727 119.511 229.398 119.428 228.055 119.342L228.023 119.841C226.7 119.756 225.364 119.667 224.016 119.575L224.05 119.076C222.726 118.985 221.389 118.891 220.041 118.793L220.005 119.292C218.687 119.196 217.358 119.097 216.018 118.995L216.056 118.497C214.731 118.396 213.396 118.291 212.051 118.184L212.011 118.682C210.688 118.577 209.355 118.468 208.013 118.356L208.055 117.857C206.734 117.747 205.404 117.634 204.066 117.518L204.022 118.016C202.694 117.901 201.357 117.782 200.011 117.661L200.056 117.163C198.738 117.044 197.411 116.922 196.077 116.798L196.031 117.296C194.706 117.172 193.373 117.045 192.032 116.916L192.08 116.418C190.757 116.291 189.427 116.16 188.09 116.027L188.04 116.525C186.718 116.393 185.388 116.259 184.053 116.122L184.104 115.624C182.777 115.488 181.444 115.349 180.105 115.208L180.053 115.705C178.733 115.566 177.406 115.424 176.075 115.279L176.129 114.782C174.802 114.639 173.47 114.492 172.133 114.343L172.077 114.84C170.757 114.693 169.431 114.543 168.1 114.391L168.157 113.895C166.832 113.743 165.503 113.59 164.169 113.434L164.11 113.93C162.788 113.775 161.461 113.618 160.129 113.459L160.189 112.962C159.523 112.883 158.857 112.802 158.189 112.721C157.522 112.64 156.856 112.559 156.19 112.478L156.13 112.974C154.799 112.811 153.472 112.646 152.151 112.48L152.213 111.984C150.881 111.817 149.553 111.649 148.231 111.479L148.167 111.975C146.838 111.805 145.515 111.633 144.198 111.46L144.263 110.965C142.928 110.79 141.6 110.614 140.277 110.436L140.211 110.932C138.883 110.754 137.562 110.575 136.246 110.395L136.314 109.899C134.98 109.717 133.653 109.533 132.332 109.348L132.263 109.843C130.933 109.657 129.61 109.47 128.295 109.282L128.365 108.787C127.035 108.597 125.712 108.406 124.397 108.213L124.325 108.708C122.992 108.513 121.668 108.318 120.351 108.121L120.425 107.627C119.1 107.429 117.783 107.23 116.474 107.031L116.399 107.525C115.063 107.321 113.737 107.117 112.419 106.911L112.496 106.417C111.168 106.21 109.85 106.002 108.541 105.794L108.462 106.288C107.133 106.076 105.812 105.863 104.503 105.649L104.583 105.156C103.251 104.939 101.929 104.721 100.619 104.503L100.537 104.996C99.2113 104.775 97.8972 104.553 96.5946 104.331L96.6787 103.838C95.3462 103.611 94.0259 103.383 92.7181 103.155L92.6321 103.647C91.3007 103.415 89.9823 103.182 88.6773 102.948L88.7653 102.456C87.4413 102.219 86.1311 101.982 84.8351 101.744L84.745 102.236C83.4119 101.992 82.094 101.747 80.7916 101.502L80.8841 101.01C79.5524 100.76 78.2371 100.509 76.9386 100.258L76.8437 100.749C75.5164 100.492 74.2067 100.235 72.9151 99.9786L73.0126 99.4882C71.6875 99.2247 70.3816 98.9612 69.0953 98.6979L68.995 99.1877C67.6591 98.9141 66.3444 98.6407 65.0516 98.3675L65.155 97.8783C63.8233 97.5968 62.5149 97.3157 61.2306 97.035L61.1238 97.5235C59.7932 97.2327 58.4884 96.9423 57.2101 96.6526L57.3206 96.165C55.9924 95.864 54.693 95.5637 53.4232 95.2644L53.3085 95.751C51.9785 95.4374 50.6809 95.1249 49.4168 94.8135L49.5364 94.328C48.206 94.0003 46.9128 93.6741 45.6582 93.3494L45.533 93.8335C44.1967 93.4877 42.9038 93.1438 41.6559 92.8021L41.7879 92.3198C40.4484 91.953 39.1612 91.5889 37.9279 91.2277L37.7874 91.7075C36.4391 91.3127 35.1548 90.9213 33.9369 90.5339L34.0884 90.0575C32.7409 89.6289 31.4759 89.2055 30.2966 88.7882L30.1298 89.2596C28.7721 88.7791 27.526 88.306 26.3967 87.8416L26.5869 87.3792C25.2073 86.8118 24.0093 86.2597 22.9998 85.7255L22.7659 86.1674C21.2526 85.3665 20.1431 84.5982 19.4667 83.8692L19.8332 83.5291C19.3052 82.9599 19.1527 82.5106 19.1949 82.1626C19.237 81.8147 19.4925 81.4148 20.1413 80.9883L19.8666 80.5705C20.6976 80.0242 21.9586 79.5433 23.6194 79.1271L23.7409 79.6121C24.8488 79.3346 26.144 79.0848 27.6193 78.8635L27.5451 78.369C28.7527 78.1878 30.0756 78.0262 31.5089 77.8841L31.5582 78.3817C32.8031 78.2582 34.1326 78.1494 35.5435 78.0552L35.5102 77.5563C36.7853 77.4712 38.126 77.398 39.5296 77.3367L39.5514 77.8363C40.8352 77.7802 42.1722 77.7342 43.5605 77.698L43.5475 77.1982C44.8409 77.1646 46.1785 77.1395 47.5588 77.1231L47.5647 77.623C48.8606 77.6076 50.1942 77.5997 51.5644 77.5994L51.5643 77.0994C52.8662 77.0992 54.2008 77.1057 55.5672 77.119L55.5624 77.619C56.8668 77.6317 58.2004 77.6506 59.562 77.6756L59.5712 77.1757C60.8817 77.1999 62.2182 77.2297 63.5797 77.2653L63.5666 77.7651C64.8808 77.7994 66.2185 77.839 67.5789 77.8839L67.5954 77.3842C68.916 77.4278 70.258 77.4764 71.6205 77.53L71.6009 78.0296C72.9128 78.0812 74.2439 78.1374 75.5935 78.1982L75.616 77.6987C76.9316 77.7579 78.2647 77.8215 79.6149 77.8895L79.5897 78.3889C80.9106 78.4554 82.2477 78.5261 83.6007 78.6009L83.6283 78.1016C84.9515 78.1748 86.2898 78.252 87.6427 78.3331L87.6127 78.8322C88.9279 78.9111 90.2569 78.9937 91.5992 79.0801L91.6313 78.5811C92.9542 78.6662 94.2901 78.755 95.6385 78.8473L95.6043 79.3461C96.9288 79.4369 98.2654 79.5311 99.6135 79.6288L99.6497 79.1301C100.968 79.2256 102.297 79.3245 103.636 79.4266L103.598 79.9252C104.923 80.0262 106.258 80.1305 107.604 80.238L107.644 79.7396C108.966 79.8453 110.299 79.9542 111.641 80.0661L111.6 80.5644C112.92 80.6746 114.25 80.7878 115.589 80.904L115.632 80.4059C116.961 80.5213 118.298 80.6396 119.644 80.7609L119.599 81.2589C120.917 81.3778 122.243 81.4995 123.577 81.624L123.624 81.1262C124.949 81.2499 126.282 81.3764 127.622 81.5058L127.574 82.0035C128.897 82.1311 130.228 82.2616 131.565 82.3947L131.614 81.8972C132.937 82.0289 134.266 82.1632 135.602 82.3003L135.551 82.7977C136.877 82.9338 138.21 83.0725 139.549 83.2138L139.602 82.7166C140.922 82.856 142.248 82.9979 143.58 83.1423L143.526 83.6394C144.852 83.7833 146.185 83.9297 147.522 84.0787L147.577 83.5817C148.898 83.7288 150.224 83.8784 151.555 84.0303L151.498 84.5271C152.823 84.6784 154.152 84.8321 155.486 84.9882L155.544 84.4916C156.867 84.6464 158.194 84.8036 159.525 84.9631L159.466 85.4595C160.131 85.5393 160.798 85.6196 161.465 85.7005C162.133 85.7814 162.799 85.8627 163.464 85.9443L163.525 85.448C164.856 85.6112 166.182 85.7757 167.503 85.9414L167.441 86.4375C168.774 86.6046 170.102 86.7731 171.424 86.9427L171.488 86.4467C172.816 86.6171 174.139 86.7887 175.457 86.9615L175.392 87.4572C176.726 87.6322 178.055 87.8083 179.377 87.9855L179.444 87.49C180.771 87.6679 182.093 87.8469 183.408 88.0271L183.34 88.5224C184.674 88.7051 186.002 88.8889 187.323 89.0737L187.392 88.5786C188.721 88.7646 190.044 88.9518 191.36 89.1399L191.289 89.6349C192.619 89.8251 193.942 90.0163 195.258 90.2085L195.33 89.7137C196.662 89.9083 197.987 90.104 199.303 90.3005L199.23 90.795C200.555 90.9928 201.872 91.1916 203.18 91.3911L203.256 90.8969C204.591 91.1006 205.918 91.3052 207.236 91.5106L207.159 92.0046C208.486 92.2116 209.805 92.4195 211.113 92.628L211.192 92.1343C212.522 92.3462 213.842 92.5589 215.152 92.7724L215.072 93.2659C216.404 93.4829 217.725 93.7007 219.036 93.9192L219.118 93.426C220.443 93.6469 221.757 93.8685 223.06 94.0906L222.976 94.5835C224.308 94.8108 225.629 95.0386 226.937 95.267L227.023 94.7744C228.354 95.0069 229.672 95.24 230.977 95.4734L230.889 95.9656C232.213 96.2025 233.524 96.4398 234.819 96.6775L234.91 96.1857C236.243 96.4301 237.561 96.675 238.863 96.9201L238.771 97.4115C240.102 97.6621 241.418 97.913 242.716 98.164L242.811 97.6731C244.138 97.9297 245.448 98.1864 246.74 98.4432L246.642 98.9336C247.967 99.1971 249.273 99.4606 250.559 99.724L250.66 99.2341C251.995 99.5077 253.31 99.7812 254.603 100.054L254.5 100.544C255.831 100.825 257.14 101.106 258.424 101.387L258.531 100.898C259.861 101.189 261.166 101.48 262.445 101.769L262.334 102.257C263.662 102.558 264.962 102.858 266.231 103.157L266.346 102.671C267.676 102.984 268.974 103.297 270.238 103.608L270.118 104.094C271.449 104.421 272.742 104.748 273.996 105.072L274.122 104.588C275.458 104.934 276.751 105.278 277.999 105.62L277.867 106.102C279.206 106.469 280.493 106.833 281.727 107.194L281.867 106.714C283.215 107.109 284.5 107.501 285.718 107.888L285.566 108.364C286.914 108.793 288.179 109.216 289.358 109.634L289.525 109.162C290.883 109.643 292.129 110.116 293.258 110.58L293.068 111.043C294.447 111.61 295.645 112.162 296.655 112.696L296.889 112.254Z" stroke="url(#paint20_linear_1208_54246)" stroke-dasharray="4 4" />
+    <g opacity="0.9">
+        <g filter="url(#filter0_d_1208_54246)">
+            <ellipse rx="18.3575" ry="24.1091" transform="matrix(0.977376 0.227267 -0.161319 0.994776 283.831 120.378)" fill="url(#paint21_linear_1208_54246)" />
+        </g>
+        <ellipse rx="16.5001" ry="24.1091" transform="matrix(0.977376 0.227267 -0.161319 0.994776 286.19 119.829)" fill="url(#paint22_linear_1208_54246)" />
+        <path d="M282.405 124.871C283.082 124.782 283.652 125.354 283.678 126.15L283.882 132.329C283.909 133.124 283.381 133.841 282.704 133.93C282.028 134.019 281.458 133.447 281.431 132.651L281.228 126.473C281.201 125.677 281.729 124.96 282.405 124.871L282.405 124.871Z" fill="url(#paint23_linear_1208_54246)" />
+        <path d="M279.311 117.834C279.308 117.89 279.306 117.947 279.307 118.003L279.621 127.517C279.655 128.541 280.478 129.26 281.466 129.13L290.97 127.879C291.958 127.749 292.727 126.82 292.693 125.797L292.379 116.282C292.377 116.226 292.373 116.17 292.367 116.115L279.311 117.834Z" fill="url(#paint24_linear_1208_54246)" />
+        <path d="M288.89 123.851C289.678 123.747 290.339 124.319 290.366 125.129L290.574 131.421C290.6 132.231 289.983 132.972 289.194 133.075C288.405 133.179 287.745 132.607 287.718 131.797L287.51 125.505C287.483 124.696 288.101 123.955 288.89 123.851L288.89 123.851ZM276.663 118.716C277.451 118.612 278.112 119.184 278.139 119.994L278.347 126.286C278.373 127.096 277.756 127.837 276.967 127.94C276.179 128.044 275.518 127.472 275.491 126.662L275.283 120.37C275.256 119.56 275.874 118.819 276.663 118.716ZM294.231 116.403C295.02 116.299 295.681 116.871 295.707 117.681L295.915 123.973C295.942 124.783 295.324 125.524 294.536 125.627C293.747 125.731 293.086 125.159 293.059 124.349L292.852 118.057C292.825 117.247 293.442 116.506 294.231 116.403V116.403ZM278.959 116.932C278.902 113.999 281.311 111.271 284.494 110.534L285.929 110.345C289.134 110.241 291.701 112.314 291.837 115.237L278.959 116.932Z" fill="url(#paint25_linear_1208_54246)" />
+        <path d="M279.085 111.246L280.719 113.512M291.339 109.633L289.867 112.308" stroke="url(#paint26_linear_1208_54246)" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M283.199 114.014C283.215 114.467 282.88 114.881 282.451 114.939C282.022 114.997 281.661 114.676 281.645 114.223L281.645 114.218C281.629 113.765 281.963 113.35 282.392 113.293C282.821 113.235 283.182 113.555 283.199 114.009L283.199 114.014ZM288.998 113.25C289.014 113.703 288.679 114.118 288.25 114.176C287.821 114.233 287.46 113.913 287.444 113.459L287.444 113.455C287.428 113.001 287.762 112.587 288.191 112.529C288.62 112.471 288.981 112.792 288.997 113.246L288.998 113.25Z" fill="white" />
+        <path d="M283.405 124.871C284.082 124.782 284.652 125.354 284.678 126.15L284.882 132.329C284.909 133.124 284.381 133.841 283.704 133.93C283.028 134.019 282.458 133.447 282.431 132.651L282.228 126.473C282.201 125.677 282.729 124.96 283.405 124.871L283.405 124.871Z" fill="#C5C7D8" />
+        <path d="M280.311 117.834C280.308 117.89 280.306 117.947 280.307 118.003L280.621 127.517C280.655 128.541 281.478 129.26 282.466 129.13L291.97 127.879C292.958 127.749 293.727 126.82 293.693 125.797L293.379 116.282C293.377 116.226 293.373 116.17 293.367 116.115L280.311 117.834Z" fill="#C5C7D8" />
+        <path d="M289.89 123.851C290.678 123.747 291.339 124.319 291.366 125.129L291.574 131.421C291.6 132.231 290.983 132.972 290.194 133.075C289.405 133.179 288.745 132.607 288.718 131.797L288.51 125.505C288.483 124.696 289.101 123.955 289.89 123.851L289.89 123.851ZM277.663 118.716C278.451 118.612 279.112 119.184 279.139 119.994L279.347 126.286C279.373 127.096 278.756 127.837 277.967 127.94C277.179 128.044 276.518 127.472 276.491 126.662L276.283 120.37C276.256 119.56 276.874 118.819 277.663 118.716ZM295.231 116.403C296.02 116.299 296.681 116.871 296.707 117.681L296.915 123.973C296.942 124.783 296.324 125.524 295.536 125.627C294.747 125.731 294.086 125.159 294.059 124.349L293.852 118.057C293.825 117.247 294.442 116.506 295.231 116.403V116.403ZM279.959 116.932C279.902 113.999 282.311 111.271 285.494 110.534L286.929 110.345C290.134 110.241 292.701 112.314 292.837 115.237L279.959 116.932Z" fill="#C5C7D8" />
+        <path d="M280.085 111.246L281.719 113.512M292.339 109.633L290.867 112.308" stroke="#C5C7D8" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M284.199 114.014C284.215 114.467 283.88 114.881 283.451 114.939C283.022 114.997 282.661 114.676 282.645 114.223L282.645 114.218C282.629 113.765 282.963 113.35 283.392 113.293C283.821 113.235 284.182 113.555 284.199 114.009L284.199 114.014ZM289.998 113.25C290.014 113.703 289.679 114.118 289.25 114.176C288.821 114.233 288.46 113.913 288.444 113.459L288.444 113.455C288.428 113.001 288.762 112.587 289.191 112.529C289.62 112.471 289.981 112.792 289.997 113.246L289.998 113.25Z" fill="white" />
+    </g>
+    <circle cx="153.498" cy="113.518" r="44.5" fill="url(#paint27_linear_1208_54246)" />
+    <circle cx="155.501" cy="113.675" r="44.5" fill="url(#paint28_linear_1208_54246)" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M156.967 136.927L144.688 126.381L151.474 118.42L170.616 134.948L156.967 136.927Z" fill="#B7B8BE" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M144.536 126.412L156.706 112.35L170.388 110.366L151.455 132.242L144.536 126.412Z" fill="#B7B8BE" fill-opacity="0.85" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M134 117.213L140.91 123.188L170.387 89.1284L156.634 91.1225L134 117.213Z" fill="#B7B8BE" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M157.967 136.927L145.688 126.381L152.474 118.42L171.616 134.948L157.967 136.927Z" fill="#02539A" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M145.536 126.412L157.706 112.35L171.388 110.366L152.455 132.242L145.536 126.412Z" fill="#45D1FD" fill-opacity="0.85" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M135 117.213L141.91 123.188L171.387 89.1284L157.634 91.1225L135 117.213Z" fill="#45D1FD" />
+    <g opacity="0.8">
+        <g filter="url(#filter1_d_1208_54246)">
+            <ellipse rx="19.5" ry="22" transform="matrix(0.989651 0.143493 0 1 27.2568 86.469)" fill="#E1E2EB" />
+        </g>
+        <ellipse rx="19.5" ry="21.5" transform="matrix(0.989651 0.143493 0 1 23.2982 85.3948)" fill="#F7F7FD" />
+        <path d="M31.3387 82.2499C31.1976 82.3273 28.7801 83.1981 28.3424 86.1167C27.8361 89.4924 30.4825 91.2488 30.5627 91.2952C30.5388 91.3654 29.8685 92.8414 28.5888 94.2267C27.4504 95.4434 26.2713 96.6496 24.7967 96.3562C23.3221 96.0629 23.0773 95.0889 21.375 94.7503C19.7161 94.4203 18.987 95.2311 17.6382 94.9628C16.2894 94.6945 15.5427 93.2107 14.6994 91.4031C13.7264 89.2839 13.1494 86.1775 13.5629 83.4205C14.2262 78.9983 17.319 77.1982 20.0167 77.7348C21.4501 78.02 22.4969 79.2449 23.3968 79.4239C24.2534 79.5943 25.7462 78.8136 27.3769 79.138C27.995 79.2609 30.2067 79.7617 31.3387 82.2499ZM26.8836 77.1118C27.6839 76.4066 28.3356 75.3368 28.5103 74.1721C28.5346 74.0106 28.5461 73.8442 28.5377 73.7067C27.4339 73.5316 26.02 73.9953 25.0892 74.7964C24.3606 75.4105 23.6091 76.4605 23.432 77.6411C23.4054 77.8185 23.4069 78.0016 23.4114 78.061C23.4788 78.0885 23.5892 78.1268 23.7019 78.1493C24.6864 78.3451 26.0284 77.8999 26.8836 77.1118Z" fill="url(#paint29_linear_1208_54246)" />
+        <path d="M30.3387 82.2499C30.1976 82.3273 27.7801 83.1981 27.3424 86.1167C26.8361 89.4924 29.4825 91.2488 29.5627 91.2952C29.5388 91.3654 28.8685 92.8414 27.5888 94.2267C26.4504 95.4434 25.2713 96.6496 23.7967 96.3562C22.3221 96.0629 22.0773 95.0889 20.375 94.7503C18.7161 94.4203 17.987 95.2311 16.6382 94.9628C15.2894 94.6945 14.5427 93.2107 13.6994 91.4031C12.7264 89.2839 12.1494 86.1775 12.5629 83.4205C13.2262 78.9983 16.319 77.1982 19.0167 77.7348C20.4501 78.02 21.4969 79.2449 22.3968 79.4239C23.2534 79.5943 24.7462 78.8136 26.3769 79.138C26.995 79.2609 29.2067 79.7617 30.3387 82.2499ZM25.8836 77.1118C26.6839 76.4066 27.3356 75.3368 27.5103 74.1721C27.5346 74.0106 27.5461 73.8442 27.5377 73.7067C26.4339 73.5316 25.02 73.9953 24.0892 74.7964C23.3606 75.4105 22.6091 76.4605 22.432 77.6411C22.4054 77.8185 22.4069 78.0016 22.4114 78.061C22.4788 78.0885 22.5892 78.1268 22.7019 78.1493C23.6864 78.3451 25.0284 77.8999 25.8836 77.1118Z" fill="url(#paint30_linear_1208_54246)" />
+    </g>
+    <path d="M37.9132 245.041C35.1997 241.554 36.2527 237.228 40.2651 235.378L59.5058 226.508C63.5182 224.658 68.9706 225.986 71.6841 229.472L101.683 268.022C104.397 271.509 103.344 275.835 99.3312 277.685L76.458 288.229C74.4518 289.154 71.7256 288.491 70.3688 286.747L37.9132 245.041Z" fill="url(#paint31_linear_1208_54246)" />
+    <rect x="0.380573" y="0.0926329" width="33.7568" height="63.446" rx="3.75" transform="matrix(0.908143 -0.41866 0.614147 0.789191 35.5308 237.616)" fill="url(#paint32_linear_1208_54246)" stroke="url(#paint33_linear_1208_54246)" stroke-width="0.5" />
+    <defs>
+        <filter id="filter0_d_1208_54246" x="261.469" y="96.0303" width="44.7255" height="56.6953" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dy="4" />
+            <feGaussianBlur stdDeviation="2" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1208_54246" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1208_54246" result="shape" />
+        </filter>
+        <filter id="filter1_d_1208_54246" x="0.958618" y="53.2891" width="68.5964" height="74.3594" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dx="8" dy="4" />
+            <feGaussianBlur stdDeviation="7.5" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1208_54246" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1208_54246" result="shape" />
+        </filter>
+        <linearGradient id="paint0_linear_1208_54246" x1="138.161" y1="228.452" x2="34.8507" y2="146.261" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#798196" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint1_linear_1208_54246" x1="17.2332" y1="267.535" x2="615.497" y2="286.207" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="0.34172" stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#FCFCFF" />
+        </linearGradient>
+        <linearGradient id="paint2_linear_1208_54246" x1="291.934" y1="84.1378" x2="-108.241" y2="692.112" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FAFAFF" />
+            <stop offset="1" stop-color="#FAFAFF" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint3_linear_1208_54246" x1="79.8785" y1="143.24" x2="381.993" y2="143.302" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#FCFCFF" />
+        </linearGradient>
+        <linearGradient id="paint4_linear_1208_54246" x1="384.395" y1="-113.461" x2="135.163" y2="137.193" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#FCFCFF" />
+        </linearGradient>
+        <radialGradient id="paint5_radial_1208_54246" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(169.977 194.426) rotate(90.5277) scale(31.644 77.9233)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint6_radial_1208_54246" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(177.027 202.006) rotate(90.5277) scale(32.8306 77.9233)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint7_radial_1208_54246" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(183.656 212.351) rotate(90.5277) scale(32.8306 79.901)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint8_radial_1208_54246" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(190.718 218.746) rotate(90.5277) scale(32.8306 79.1099)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint9_radial_1208_54246" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(132.948 220.587) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint10_radial_1208_54246" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(141.708 214.338) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint11_radial_1208_54246" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(154.423 208.126) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint12_radial_1208_54246" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(166.34 202.699) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint13_radial_1208_54246" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(179.824 198.868) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint14_radial_1208_54246" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(190.167 192.633) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint15_radial_1208_54246" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(202.861 188.794) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint16_radial_1208_54246" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(221.875 185.805) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint17_radial_1208_54246" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(237.777 177.249) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <linearGradient id="paint18_linear_1208_54246" x1="125.388" y1="268.069" x2="338.823" y2="134.107" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="0.441811" stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#EBEBEB" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint19_linear_1208_54246" x1="211.713" y1="33.8223" x2="205.831" y2="44.1928" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E6ECEF" />
+            <stop offset="1" stop-color="#E6ECEF" stop-opacity="0" />
+            <stop offset="1" stop-color="#EAF4FA" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint20_linear_1208_54246" x1="158.42" y1="113.253" x2="161.816" y2="85.2394" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#798196" stop-opacity="0.53" />
+            <stop offset="1" stop-color="#798196" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint21_linear_1208_54246" x1="18.3575" y1="0" x2="18.3575" y2="48.2182" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#D5D7E3" />
+            <stop offset="1" stop-color="#DADBE6" />
+        </linearGradient>
+        <linearGradient id="paint22_linear_1208_54246" x1="-31.4299" y1="-5.38633" x2="39.5002" y2="43.8833" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E6E7F0" />
+            <stop offset="1" stop-color="#FAFAFF" />
+        </linearGradient>
+        <linearGradient id="paint23_linear_1208_54246" x1="282.405" y1="124.871" x2="283.583" y2="133.814" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C5C7D8" />
+            <stop offset="1" stop-color="#E8E8F1" />
+        </linearGradient>
+        <linearGradient id="paint24_linear_1208_54246" x1="285.838" y1="116.975" x2="287.336" y2="128.357" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C5C7D8" />
+            <stop offset="1" stop-color="#E8E8F1" />
+        </linearGradient>
+        <linearGradient id="paint25_linear_1208_54246" x1="285.212" y1="110.44" x2="288.209" y2="133.205" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C5C7D8" />
+            <stop offset="1" stop-color="#E8E8F1" />
+        </linearGradient>
+        <linearGradient id="paint26_linear_1208_54246" x1="274.501" y1="112.095" x2="287.686" y2="103.8" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C5C7D8" />
+            <stop offset="1" stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#C5C7D8" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint27_linear_1208_54246" x1="114" y1="108.096" x2="193.781" y2="170.829" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C6C8D9" />
+            <stop offset="0.940675" stop-color="#ECEEF8" />
+        </linearGradient>
+        <linearGradient id="paint28_linear_1208_54246" x1="257.001" y1="273.675" x2="80.0011" y2="8.67481" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E6E7F0" />
+            <stop offset="1" stop-color="white" />
+        </linearGradient>
+        <linearGradient id="paint29_linear_1208_54246" x1="29.0441" y1="94.6855" x2="9.3926" y2="70.0321" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="1" stop-color="#A3A8BD" />
+        </linearGradient>
+        <linearGradient id="paint30_linear_1208_54246" x1="28.0441" y1="94.6855" x2="8.3926" y2="70.0321" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="1" stop-color="white" />
+        </linearGradient>
+        <linearGradient id="paint31_linear_1208_54246" x1="78.4961" y1="287.394" x2="90.0387" y2="198.585" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="1" stop-color="#F7F7FD" />
+        </linearGradient>
+        <linearGradient id="paint32_linear_1208_54246" x1="-112.765" y1="-150.853" x2="2.78202" y2="46.8081" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#FCFCFF" />
+        </linearGradient>
+        <linearGradient id="paint33_linear_1208_54246" x1="16.9204" y1="3.47454" x2="36.34" y2="75.953" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="1" stop-color="#C4C6D7" stop-opacity="0" />
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte
index ea514878e..2a715cd43 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte
@@ -6,6 +6,12 @@
     import { WizardStep } from '$lib/layout';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { createPlatform } from '../store';
+    import { wizard } from '$lib/stores/wizard';
+    import { app } from '$lib/stores/app';
+    import Light from './light.svg';
+    import Dark from './dark.svg';
+
+    $wizard.media = $app.themeInUse === 'dark' ? Dark : Light;
 
     enum Platform {
         Android = 'flutter-android',
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/web/dark.svg b/src/routes/console/project-[project]/overview/platforms/wizard/web/dark.svg
new file mode 100644
index 000000000..7f56f28f5
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/dark.svg
@@ -0,0 +1,190 @@
+<svg width="307" height="290" viewBox="0 0 307 290" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.6704 157.003L64.2175 201.478L215.821 130.059L65.7018 42.4065L11.6704 157.003Z" fill="url(#paint0_linear_1208_57905)" />
+    <path d="M63.3384 200.552L53.7234 84.0262C53.2124 77.8332 57.1557 72.1445 63.1342 70.4499L226.762 24.07C227.101 23.9737 227.461 23.969 227.803 24.0565L230.954 24.8623L236.442 139.925L298.956 196.341C301.129 198.303 300.528 201.858 297.831 202.996L126.064 275.492C124.404 276.193 122.48 275.697 121.366 274.281L63.3384 200.552Z" fill="url(#paint1_linear_1208_57905)" />
+    <path d="M125.229 269.559L67.3418 198.277L235.847 139.925L301.248 196.778L285.031 203.502L266.44 210.622L198.801 239.893L125.229 269.559Z" fill="url(#paint2_linear_1208_57905)" />
+    <path d="M121.7 253.82L87.2109 210.495L241.524 153.267L279.875 184.645C282.212 186.557 281.668 190.27 278.881 191.433L126.369 255.021C124.719 255.708 122.813 255.218 121.7 253.82Z" fill="#373B4D" />
+    <path d="M67.4787 198.36L58.7996 83.0807C58.4056 77.8475 61.7634 73.0647 66.8194 71.6576L228.753 26.5917C230.011 26.2415 231.262 27.172 231.289 28.478L233.61 142.983L67.4787 198.36Z" fill="url(#paint3_linear_1208_57905)" />
+    <path d="M71.4339 197.569L64.4884 81.6841C64.3773 79.8296 65.5576 78.1427 67.3378 77.6117L226.559 30.1151C227.786 29.7491 229.036 30.6144 229.126 31.8918L236.774 141.005L71.4339 197.569Z" fill="url(#paint4_linear_1208_57905)" />
+    <path d="M91.7659 225.255L248.189 163.405" stroke="url(#paint5_radial_1208_57905)" stroke-opacity="0.2" />
+    <path d="M98.8048 234.022L255.25 169.799" stroke="url(#paint6_radial_1208_57905)" stroke-opacity="0.2" />
+    <path d="M103.456 244.349L263.856 180.163" stroke="url(#paint7_radial_1208_57905)" stroke-opacity="0.2" />
+    <path d="M111.309 250.751L270.127 186.549" stroke="url(#paint8_radial_1208_57905)" stroke-opacity="0.2" />
+    <path d="M115.73 200.159L150.165 240.824" stroke="url(#paint9_radial_1208_57905)" stroke-opacity="0.2" />
+    <path d="M124.49 193.911L158.926 234.576" stroke="url(#paint10_radial_1208_57905)" stroke-opacity="0.2" />
+    <path d="M137.206 187.699L171.641 228.364" stroke="url(#paint11_radial_1208_57905)" stroke-opacity="0.2" />
+    <path d="M149.122 182.27L183.558 222.935" stroke="url(#paint12_radial_1208_57905)" stroke-opacity="0.2" />
+    <path d="M162.607 178.439L197.042 219.104" stroke="url(#paint13_radial_1208_57905)" stroke-opacity="0.2" />
+    <path d="M172.95 172.205L207.385 212.87" stroke="url(#paint14_radial_1208_57905)" stroke-opacity="0.2" />
+    <path d="M185.644 168.366L220.079 209.031" stroke="url(#paint15_radial_1208_57905)" stroke-opacity="0.2" />
+    <path d="M204.658 165.377L221.875 185.709L239.093 206.042" stroke="url(#paint16_radial_1208_57905)" stroke-opacity="0.2" />
+    <path d="M220.559 156.821L237.777 177.153L254.995 197.486" stroke="url(#paint17_radial_1208_57905)" stroke-opacity="0.2" />
+    <path d="M87.3515 214.948L87.3515 210.482L121.977 251.497C123.659 253.489 126.437 254.167 128.848 253.173L279.102 191.24L279.278 194.71L127.47 257.146C125.46 257.972 123.147 257.406 121.746 255.744L87.3515 214.948Z" fill="url(#paint18_linear_1208_57905)" />
+    <path d="M172.321 125.22C172.266 127.429 173.91 128.622 175.994 127.884C178.077 127.147 179.81 124.758 179.865 122.549C179.919 120.34 178.275 119.147 176.192 119.884C174.109 120.622 172.376 123.011 172.321 125.22Z" fill="url(#paint19_linear_1208_57905)" />
+    <path d="M177.561 122.698C177.187 121.29 175.109 122.026 174.657 123.727L171.837 134.345C171.54 135.462 172.238 136.219 173.238 135.865L178.399 134.038C179.399 133.683 180.147 132.414 179.901 131.489L177.561 122.698Z" fill="url(#paint20_linear_1208_57905)" />
+    <path d="M296.889 112.159C298.402 112.96 299.512 113.728 300.188 114.457L299.821 114.797C300.349 115.366 300.502 115.816 300.46 116.163C300.418 116.511 300.162 116.911 299.513 117.338L299.788 117.756C298.957 118.302 297.696 118.783 296.035 119.199L295.914 118.714C294.806 118.992 293.511 119.241 292.035 119.463L292.109 119.957C290.902 120.138 289.579 120.3 288.146 120.442L288.096 119.944C286.852 120.068 285.522 120.177 284.111 120.271L284.144 120.77C282.869 120.855 281.529 120.928 280.125 120.989L280.103 120.49C278.819 120.546 277.482 120.592 276.094 120.628L276.107 121.128C274.814 121.162 273.476 121.187 272.096 121.203L272.09 120.703C270.794 120.719 269.46 120.726 268.09 120.727L268.09 121.227C266.788 121.227 265.454 121.22 264.087 121.207L264.092 120.707C262.788 120.694 261.454 120.676 260.093 120.65L260.083 121.15C258.773 121.126 257.436 121.096 256.075 121.061L256.088 120.561C254.774 120.527 253.436 120.487 252.076 120.442L252.059 120.942C250.739 120.898 249.397 120.85 248.034 120.796L248.054 120.297C246.742 120.245 245.411 120.189 244.061 120.128L244.039 120.627C242.723 120.568 241.39 120.505 240.04 120.437L240.065 119.937C238.744 119.871 237.407 119.8 236.054 119.725L236.026 120.224C234.703 120.151 233.365 120.074 232.012 119.993L232.042 119.494C230.727 119.415 229.398 119.332 228.055 119.246L228.023 119.745C226.7 119.66 225.364 119.571 224.016 119.479L224.05 118.98C222.726 118.889 221.389 118.795 220.041 118.697L220.005 119.196C218.687 119.1 217.358 119.002 216.018 118.899L216.056 118.401C214.731 118.3 213.396 118.196 212.051 118.088L212.011 118.587C210.688 118.481 209.355 118.372 208.013 118.26L208.055 117.762C206.734 117.652 205.404 117.538 204.066 117.422L204.022 117.92C202.694 117.805 201.357 117.686 200.011 117.565L200.056 117.067C198.738 116.948 197.411 116.827 196.077 116.702L196.031 117.2C194.706 117.076 193.373 116.95 192.032 116.82L192.08 116.323C190.757 116.195 189.427 116.065 188.09 115.931L188.04 116.429C186.718 116.297 185.388 116.163 184.053 116.026L184.104 115.528C182.777 115.392 181.444 115.254 180.105 115.112L180.053 115.61C178.733 115.47 177.406 115.328 176.075 115.184L176.129 114.687C174.802 114.543 173.47 114.396 172.133 114.247L172.077 114.744C170.757 114.597 169.431 114.448 168.1 114.296L168.157 113.799C166.832 113.648 165.503 113.494 164.169 113.338L164.11 113.835C162.788 113.68 161.461 113.523 160.129 113.363L160.189 112.867C159.523 112.787 158.857 112.707 158.189 112.626C157.522 112.545 156.856 112.463 156.19 112.382L156.13 112.878C154.799 112.715 153.472 112.55 152.151 112.385L152.213 111.889C150.881 111.721 149.553 111.553 148.231 111.383L148.167 111.879C146.838 111.709 145.515 111.537 144.198 111.365L144.263 110.869C142.928 110.694 141.6 110.518 140.277 110.341L140.211 110.836C138.883 110.658 137.562 110.479 136.246 110.299L136.314 109.804C134.98 109.621 133.653 109.437 132.332 109.252L132.263 109.748C130.933 109.561 129.61 109.374 128.295 109.186L128.365 108.691C127.035 108.501 125.712 108.31 124.397 108.118L124.325 108.612C122.992 108.418 121.668 108.222 120.351 108.026L120.425 107.531C119.1 107.333 117.783 107.135 116.474 106.935L116.399 107.429C115.063 107.226 113.737 107.021 112.419 106.816L112.496 106.321C111.168 106.114 109.85 105.907 108.541 105.698L108.462 106.192C107.133 105.98 105.812 105.767 104.503 105.554L104.583 105.06C103.251 104.843 101.929 104.625 100.619 104.407L100.537 104.9C99.2113 104.679 97.8972 104.458 96.5946 104.236L96.6787 103.743C95.3462 103.515 94.0259 103.288 92.7181 103.059L92.6321 103.552C91.3007 103.319 89.9823 103.086 88.6773 102.853L88.7653 102.361C87.4413 102.124 86.1311 101.886 84.8351 101.649L84.745 102.14C83.4119 101.896 82.094 101.651 80.7916 101.406L80.8841 100.915C79.5524 100.664 78.2371 100.413 76.9386 100.162L76.8437 100.653C75.5164 100.396 74.2067 100.14 72.9151 99.8829L73.0126 99.3925C71.6875 99.129 70.3816 98.8655 69.0953 98.6022L68.995 99.092C67.6591 98.8184 66.3444 98.545 65.0516 98.2718L65.155 97.7826C63.8233 97.5011 62.5149 97.22 61.2306 96.9393L61.1238 97.4278C59.7932 97.137 58.4884 96.8466 57.2101 96.5569L57.3206 96.0693C55.9924 95.7683 54.693 95.468 53.4232 95.1687L53.3085 95.6553C51.9785 95.3417 50.6809 95.0292 49.4168 94.7178L49.5364 94.2323C48.206 93.9046 46.9128 93.5783 45.6582 93.2537L45.533 93.7378C44.1967 93.392 42.9038 93.0481 41.6559 92.7064L41.7879 92.2241C40.4484 91.8573 39.1612 91.4931 37.9279 91.132L37.7874 91.6118C36.4391 91.217 35.1548 90.8256 33.9369 90.4382L34.0884 89.9617C32.7409 89.5332 31.4759 89.1098 30.2966 88.6925L30.1298 89.1639C28.7721 88.6834 27.526 88.2103 26.3967 87.7459L26.5869 87.2835C25.2073 86.7161 24.0093 86.164 22.9998 85.6298L22.7659 86.0717C21.2526 85.2708 20.1431 84.5025 19.4667 83.7735L19.8332 83.4334C19.3052 82.8642 19.1527 82.4149 19.1949 82.0669C19.237 81.719 19.4925 81.3191 20.1413 80.8926L19.8666 80.4748C20.6976 79.9285 21.9586 79.4476 23.6194 79.0314L23.7409 79.5164C24.8488 79.2389 26.144 78.9891 27.6193 78.7678L27.5451 78.2733C28.7527 78.0921 30.0756 77.9305 31.5089 77.7884L31.5582 78.286C32.8031 78.1625 34.1326 78.0537 35.5435 77.9595L35.5102 77.4606C36.7853 77.3755 38.126 77.3023 39.5296 77.241L39.5514 77.7405C40.8352 77.6845 42.1722 77.6385 43.5605 77.6023L43.5475 77.1025C44.8409 77.0689 46.1785 77.0438 47.5588 77.0274L47.5647 77.5273C48.8606 77.5119 50.1942 77.504 51.5644 77.5037L51.5643 77.0037C52.8662 77.0034 54.2008 77.01 55.5672 77.0233L55.5624 77.5233C56.8668 77.536 58.2004 77.5549 59.562 77.5799L59.5712 77.08C60.8817 77.1042 62.2182 77.134 63.5797 77.1696L63.5666 77.6694C64.8808 77.7037 66.2185 77.7433 67.5789 77.7882L67.5954 77.2885C68.916 77.3321 70.258 77.3807 71.6205 77.4343L71.6009 77.9339C72.9128 77.9855 74.2439 78.0417 75.5935 78.1025L75.616 77.603C76.9316 77.6622 78.2647 77.7258 79.6149 77.7938L79.5897 78.2932C80.9106 78.3597 82.2477 78.4303 83.6007 78.5052L83.6283 78.0059C84.9515 78.0791 86.2898 78.1563 87.6427 78.2374L87.6127 78.7365C88.9279 78.8154 90.2569 78.898 91.5992 78.9844L91.6313 78.4854C92.9542 78.5705 94.2901 78.6592 95.6385 78.7516L95.6043 79.2504C96.9288 79.3412 98.2654 79.4354 99.6135 79.5331L99.6497 79.0344C100.968 79.1299 102.297 79.2288 103.636 79.3309L103.598 79.8295C104.923 79.9305 106.258 80.0348 107.604 80.1423L107.644 79.6439C108.966 79.7496 110.299 79.8585 111.641 79.9704L111.6 80.4687C112.92 80.5789 114.25 80.6921 115.589 80.8083L115.632 80.3102C116.961 80.4256 118.298 80.5439 119.644 80.6652L119.599 81.1632C120.917 81.2821 122.243 81.4037 123.577 81.5283L123.624 81.0304C124.949 81.1542 126.282 81.2807 127.622 81.4101L127.574 81.9077C128.897 82.0354 130.228 82.1659 131.565 82.299L131.614 81.8015C132.937 81.9332 134.266 82.0675 135.602 82.2046L135.551 82.702C136.877 82.8381 138.21 82.9768 139.549 83.1181L139.602 82.6209C140.922 82.7603 142.248 82.9022 143.58 83.0466L143.526 83.5437C144.852 83.6876 146.185 83.834 147.522 83.983L147.577 83.486C148.898 83.6331 150.224 83.7827 151.555 83.9346L151.498 84.4314C152.823 84.5827 154.152 84.7364 155.486 84.8925L155.544 84.3959C156.867 84.5507 158.194 84.7078 159.525 84.8674L159.466 85.3638C160.131 85.4436 160.798 85.5239 161.465 85.6048C162.133 85.6857 162.799 85.767 163.464 85.8486L163.525 85.3523C164.856 85.5155 166.182 85.68 167.503 85.8457L167.441 86.3418C168.774 86.5089 170.102 86.6774 171.424 86.847L171.488 86.351C172.816 86.5214 174.139 86.693 175.457 86.8658L175.392 87.3615C176.726 87.5365 178.055 87.7126 179.377 87.8898L179.444 87.3943C180.771 87.5722 182.093 87.7512 183.408 87.9314L183.34 88.4267C184.674 88.6094 186.002 88.7932 187.323 88.978L187.392 88.4829C188.721 88.6689 190.044 88.8561 191.36 89.0442L191.289 89.5392C192.619 89.7294 193.942 89.9206 195.258 90.1127L195.33 89.618C196.662 89.8126 197.987 90.0083 199.303 90.2048L199.23 90.6993C200.555 90.8971 201.872 91.0959 203.18 91.2954L203.256 90.8012C204.591 91.0049 205.918 91.2095 207.236 91.4149L207.159 91.9089C208.486 92.1159 209.805 92.3238 211.113 92.5323L211.192 92.0386C212.522 92.2505 213.842 92.4632 215.152 92.6767L215.072 93.1702C216.404 93.3872 217.725 93.605 219.036 93.8235L219.118 93.3303C220.443 93.5512 221.757 93.7728 223.06 93.9949L222.976 94.4878C224.308 94.7151 225.629 94.9429 226.937 95.1713L227.023 94.6787C228.354 94.9112 229.672 95.1443 230.977 95.3777L230.889 95.8699C232.213 96.1068 233.524 96.3441 234.819 96.5818L234.91 96.09C236.243 96.3344 237.561 96.5793 238.863 96.8244L238.771 97.3158C240.102 97.5664 241.418 97.8173 242.716 98.0683L242.811 97.5774C244.138 97.834 245.448 98.0907 246.74 98.3475L246.642 98.8379C247.967 99.1014 249.273 99.3649 250.559 99.6283L250.66 99.1384C251.995 99.412 253.31 99.6854 254.603 99.9587L254.5 100.448C255.831 100.729 257.14 101.01 258.424 101.291L258.531 100.803C259.861 101.093 261.166 101.384 262.445 101.674L262.334 102.161C263.662 102.462 264.962 102.762 266.231 103.062L266.346 102.575C267.676 102.889 268.974 103.201 270.238 103.513L270.118 103.998C271.449 104.326 272.742 104.652 273.996 104.977L274.122 104.493C275.458 104.838 276.751 105.182 277.999 105.524L277.867 106.006C279.206 106.373 280.493 106.737 281.727 107.098L281.867 106.619C283.215 107.013 284.5 107.405 285.718 107.792L285.566 108.269C286.914 108.697 288.179 109.121 289.358 109.538L289.525 109.067C290.883 109.547 292.129 110.02 293.258 110.485L293.068 110.947C294.447 111.514 295.645 112.066 296.655 112.601L296.889 112.159Z" stroke="url(#paint21_linear_1208_57905)" stroke-dasharray="4 4" />
+    <g opacity="0.9">
+        <g filter="url(#filter0_d_1208_57905)">
+            <ellipse rx="18.3575" ry="24.1091" transform="matrix(0.977376 0.227267 -0.161319 0.994776 283.832 120.283)" fill="url(#paint22_linear_1208_57905)" shape-rendering="crispEdges" />
+        </g>
+        <ellipse rx="16.5001" ry="24.1091" transform="matrix(0.977376 0.227267 -0.161319 0.994776 286.19 119.733)" fill="url(#paint23_linear_1208_57905)" />
+        <path d="M294.826 112.619C294.699 112.775 292.394 114.998 292.736 118.166C293.132 121.829 296.399 122.109 296.496 122.111C296.49 122.194 296.191 124.047 295.225 126.15C294.362 128.004 293.453 129.871 291.821 130.401C290.188 130.932 289.663 130.093 287.779 130.705C285.942 131.302 285.398 132.521 283.905 133.006C282.412 133.492 281.219 132.423 279.834 131.084C278.228 129.506 276.767 126.717 276.444 123.725C275.926 118.926 278.685 115.395 281.671 114.425C283.258 113.909 284.696 114.551 285.692 114.227C286.64 113.919 287.996 112.303 289.802 111.716C290.486 111.494 292.951 110.76 294.826 112.619ZM288.725 109.963C289.374 108.81 289.765 107.374 289.629 106.11C289.61 105.935 289.576 105.762 289.53 105.629C288.32 106.07 286.96 107.325 286.201 108.647C285.603 109.669 285.101 111.141 285.239 112.422C285.26 112.615 285.312 112.797 285.333 112.854C285.411 112.844 285.538 112.821 285.663 112.78C286.753 112.426 288.042 111.23 288.725 109.963Z" fill="#43485F" />
+        <path d="M295.826 112.619C295.699 112.775 293.394 114.998 293.736 118.166C294.132 121.829 297.399 122.109 297.496 122.111C297.49 122.194 297.191 124.047 296.225 126.15C295.362 128.004 294.453 129.871 292.821 130.401C291.188 130.932 290.663 130.093 288.779 130.705C286.942 131.302 286.398 132.521 284.905 133.006C283.412 133.492 282.219 132.423 280.834 131.084C279.228 129.506 277.767 126.717 277.444 123.725C276.926 118.926 279.685 115.395 282.671 114.425C284.258 113.909 285.696 114.551 286.692 114.227C287.64 113.919 288.996 112.303 290.802 111.716C291.486 111.494 293.951 110.76 295.826 112.619ZM289.725 109.963C290.374 108.81 290.765 107.374 290.629 106.11C290.61 105.935 290.576 105.762 290.53 105.629C289.32 106.07 287.96 107.325 287.201 108.647C286.603 109.669 286.101 111.141 286.239 112.422C286.26 112.615 286.312 112.797 286.333 112.854C286.411 112.844 286.538 112.821 286.663 112.78C287.753 112.426 289.042 111.23 289.725 109.963Z" fill="#5A607B" />
+    </g>
+    <g opacity="0.8">
+        <g filter="url(#filter1_d_1208_57905)">
+            <ellipse rx="19.5" ry="22" transform="matrix(0.989651 0.143493 0 1 27.2568 86.3718)" fill="#424254" />
+        </g>
+        <ellipse rx="19.5" ry="21.5" transform="matrix(0.989651 0.143493 0 1 23.2982 85.2981)" fill="#292B3A" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M17.8643 73.3276C17.7656 73.068 17.4771 72.9353 17.2198 73.0312C16.9625 73.127 16.8339 73.4152 16.9326 73.6748L17.817 76.0017C16.8915 76.7615 16.2439 77.7941 16.0355 79.0004L28.4643 81.136C28.639 79.9239 28.3441 78.7291 27.7017 77.6998L29.2565 75.7924C29.43 75.5796 29.3971 75.2637 29.183 75.0868C28.9689 74.91 28.6547 74.9391 28.4813 75.1519L27.0787 76.8725C26.2518 75.95 25.1132 75.2339 23.7843 74.8715L22.3994 74.6336C21.029 74.5321 19.7297 74.8294 18.6621 75.4266L17.8643 73.3276ZM18.7024 91.2382L22.1644 91.8331L21.602 95.3836C21.4812 96.1464 22.0003 96.8707 22.7613 97.0014C23.5224 97.1322 24.2373 96.62 24.3581 95.8572L24.9205 92.3067L24.9881 92.3183C25.9347 92.4809 26.8203 91.8342 26.9732 90.8689L28.3949 81.8928C28.4033 81.8393 28.4098 81.7858 28.4136 81.7329L15.9021 79.583C15.8893 79.6346 15.8769 79.6868 15.8684 79.7404L14.4468 88.7165C14.2939 89.6819 14.9332 90.5905 15.8797 90.7532L15.9463 90.7646L15.384 94.3148C15.2632 95.0776 15.7823 95.8018 16.5433 95.9326C17.3044 96.0634 18.0193 95.5512 18.1401 94.7884L18.7024 91.2382ZM13.5527 80C14.3137 80.1307 14.8327 80.8551 14.7119 81.6178L13.7736 87.5423C13.6528 88.3051 12.9378 88.8174 12.1768 88.6866C11.4157 88.5558 10.8967 87.8315 11.0175 87.0688L11.9558 81.1443C12.0765 80.3816 12.7915 79.8692 13.5527 80ZM30.5077 82.9134C31.2687 83.0441 31.7877 83.7685 31.6669 84.5312L30.7286 90.4557C30.6078 91.2185 29.8928 91.7308 29.1318 91.6C28.3707 91.4692 27.8517 90.7449 27.9725 89.9822L28.9108 84.0578C29.0316 83.295 29.7466 82.7826 30.5077 82.9134Z" fill="#43485F" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2198 73.0312C16.4771 72.9353 16.7656 73.068 16.8643 73.3276L17.6621 75.4266C18.7297 74.8294 20.029 74.5321 21.3994 74.6336L22.7843 74.8715C24.1132 75.2339 25.2518 75.95 26.0787 76.8725L27.4813 75.1519C27.6547 74.9391 27.9689 74.91 28.183 75.0868C28.3971 75.2637 28.43 75.5796 28.2565 75.7924L26.7017 77.6998C27.3441 78.7291 27.639 79.9239 27.4643 81.136L15.0355 79.0004C15.2439 77.7941 15.8915 76.7615 16.817 76.0017L15.9326 73.6748C15.8339 73.4152 15.9625 73.127 16.2198 73.0312ZM21.1644 91.8331L17.7024 91.2382L17.1401 94.7884C17.0193 95.5512 16.3044 96.0634 15.5433 95.9326C14.7823 95.8018 14.2632 95.0776 14.384 94.3148L14.9463 90.7646L14.8797 90.7532C13.9332 90.5905 13.2939 89.6819 13.4468 88.7165L14.8684 79.7404C14.8769 79.6868 14.8893 79.6346 14.9021 79.583L27.4136 81.7329C27.4098 81.7858 27.4033 81.8393 27.3949 81.8928L25.9732 90.8689C25.8203 91.8342 24.9347 92.4809 23.9881 92.3183L23.9205 92.3067L23.3581 95.8572C23.2373 96.62 22.5224 97.1322 21.7613 97.0014C21.0003 96.8707 20.4812 96.1464 20.602 95.3836L21.1644 91.8331ZM13.7119 81.6178C13.8327 80.8551 13.3137 80.1307 12.5527 80C11.7915 79.8692 11.0765 80.3816 10.9558 81.1443L10.0175 87.0688C9.89666 87.8315 10.4157 88.5558 11.1768 88.6866C11.9378 88.8174 12.6528 88.3051 12.7736 87.5423L13.7119 81.6178ZM30.6669 84.5312C30.7877 83.7685 30.2687 83.0441 29.5077 82.9134C28.7466 82.7826 28.0316 83.295 27.9108 84.0578L26.9725 89.9822C26.8517 90.7449 27.3707 91.4692 28.1318 91.6C28.8928 91.7308 29.6078 91.2185 29.7286 90.4557L30.6669 84.5312ZM18.9679 77.8564C19.3619 77.9231 19.7298 77.6644 19.7897 77.2788L19.7903 77.2749C19.8502 76.8891 19.5794 76.5227 19.1856 76.4562C18.7917 76.3896 18.4238 76.6481 18.3638 77.0338L18.3632 77.0377C18.3033 77.4233 18.5741 77.7898 18.9679 77.8564ZM24.2898 78.7709C24.6839 78.8375 25.0518 78.5789 25.1117 78.1933L25.1123 78.1894C25.1722 77.8036 24.9014 77.4372 24.5076 77.3706C24.1136 77.304 23.7457 77.5626 23.6857 77.9483L23.6851 77.9522C23.6253 78.3377 23.896 78.7043 24.2898 78.7709Z" fill="#5A607B" />
+    </g>
+    <circle cx="153.498" cy="113.422" r="44.5" fill="url(#paint24_linear_1208_57905)" />
+    <circle cx="155.5" cy="113.5" r="44.5" fill="url(#paint25_linear_1208_57905)" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M136.625 116.745L144.575 107.212L137.95 108.44L130 117.973L136.956 123.737L143.581 122.509L136.625 116.745ZM149.813 127.672V127.735L149.875 127.723L149.813 127.672ZM149.875 100.856L149.813 100.93V100.867L149.875 100.856ZM163.125 98.4002L163.187 98.3888V98.4512L163.125 98.4002ZM176.375 109.378L168.425 102.791L175.05 101.563L183 108.15L176.043 116.492L169.419 117.72L176.375 109.378ZM163.187 125.194L163.125 125.267L163.187 125.256V125.194ZM158.156 92.6043L149.875 134.44L154.844 133.519L163.125 91.6834L158.156 92.6043Z" fill="#171723" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M137.625 116.745L145.575 107.212L138.95 108.44L131 117.973L137.956 123.737L144.581 122.509L137.625 116.745ZM150.813 127.672V127.735L150.875 127.723L150.813 127.672ZM150.875 100.856L150.813 100.93V100.867L150.875 100.856ZM164.125 98.4002L164.187 98.3888V98.4512L164.125 98.4002ZM177.375 109.378L169.425 102.791L176.05 101.563L184 108.15L177.043 116.492L170.419 117.72L177.375 109.378ZM164.187 125.194L164.125 125.267L164.187 125.256V125.194ZM159.156 92.6043L150.875 134.44L155.844 133.519L164.125 91.6834L159.156 92.6043Z" fill="#868EA3" />
+    <path d="M37.9132 244.945C35.1997 241.458 36.2527 237.132 40.2651 235.282L59.5058 226.412C63.5182 224.562 68.9706 225.889 71.6841 229.376L101.683 267.926C104.397 271.413 103.344 275.739 99.3312 277.588L76.458 288.133C74.4518 289.058 71.7256 288.394 70.3688 286.651L37.9132 244.945Z" fill="url(#paint26_linear_1208_57905)" />
+    <rect x="0.380573" y="0.0926329" width="33.7568" height="63.446" rx="3.75" transform="matrix(0.908143 -0.41866 0.614147 0.789191 35.5308 237.521)" fill="url(#paint27_linear_1208_57905)" stroke="url(#paint28_linear_1208_57905)" stroke-width="0.5" />
+    <defs>
+        <filter id="filter0_d_1208_57905" x="261.469" y="95.9355" width="44.7256" height="56.6943" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dy="4" />
+            <feGaussianBlur stdDeviation="2" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1208_57905" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1208_57905" result="shape" />
+        </filter>
+        <filter id="filter1_d_1208_57905" x="0.958618" y="53.1924" width="68.5964" height="74.3589" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dx="8" dy="4" />
+            <feGaussianBlur stdDeviation="7.5" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1208_57905" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1208_57905" result="shape" />
+        </filter>
+        <linearGradient id="paint0_linear_1208_57905" x1="138.161" y1="228.356" x2="34.8507" y2="146.165" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#2D3041" stop-opacity="0.45" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint1_linear_1208_57905" x1="23.5005" y1="100.5" x2="615.497" y2="286.112" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#333749" />
+            <stop offset="0.34172" stop-color="#1F212B" />
+            <stop offset="0.489488" stop-color="#3C4158" />
+        </linearGradient>
+        <linearGradient id="paint2_linear_1208_57905" x1="291.934" y1="84.0426" x2="-108.241" y2="692.016" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#282A3B" />
+            <stop offset="1" stop-color="#14141F" />
+        </linearGradient>
+        <linearGradient id="paint3_linear_1208_57905" x1="79.8786" y1="143.145" x2="322.391" y2="44.1851" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#1B1B28" />
+            <stop offset="1" stop-color="#4F5769" />
+        </linearGradient>
+        <linearGradient id="paint4_linear_1208_57905" x1="416.5" y1="-96" x2="21.123" y2="235.912" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#373B4D" />
+            <stop offset="0.851966" stop-color="#171723" stop-opacity="0.8" />
+        </linearGradient>
+        <radialGradient id="paint5_radial_1208_57905" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(169.977 194.33) rotate(90.5277) scale(31.644 77.9233)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint6_radial_1208_57905" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(177.027 201.91) rotate(90.5277) scale(32.8306 77.9233)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint7_radial_1208_57905" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(183.656 212.256) rotate(90.5277) scale(32.8306 79.901)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint8_radial_1208_57905" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(190.718 218.65) rotate(90.5277) scale(32.8306 79.1099)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint9_radial_1208_57905" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(132.948 220.492) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint10_radial_1208_57905" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(141.708 214.243) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint11_radial_1208_57905" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(154.423 208.031) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint12_radial_1208_57905" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(166.34 202.602) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint13_radial_1208_57905" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(179.824 198.771) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint14_radial_1208_57905" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(190.167 192.538) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint15_radial_1208_57905" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(202.861 188.699) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint16_radial_1208_57905" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(221.875 185.709) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint17_radial_1208_57905" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(237.777 177.153) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <linearGradient id="paint18_linear_1208_57905" x1="125.388" y1="267.973" x2="338.823" y2="134.011" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#4F5469" />
+            <stop offset="0.738994" stop-color="#4F5469" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint19_linear_1208_57905" x1="176.413" y1="114.407" x2="180.115" y2="135.231" gradientUnits="userSpaceOnUse">
+            <stop offset="0.186067" stop-color="white" stop-opacity="0.07" />
+            <stop offset="0.312763" stop-color="white" stop-opacity="0.858597" />
+            <stop offset="0.603529" stop-color="white" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint20_linear_1208_57905" x1="176.413" y1="114.407" x2="180.115" y2="135.231" gradientUnits="userSpaceOnUse">
+            <stop offset="0.186067" stop-color="white" stop-opacity="0.07" />
+            <stop offset="0.312763" stop-color="white" stop-opacity="0.858597" />
+            <stop offset="0.603529" stop-color="white" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint21_linear_1208_57905" x1="158.42" y1="113.157" x2="161.816" y2="85.1437" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#798196" stop-opacity="0.53" />
+            <stop offset="1" stop-color="#798196" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint22_linear_1208_57905" x1="18.3575" y1="0" x2="18.3575" y2="48.2182" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#424254" />
+            <stop offset="1" stop-color="#3B3B55" stop-opacity="0.33" />
+        </linearGradient>
+        <linearGradient id="paint23_linear_1208_57905" x1="-31.4299" y1="-5.38633" x2="95.5878" y2="14.7331" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#1D1E2B" />
+            <stop offset="1" stop-color="#2B2D3D" />
+        </linearGradient>
+        <linearGradient id="paint24_linear_1208_57905" x1="114" y1="108" x2="193.781" y2="170.733" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#171723" />
+            <stop offset="0.940675" stop-color="#171723" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint25_linear_1208_57905" x1="45.498" y1="47.4214" x2="334.998" y2="252.921" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#45495C" />
+            <stop offset="1" stop-color="#171723" />
+        </linearGradient>
+        <linearGradient id="paint26_linear_1208_57905" x1="72" y1="292.5" x2="103.799" y2="168.326" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#424659" />
+            <stop offset="1" stop-color="#272839" />
+        </linearGradient>
+        <linearGradient id="paint27_linear_1208_57905" x1="-20.5779" y1="-29.0892" x2="48.668" y2="110.752" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#373B4D" />
+            <stop offset="1" stop-color="#171723" stop-opacity="0.8" />
+        </linearGradient>
+        <linearGradient id="paint28_linear_1208_57905" x1="4.81289" y1="-8.01685" x2="34.0683" y2="76.9259" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#686982" />
+            <stop offset="1" stop-color="#686982" stop-opacity="0" />
+        </linearGradient>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/web/light.svg b/src/routes/console/project-[project]/overview/platforms/wizard/web/light.svg
new file mode 100644
index 000000000..413ea7fbd
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/light.svg
@@ -0,0 +1,199 @@
+<svg width="307" height="290" viewBox="0 0 307 290" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.6704 157.099L64.2175 201.574L215.821 130.155L65.7018 42.5026L11.6704 157.099Z" fill="url(#paint0_linear_1208_56953)" />
+    <path d="M63.3384 200.648L53.7233 84.1224C53.2123 77.9294 57.1556 72.2407 63.1341 70.5461L226.762 24.1661C227.101 24.0699 227.461 24.0652 227.803 24.1527L230.954 24.9585L236.442 140.021L298.956 196.438C301.129 198.399 300.528 201.954 297.831 203.092L126.064 275.589C124.404 276.289 122.48 275.793 121.366 274.377L63.3384 200.648Z" fill="url(#paint1_linear_1208_56953)" />
+    <path d="M125.229 269.655L67.3417 198.373L235.847 140.021L301.248 196.874L285.031 203.599L266.44 210.718L198.801 239.989L125.229 269.655Z" fill="url(#paint2_linear_1208_56953)" />
+    <path d="M121.7 253.916L87.2108 210.591L241.524 153.364L279.875 184.741C282.212 186.653 281.668 190.367 278.881 191.529L126.369 255.117C124.719 255.805 122.813 255.314 121.7 253.916Z" fill="white" />
+    <path d="M67.4786 198.456L58.7996 83.1769C58.4056 77.9436 61.7634 73.1609 66.8193 71.7538L228.753 26.6879C230.011 26.3377 231.262 27.2682 231.288 28.5742L233.61 143.079L67.4786 198.456Z" fill="url(#paint3_linear_1208_56953)" />
+    <path d="M71.4338 197.665L64.4883 81.7803C64.3771 79.9258 65.5574 78.2389 67.3377 77.7079L226.559 30.2113C227.786 29.8453 229.036 30.7106 229.125 31.988L236.774 141.101L71.4338 197.665Z" fill="url(#paint4_linear_1208_56953)" />
+    <path d="M91.7658 225.351L248.189 163.501" stroke="url(#paint5_radial_1208_56953)" />
+    <path d="M98.8048 234.118L255.249 169.895" stroke="url(#paint6_radial_1208_56953)" />
+    <path d="M103.456 244.446L263.856 180.259" stroke="url(#paint7_radial_1208_56953)" />
+    <path d="M111.309 250.847L270.127 186.646" stroke="url(#paint8_radial_1208_56953)" />
+    <path d="M115.73 200.255L150.165 240.92" stroke="url(#paint9_radial_1208_56953)" />
+    <path d="M124.49 194.007L158.926 234.672" stroke="url(#paint10_radial_1208_56953)" />
+    <path d="M137.205 187.795L171.641 228.46" stroke="url(#paint11_radial_1208_56953)" />
+    <path d="M149.122 182.366L183.558 223.031" stroke="url(#paint12_radial_1208_56953)" />
+    <path d="M162.607 178.535L197.042 219.2" stroke="url(#paint13_radial_1208_56953)" />
+    <path d="M172.95 172.301L207.385 212.966" stroke="url(#paint14_radial_1208_56953)" />
+    <path d="M185.644 168.462L220.079 209.127" stroke="url(#paint15_radial_1208_56953)" />
+    <path d="M204.658 165.473L221.875 185.806L239.093 206.138" stroke="url(#paint16_radial_1208_56953)" />
+    <path d="M220.559 156.917L237.777 177.249L254.995 197.582" stroke="url(#paint17_radial_1208_56953)" />
+    <path d="M87.3515 215.044L87.3514 210.579L121.977 251.593C123.659 253.586 126.437 254.263 128.848 253.269L279.102 191.336L279.278 194.807L127.47 257.242C125.46 258.068 123.146 257.502 121.746 255.84L87.3515 215.044Z" fill="url(#paint18_linear_1208_56953)" />
+    <path d="M205.567 37.6282C204.639 38.6469 204.719 40.2262 205.744 41.1462L207.631 42.8389C208.671 43.7717 210.281 43.6364 211.151 42.5433C211.925 41.5698 211.838 40.1685 210.949 39.2985L209.138 37.5254C208.133 36.5419 206.513 36.5886 205.567 37.6282Z" fill="url(#paint19_linear_1208_56953)" fill-opacity="0.4" />
+    <path d="M296.889 112.255C298.402 113.056 299.512 113.824 300.188 114.553L299.821 114.893C300.349 115.462 300.502 115.912 300.46 116.26C300.418 116.608 300.162 117.008 299.513 117.434L299.788 117.852C298.957 118.398 297.696 118.879 296.035 119.295L295.914 118.81C294.806 119.088 293.511 119.338 292.035 119.559L292.109 120.053C290.902 120.234 289.579 120.396 288.146 120.538L288.096 120.041C286.852 120.164 285.522 120.273 284.111 120.367L284.144 120.866C282.869 120.951 281.529 121.024 280.125 121.086L280.103 120.586C278.819 120.642 277.482 120.688 276.094 120.724L276.107 121.224C274.814 121.258 273.476 121.283 272.096 121.299L272.09 120.799C270.794 120.815 269.46 120.823 268.09 120.823L268.09 121.323C266.788 121.323 265.454 121.317 264.087 121.303L264.092 120.803C262.788 120.791 261.454 120.772 260.093 120.747L260.083 121.247C258.773 121.222 257.436 121.193 256.075 121.157L256.088 120.657C254.774 120.623 253.436 120.583 252.076 120.538L252.059 121.038C250.739 120.994 249.397 120.946 248.034 120.892L248.054 120.393C246.742 120.341 245.411 120.285 244.061 120.224L244.039 120.724C242.723 120.664 241.39 120.601 240.04 120.533L240.065 120.033C238.744 119.967 237.407 119.896 236.054 119.821L236.026 120.321C234.703 120.247 233.365 120.17 232.012 120.089L232.042 119.59C230.727 119.511 229.398 119.429 228.055 119.342L228.023 119.841C226.7 119.756 225.364 119.667 224.016 119.575L224.05 119.076C222.726 118.985 221.389 118.891 220.041 118.794L220.005 119.292C218.687 119.197 217.358 119.098 216.018 118.996L216.056 118.497C214.731 118.396 213.396 118.292 212.051 118.184L212.011 118.683C210.688 118.577 209.355 118.468 208.013 118.356L208.055 117.858C206.734 117.748 205.404 117.635 204.066 117.518L204.022 118.016C202.694 117.901 201.357 117.783 200.011 117.661L200.056 117.163C198.738 117.045 197.411 116.923 196.077 116.798L196.031 117.296C194.706 117.172 193.373 117.046 192.032 116.917L192.08 116.419C190.757 116.291 189.427 116.161 188.09 116.028L188.04 116.525C186.718 116.393 185.388 116.259 184.053 116.122L184.104 115.625C182.777 115.489 181.444 115.35 180.105 115.208L180.053 115.706C178.733 115.566 177.406 115.424 176.075 115.28L176.129 114.783C174.802 114.639 173.47 114.493 172.133 114.344L172.077 114.841C170.757 114.693 169.431 114.544 168.1 114.392L168.157 113.895C166.832 113.744 165.503 113.59 164.169 113.434L164.11 113.931C162.788 113.776 161.461 113.619 160.129 113.459L160.189 112.963C159.523 112.883 158.857 112.803 158.189 112.722C157.522 112.641 156.856 112.56 156.19 112.478L156.13 112.974C154.799 112.811 153.472 112.647 152.151 112.481L152.213 111.985C150.881 111.818 149.553 111.649 148.231 111.48L148.167 111.976C146.838 111.805 145.515 111.634 144.198 111.461L144.263 110.965C142.928 110.79 141.6 110.614 140.277 110.437L140.211 110.932C138.883 110.754 137.562 110.575 136.246 110.395L136.314 109.9C134.98 109.717 133.653 109.533 132.332 109.349L132.263 109.844C130.933 109.658 129.61 109.471 128.295 109.282L128.365 108.787C127.035 108.597 125.712 108.406 124.397 108.214L124.325 108.709C122.992 108.514 121.668 108.318 120.351 108.122L120.425 107.627C119.1 107.429 117.783 107.231 116.474 107.031L116.399 107.525C115.063 107.322 113.737 107.117 112.419 106.912L112.496 106.418C111.168 106.211 109.85 106.003 108.541 105.794L108.462 106.288C107.133 106.076 105.812 105.863 104.503 105.65L104.583 105.156C103.251 104.939 101.929 104.722 100.619 104.503L100.537 104.996C99.2113 104.775 97.8972 104.554 96.5946 104.332L96.6787 103.839C95.3462 103.612 94.0259 103.384 92.7181 103.155L92.6321 103.648C91.3007 103.415 89.9823 103.182 88.6773 102.949L88.7653 102.457C87.4413 102.22 86.1311 101.983 84.8351 101.745L84.745 102.237C83.4119 101.992 82.094 101.747 80.7916 101.502L80.8841 101.011C79.5524 100.76 78.2371 100.509 76.9386 100.258L76.8437 100.749C75.5164 100.493 74.2067 100.236 72.9151 99.9791L73.0126 99.4887C71.6875 99.2252 70.3816 98.9617 69.0953 98.6983L68.995 99.1882C67.6591 98.9146 66.3444 98.6412 65.0516 98.368L65.155 97.8788C63.8233 97.5973 62.5149 97.3162 61.2306 97.0355L61.1238 97.524C59.7932 97.2332 58.4884 96.9428 57.2101 96.6531L57.3206 96.1655C55.9924 95.8645 54.693 95.5642 53.4232 95.2648L53.3085 95.7515C51.9785 95.4379 50.6809 95.1254 49.4168 94.814L49.5364 94.3285C48.206 94.0008 46.9128 93.6745 45.6582 93.3499L45.533 93.834C44.1967 93.4882 42.9038 93.1443 41.6559 92.8026L41.7879 92.3203C40.4484 91.9535 39.1612 91.5893 37.9279 91.2282L37.7874 91.708C36.4391 91.3132 35.1548 90.9218 33.9369 90.5344L34.0884 90.0579C32.7409 89.6294 31.4759 89.206 30.2966 88.7887L30.1298 89.26C28.7721 88.7795 27.526 88.3065 26.3967 87.8421L26.5869 87.3797C25.2073 86.8123 24.0093 86.2602 22.9998 85.726L22.7659 86.1679C21.2526 85.367 20.1431 84.5987 19.4667 83.8697L19.8332 83.5296C19.3052 82.9604 19.1527 82.511 19.1949 82.1631C19.237 81.8152 19.4925 81.4153 20.1413 80.9888L19.8666 80.571C20.6976 80.0247 21.9586 79.5438 23.6194 79.1276L23.7409 79.6126C24.8488 79.335 26.144 79.0853 27.6193 78.864L27.5451 78.3695C28.7527 78.1883 30.0756 78.0267 31.5089 77.8846L31.5582 78.3821C32.8031 78.2587 34.1326 78.1499 35.5435 78.0557L35.5102 77.5568C36.7853 77.4716 38.126 77.3985 39.5296 77.3372L39.5514 77.8367C40.8352 77.7807 42.1722 77.7346 43.5605 77.6985L43.5475 77.1987C44.8409 77.165 46.1785 77.14 47.5588 77.1236L47.5647 77.6235C48.8606 77.6081 50.1942 77.6002 51.5644 77.5999L51.5643 77.0999C52.8662 77.0996 54.2008 77.1062 55.5672 77.1195L55.5624 77.6194C56.8668 77.6322 58.2004 77.6511 59.562 77.6761L59.5712 77.1762C60.8817 77.2004 62.2182 77.2302 63.5797 77.2658L63.5666 77.7656C64.8808 77.7999 66.2185 77.8395 67.5789 77.8844L67.5954 77.3847C68.916 77.4283 70.258 77.4769 71.6205 77.5305L71.6009 78.0301C72.9128 78.0817 74.2439 78.1379 75.5935 78.1986L75.616 77.6992C76.9316 77.7584 78.2647 77.822 79.6149 77.89L79.5897 78.3894C80.9106 78.4559 82.2477 78.5265 83.6007 78.6014L83.6283 78.1021C84.9515 78.1753 86.2898 78.2525 87.6427 78.3336L87.6127 78.8327C88.9279 78.9116 90.2569 78.9942 91.5992 79.0806L91.6313 78.5816C92.9542 78.6667 94.2901 78.7554 95.6385 78.8478L95.6043 79.3466C96.9288 79.4374 98.2654 79.5316 99.6135 79.6293L99.6497 79.1306C100.968 79.2261 102.297 79.325 103.636 79.4271L103.598 79.9257C104.923 80.0267 106.258 80.131 107.604 80.2385L107.644 79.7401C108.966 79.8458 110.299 79.9546 111.641 80.0666L111.6 80.5649C112.92 80.6751 114.25 80.7883 115.589 80.9045L115.632 80.4064C116.961 80.5218 118.298 80.6401 119.644 80.7614L119.599 81.2594C120.917 81.3782 122.243 81.4999 123.577 81.6245L123.624 81.1266C124.949 81.2504 126.282 81.3769 127.622 81.5063L127.574 82.0039C128.897 82.1316 130.228 82.2621 131.565 82.3952L131.614 81.8977C132.937 82.0294 134.266 82.1637 135.602 82.3008L135.551 82.7981C136.877 82.9343 138.21 83.073 139.549 83.2143L139.602 82.7171C140.922 82.8565 142.248 82.9984 143.58 83.1428L143.526 83.6399C144.852 83.7838 146.185 83.9302 147.522 84.0792L147.577 83.5822C148.898 83.7293 150.224 83.8789 151.555 84.0308L151.498 84.5276C152.823 84.6789 154.152 84.8326 155.486 84.9887L155.544 84.4921C156.867 84.6469 158.194 84.804 159.525 84.9636L159.466 85.46C160.131 85.5398 160.798 85.6201 161.465 85.701C162.133 85.7819 162.799 85.8632 163.464 85.9447L163.525 85.4485C164.856 85.6117 166.182 85.7761 167.503 85.9419L167.441 86.438C168.774 86.6051 170.102 86.7735 171.424 86.9432L171.488 86.4472C172.816 86.6176 174.139 86.7892 175.457 86.962L175.392 87.4577C176.726 87.6327 178.055 87.8088 179.377 87.986L179.444 87.4904C180.771 87.6684 182.093 87.8474 183.408 88.0275L183.34 88.5229C184.674 88.7056 186.002 88.8894 187.323 89.0742L187.392 88.579C188.721 88.7651 190.044 88.9523 191.36 89.1404L191.289 89.6354C192.619 89.8256 193.942 90.0168 195.258 90.2089L195.33 89.7142C196.662 89.9088 197.987 90.1045 199.303 90.301L199.23 90.7955C200.555 90.9933 201.872 91.192 203.18 91.3916L203.256 90.8974C204.591 91.1011 205.918 91.3057 207.236 91.5111L207.159 92.0051C208.486 92.2121 209.805 92.4199 211.113 92.6285L211.192 92.1348C212.522 92.3467 213.842 92.5594 215.152 92.7729L215.072 93.2664C216.404 93.4834 217.725 93.7012 219.036 93.9197L219.118 93.4265C220.443 93.6474 221.757 93.869 223.06 94.0911L222.976 94.584C224.308 94.8112 225.629 95.0391 226.937 95.2675L227.023 94.7749C228.354 95.0074 229.672 95.2404 230.977 95.4739L230.889 95.9661C232.213 96.203 233.524 96.4403 234.819 96.678L234.91 96.1862C236.243 96.4306 237.561 96.6755 238.863 96.9206L238.771 97.412C240.102 97.6626 241.418 97.9134 242.716 98.1645L242.811 97.6736C244.138 97.9302 245.448 98.1869 246.74 98.4437L246.642 98.9341C247.967 99.1976 249.273 99.4611 250.559 99.7245L250.66 99.2346C251.995 99.5082 253.31 99.7816 254.603 100.055L254.5 100.544C255.831 100.825 257.14 101.107 258.424 101.387L258.531 100.899C259.861 101.19 261.166 101.48 262.445 101.77L262.334 102.257C263.662 102.558 264.962 102.859 266.231 103.158L266.346 102.671C267.676 102.985 268.974 103.297 270.238 103.609L270.118 104.094C271.449 104.422 272.742 104.748 273.996 105.073L274.122 104.589C275.458 104.935 276.751 105.278 277.999 105.62L277.867 106.102C279.206 106.469 280.493 106.833 281.727 107.195L281.867 106.715C283.215 107.11 284.5 107.501 285.718 107.888L285.566 108.365C286.914 108.793 288.179 109.217 289.358 109.634L289.525 109.163C290.883 109.643 292.129 110.116 293.258 110.581L293.068 111.043C294.447 111.611 295.645 112.163 296.655 112.697L296.889 112.255Z" stroke="url(#paint20_linear_1208_56953)" stroke-dasharray="4 4" />
+    <g opacity="0.9">
+        <g filter="url(#filter0_d_1208_56953)">
+            <ellipse rx="18.3575" ry="24.1091" transform="matrix(0.977376 0.227267 -0.161319 0.994776 283.831 120.379)" fill="url(#paint21_linear_1208_56953)" />
+        </g>
+        <ellipse rx="16.5001" ry="24.1091" transform="matrix(0.977376 0.227267 -0.161319 0.994776 286.19 119.829)" fill="url(#paint22_linear_1208_56953)" />
+        <path d="M294.826 112.715C294.699 112.871 292.394 115.094 292.736 118.262C293.132 121.925 296.399 122.205 296.496 122.207C296.49 122.29 296.191 124.143 295.225 126.246C294.362 128.1 293.453 129.967 291.821 130.498C290.188 131.028 289.663 130.189 287.779 130.801C285.942 131.398 285.398 132.618 283.905 133.103C282.412 133.588 281.219 132.519 279.834 131.18C278.228 129.602 276.767 126.813 276.444 123.821C275.926 119.022 278.685 115.491 281.671 114.521C283.258 114.005 284.696 114.647 285.692 114.323C286.64 114.015 287.996 112.399 289.802 111.813C290.486 111.59 292.951 110.856 294.826 112.715ZM288.725 110.059C289.374 108.906 289.765 107.47 289.629 106.206C289.61 106.031 289.576 105.858 289.53 105.725C288.32 106.166 286.96 107.421 286.201 108.743C285.603 109.766 285.101 111.237 285.239 112.518C285.26 112.711 285.312 112.893 285.333 112.95C285.411 112.94 285.538 112.917 285.663 112.876C286.753 112.522 288.042 111.326 288.725 110.059Z" fill="url(#paint23_linear_1208_56953)" />
+        <path d="M295.826 112.715C295.699 112.871 293.394 115.094 293.736 118.262C294.132 121.925 297.399 122.205 297.496 122.207C297.49 122.29 297.191 124.143 296.225 126.246C295.362 128.1 294.453 129.967 292.821 130.498C291.188 131.028 290.663 130.189 288.779 130.801C286.942 131.398 286.398 132.618 284.905 133.103C283.412 133.588 282.219 132.519 280.834 131.18C279.228 129.602 277.767 126.813 277.444 123.821C276.926 119.022 279.685 115.491 282.671 114.521C284.258 114.005 285.696 114.647 286.692 114.323C287.64 114.015 288.996 112.399 290.802 111.813C291.486 111.59 293.951 110.856 295.826 112.715ZM289.725 110.059C290.374 108.906 290.765 107.47 290.629 106.206C290.61 106.031 290.576 105.858 290.53 105.725C289.32 106.166 287.96 107.421 287.201 108.743C286.603 109.766 286.101 111.237 286.239 112.518C286.26 112.711 286.312 112.893 286.333 112.95C286.411 112.94 286.538 112.917 286.663 112.876C287.753 112.522 289.042 111.326 289.725 110.059Z" fill="url(#paint24_linear_1208_56953)" />
+    </g>
+    <circle cx="153.498" cy="113.518" r="44.5" fill="url(#paint25_linear_1208_56953)" />
+    <circle cx="155.501" cy="113.675" r="44.5" fill="url(#paint26_linear_1208_56953)" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M136.625 116.842L144.575 107.308L137.95 108.536L130 118.07L136.956 123.833L143.581 122.605L136.625 116.842ZM149.813 127.769V127.831L149.875 127.82L149.813 127.769ZM149.875 100.953L149.813 101.027V100.964L149.875 100.953ZM163.125 98.4969L163.187 98.4855V98.5479L163.125 98.4969ZM176.375 109.475L168.425 102.888L175.05 101.66L183 108.247L176.043 116.589L169.419 117.817L176.375 109.475ZM163.187 125.29L163.125 125.364L163.187 125.353V125.29ZM158.156 92.701L149.875 134.537L154.844 133.616L163.125 91.7801L158.156 92.701Z" fill="#B7B8BE" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M137.625 116.841L145.575 107.308L138.95 108.536L131 118.069L137.956 123.833L144.581 122.605L137.625 116.841ZM150.813 127.768V127.831L150.875 127.819L150.813 127.768ZM150.875 100.952L150.813 101.026V100.964L150.875 100.952ZM164.125 98.4964L164.187 98.485V98.5474L164.125 98.4964ZM177.375 109.474L169.425 102.888L176.05 101.66L184 108.246L177.043 116.589L170.419 117.816L177.375 109.474ZM164.187 125.29L164.125 125.364L164.187 125.352V125.29ZM159.156 92.7005L150.875 134.536L155.844 133.615L164.125 91.7796L159.156 92.7005Z" fill="#868EA3" />
+    <g opacity="0.8">
+        <g filter="url(#filter1_d_1208_56953)">
+            <ellipse rx="19.5" ry="22" transform="matrix(0.989651 0.143493 0 1 27.2568 86.47)" fill="#E1E2EB" />
+        </g>
+        <ellipse rx="19.5" ry="21.5" transform="matrix(0.989651 0.143493 0 1 23.2982 85.3963)" fill="#F7F7FD" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M17.8643 73.4238C17.7656 73.1642 17.4771 73.0315 17.2198 73.1274C16.9625 73.2232 16.8339 73.5114 16.9326 73.771L17.817 76.0979C16.8915 76.8577 16.2439 77.8903 16.0355 79.0966L28.4643 81.2322C28.639 80.0201 28.3441 78.8253 27.7017 77.796L29.2565 75.8886C29.43 75.6758 29.3971 75.3599 29.183 75.183C28.9689 75.0062 28.6547 75.0353 28.4813 75.2481L27.0787 76.9687C26.2518 76.0461 25.1132 75.3301 23.7843 74.9677L22.3994 74.7297C21.029 74.6283 19.7297 74.9256 18.6621 75.5227L17.8643 73.4238ZM18.7024 91.3344L22.1644 91.9293L21.602 95.4798C21.4812 96.2426 22.0003 96.9668 22.7613 97.0976C23.5224 97.2284 24.2373 96.7162 24.3581 95.9534L24.9205 92.4029L24.9881 92.4145C25.9347 92.5771 26.8203 91.9304 26.9732 90.9651L28.3949 81.989C28.4033 81.9355 28.4098 81.882 28.4136 81.8291L15.9021 79.6792C15.8893 79.7308 15.8769 79.783 15.8684 79.8366L14.4468 88.8127C14.2939 89.778 14.9332 90.6867 15.8797 90.8494L15.9463 90.8608L15.384 94.411C15.2632 95.1738 15.7823 95.898 16.5433 96.0288C17.3044 96.1596 18.0193 95.6474 18.1401 94.8846L18.7024 91.3344ZM13.5527 80.0962C14.3137 80.2269 14.8327 80.9513 14.7119 81.714L13.7736 87.6385C13.6528 88.4013 12.9378 88.9136 12.1768 88.7828C11.4157 88.652 10.8967 87.9277 11.0175 87.165L11.9558 81.2405C12.0765 80.4778 12.7915 79.9654 13.5527 80.0962ZM30.5077 83.0096C31.2687 83.1403 31.7877 83.8647 31.6669 84.6274L30.7286 90.5519C30.6078 91.3147 29.8928 91.827 29.1318 91.6962C28.3707 91.5654 27.8517 90.8411 27.9725 90.0784L28.9108 84.1539C29.0316 83.3912 29.7466 82.8788 30.5077 83.0096Z" fill="url(#paint27_linear_1208_56953)" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2198 73.1274C16.4771 73.0315 16.7656 73.1642 16.8643 73.4238L17.6621 75.5227C18.7297 74.9256 20.029 74.6283 21.3994 74.7297L22.7843 74.9677C24.1132 75.3301 25.2518 76.0461 26.0787 76.9687L27.4813 75.2481C27.6547 75.0353 27.9689 75.0062 28.183 75.183C28.3971 75.3599 28.43 75.6758 28.2565 75.8886L26.7017 77.796C27.3441 78.8253 27.639 80.0201 27.4643 81.2322L15.0355 79.0966C15.2439 77.8903 15.8915 76.8577 16.817 76.0979L15.9326 73.771C15.8339 73.5114 15.9625 73.2232 16.2198 73.1274ZM21.1644 91.9293L17.7024 91.3344L17.1401 94.8846C17.0193 95.6474 16.3044 96.1596 15.5433 96.0288C14.7823 95.898 14.2632 95.1738 14.384 94.411L14.9463 90.8608L14.8797 90.8494C13.9332 90.6867 13.2939 89.778 13.4468 88.8127L14.8684 79.8366C14.8769 79.783 14.8893 79.7308 14.9021 79.6792L27.4136 81.8291C27.4098 81.882 27.4033 81.9355 27.3949 81.989L25.9732 90.9651C25.8203 91.9304 24.9347 92.5771 23.9881 92.4145L23.9205 92.4029L23.3581 95.9534C23.2373 96.7162 22.5224 97.2284 21.7613 97.0976C21.0003 96.9668 20.4812 96.2426 20.602 95.4798L21.1644 91.9293ZM13.7119 81.714C13.8327 80.9513 13.3137 80.2269 12.5527 80.0962C11.7915 79.9654 11.0765 80.4778 10.9558 81.2405L10.0175 87.165C9.89666 87.9277 10.4157 88.652 11.1768 88.7828C11.9378 88.9136 12.6528 88.4013 12.7736 87.6385L13.7119 81.714ZM30.6669 84.6274C30.7877 83.8647 30.2687 83.1403 29.5077 83.0096C28.7466 82.8788 28.0316 83.3912 27.9108 84.1539L26.9725 90.0784C26.8517 90.8411 27.3707 91.5654 28.1318 91.6962C28.8928 91.827 29.6078 91.3147 29.7286 90.5519L30.6669 84.6274ZM18.9679 77.9526C19.3619 78.0192 19.7298 77.7606 19.7897 77.375L19.7903 77.3711C19.8502 76.9853 19.5794 76.6189 19.1856 76.5523C18.7917 76.4858 18.4238 76.7443 18.3638 77.13L18.3632 77.1339C18.3033 77.5195 18.5741 77.886 18.9679 77.9526ZM24.2898 78.8671C24.6839 78.9337 25.0518 78.6751 25.1117 78.2895L25.1123 78.2856C25.1722 77.8998 24.9014 77.5334 24.5076 77.4668C24.1136 77.4002 23.7457 77.6588 23.6857 78.0445L23.6851 78.0483C23.6253 78.4339 23.896 78.8004 24.2898 78.8671Z" fill="url(#paint28_linear_1208_56953)" />
+    </g>
+    <path d="M37.9132 245.041C35.1997 241.554 36.2527 237.228 40.2651 235.378L59.5058 226.508C63.5182 224.658 68.9706 225.986 71.6841 229.472L101.683 268.022C104.397 271.509 103.344 275.835 99.3312 277.685L76.458 288.229C74.4518 289.154 71.7256 288.491 70.3688 286.747L37.9132 245.041Z" fill="url(#paint29_linear_1208_56953)" />
+    <rect x="0.380573" y="0.0926329" width="33.7568" height="63.446" rx="3.75" transform="matrix(0.908143 -0.41866 0.614147 0.789191 35.5308 237.617)" fill="url(#paint30_linear_1208_56953)" stroke="url(#paint31_linear_1208_56953)" stroke-width="0.5" />
+    <defs>
+        <filter id="filter0_d_1208_56953" x="261.469" y="96.0317" width="44.7255" height="56.6943" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dy="4" />
+            <feGaussianBlur stdDeviation="2" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1208_56953" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1208_56953" result="shape" />
+        </filter>
+        <filter id="filter1_d_1208_56953" x="0.958618" y="53.2905" width="68.5964" height="74.3589" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dx="8" dy="4" />
+            <feGaussianBlur stdDeviation="7.5" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1208_56953" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1208_56953" result="shape" />
+        </filter>
+        <linearGradient id="paint0_linear_1208_56953" x1="138.161" y1="228.453" x2="34.8507" y2="146.262" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#798196" />
+            <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint1_linear_1208_56953" x1="17.2333" y1="267.536" x2="615.497" y2="286.208" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="0.34172" stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#FCFCFF" />
+        </linearGradient>
+        <linearGradient id="paint2_linear_1208_56953" x1="291.934" y1="84.1387" x2="-108.241" y2="692.112" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FAFAFF" />
+            <stop offset="1" stop-color="#FAFAFF" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint3_linear_1208_56953" x1="79.8786" y1="143.241" x2="381.993" y2="143.303" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#FCFCFF" />
+        </linearGradient>
+        <linearGradient id="paint4_linear_1208_56953" x1="384.395" y1="-113.461" x2="135.163" y2="137.193" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#FCFCFF" />
+        </linearGradient>
+        <radialGradient id="paint5_radial_1208_56953" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(169.977 194.426) rotate(90.5277) scale(31.644 77.9233)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint6_radial_1208_56953" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(177.027 202.006) rotate(90.5277) scale(32.8306 77.9233)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint7_radial_1208_56953" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(183.656 212.352) rotate(90.5277) scale(32.8306 79.901)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint8_radial_1208_56953" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(190.718 218.746) rotate(90.5277) scale(32.8306 79.1099)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint9_radial_1208_56953" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(132.948 220.588) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint10_radial_1208_56953" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(141.708 214.339) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint11_radial_1208_56953" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(154.423 208.127) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint12_radial_1208_56953" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(166.34 202.699) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint13_radial_1208_56953" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(179.824 198.868) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint14_radial_1208_56953" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(190.167 192.634) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint15_radial_1208_56953" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(202.861 188.795) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint16_radial_1208_56953" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(221.875 185.806) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <radialGradient id="paint17_radial_1208_56953" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(237.777 177.249) rotate(90.5277) scale(20.173 17.4042)">
+            <stop stop-color="#E8E9F0" />
+            <stop offset="1" stop-color="#F7F7F7" stop-opacity="0" />
+        </radialGradient>
+        <linearGradient id="paint18_linear_1208_56953" x1="125.388" y1="268.069" x2="338.823" y2="134.107" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="0.441811" stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#EBEBEB" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint19_linear_1208_56953" x1="211.713" y1="33.8228" x2="205.831" y2="44.1933" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E6ECEF" />
+            <stop offset="1" stop-color="#E6ECEF" stop-opacity="0" />
+            <stop offset="1" stop-color="#EAF4FA" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint20_linear_1208_56953" x1="158.42" y1="113.253" x2="161.816" y2="85.2399" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#798196" stop-opacity="0.53" />
+            <stop offset="1" stop-color="#798196" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint21_linear_1208_56953" x1="18.3575" y1="0" x2="18.3575" y2="48.2182" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#D5D7E3" />
+            <stop offset="1" stop-color="#DADBE6" />
+        </linearGradient>
+        <linearGradient id="paint22_linear_1208_56953" x1="-31.4299" y1="-5.38633" x2="39.5002" y2="43.8833" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E6E7F0" />
+            <stop offset="1" stop-color="#FAFAFF" />
+        </linearGradient>
+        <linearGradient id="paint23_linear_1208_56953" x1="237" y1="101.596" x2="322.237" y2="140.506" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C5C7D8" />
+            <stop offset="1" stop-color="#C5C7D8" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint24_linear_1208_56953" x1="274.069" y1="119.884" x2="326.119" y2="136.261" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C5C7D8" />
+            <stop offset="1" stop-color="#C5C7D8" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint25_linear_1208_56953" x1="114" y1="108.096" x2="193.781" y2="170.829" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C6C8D9" />
+            <stop offset="0.940675" stop-color="#ECEEF8" />
+        </linearGradient>
+        <linearGradient id="paint26_linear_1208_56953" x1="257.001" y1="273.675" x2="80.0011" y2="8.67481" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E6E7F0" />
+            <stop offset="1" stop-color="white" />
+        </linearGradient>
+        <linearGradient id="paint27_linear_1208_56953" x1="49.7969" y1="121.889" x2="0.296876" y2="61.3892" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="1" stop-color="#A3A8BD" />
+        </linearGradient>
+        <linearGradient id="paint28_linear_1208_56953" x1="48.7969" y1="121.889" x2="-0.703124" y2="61.3892" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="1" stop-color="white" />
+        </linearGradient>
+        <linearGradient id="paint29_linear_1208_56953" x1="78.4961" y1="287.394" x2="90.0387" y2="198.585" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="1" stop-color="#F7F7FD" />
+        </linearGradient>
+        <linearGradient id="paint30_linear_1208_56953" x1="-112.765" y1="-150.853" x2="2.78202" y2="46.8081" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#E8E8F1" />
+            <stop offset="1" stop-color="#FCFCFF" />
+        </linearGradient>
+        <linearGradient id="paint31_linear_1208_56953" x1="16.9204" y1="3.47454" x2="36.34" y2="75.953" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#C4C6D7" />
+            <stop offset="1" stop-color="#C4C6D7" stop-opacity="0" />
+        </linearGradient>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/web/step1.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/web/step1.svelte
index b2a807690..a959b846e 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/web/step1.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step1.svelte
@@ -5,11 +5,16 @@
     import { FormList, InputText } from '$lib/elements/forms';
     import { WizardStep } from '$lib/layout';
     import { sdkForConsole } from '$lib/stores/sdk';
+    import { wizard } from '$lib/stores/wizard';
     import { createPlatform } from '../store';
+    import { app } from '$lib/stores/app';
+    import Light from './light.svg';
+    import Dark from './dark.svg';
 
     const projectId = $page.params.project;
     const suggestions = ['*.vercel.app', '*.netlify.app', '*.gitpod.app'];
 
+    $wizard.media = $app.themeInUse === 'dark' ? Dark : Light;
     async function beforeSubmit() {
         if ($createPlatform.$id) {
             await sdkForConsole.projects.updatePlatform(
@@ -32,7 +37,6 @@
             undefined,
             $createPlatform.hostname
         );
-
         $createPlatform.$id = platform.$id;
     }
 </script>
@@ -65,8 +69,13 @@
             </div>
         </div>
         <Alert type="warning">
-            Tip: Avoid using wildcard hostnames in production to keep your project secure. Check out
-            our documentation for more info.
+            Using wildcard hostnames in production can become insecure. You can read about
+            <a
+                href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="link">
+                Cross-Origin Resource Sharing (CORS)</a> for more information.
         </Alert>
     </FormList>
 </WizardStep>
diff --git a/src/routes/console/project-[project]/overview/realtime.svelte b/src/routes/console/project-[project]/overview/realtime.svelte
new file mode 100644
index 000000000..8bcd55239
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/realtime.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { BarChart } from '$lib/charts';
+    import { Card } from '$lib/components';
+    import { stats } from '../store';
+    import { format } from './+layout.svelte';
+
+    $: projectId = $page.params.project;
+    $: projectStats = $stats?.get(projectId);
+    $: current = projectStats ? projectStats[11][1] : 0;
+    $: total = projectStats?.reduce((prev, next) => prev + next[1], 0) ?? 0;
+</script>
+
+<div class="heading-level-4">
+    {format(current)}
+</div>
+<div>Realtime Connections</div>
+{#if total}
+    <div style="height: 18em">
+        <BarChart
+            series={[
+                {
+                    name: 'Realtime connection',
+                    data: $stats.get(projectId)
+                }
+            ]} />
+    </div>
+{:else}
+    <Card isDashed>
+        <div
+            class="u-flex u-cross-center u-flex-vertical u-main-center u-flex"
+            style="height: 10rem;">
+            <span
+                class="icon-chart-square-bar text-large"
+                aria-hidden="true"
+                style="font-size: 32px;" />
+            <p class="u-bold">No data to show</p>
+            <a
+                class="link"
+                href="https://appwrite.io/docs/realtime"
+                target="_blank"
+                rel="noopener noreferrer">Get started with Realtime</a>
+        </div>
+    </Card>
+{/if}
diff --git a/src/routes/console/project-[project]/overview/requests.svelte b/src/routes/console/project-[project]/overview/requests.svelte
new file mode 100644
index 000000000..9866b89d0
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/requests.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+    import { Card, DropList, DropListItem } from '$lib/components';
+    import { format, total } from './+layout.svelte';
+    import { usage } from './store';
+    import type { UsagePeriods } from '$lib/layout';
+    import { createEventDispatcher } from 'svelte';
+    import { LineChart } from '$lib/charts';
+
+    export let period: UsagePeriods;
+
+    let showPeriod = false;
+
+    const dispatch = createEventDispatcher();
+
+    $: requests = $usage?.requests as unknown as Array<{
+        date: number;
+        value: number;
+    }>;
+</script>
+
+<div class="u-flex u-gap-16 u-main-space-between">
+    <div>
+        <div class="heading-level-4">
+            {format(total($usage.requests))}
+        </div>
+        <div>Requests</div>
+    </div>
+    <DropList bind:show={showPeriod} placement="bottom-start" childStart noArrow>
+        <button class="transparent-button" on:click={() => (showPeriod = !showPeriod)}>
+            <span class="text">{period}</span>
+            <span class="icon-cheveron-down" aria-hidden="true" />
+        </button>
+        <svelte:fragment slot="list">
+            <DropListItem on:click={() => dispatch('change', '24h')}>24h</DropListItem>
+            <DropListItem on:click={() => dispatch('change', '30d')}>30d</DropListItem>
+            <DropListItem on:click={() => dispatch('change', '90d')}>90d</DropListItem>
+        </svelte:fragment>
+    </DropList>
+</div>
+{#if total($usage.requests) !== 0}
+    <div style="height: 12rem;">
+        <LineChart
+            options={{
+                yAxis: {
+                    axisLabel: {
+                        formatter: format
+                    }
+                }
+            }}
+            series={[
+                {
+                    name: 'Requests',
+                    data: [...requests.map((e) => [e.date, e.value])]
+                }
+            ]} />
+    </div>
+{:else}
+    <Card isDashed>
+        <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
+            <span
+                class="icon-chart-square-bar text-large"
+                aria-hidden="true"
+                style="font-size: 32px;" />
+            <p class="u-bold">No data to show</p>
+        </div>
+    </Card>
+{/if}
diff --git a/src/routes/console/project-[project]/settings/+layout.svelte b/src/routes/console/project-[project]/settings/+layout.svelte
index 195a228f7..964f360df 100644
--- a/src/routes/console/project-[project]/settings/+layout.svelte
+++ b/src/routes/console/project-[project]/settings/+layout.svelte
@@ -1,53 +1,5 @@
-<script>
-    import { afterNavigate } from '$app/navigation';
-    import { page } from '$app/stores';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-
-    const path = 'settings';
-    const projectId = $page.params.project;
-    let loaded = false;
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    function handle(event = null) {
-        updateLayout({
-            navigate: event,
-            title: 'Settings',
-            level: 3,
-            breadcrumbs: {
-                title: 'Settings',
-                href: 'settings'
-            },
-            copy: {
-                text: 'Project ID',
-                value: projectId
-            },
-            tabs: [
-                {
-                    href: path,
-                    title: 'Overview'
-                },
-
-                {
-                    href: `${path}/domains`,
-                    title: 'Custom Domains'
-                },
-                {
-                    href: `${path}/webhooks`,
-                    title: 'Webhooks'
-                }
-            ]
-        });
-        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 000000000..7db345058
--- /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 c718bd66a..ac7495b86 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,25 @@
     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';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
 
     let name: string = null;
     let showDelete = false;
     const endpoint = sdkForConsole.client.config.endpoint;
+    const projectId = $page.params.project;
 
     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 +46,7 @@
                 service.method,
                 service.value
             );
+            invalidate(Dependencies.PROJECT);
             addNotification({
                 type: 'success',
                 message: `${service.label} service has been ${
@@ -64,6 +67,21 @@
 <Container>
     {#if $project}
         <Form on:submit={updateName}>
+            <CardGrid>
+                <Heading tag="h6" size="7">API Credentials</Heading>
+                <p class="text">Access Appwrite services using your API Endpoint and Project ID.</p>
+                <svelte:fragment slot="aside">
+                    <FormList>
+                        <CopyInput label="Project ID" showLabel={true} value={$project.$id} />
+                        <CopyInput label="API Endpoint" showLabel={true} value={endpoint} />
+                    </FormList>
+                </svelte:fragment>
+                <svelte:fragment slot="actions">
+                    <Button secondary href={`${base}/console/project-${projectId}/overview/keys`}>
+                        View API Keys
+                    </Button>
+                </svelte:fragment>
+            </CardGrid>
             <CardGrid>
                 <Heading tag="h6" size="7">Update Name</Heading>
 
@@ -84,23 +102,6 @@
             </CardGrid>
         </Form>
 
-        <CardGrid>
-            <Heading tag="h6" size="7">API Credentials</Heading>
-            <p class="text">
-                Access Appwrite services using your API Endpoint and Project ID. You can connect
-                Appwrite to your applications and server-side code by <a href="#/" class="link"
-                    >integrating a new platform</a>
-                or
-                <a href="#/" class="link">creating an API key</a>.
-            </p>
-            <svelte:fragment slot="aside">
-                <FormList>
-                    <CopyInput label="Project ID" showLabel={true} value={$project.$id} />
-                    <CopyInput label="API Endpoint" showLabel={true} value={endpoint} />
-                </FormList>
-            </svelte:fragment>
-        </CardGrid>
-
         <CardGrid>
             <Heading tag="h6" size="7">Services</Heading>
             <p class="text">Choose services you wish to enable or disable.</p>
@@ -123,7 +124,7 @@
             </svelte:fragment>
         </CardGrid>
 
-        <CardGrid>
+        <CardGrid danger>
             <div>
                 <Heading tag="h6" size="7">Delete Project</Heading>
             </div>
@@ -134,7 +135,7 @@
             <svelte:fragment slot="aside">
                 <Box>
                     <svelte:fragment slot="title">
-                        <h6 class="u-bold">{$project.name}</h6>
+                        <h6 class="u-bold u-trim-1">{$project.name}</h6>
                     </svelte:fragment>
                     <p>Last update: {toLocaleDateTime($project.$updatedAt)}</p>
                 </Box>
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 c57d5bf12..000000000
--- 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
new file mode 100644
index 000000000..2a4b6cb8f
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/breadcrumbs.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    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/project-${$project?.$id}`,
+            title: $project?.name
+        },
+        {
+            href: `/console/project-${$project?.$id}/settings`,
+            title: 'Settings'
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
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 000000000..b2a60018d
--- /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 fe06f2d30..000000000
--- 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 000000000..2d539b040
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/domains/[[page]]/+page.svelte
@@ -0,0 +1,150 @@
+<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
+            single
+            href="https://appwrite.io/docs/custom-domains"
+            target="domain"
+            on:click={openWizard} />
+    {/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 000000000..21650e7ce
--- /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 77%
rename from src/routes/console/project-[project]/settings/domains/_create.svelte
rename to src/routes/console/project-[project]/settings/domains/create.svelte
index 6a0faa7cd..5279752ae 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,15 +9,21 @@
     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: '' });
+        domain.set({ $id: '', domain: '' });
     });
 
     beforeNavigate(() => {
         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 3c37bfe66..a12fc4d39 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 712e7c319..000000000
--- 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 82%
rename from src/routes/console/project-[project]/settings/domains/wizard/_cnameTable.svelte
rename to src/routes/console/project-[project]/settings/domains/wizard/cnameTable.svelte
index 0c5d31bf0..316fef1b5 100644
--- a/src/routes/console/project-[project]/settings/domains/wizard/_cnameTable.svelte
+++ b/src/routes/console/project-[project]/settings/domains/wizard/cnameTable.svelte
@@ -11,9 +11,9 @@
     } from '$lib/elements/table';
     import { domain } from './store';
 
-    const parts = $domain.name.split('.');
+    const parts = $domain.domain.split('.');
     const registerable = [parts[parts.length - 2], parts[parts.length - 1]].join('.');
-    const cnameValue = $domain.name.replace('.' + registerable, '');
+    const cnameValue = $domain.domain.replace('.' + registerable, '');
 </script>
 
 <Table noStyles noMargin>
@@ -28,8 +28,8 @@
             <TableCellText title="Name">{cnameValue}</TableCellText>
             <TableCell title="Value">
                 <div class="u-flex u-main-space-between u-cross-center">
-                    <span class="text">{$domain.name}</span>
-                    <Copy value={$domain.name}>
+                    <span class="text">{$domain.domain}</span>
+                    <Copy value={$domain.domain}>
                         <span class="icon-duplicate" aria-hidden="true" />
                     </Copy>
                 </div>
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 2287f0dd6..76b46f176 100644
--- a/src/routes/console/project-[project]/settings/domains/wizard/step1.svelte
+++ b/src/routes/console/project-[project]/settings/domains/wizard/step1.svelte
@@ -4,34 +4,15 @@
     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
-    const originalDomainName = $domain.name;
-    const originalDomainId = $domain.id;
-    const unsubscribe = domain.subscribe((newDomain) => {
-        if (
-            originalDomainName !== '' &&
-            newDomain.id !== '' &&
-            newDomain.name !== originalDomainName
-        ) {
-            $domain.id = '';
-        }
-    });
 
     const projectId = $project.$id;
     const createDomain = async () => {
-        unsubscribe();
-        if ($domain.name !== originalDomainName && originalDomainId) {
-            await sdkForConsole.projects.deleteDomain(projectId, originalDomainId);
+        if ($domain.$id) {
+            await sdkForConsole.projects.deleteDomain(projectId, $domain.$id);
         }
 
-        if ($domain.id == '') {
-            const newDomain = await sdkForConsole.projects.createDomain(projectId, $domain.name);
-            domainList.load(projectId);
-            $domain.id = newDomain.$id;
-        }
+        const { $id } = await sdkForConsole.projects.createDomain(projectId, $domain.domain);
+        $domain.$id = $id;
     };
 </script>
 
@@ -48,7 +29,7 @@
             placeholder="appwrite.example.com"
             autocomplete={false}
             required
-            bind:value={$domain.name} />
+            bind:value={$domain.domain} />
     </FormList>
     <div class="common-section ">
         <p>
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 581fb9923..52e4aca17 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 da6f43392..74598ab47 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 34ef5073f..0ab0e0b98 100644
--- a/src/routes/console/project-[project]/settings/domains/wizard/step4.svelte
+++ b/src/routes/console/project-[project]/settings/domains/wizard/step4.svelte
@@ -3,24 +3,19 @@
     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;
 
     let certificate = false;
     const checkCertificate = () => {
         setTimeout(async () => {
-            const result = await sdkForConsole.projects.getDomain(projectId, $domain.id);
+            const result = await sdkForConsole.projects.getDomain(projectId, $domain.$id);
             if (!result.certificateId) {
                 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/store.ts b/src/routes/console/project-[project]/settings/domains/wizard/store.ts
index 88d0de932..9c2d5d8d4 100644
--- a/src/routes/console/project-[project]/settings/domains/wizard/store.ts
+++ b/src/routes/console/project-[project]/settings/domains/wizard/store.ts
@@ -1,3 +1,4 @@
+import type { Models } from '@aw-labs/appwrite-console';
 import { writable } from 'svelte/store';
 
-export const domain = writable<{ id: string; name: string }>({ id: '', name: '' });
+export const domain = writable<Partial<Models.Domain>>({ $id: '', domain: '' });
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 98%
rename from src/routes/console/project-[project]/settings/domains/wizard/_verificationBox.svelte
rename to src/routes/console/project-[project]/settings/domains/wizard/verificationBox.svelte
index 0cd32690f..e82bccf69 100644
--- a/src/routes/console/project-[project]/settings/domains/wizard/_verificationBox.svelte
+++ b/src/routes/console/project-[project]/settings/domains/wizard/verificationBox.svelte
@@ -15,7 +15,7 @@
         try {
             const result = await sdkForConsole.projects.updateDomainVerification(
                 projectId,
-                $domain.id
+                $domain.$id
             );
             isVerified = result.verification;
         } catch (error) {
diff --git a/src/routes/console/project-[project]/settings/header.svelte b/src/routes/console/project-[project]/settings/header.svelte
new file mode 100644
index 000000000..12a880562
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/header.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Tab, Tabs } from '$lib/components';
+    import { isTabSelected } from '$lib/helpers/load';
+    import { Cover, CoverTitle } from '$lib/layout';
+
+    const projectId = $page.params.project;
+    const path = `/console/project-${projectId}/settings`;
+    const tabs = [
+        {
+            href: path,
+            title: 'Overview'
+        },
+        {
+            href: `${path}/domains`,
+            title: 'Custom Domains'
+        },
+        {
+            href: `${path}/webhooks`,
+            title: 'Webhooks'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <CoverTitle>Settings</CoverTitle>
+    </svelte:fragment>
+
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
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 9194bad06..000000000
--- 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 e5dc3756f..1349d09ed 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}
@@ -70,17 +71,10 @@
             </TableBody>
         </Table>
     {:else}
-        <Empty isButton single>
-            <div class="common-section u-text-center">
-                <p class="text">Create your first Webhook to get startedNeed a hand?</p>
-                <p class="text">Check out our documentation.</p>
-            </div>
-            <div class="u-flex u-gap-12 common-section">
-                <Button text href="#/">Documentation</Button>
-                <Button secondary on:click={openWizard}>
-                    <span class="text">Create Webhook</span>
-                </Button>
-            </div>
-        </Empty>
+        <Empty
+            single
+            href="https://appwrite.io/docs/webhooks"
+            target="webhook"
+            on:click={openWizard} />
     {/if}
 </Container>
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 000000000..7cfb4a472
--- /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 000000000..e31346b3c
--- /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 000000000..075cecf37
--- /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 78%
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 3d8297f3d..de473e5cb 100644
--- a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/+page.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/+page.svelte
@@ -18,12 +18,17 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import Delete from './delete.svelte';
     import Regenerate from './regenerate.svelte';
-    import { difference } from '$lib/helpers/array';
+    import { symmetricDifference } from '$lib/helpers/array';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { writable, type Writable } from 'svelte/store';
 
     const projectId = $page.params.project;
     let name: string = null;
     let url: string = null;
-    let events = [];
+
+    const eventSet: Writable<Set<string>> = writable(new Set());
+
     let httpUser: string = null;
     let httpPass: string = null;
     let security = false;
@@ -35,7 +40,7 @@
     onMount(async () => {
         name ??= $webhook.name;
         url ??= $webhook.url;
-        events = $webhook.events;
+        $eventSet = new Set($webhook.events);
         httpUser ??= $webhook.httpUser;
         httpPass ??= $webhook.httpPass;
         security = $webhook.security;
@@ -51,7 +56,7 @@
                 $webhook.url,
                 $webhook.security
             );
-            $webhook.name = name;
+            invalidate(Dependencies.WEBHOOK);
             addNotification({
                 type: 'success',
                 message: 'Webhook name has been updated'
@@ -73,7 +78,7 @@
                 url,
                 $webhook.security
             );
-            $webhook.url = url;
+            invalidate(Dependencies.WEBHOOK);
             addNotification({
                 type: 'success',
                 message: 'Webhook url has been updated'
@@ -91,11 +96,11 @@
                 projectId,
                 $webhook.$id,
                 $webhook.name,
-                events,
+                Array.from($eventSet),
                 $webhook.url,
                 $webhook.security
             );
-            $webhook.events = events;
+            invalidate(Dependencies.WEBHOOK);
             areEventsDisabled = true;
             addNotification({
                 type: 'success',
@@ -108,6 +113,7 @@
             });
         }
     }
+
     async function updateSecurity() {
         try {
             await sdkForConsole.projects.updateWebhook(
@@ -120,9 +126,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,25 +138,39 @@
             });
         }
     }
-    $: signatureKey = $webhook?.signatureKey;
-    $: if (difference(events, $webhook.events).length > 0) {
-        areEventsDisabled = false;
+
+    function handleEvent(event: CustomEvent) {
+        eventSet.set($eventSet.add(event.detail));
+    }
+
+    $: if ($eventSet) {
+        if (symmetricDifference(Array.from($eventSet), $webhook.events).length) {
+            areEventsDisabled = false;
+        } else areEventsDisabled = true;
     }
 </script>
 
 <Container>
     <CardGrid>
         <Heading tag="h2" size="7">Signature Key</Heading>
-        <p>You can use the Signature Key to validate your webhooks.</p>
+        <p>
+            Add the Signature Key to the X-Appwrite-Webhook-Signature header to validate your
+            webhooks. <a
+                href="https://appwrite.io/docs/webhooks#verification"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="link">Learn more about webhook validation.</a>
+        </p>
         <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}>
@@ -199,24 +217,25 @@
 
     <Form on:submit={updateEvents}>
         <CardGrid>
-            <Heading tag="h2" size="7">Update Events</Heading>
+            <Heading tag="h6" size="7">Update Events</Heading>
             <p class="text">
                 Set the events that will trigger your webhook. Maximum 100 events allowed.
             </p>
             <svelte:fragment slot="aside">
-                {#if events?.length}
+                {#if $eventSet.size}
                     <TableList>
-                        {#each events as id}
+                        {#each Array.from($eventSet) as event}
                             <li class="table-row">
                                 <TableCellText title="id">
-                                    {id}
+                                    {event}
                                 </TableCellText>
                                 <TableCell showOverflow title="options" width={40}>
                                     <button
                                         class="button is-text is-only-icon"
                                         aria-label="delete id"
                                         on:click|preventDefault={() => {
-                                            events = events.filter((item) => item !== id);
+                                            $eventSet.delete(event);
+                                            eventSet.set($eventSet);
                                         }}>
                                         <span class="icon-x" aria-hidden="true" />
                                     </button>
@@ -224,15 +243,17 @@
                             </li>
                         {/each}
                     </TableList>
+                    <div class="u-flex u-margin-block-start-16">
+                        <Button text noMargin on:click={() => (showCreateEvent = true)}>
+                            <span class="icon-plus" aria-hidden="true" />
+                            <span class="u-text">Add event</span>
+                        </Button>
+                    </div>
                 {:else}
-                    <Empty isButton single on:click={() => (showCreateEvent = !showCreateEvent)}
-                        >Add a event to get started</Empty>
+                    <Empty on:click={() => (showCreateEvent = true)}>
+                        Add an event to get started
+                    </Empty>
                 {/if}
-
-                <Button text on:click={() => (showCreateEvent = !showCreateEvent)}>
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="u-text">Add event</span>
-                </Button>
             </svelte:fragment>
 
             <svelte:fragment slot="actions">
@@ -272,7 +293,11 @@
                         bind:value={security}>
                         <span class="u-error">Warning:</span> Untrusted or self-signed certificates
                         may not be secure.
-                        <a href="#/" target="_blank" rel="noopener noreferrer" class="link">
+                        <a
+                            href="https://appwrite.io/docs/custom-domains#enjoySSLCert"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="link">
                             Learn more</a>
                     </InputChoice>
                 </FormList>
@@ -290,7 +315,7 @@
         </CardGrid>
     </Form>
 
-    <CardGrid>
+    <CardGrid danger>
         <div>
             <Heading tag="h2" size="7">Delete Webhook</Heading>
         </div>
@@ -298,7 +323,7 @@
         <svelte:fragment slot="aside">
             <Box>
                 <svelte:fragment slot="title">
-                    <h6 class="u-bold">{$webhook.name}</h6>
+                    <h6 class="u-bold u-trim-1">{$webhook.name}</h6>
                 </svelte:fragment>
                 <p>Last updated: {toLocaleDateTime($webhook.$updatedAt)}</p>
             </Box>
@@ -312,9 +337,5 @@
 
 <Delete bind:showDelete />
 <Regenerate bind:show={showRegenerate} />
-<EventModal
-    bind:show={showCreateEvent}
-    on:created={(e) => {
-        events.push(e.detail[0]);
-        events = events;
-    }} />
+
+<EventModal bind:show={showCreateEvent} on:created={handleEvent} />
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 000000000..77a2fad04
--- /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 16234d9d1..ef181aaa9 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]/header.svelte b/src/routes/console/project-[project]/settings/webhooks/[webhook]/header.svelte
new file mode 100644
index 000000000..f58c23e87
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/header.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Copy } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Cover, CoverTitle } from '$lib/layout';
+    import { webhook } from './store';
+
+    const projectId = $page.params.project;
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <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
+            </Pill>
+        </Copy>
+    </svelte:fragment>
+</Cover>
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 4de854269..f7ec19762 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 000000000..4bd28c934
--- /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 7d1e6f6ae..e3067caa0 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 bbca4e8bc..000000000
--- 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 ebc7e53bd..000000000
--- a/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/+layout.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-    import { webhook } from './store';
-
-    const webhookId = $page.params.webhook;
-    const projectId = $page.params.project;
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle(event = null) {
-        const promise = webhook.load(projectId, webhookId);
-
-        if ($webhook?.$id !== webhookId) {
-            await promise;
-        }
-
-        updateLayout({
-            navigate: event,
-            title: $webhook.name,
-            level: 4,
-            breadcrumbs: {
-                title: $webhook.name,
-                href: `webhooks/webhook/${webhookId}`
-            },
-            back: `${base}/console/project-${projectId}/settings/webhooks`,
-            copy: {
-                text: 'Webhook ID',
-                value: webhookId
-            }
-        });
-    }
-</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]/store.ts b/src/routes/console/project-[project]/settings/webhooks/webhook/[webhook]/store.ts
deleted file mode 100644
index fbbcb7fae..000000000
--- 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]/settings/webhooks/wizard/step2.svelte b/src/routes/console/project-[project]/settings/webhooks/wizard/step2.svelte
index d51b874c6..d50dc2027 100644
--- a/src/routes/console/project-[project]/settings/webhooks/wizard/step2.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/wizard/step2.svelte
@@ -22,7 +22,6 @@
         Set the events that will trigger your function. Maximum 100 events allowed.
     </svelte:fragment>
 
-    <span class="u-sep-block-end">EVENT</span>
     {#if $createWebhook?.events?.length}
         <TableList>
             {#each $createWebhook.events as event}
@@ -44,17 +43,15 @@
                 </li>
             {/each}
         </TableList>
+        <div class="u-flex u-margin-block-start-16">
+            <Button text noMargin on:click={() => (showCreate = !showCreate)}>
+                <span class="icon-plus" aria-hidden="true" />
+                <span class="u-text">Add event</span>
+            </Button>
+        </div>
     {:else}
-        <Empty isButton on:click={() => (showCreate = !showCreate)}>
-            Add a event to get started
-        </Empty>
+        <Empty on:click={() => (showCreate = !showCreate)}>Add an event to get started</Empty>
     {/if}
-    <div class="u-flex u-margin-block-start-16">
-        <Button text on:click={() => (showCreate = !showCreate)}>
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="u-text">Add event</span>
-        </Button>
-    </div>
 </WizardStep>
 
 {#if showCreate}
diff --git a/src/routes/console/project-[project]/settings/webhooks/wizard/step3.svelte b/src/routes/console/project-[project]/settings/webhooks/wizard/step3.svelte
index 4403ef024..b5651e67e 100644
--- a/src/routes/console/project-[project]/settings/webhooks/wizard/step3.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/wizard/step3.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Security (optional)</svelte:fragment>
+    <svelte:fragment slot="title">Security</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Set an optional basic HTTP authentication username and password to protect your endpoint
         from unauthorized access.
@@ -34,7 +34,11 @@
             bind:value={$createWebhook.security}>
             <span class="u-error">Warning:</span> Untrusted or self-signed certificates may not be
             secure.
-            <a href="#/" target="_blank" rel="noopener noreferrer" class="link">
+            <a
+                href="https://appwrite.io/docs/custom-domains#enjoySSLCert"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="link">
                 Learn more</a
             ></InputChoice>
     </FormList>
diff --git a/src/routes/console/project-[project]/storage/+layout.svelte b/src/routes/console/project-[project]/storage/+layout.svelte
index 3620b00f7..80b3908c6 100644
--- a/src/routes/console/project-[project]/storage/+layout.svelte
+++ b/src/routes/console/project-[project]/storage/+layout.svelte
@@ -1,43 +1,5 @@
-<script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-
-    const path = 'storage';
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    let loaded = false;
-
-    async function handle(event = null) {
-        updateLayout({
-            navigate: event,
-            title: 'Storage',
-            level: 3,
-            breadcrumbs: {
-                title: 'Storage',
-                href: 'storage'
-            },
-            tabs: [
-                {
-                    href: path,
-                    title: 'Buckets'
-                },
-                {
-                    href: `${path}/usage`,
-                    title: 'Usage'
-                }
-            ]
-        });
-        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 000000000..7db345058
--- /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 68%
rename from src/routes/console/project-[project]/storage/+page.svelte
rename to src/routes/console/project-[project]/storage/[[page]]/+page.svelte
index fae4f5930..c8ba9b82b 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,14 +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}`}>
-                    <svelte:fragment slot="eyebrow">XX Files</svelte:fragment>
+            {#each data.buckets.buckets as bucket}
+                <GridItem1 href={`${base}/console/project-${project}/storage/bucket-${bucket.$id}`}>
                     <svelte:fragment slot="title">{bucket.name}</svelte:fragment>
                     <svelte:fragment slot="status">
                         {#if !bucket.enabled}
@@ -90,20 +82,19 @@
         </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)}>
-            <div class="u-text-center">
-                <p class="text u-line-height-1-5">Create your first bucket to get started</p>
-                <p class="text u-line-height-1-5">Need a hand? Check out our documentation.</p>
-            </div>
-            <div class="u-flex u-gap-12">
-                <Button external href="#/" text>Documentation</Button>
-                <Button secondary>Create bucket</Button>
-            </div>
-        </Empty>
+        <Empty
+            single
+            href="https://appwrite.io/docs/storage"
+            target="bucket"
+            on:click={() => (showCreate = true)} />
     {/if}
 </Container>
 
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 000000000..30ed7b167
--- /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 8ec10ab1c..000000000
--- 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/breadcrumbs.svelte b/src/routes/console/project-[project]/storage/breadcrumbs.svelte
new file mode 100644
index 000000000..67dd8a078
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/breadcrumbs.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    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/project-${$project.$id}`,
+            title: $project.name
+        },
+        {
+            href: `/console/project-${$project.$id}/storage`,
+            title: 'Storage'
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
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 000000000..b6f596a77
--- /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 000000000..556fea871
--- /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 74%
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 57229e752..5d96cba5f 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,32 +71,26 @@
             });
         }
     }
-
-    $: 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>
+            <span class="icon-plus" aria-hidden="true" /> <span class="text">Create file</span>
         </Button>
-    </Search>
-    {#if $files?.total}
+    </SearchQuery>
+
+    {#if data.files.total && !data.search}
         <Table>
             <TableHeader>
                 <TableCellHead>Filename</TableCellHead>
                 <TableCellHead width={140}>Type</TableCellHead>
                 <TableCellHead width={100}>Size</TableCellHead>
-                <TableCellHead width={120}>Date Created</TableCellHead>
+                <TableCellHead width={120}>Created</TableCellHead>
                 <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 +129,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 +137,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 +156,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,28 +173,36 @@
             </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 && !data.files.total}
         <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>
+            <div class="u-flex u-gap-16">
+                <Button external href="https://appwrite.io/docs/storage#createFile" text>
+                    Documentation
+                </Button>
+                <Button
+                    secondary
+                    href={`/console/project-${$page.params.project}/storage/bucket-${$page.params.bucket}`}>
+                    Clear Search
+                </Button>
+            </div>
         </EmptySearch>
     {:else}
-        <Empty isButton single on:click={() => (showCreate = true)}>
-            <div class="u-text-center">
-                <p class="text u-line-height-1-5">Upload some files to get started</p>
-                <p class="text u-line-height-1-5">Need a hand? Check out our documentation.</p>
-            </div>
-            <div class="u-flex u-gap-12 ">
-                <Button external href="#/" text>Documentation</Button>
-                <Button secondary>Add file</Button>
-            </div>
-        </Empty>
+        <Empty
+            single
+            href="https://appwrite.io/docs/storage#createFile"
+            target="file"
+            on:click={() => (showCreate = true)} />
     {/if}
 </Container>
 
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 000000000..0c15a026e
--- /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 57%
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 88c565e5b..3a205bc74 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';
@@ -14,6 +14,10 @@
         try {
             await sdkForProject.storage.deleteBucket($bucket.$id);
             showDelete = false;
+            addNotification({
+                type: 'success',
+                message: `${$bucket.name} has been deleted`
+            });
             await goto(`${base}/console/project-${$page.params.project}/storage`);
         } catch (error) {
             addNotification({
@@ -24,13 +28,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 57%
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 b21e98870..1d5cf7604 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';
@@ -16,6 +16,10 @@
             await sdkForProject.storage.deleteFile(file.bucketId, file.$id);
             showDelete = false;
             dispatch('deleted', file);
+            addNotification({
+                type: 'success',
+                message: `${file.name} has been deleted`
+            });
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -25,13 +29,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
new file mode 100644
index 000000000..da7f07ba4
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/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 { bucket } from './store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization?.$id}`,
+            title: $organization.name
+        },
+        {
+            href: `/console/project-${$project?.$id}`,
+            title: $project.name
+        },
+        {
+            href: `/console/project-${$project?.$id}/storage`,
+            title: 'Storage'
+        },
+        {
+            href: `/console/project-${$project?.$id}/storage/bucket-${$bucket?.$id}`,
+            title: $bucket?.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
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 52%
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 28db7bbdd..b881da675 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';
@@ -9,6 +9,7 @@
     import { bucket } from './store';
     import { calculateSize } from '$lib/helpers/sizeConvertion';
     import { Permissions } from '$lib/components/permissions';
+    import { addNotification } from '$lib/stores/notifications';
 
     export let showCreate = false;
 
@@ -34,6 +35,10 @@
             showCustomId = false;
             uploader.addFile(file);
             dispatch('created');
+            addNotification({
+                type: 'success',
+                message: `${file.name} has been created`
+            });
         } catch ({ message }) {
             error = message;
         }
@@ -45,32 +50,30 @@
     }
 </script>
 
-<Form on:submit={create}>
-    <Modal size="big" {error} bind:show={showCreate}>
-        <svelte:fragment slot="header">Upload File</svelte:fragment>
-        <FormList>
-            <div>
-                <InputFile bind:files />
-                <p>Max file size: {calculateSize($bucket.maximumFileSize)}</p>
-            </div>
+<Modal size="big" {error} bind:show={showCreate} on:submit={create}>
+    <svelte:fragment slot="header">Create File</svelte:fragment>
+    <FormList>
+        <div>
+            <InputFile bind:files />
+            <p>Max file size: {calculateSize($bucket.maximumFileSize)}</p>
+        </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>
+        {#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>Create</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 000000000..4a2840c83
--- /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 000000000..ec7e4b6a3
--- /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 91%
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 0eb0d2311..c65632b9e 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 { symmetricDifference } 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;
     });
 
@@ -32,7 +30,7 @@
         sdkForProject.storage.getFileView($file.bucketId, fileId).toString() + '&mode=admin';
 
     $: if (filePermissions) {
-        if (difference(filePermissions, $file.$permissions).length) {
+        if (symmetricDifference(filePermissions, $file.$permissions).length) {
             arePermsDisabled = false;
         } else arePermsDisabled = true;
     }
@@ -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',
@@ -85,7 +83,7 @@
                         </div>
                     </div>
                 </a>
-                <div>
+                <div class="u-flex u-flex-vertical u-gap-16">
                     <Heading tag="h2" size="7">{$file.name}</Heading>
                     <Copy value={getView($file.$id)}>
                         <Pill button><i class="icon-duplicate" />File URL</Pill>
@@ -127,7 +125,7 @@
             </svelte:fragment>
         </CardGrid>
 
-        <CardGrid>
+        <CardGrid danger>
             <Heading tag="h6" size="7">Delete File</Heading>
             <p>
                 The file will be permanently deleted, including all the files within it. This action
@@ -136,7 +134,7 @@
             <svelte:fragment slot="aside">
                 <Box>
                     <svelte:fragment slot="title">
-                        <h6 class="u-bold">{$file.name}</h6>
+                        <h6 class="u-bold u-trim-1">{$file.name}</h6>
                     </svelte:fragment>
                     <p>
                         Last Updated: {toLocaleDateTime($file.$updatedAt)}
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 000000000..d7814aae7
--- /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 57%
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 629cff421..8ea385fa1 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,8 +15,12 @@
             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}`
             );
+            addNotification({
+                type: 'success',
+                message: `${$file.name} has been deleted`
+            });
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -26,13 +30,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
new file mode 100644
index 000000000..2fd9de754
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/header.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Copy } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Cover, CoverTitle } from '$lib/layout';
+    import { file } from './store';
+
+    const projectId = $page.params.project;
+    const bucketId = $page.params.bucket;
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <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
+            </Pill>
+        </Copy>
+    </svelte:fragment>
+</Cover>
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 000000000..f74e98ea7
--- /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
new file mode 100644
index 000000000..23c72f849
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/header.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Copy, Tab, Tabs } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    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 tabs = [
+        {
+            href: path,
+            title: 'Files',
+            hasChildren: true
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage'
+        },
+        {
+            href: `${path}/settings`,
+            title: 'Settings'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <CoverTitle href={`/console/project-${projectId}/storage`}>
+            {$bucket?.name}
+        </CoverTitle>
+        <Copy value={$bucket?.$id}>
+            <Pill button>
+                <span class="icon-duplicate" aria-hidden="true" />
+                Bucket ID
+            </Pill>
+        </Copy>
+    </svelte:fragment>
+
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
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 90%
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 a99800178..e712af75d 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 {
@@ -8,19 +9,20 @@
         InputTags,
         InputNumber,
         InputSelect,
-        InputSwitch
+        InputSwitch,
+        FormList
     } from '$lib/elements/forms';
     import { bucket } from '../store';
     import { toLocaleDateTime } from '$lib/helpers/date';
     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 { symmetricDifference } 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 +46,6 @@
     let isExtensionsDisabled = true;
 
     onMount(async () => {
-        await bucket.load($page.params.bucket);
         enabled ??= $bucket.enabled;
         bucketName ??= $bucket.name;
         bucketName ??= $bucket.name;
@@ -57,7 +58,7 @@
         if (bucketFileSecurity !== $bucket.fileSecurity) {
             arePermsDisabled = false;
         } else if (bucketPermissions) {
-            if (difference(bucketPermissions, $bucket.$permissions).length) {
+            if (symmetricDifference(bucketPermissions, $bucket.$permissions).length) {
                 arePermsDisabled = false;
             } else arePermsDisabled = true;
         }
@@ -77,7 +78,7 @@
                 undefined,
                 enabled
             );
-            $bucket.enabled = enabled;
+            invalidate(Dependencies.BUCKET);
             addNotification({
                 message: `${$bucket.name} has been updated`,
                 type: 'success'
@@ -92,7 +93,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 +113,7 @@
                 bucketFileSecurity ? bucketPermissions : undefined,
                 bucketFileSecurity
             );
-            $bucket.fileSecurity = bucketFileSecurity;
-            $bucket.$permissions = bucketPermissions;
+            invalidate(Dependencies.BUCKET);
             arePermsDisabled = true;
             addNotification({
                 message: 'Permissions have been updated',
@@ -141,8 +141,7 @@
                 encryption,
                 antivirus
             );
-            $bucket.encryption = encryption;
-            $bucket.antivirus = antivirus;
+            invalidate(Dependencies.BUCKET);
             addNotification({
                 message: `${$bucket.name} has been updated`,
                 type: 'success'
@@ -165,7 +164,7 @@
                 undefined,
                 size
             );
-            $bucket.maximumFileSize = maxSize;
+            invalidate(Dependencies.BUCKET);
             addNotification({
                 message: `${$bucket.name} has been updated`,
                 type: 'success'
@@ -189,7 +188,7 @@
                 undefined,
                 extensions
             );
-            $bucket.allowedFileExtensions = extensions;
+            invalidate(Dependencies.BUCKET);
             addNotification({
                 message: `${$bucket.name} has been updated`,
                 type: 'success'
@@ -210,14 +209,16 @@
                 <Heading tag="h2" size="7">{$bucket.name}</Heading>
 
                 <svelte:fragment slot="aside">
-                    <ul>
-                        <InputSwitch
-                            label={enabled ? 'Enabled' : 'Disabled'}
-                            id="toggle"
-                            bind:value={enabled} />
-                    </ul>
-                    <p>Created: {toLocaleDateTime($bucket.$createdAt)}</p>
-                    <p>Last Updated: {toLocaleDateTime($bucket.$updatedAt)}</p>
+                    <div>
+                        <FormList>
+                            <InputSwitch
+                                label={enabled ? 'Enabled' : 'Disabled'}
+                                id="toggle"
+                                bind:value={enabled} />
+                        </FormList>
+                        <p>Created: {toLocaleDateTime($bucket.$createdAt)}</p>
+                        <p>Last Updated: {toLocaleDateTime($bucket.$updatedAt)}</p>
+                    </div>
                 </svelte:fragment>
 
                 <svelte:fragment slot="actions">
@@ -230,14 +231,14 @@
             <CardGrid>
                 <Heading tag="h6" size="7">Update Name</Heading>
                 <svelte:fragment slot="aside">
-                    <ul>
+                    <FormList>
                         <InputText
                             id="name"
                             label="Name"
                             placeholder="Enter name"
                             autocomplete={false}
                             bind:value={bucketName} />
-                    </ul>
+                    </FormList>
                 </svelte:fragment>
 
                 <svelte:fragment slot="actions">
@@ -298,7 +299,7 @@
                     and <b>Antivirus scanning.</b>
                 </p>
                 <svelte:fragment slot="aside">
-                    <ul class="form-list">
+                    <FormList>
                         <li class="form-item">
                             <label class="choice-item" for="encryption">
                                 <div class="input-text-wrapper">
@@ -347,7 +348,7 @@
                         </li>
 
                         <li />
-                    </ul>
+                    </FormList>
                 </svelte:fragment>
 
                 <svelte:fragment slot="actions">
@@ -384,7 +385,7 @@
             <CardGrid>
                 <Heading tag="h6" size="7">Update Allowed File Extensions</Heading>
                 <p>
-                    A maxiumum of 100 file extensions can be added. Leave blank to allow all file
+                    A maximum of 100 file extensions can be added. Leave blank to allow all file
                     types.
                 </p>
                 <svelte:fragment slot="aside">
@@ -400,8 +401,11 @@
                                     selected={extensions.includes(ext)}
                                     button
                                     on:click={() => {
-                                        if (!extensions.includes(ext))
+                                        if (!extensions.includes(ext)) {
                                             extensions = [...extensions, ext];
+                                        } else {
+                                            extensions = extensions.filter((e) => e !== ext);
+                                        }
                                     }}>
                                     <span class="icon-plus" aria-hidden="true" />
                                     {ext}
@@ -417,7 +421,7 @@
             </CardGrid>
         </Form>
 
-        <CardGrid>
+        <CardGrid danger>
             <Heading tag="h6" size="7">Delete Bucket</Heading>
             <p>
                 The bucket will be permanently deleted, including all the files within it. This
@@ -426,7 +430,7 @@
             <svelte:fragment slot="aside">
                 <Box>
                     <svelte:fragment slot="title">
-                        <h6 class="u-bold">{$bucket.name}</h6>
+                        <h6 class="u-bold u-trim-1">{$bucket.name}</h6>
                     </svelte:fragment>
                     <p>Last Updated: {toLocaleDateTime($bucket.$updatedAt)}</p>
                 </Box>
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 000000000..0b1d2ab2d
--- /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 000000000..e9111d150
--- /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 000000000..19e5e71bc
--- /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 dc236cd15..000000000
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/+layout.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-    import { bucket } from './store';
-
-    const projectId = $page.params.project;
-    const bucketId = $page.params.bucket;
-    const path = `storage/bucket/${bucketId}`;
-
-    let loaded = false;
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle(event = null) {
-        const promise = bucket.load(bucketId);
-        if ($bucket?.$id !== bucketId) {
-            await promise;
-        }
-
-        updateLayout({
-            navigate: event,
-            title: $bucket.name,
-            level: 4,
-            breadcrumbs: {
-                title: $bucket.name,
-                href: `storage/bucket/${bucketId}`
-            },
-            copy: {
-                text: 'Bucket ID',
-                value: bucketId
-            },
-            back: `${base}/console/project-${projectId}/storage`,
-
-            tabs: [
-                {
-                    href: path,
-                    title: 'Files'
-                },
-                {
-                    href: `${path}/usage`,
-                    title: 'Usage'
-                },
-                {
-                    href: `${path}/settings`,
-                    title: 'Settings'
-                }
-            ]
-        });
-        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 8ba39c8c0..000000000
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+layout.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts">
-    import { afterNavigate } from '$app/navigation';
-    import { page } from '$app/stores';
-    import { base } from '$app/paths';
-    import { file } from './store';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
-
-    const bucketId = $page.params.bucket;
-    const fileId = $page.params.file;
-
-    onMount(handle);
-    afterNavigate(handle);
-
-    async function handle(event = null) {
-        const promise = file.load(bucketId, fileId);
-        if ($file?.$id !== fileId) {
-            await promise;
-        }
-
-        updateLayout({
-            navigate: event,
-            level: 5,
-            breadcrumbs: {
-                href: `file/${fileId}`,
-                title: $file.name
-            },
-            back: `${base}/console/project-${$page.params.project}/storage/bucket/${bucketId}`,
-            title: $file.name,
-            copy: {
-                text: 'File ID',
-                value: fileId
-            },
-            tabs: []
-        });
-    }
-</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]/store.ts b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/store.ts
deleted file mode 100644
index 9f48e437e..000000000
--- 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 8667d18d4..000000000
--- 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 252c56611..000000000
--- 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 000000000..8125ba1aa
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/create.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { Modal, CustomId } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Button, InputText, 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;
+
+    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);
+            addNotification({
+                type: 'success',
+                message: `${name} has been created`
+            });
+        } 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
new file mode 100644
index 000000000..a2ac498df
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/header.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Tab, Tabs } from '$lib/components';
+    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',
+            hasChildren: true
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <CoverTitle>Storage</CoverTitle>
+    </svelte:fragment>
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={isTabSelected(tab, $page.url.pathname, path, tabs)}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
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 71849a52b..000000000
--- 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 5df44f6c4..000000000
--- 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 000000000..5ac40adb9
--- /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 000000000..245f790ea
--- /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 45c291faf..5443d45b6 100644
--- a/src/routes/console/project-[project]/store.ts
+++ b/src/routes/console/project-[project]/store.ts
@@ -1,17 +1,43 @@
-import { sdkForConsole } from '$lib/stores/sdk';
+import { derived, writable } from 'svelte/store';
+import { page } from '$app/stores';
 import type { Models } from '@aw-labs/appwrite-console';
-import { cachedStore } from '$lib/helpers/cache';
+import type { BarSeriesOption } from 'echarts/charts';
+
+export const project = derived(page, ($page) => $page.data.project as Models.Project);
+export const onboarding = derived(
+    project,
+    ($project) => $project.platforms.length === 0 && $project.keys.length === 0
+);
+
+function createStats() {
+    const { subscribe, set, update } = writable<Map<string, BarSeriesOption['data']>>(new Map());
 
-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);
-        }
+        subscribe,
+        add: (projectId: string, data: BarSeriesOption['data'][number]) =>
+            update((n) => {
+                let series = n.get(projectId) ?? [];
+
+                if (series.length === 0) {
+                    const date = new Date(data[0]);
+                    for (let i = 0; i < 12; i++) {
+                        series.push([date.toISOString(), 0]);
+                        date.setSeconds(date.getSeconds() - 5);
+                    }
+                }
+
+                series.push(data);
+
+                if (series.length > 12) {
+                    series = series.slice(-12);
+                }
+
+                n.set(projectId, series);
+
+                return n;
+            }),
+        reset: () => set(new Map())
     };
-});
+}
+
+export const stats = createStats();
diff --git a/src/routes/invite/+page.svelte b/src/routes/invite/+page.svelte
index 14daee57f..f2a1a8ca8 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 13507ed8d..230fe63f1 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 42aa2bc35..4ff01189f 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 63319697b..f58e12427 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 000000000..dd2756663
--- /dev/null
+++ b/src/routes/store.ts
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const loading = writable(true);
diff --git a/static/icons/dark/color/authentik.svg b/static/icons/dark/color/authentik.svg
new file mode 100644
index 000000000..678087401
--- /dev/null
+++ b/static/icons/dark/color/authentik.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="2" y="4" width="20" height="16" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_6187_66568" transform="translate(0 -0.136364) scale(0.001 0.00127273)"/>
+</pattern>
+<image id="image0_6187_66568" width="1000" height="1000" xlink:href="data:image/png;base64,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ABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAu5ZS+j/oXMne0TcL/QAAAABJRU5ErkJggg=="/>
+</defs>
+</svg>
diff --git a/static/icons/dark/color/autodesk.svg b/static/icons/dark/color/autodesk.svg
new file mode 100644
index 000000000..258d0aab1
--- /dev/null
+++ b/static/icons/dark/color/autodesk.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.10736 19L14.357 11.2023H20.7118C20.9079 11.2023 21.0828 11.3623 21.0828 11.5821C21.0828 11.7612 21.0059 11.8424 20.9079 11.9021L14.8892 15.5919C14.4971 15.8332 14.3617 16.3132 14.3617 16.6715L14.3547 18.9976H22V5.48004C22 5.21972 21.804 5 21.5122 5H14.2193L2 12.7619V18.9976H2.10736V19Z" fill="white"/>
+</svg>
diff --git a/static/icons/dark/color/bitBucket.svg b/static/icons/dark/color/bitbucket.svg
similarity index 100%
rename from static/icons/dark/color/bitBucket.svg
rename to static/icons/dark/color/bitbucket.svg
diff --git a/static/icons/dark/color/dailymotion.svg b/static/icons/dark/color/dailymotion.svg
new file mode 100644
index 000000000..8c1dc06de
--- /dev/null
+++ b/static/icons/dark/color/dailymotion.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.6653 21H4.33474C3.98097 20.9993 3.64191 20.8584 3.39176 20.6082C3.1416 20.3581 3.00074 20.019 3 19.6653V4.33474C3.00074 3.98098 3.1416 3.64191 3.39176 3.39176C3.64191 3.14161 3.98097 3.00074 4.33474 3H19.6653C20.0185 3.00074 20.3572 3.14122 20.6073 3.39076C20.8573 3.64031 20.9985 3.97865 21 4.33193V19.6624C20.9982 20.0159 20.8569 20.3543 20.607 20.6042C20.3571 20.8541 20.0187 20.9953 19.6653 20.9972V21Z" fill="#2A62AA"/>
+<path d="M17.5898 4.78453V19.1128H14.5561V18.0157C13.7566 18.7921 12.6807 19.2152 11.4225 19.2152C8.67084 19.2152 6.40698 16.8692 6.40698 13.9269C6.40698 10.9845 8.82949 8.60591 11.4225 8.60591C12.6807 8.60591 13.7566 9.0526 14.5561 9.8436V5.39269L17.5898 4.78453ZM12.1102 16.4318C12.7883 16.4312 13.4385 16.1615 13.918 15.682C14.3975 15.2025 14.6671 14.5524 14.6677 13.8743C14.6672 13.1961 14.3976 12.5459 13.9181 12.0663C13.4386 11.5867 12.7884 11.3171 12.1102 11.3165C11.4321 11.3171 10.7818 11.5867 10.3023 12.0663C9.82282 12.5459 9.55321 13.1961 9.55269 13.8743C9.55329 14.5524 9.82293 15.2025 10.3024 15.682C10.7819 16.1615 11.4321 16.4312 12.1102 16.4318V16.4318Z" fill="white"/>
+</svg>
diff --git a/static/icons/dark/color/disqus.svg b/static/icons/dark/color/disqus.svg
new file mode 100644
index 000000000..9bc6580ec
--- /dev/null
+++ b/static/icons/dark/color/disqus.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8465 21C9.58866 21 7.52422 20.1952 5.92808 18.8639L2 19.3873L3.51754 15.7339C2.98882 14.5959 2.6922 13.3325 2.6922 12C2.6922 7.02973 6.79073 3 11.8465 3C16.9019 3 21 7.02973 21 12C21 16.9712 16.902 21 11.8465 21ZM16.8449 11.9743V11.9492C16.8449 9.35213 14.9673 7.50027 11.7299 7.50027H8.23337V16.5003H11.6781C14.9406 16.5004 16.8449 14.5712 16.8449 11.9743ZM11.7685 14.2891H10.7457V9.71213H11.7685C13.2706 9.71213 14.2676 10.5475 14.2676 11.9881V12.0132C14.2676 13.466 13.2706 14.2891 11.7685 14.2891Z" fill="#2E9FFF"/>
+</svg>
diff --git a/static/icons/dark/color/etsy.svg b/static/icons/dark/color/etsy.svg
new file mode 100644
index 000000000..51b17c92f
--- /dev/null
+++ b/static/icons/dark/color/etsy.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.4286 15.6964C19.3583 16.1284 18.8762 20.1161 18.8058 21C14.0697 20.8273 9.97075 20.8095 4 21V19.9756C5.82644 19.6159 6.43594 19.6532 6.45092 18.5592C6.52296 15.6533 6.5925 8.74984 6.45092 5.62163C6.40956 4.47817 5.96356 4.54629 4 4.17528V3.15071C6.96862 3.24546 14.283 3.49423 18.5848 3C18.4442 4.53684 18.2735 8.08257 18.2735 8.08257H17.3394C16.8953 6.3616 16.5857 4.44643 15.1396 4.44643H9.63513C9.2233 4.44643 9.20317 4.58708 9.20317 4.83818V11.4175C11.5335 11.4375 12.759 11.317 12.759 11.317C13.9551 11.2787 13.8662 10.9754 14.3963 8.69531H15.4308C15.2538 12.7675 15.2737 11.1795 15.3605 15.1339H14.326C13.9581 13.5233 13.9617 12.6813 12.7388 12.663C12.7388 12.663 11.875 12.5826 9.20313 12.5826V18.1674C9.20313 19.2121 9.77574 19.7042 10.981 19.7042H14.567C17.1238 19.7042 17.2415 18.7 18.5347 15.6964H19.4286V15.6964Z" fill="#F97431"/>
+</svg>
diff --git a/static/icons/dark/color/podio.svg b/static/icons/dark/color/podio.svg
new file mode 100644
index 000000000..7fa97731a
--- /dev/null
+++ b/static/icons/dark/color/podio.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.7358 5.3661C14.61 2.22373 9.5308 2.21103 6.38892 5.32991L6.35205 5.36679C3.21517 8.52223 3.21617 13.6553 6.35392 16.8096L11.2005 21.6812C11.301 21.7825 11.4203 21.8628 11.5518 21.9175C11.6832 21.9722 11.8241 22.0002 11.9664 22C12.2434 22 12.5213 21.8941 12.7327 21.6812C13.1553 21.2558 13.1553 20.566 12.7327 20.1408L7.88542 15.2687C5.59942 12.9709 5.59211 9.23497 7.86417 6.92742L7.8863 6.90562C10.1799 4.60115 13.9112 4.60184 16.2034 6.90637C18.0857 8.79883 18.3558 12.0374 16.8306 14.4405C16.5089 14.9472 16.6571 15.6207 17.1611 15.9442C17.6662 16.2686 18.3352 16.119 18.6567 15.6125C20.7497 12.3153 20.3623 8.00648 17.7358 5.3661M15.7962 17.0594C16.2191 17.4848 16.2196 18.1747 15.7962 18.5995C15.696 18.701 15.5768 18.7815 15.4454 18.8363C15.3141 18.8912 15.1732 18.9193 15.031 18.9191C14.8885 18.9193 14.7474 18.8912 14.6158 18.8365C14.4842 18.7817 14.3646 18.7014 14.2639 18.6001L9.41749 13.7284C7.96967 12.2724 7.96967 9.90284 9.41749 8.44652C10.119 7.74189 11.0517 7.35344 12.0437 7.35344H12.0448C13.0367 7.35344 13.9694 7.74239 14.6705 8.44815C15.1447 8.92448 15.4817 9.52099 15.6458 10.1744C15.81 10.8277 15.7951 11.5136 15.6027 12.1592C15.4305 12.7356 14.8281 13.0637 14.2545 12.8912C13.6811 12.7194 13.3547 12.1124 13.5256 11.5356C13.6061 11.2666 13.6126 10.9806 13.5443 10.7081C13.4761 10.4357 13.3357 10.1869 13.1381 9.98823C12.8457 9.69398 12.4577 9.53205 12.0443 9.53186H12.0437C11.6302 9.53186 11.2422 9.6936 10.9497 9.98716C10.3463 10.5938 10.3463 11.5811 10.9497 12.1878L15.7962 17.0594" fill="#5088AC"/>
+</svg>
diff --git a/static/icons/dark/color/ms_yammer.svg b/static/icons/dark/color/yammer.svg
similarity index 100%
rename from static/icons/dark/color/ms_yammer.svg
rename to static/icons/dark/color/yammer.svg
diff --git a/static/icons/dark/grayscale/authentik.svg b/static/icons/dark/grayscale/authentik.svg
new file mode 100644
index 000000000..7b80aed5c
--- /dev/null
+++ b/static/icons/dark/grayscale/authentik.svg
@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<mask id="mask0_6187_66619" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="4" width="20" height="16">
+<rect x="2" y="4" width="20" height="16" fill="url(#pattern0)"/>
+</mask>
+<g mask="url(#mask0_6187_66619)">
+<rect x="1" y="1" width="22" height="22" fill="#C4C6D7"/>
+</g>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_6187_66619" transform="translate(0 -0.136364) scale(0.001 0.00127273)"/>
+</pattern>
+<image id="image0_6187_66619" width="1000" height="1000" xlink:href="data:image/png;base64,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ABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAu5ZS+j/oXMne0TcL/QAAAABJRU5ErkJggg=="/>
+</defs>
+</svg>
diff --git a/static/icons/dark/grayscale/autodesk.svg b/static/icons/dark/grayscale/autodesk.svg
new file mode 100644
index 000000000..87747e823
--- /dev/null
+++ b/static/icons/dark/grayscale/autodesk.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.10736 19L14.357 11.2023H20.7118C20.9079 11.2023 21.0828 11.3623 21.0828 11.5821C21.0828 11.7612 21.0059 11.8424 20.9079 11.9021L14.8892 15.5919C14.4971 15.8332 14.3617 16.3132 14.3617 16.6715L14.3547 18.9976H22V5.48004C22 5.21972 21.804 5 21.5122 5H14.2193L2 12.7619V18.9976H2.10736V19Z" fill="#C4C6D7"/>
+</svg>
diff --git a/static/icons/dark/grayscale/bitBucket.svg b/static/icons/dark/grayscale/bitbucket.svg
similarity index 100%
rename from static/icons/dark/grayscale/bitBucket.svg
rename to static/icons/dark/grayscale/bitbucket.svg
diff --git a/static/icons/dark/grayscale/code.svg b/static/icons/dark/grayscale/code.svg
new file mode 100644
index 000000000..04af95237
--- /dev/null
+++ b/static/icons/dark/grayscale/code.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.940 3.740 C 13.556 3.949,13.447 4.129,13.068 5.180 C 12.431 6.947,9.209 16.623,8.645 18.460 C 8.444 19.117,8.420 19.271,8.482 19.529 C 8.571 19.897,9.072 20.304,9.491 20.348 C 9.972 20.397,10.353 20.170,10.594 19.691 C 10.826 19.228,12.607 14.019,14.153 9.280 C 15.524 5.079,15.612 4.771,15.526 4.483 C 15.465 4.281,15.128 3.910,14.909 3.805 C 14.668 3.690,14.103 3.652,13.940 3.740 M5.512 7.388 C 5.213 7.566,4.589 8.142,3.302 9.425 C 1.537 11.187,1.220 11.575,1.220 11.978 C 1.221 12.403,1.449 12.684,3.377 14.632 C 5.273 16.547,5.493 16.725,5.970 16.725 C 6.111 16.725,6.279 16.712,6.343 16.696 C 6.603 16.633,6.977 16.288,7.082 16.016 C 7.159 15.814,7.141 15.317,7.049 15.138 C 6.938 14.921,6.356 14.284,5.141 13.048 L 4.111 12.000 5.083 11.010 C 6.318 9.752,6.939 9.069,7.043 8.853 C 7.147 8.638,7.182 8.309,7.123 8.092 C 7.067 7.882,6.739 7.516,6.509 7.404 C 6.405 7.355,6.216 7.314,6.020 7.299 C 5.719 7.276,5.689 7.282,5.512 7.388 M17.430 7.403 C 17.247 7.499,16.947 7.871,16.885 8.078 C 16.827 8.272,16.827 8.551,16.886 8.724 C 16.976 8.992,17.512 9.589,19.094 11.187 L 19.893 11.994 18.762 13.147 C 17.025 14.916,16.810 15.203,16.850 15.696 C 16.898 16.296,17.392 16.735,18.023 16.739 C 18.284 16.740,18.324 16.728,18.526 16.594 C 18.861 16.372,19.539 15.734,20.861 14.396 C 22.121 13.120,22.556 12.642,22.687 12.386 C 22.784 12.197,22.791 11.871,22.702 11.659 C 22.566 11.332,21.586 10.269,20.108 8.844 C 19.053 7.827,18.676 7.495,18.460 7.396 C 18.229 7.289,17.638 7.293,17.430 7.403 " fill="#C4C6D7" stroke="none" fill-rule="evenodd"></path></svg>
diff --git a/static/icons/dark/grayscale/dailymotion.svg b/static/icons/dark/grayscale/dailymotion.svg
new file mode 100644
index 000000000..714372951
--- /dev/null
+++ b/static/icons/dark/grayscale/dailymotion.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.33474 21H19.6653V20.9972C20.0187 20.9953 20.3571 20.8541 20.607 20.6042C20.8569 20.3543 20.9981 20.0159 21 19.6624V4.33193C20.9985 3.97865 20.8573 3.64031 20.6073 3.39076C20.3572 3.14122 20.0185 3.00074 19.6653 3H4.33474C3.98097 3.00074 3.64191 3.14161 3.39176 3.39176C3.1416 3.64191 3.00074 3.98098 3 4.33474V19.6653C3.00074 20.019 3.1416 20.3581 3.39176 20.6082C3.64191 20.8584 3.98097 20.9993 4.33474 21ZM17.5898 19.1128V4.78455L14.5561 5.3927V9.84361C13.7566 9.05261 12.6807 8.60592 11.4225 8.60592C8.82949 8.60592 6.40698 10.9845 6.40698 13.9269C6.40698 16.8692 8.67084 19.2152 11.4225 19.2152C12.6807 19.2152 13.7566 18.7921 14.5561 18.0158V19.1128H17.5898ZM13.918 15.6821C13.4385 16.1616 12.7883 16.4312 12.1102 16.4318C11.4321 16.4312 10.7819 16.1616 10.3024 15.6821C9.82293 15.2026 9.55329 14.5524 9.55269 13.8743C9.55321 13.1961 9.82282 12.5459 10.3023 12.0663C10.7818 11.5868 11.4321 11.3171 12.1102 11.3165C12.7884 11.3171 13.4386 11.5868 13.9181 12.0663C14.3976 12.5459 14.6672 13.1961 14.6677 13.8743C14.6671 14.5524 14.3975 15.2026 13.918 15.6821Z" fill="#C4C6D7"/>
+</svg>
diff --git a/static/icons/dark/grayscale/dart.svg b/static/icons/dark/grayscale/dart.svg
index 3a48356ae..ced6101a2 100644
--- a/static/icons/dark/grayscale/dart.svg
+++ b/static/icons/dark/grayscale/dart.svg
@@ -1,7 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 18L2.48343 14.7154C2.18488 14.3157 2 13.7511 2 13.1992C2 12.9438 2.11036 12.5442 2.19355 12.3156L4.51644 6L5 18Z" stroke="#C4C6D7" stroke-linecap="square" stroke-linejoin="round"/>
-<path d="M17 6L13.68 3.48343C13.3903 3.26283 12.7867 3 12.2762 3C11.8367 3 11.406 3.06698 11.1276 3.19355L5 5.51644L17 6Z" stroke="#C4C6D7" stroke-linecap="square" stroke-linejoin="round"/>
-<path d="M10.2998 22H18V18.7864L12.2555 17L7 18.7864L10.2998 22Z" stroke="#C4C6D7" stroke-linecap="square" stroke-linejoin="round"/>
-<path d="M5 16.636C5 17.6895 5.13227 17.9478 5.65614 18.4746L6.18139 19H18L12.2227 12.4346L5 6V16.636Z" stroke="#C4C6D7" stroke-linecap="square" stroke-linejoin="round"/>
-<path d="M15.1591 6H5L17.5716 19H21V10.8587L16.9358 6.65614C16.3654 6.06458 15.8589 6 15.1591 6Z" stroke="#C4C6D7" stroke-linecap="square" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9885 6.12325L14.7744 6.12322L14.7534 6.12328L5.93564 6.12329L18.0383 18.6163L21 18.6163V10.9534L16.4243 6.39434C16.2792 6.24386 16.1385 6.16423 15.9885 6.12325ZM15.256 5.31774C15.2924 5.31528 15.3297 5.31285 15.3676 5.31068L13.5118 3.40774C13.396 3.32412 13.2091 3.22287 12.989 3.14103C12.755 3.05404 12.5127 2.99998 12.3081 2.99998C11.8787 2.99998 11.4951 3.06688 11.2769 3.16511L6.71678 5.34247L14.7534 5.34246C14.8969 5.34246 15.0357 5.33289 15.1859 5.32254L15.256 5.31774ZM17.4863 19.1652L5.38352 6.69561V17.2933L9.69362 22L17.4863 22V19.1652ZM2.17146 12.4595C2.08984 12.689 1.99998 13.0382 1.99998 13.2279C1.99998 13.6493 2.2466 14.0396 2.55634 14.4563L4.6027 16.5026V7.43579L2.17146 12.4595Z" fill="#C4C6D7"/>
 </svg>
diff --git a/static/icons/dark/grayscale/disqus.svg b/static/icons/dark/grayscale/disqus.svg
new file mode 100644
index 000000000..684aeaf7d
--- /dev/null
+++ b/static/icons/dark/grayscale/disqus.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8465 21C9.58866 21 7.52422 20.1952 5.92808 18.8639L2 19.3873L3.51754 15.7339C2.98882 14.5959 2.6922 13.3325 2.6922 12C2.6922 7.02973 6.79073 3 11.8465 3C16.9019 3 21 7.02973 21 12C21 16.9712 16.902 21 11.8465 21ZM16.8449 11.9743V11.9492C16.8449 9.35213 14.9673 7.50027 11.7299 7.50027H8.23337V16.5003H11.6781C14.9406 16.5004 16.8449 14.5712 16.8449 11.9743ZM11.7685 14.2891H10.7457V9.71213H11.7685C13.2706 9.71213 14.2676 10.5475 14.2676 11.9881V12.0132C14.2676 13.466 13.2706 14.2891 11.7685 14.2891Z" fill="#C4C6D7"/>
+</svg>
diff --git a/static/icons/dark/grayscale/etsy.svg b/static/icons/dark/grayscale/etsy.svg
new file mode 100644
index 000000000..04790eb9b
--- /dev/null
+++ b/static/icons/dark/grayscale/etsy.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.4286 15.6964C19.3583 16.1284 18.8762 20.1161 18.8058 21C14.0697 20.8273 9.97075 20.8095 4 21V19.9756C5.82644 19.6159 6.43594 19.6532 6.45092 18.5592C6.52296 15.6533 6.5925 8.74984 6.45092 5.62163C6.40956 4.47817 5.96356 4.54629 4 4.17528V3.15071C6.96862 3.24546 14.283 3.49423 18.5848 3C18.4442 4.53684 18.2735 8.08257 18.2735 8.08257H17.3394C16.8953 6.3616 16.5857 4.44643 15.1396 4.44643H9.63513C9.2233 4.44643 9.20317 4.58708 9.20317 4.83818V11.4175C11.5335 11.4375 12.759 11.317 12.759 11.317C13.9551 11.2787 13.8662 10.9754 14.3963 8.69531H15.4308C15.2538 12.7675 15.2737 11.1795 15.3605 15.1339H14.326C13.9581 13.5233 13.9617 12.6813 12.7388 12.663C12.7388 12.663 11.875 12.5826 9.20313 12.5826V18.1674C9.20313 19.2121 9.77574 19.7042 10.981 19.7042H14.567C17.1238 19.7042 17.2415 18.7 18.5347 15.6964H19.4286V15.6964Z" fill="#C4C6D7"/>
+</svg>
diff --git a/static/icons/dark/grayscale/podio.svg b/static/icons/dark/grayscale/podio.svg
new file mode 100644
index 000000000..0b671537c
--- /dev/null
+++ b/static/icons/dark/grayscale/podio.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.7358 5.3661C14.61 2.22373 9.5308 2.21103 6.38892 5.32991L6.35205 5.36679C3.21517 8.52223 3.21617 13.6553 6.35392 16.8096L11.2005 21.6812C11.301 21.7825 11.4203 21.8628 11.5518 21.9175C11.6832 21.9722 11.8241 22.0002 11.9664 22C12.2434 22 12.5213 21.8941 12.7327 21.6812C13.1553 21.2558 13.1553 20.566 12.7327 20.1408L7.88542 15.2687C5.59942 12.9709 5.59211 9.23497 7.86417 6.92742L7.8863 6.90562C10.1799 4.60115 13.9112 4.60184 16.2034 6.90637C18.0857 8.79883 18.3558 12.0374 16.8306 14.4405C16.5089 14.9472 16.6571 15.6207 17.1611 15.9442C17.6662 16.2686 18.3352 16.119 18.6567 15.6125C20.7497 12.3153 20.3623 8.00648 17.7358 5.3661M15.7962 17.0594C16.2191 17.4848 16.2196 18.1747 15.7962 18.5995C15.696 18.701 15.5768 18.7815 15.4454 18.8363C15.3141 18.8912 15.1732 18.9193 15.031 18.9191C14.8885 18.9193 14.7474 18.8912 14.6158 18.8365C14.4842 18.7817 14.3646 18.7014 14.2639 18.6001L9.41749 13.7284C7.96967 12.2724 7.96967 9.90284 9.41749 8.44652C10.119 7.74189 11.0517 7.35344 12.0437 7.35344H12.0448C13.0367 7.35344 13.9694 7.74239 14.6705 8.44815C15.1447 8.92448 15.4817 9.52099 15.6458 10.1744C15.81 10.8277 15.7951 11.5136 15.6027 12.1592C15.4305 12.7356 14.8281 13.0637 14.2545 12.8912C13.6811 12.7194 13.3547 12.1124 13.5256 11.5356C13.6061 11.2666 13.6126 10.9806 13.5443 10.7081C13.4761 10.4357 13.3357 10.1869 13.1381 9.98823C12.8457 9.69398 12.4577 9.53205 12.0443 9.53186H12.0437C11.6302 9.53186 11.2422 9.6936 10.9497 9.98716C10.3463 10.5938 10.3463 11.5811 10.9497 12.1878L15.7962 17.0594" fill="#C4C6D7"/>
+</svg>
diff --git a/static/icons/dark/grayscale/ms_yammer.svg b/static/icons/dark/grayscale/yammer.svg
similarity index 100%
rename from static/icons/dark/grayscale/ms_yammer.svg
rename to static/icons/dark/grayscale/yammer.svg
diff --git a/static/icons/light/color/authentik.svg b/static/icons/light/color/authentik.svg
new file mode 100644
index 000000000..10ed35ac8
--- /dev/null
+++ b/static/icons/light/color/authentik.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="2" y="4" width="20" height="16" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_6187_66567" transform="translate(0 -0.136364) scale(0.001 0.00127273)"/>
+</pattern>
+<image id="image0_6187_66567" width="1000" height="1000" xlink:href="data:image/png;base64,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ABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAu5ZS+j/oXMne0TcL/QAAAABJRU5ErkJggg=="/>
+</defs>
+</svg>
diff --git a/static/icons/light/color/autodesk.svg b/static/icons/light/color/autodesk.svg
new file mode 100644
index 000000000..0e7a9712e
--- /dev/null
+++ b/static/icons/light/color/autodesk.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.10736 19L14.357 11.2023H20.7118C20.9079 11.2023 21.0828 11.3623 21.0828 11.5821C21.0828 11.7612 21.0059 11.8424 20.9079 11.9021L14.8892 15.5919C14.4971 15.8332 14.3617 16.3132 14.3617 16.6715L14.3547 18.9976H22V5.48004C22 5.21972 21.804 5 21.5122 5H14.2193L2 12.7619V18.9976H2.10736V19Z" fill="black"/>
+</svg>
diff --git a/static/icons/light/color/bitBucket.svg b/static/icons/light/color/bitbucket.svg
similarity index 100%
rename from static/icons/light/color/bitBucket.svg
rename to static/icons/light/color/bitbucket.svg
diff --git a/static/icons/light/color/dailymotion.svg b/static/icons/light/color/dailymotion.svg
new file mode 100644
index 000000000..f09b5225f
--- /dev/null
+++ b/static/icons/light/color/dailymotion.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.6653 21H4.33474C3.98097 20.9993 3.64191 20.8584 3.39176 20.6082C3.1416 20.3581 3.00074 20.019 3 19.6653V4.33474C3.00074 3.98098 3.1416 3.64191 3.39176 3.39176C3.64191 3.14161 3.98097 3.00074 4.33474 3H19.6653C20.0185 3.00074 20.3572 3.14122 20.6073 3.39076C20.8573 3.64031 20.9985 3.97865 21 4.33193V19.6624C20.9982 20.0159 20.8569 20.3543 20.607 20.6042C20.3571 20.8541 20.0187 20.9953 19.6653 20.9972V21Z" fill="#2A62AA"/>
+<path d="M17.5898 4.78455V19.1128H14.5561V18.0158C13.7566 18.7921 12.6807 19.2152 11.4225 19.2152C8.67084 19.2152 6.40698 16.8692 6.40698 13.9269C6.40698 10.9845 8.82949 8.60592 11.4225 8.60592C12.6807 8.60592 13.7566 9.05261 14.5561 9.84361V5.3927L17.5898 4.78455ZM12.1102 16.4318C12.7883 16.4312 13.4385 16.1616 13.918 15.6821C14.3975 15.2026 14.6671 14.5524 14.6677 13.8743C14.6672 13.1961 14.3976 12.5459 13.9181 12.0663C13.4386 11.5868 12.7884 11.3171 12.1102 11.3165C11.4321 11.3171 10.7818 11.5868 10.3023 12.0663C9.82282 12.5459 9.55321 13.1961 9.55269 13.8743C9.55329 14.5524 9.82293 15.2026 10.3024 15.6821C10.7819 16.1616 11.4321 16.4312 12.1102 16.4318V16.4318Z" fill="white"/>
+</svg>
diff --git a/static/icons/light/color/disqus.svg b/static/icons/light/color/disqus.svg
new file mode 100644
index 000000000..9bc6580ec
--- /dev/null
+++ b/static/icons/light/color/disqus.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8465 21C9.58866 21 7.52422 20.1952 5.92808 18.8639L2 19.3873L3.51754 15.7339C2.98882 14.5959 2.6922 13.3325 2.6922 12C2.6922 7.02973 6.79073 3 11.8465 3C16.9019 3 21 7.02973 21 12C21 16.9712 16.902 21 11.8465 21ZM16.8449 11.9743V11.9492C16.8449 9.35213 14.9673 7.50027 11.7299 7.50027H8.23337V16.5003H11.6781C14.9406 16.5004 16.8449 14.5712 16.8449 11.9743ZM11.7685 14.2891H10.7457V9.71213H11.7685C13.2706 9.71213 14.2676 10.5475 14.2676 11.9881V12.0132C14.2676 13.466 13.2706 14.2891 11.7685 14.2891Z" fill="#2E9FFF"/>
+</svg>
diff --git a/static/icons/light/color/etsy.svg b/static/icons/light/color/etsy.svg
new file mode 100644
index 000000000..51b17c92f
--- /dev/null
+++ b/static/icons/light/color/etsy.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.4286 15.6964C19.3583 16.1284 18.8762 20.1161 18.8058 21C14.0697 20.8273 9.97075 20.8095 4 21V19.9756C5.82644 19.6159 6.43594 19.6532 6.45092 18.5592C6.52296 15.6533 6.5925 8.74984 6.45092 5.62163C6.40956 4.47817 5.96356 4.54629 4 4.17528V3.15071C6.96862 3.24546 14.283 3.49423 18.5848 3C18.4442 4.53684 18.2735 8.08257 18.2735 8.08257H17.3394C16.8953 6.3616 16.5857 4.44643 15.1396 4.44643H9.63513C9.2233 4.44643 9.20317 4.58708 9.20317 4.83818V11.4175C11.5335 11.4375 12.759 11.317 12.759 11.317C13.9551 11.2787 13.8662 10.9754 14.3963 8.69531H15.4308C15.2538 12.7675 15.2737 11.1795 15.3605 15.1339H14.326C13.9581 13.5233 13.9617 12.6813 12.7388 12.663C12.7388 12.663 11.875 12.5826 9.20313 12.5826V18.1674C9.20313 19.2121 9.77574 19.7042 10.981 19.7042H14.567C17.1238 19.7042 17.2415 18.7 18.5347 15.6964H19.4286V15.6964Z" fill="#F97431"/>
+</svg>
diff --git a/static/icons/light/color/podio.svg b/static/icons/light/color/podio.svg
new file mode 100644
index 000000000..7fa97731a
--- /dev/null
+++ b/static/icons/light/color/podio.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.7358 5.3661C14.61 2.22373 9.5308 2.21103 6.38892 5.32991L6.35205 5.36679C3.21517 8.52223 3.21617 13.6553 6.35392 16.8096L11.2005 21.6812C11.301 21.7825 11.4203 21.8628 11.5518 21.9175C11.6832 21.9722 11.8241 22.0002 11.9664 22C12.2434 22 12.5213 21.8941 12.7327 21.6812C13.1553 21.2558 13.1553 20.566 12.7327 20.1408L7.88542 15.2687C5.59942 12.9709 5.59211 9.23497 7.86417 6.92742L7.8863 6.90562C10.1799 4.60115 13.9112 4.60184 16.2034 6.90637C18.0857 8.79883 18.3558 12.0374 16.8306 14.4405C16.5089 14.9472 16.6571 15.6207 17.1611 15.9442C17.6662 16.2686 18.3352 16.119 18.6567 15.6125C20.7497 12.3153 20.3623 8.00648 17.7358 5.3661M15.7962 17.0594C16.2191 17.4848 16.2196 18.1747 15.7962 18.5995C15.696 18.701 15.5768 18.7815 15.4454 18.8363C15.3141 18.8912 15.1732 18.9193 15.031 18.9191C14.8885 18.9193 14.7474 18.8912 14.6158 18.8365C14.4842 18.7817 14.3646 18.7014 14.2639 18.6001L9.41749 13.7284C7.96967 12.2724 7.96967 9.90284 9.41749 8.44652C10.119 7.74189 11.0517 7.35344 12.0437 7.35344H12.0448C13.0367 7.35344 13.9694 7.74239 14.6705 8.44815C15.1447 8.92448 15.4817 9.52099 15.6458 10.1744C15.81 10.8277 15.7951 11.5136 15.6027 12.1592C15.4305 12.7356 14.8281 13.0637 14.2545 12.8912C13.6811 12.7194 13.3547 12.1124 13.5256 11.5356C13.6061 11.2666 13.6126 10.9806 13.5443 10.7081C13.4761 10.4357 13.3357 10.1869 13.1381 9.98823C12.8457 9.69398 12.4577 9.53205 12.0443 9.53186H12.0437C11.6302 9.53186 11.2422 9.6936 10.9497 9.98716C10.3463 10.5938 10.3463 11.5811 10.9497 12.1878L15.7962 17.0594" fill="#5088AC"/>
+</svg>
diff --git a/static/icons/light/color/ms_yammer.svg b/static/icons/light/color/yammer.svg
similarity index 100%
rename from static/icons/light/color/ms_yammer.svg
rename to static/icons/light/color/yammer.svg
diff --git a/static/icons/light/grayscale/authentik.svg b/static/icons/light/grayscale/authentik.svg
new file mode 100644
index 000000000..d632ea53d
--- /dev/null
+++ b/static/icons/light/grayscale/authentik.svg
@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<mask id="mask0_6187_66618" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="4" width="20" height="16">
+<rect x="2" y="4" width="20" height="16" fill="url(#pattern0)"/>
+</mask>
+<g mask="url(#mask0_6187_66618)">
+<rect x="1" y="1" width="22" height="22" fill="#373B4D"/>
+</g>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_6187_66618" transform="translate(0 -0.136364) scale(0.001 0.00127273)"/>
+</pattern>
+<image id="image0_6187_66618" width="1000" height="1000" xlink:href="data:image/png;base64,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ABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAAQh0AAAACECgAwAAQAACHQAAAAIQ6AAAABCAQAcAAIAABDoAAAAEINABAAAgAIEOAAAAu5ZS+j/oXMne0TcL/QAAAABJRU5ErkJggg=="/>
+</defs>
+</svg>
diff --git a/static/icons/light/grayscale/autodesk.svg b/static/icons/light/grayscale/autodesk.svg
new file mode 100644
index 000000000..14571dfc6
--- /dev/null
+++ b/static/icons/light/grayscale/autodesk.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.10736 19L14.357 11.2023H20.7118C20.9079 11.2023 21.0828 11.3623 21.0828 11.5821C21.0828 11.7612 21.0059 11.8424 20.9079 11.9021L14.8892 15.5919C14.4971 15.8332 14.3617 16.3132 14.3617 16.6715L14.3547 18.9976H22V5.48004C22 5.21972 21.804 5 21.5122 5H14.2193L2 12.7619V18.9976H2.10736V19Z" fill="#373B4D"/>
+</svg>
diff --git a/static/icons/light/grayscale/bitBucket.svg b/static/icons/light/grayscale/bitbucket.svg
similarity index 100%
rename from static/icons/light/grayscale/bitBucket.svg
rename to static/icons/light/grayscale/bitbucket.svg
diff --git a/static/icons/light/grayscale/code.svg b/static/icons/light/grayscale/code.svg
new file mode 100644
index 000000000..7e092440a
--- /dev/null
+++ b/static/icons/light/grayscale/code.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.940 3.740 C 13.556 3.949,13.447 4.129,13.068 5.180 C 12.431 6.947,9.209 16.623,8.645 18.460 C 8.444 19.117,8.420 19.271,8.482 19.529 C 8.571 19.897,9.072 20.304,9.491 20.348 C 9.972 20.397,10.353 20.170,10.594 19.691 C 10.826 19.228,12.607 14.019,14.153 9.280 C 15.524 5.079,15.612 4.771,15.526 4.483 C 15.465 4.281,15.128 3.910,14.909 3.805 C 14.668 3.690,14.103 3.652,13.940 3.740 M5.512 7.388 C 5.213 7.566,4.589 8.142,3.302 9.425 C 1.537 11.187,1.220 11.575,1.220 11.978 C 1.221 12.403,1.449 12.684,3.377 14.632 C 5.273 16.547,5.493 16.725,5.970 16.725 C 6.111 16.725,6.279 16.712,6.343 16.696 C 6.603 16.633,6.977 16.288,7.082 16.016 C 7.159 15.814,7.141 15.317,7.049 15.138 C 6.938 14.921,6.356 14.284,5.141 13.048 L 4.111 12.000 5.083 11.010 C 6.318 9.752,6.939 9.069,7.043 8.853 C 7.147 8.638,7.182 8.309,7.123 8.092 C 7.067 7.882,6.739 7.516,6.509 7.404 C 6.405 7.355,6.216 7.314,6.020 7.299 C 5.719 7.276,5.689 7.282,5.512 7.388 M17.430 7.403 C 17.247 7.499,16.947 7.871,16.885 8.078 C 16.827 8.272,16.827 8.551,16.886 8.724 C 16.976 8.992,17.512 9.589,19.094 11.187 L 19.893 11.994 18.762 13.147 C 17.025 14.916,16.810 15.203,16.850 15.696 C 16.898 16.296,17.392 16.735,18.023 16.739 C 18.284 16.740,18.324 16.728,18.526 16.594 C 18.861 16.372,19.539 15.734,20.861 14.396 C 22.121 13.120,22.556 12.642,22.687 12.386 C 22.784 12.197,22.791 11.871,22.702 11.659 C 22.566 11.332,21.586 10.269,20.108 8.844 C 19.053 7.827,18.676 7.495,18.460 7.396 C 18.229 7.289,17.638 7.293,17.430 7.403 " fill="#373B4D" stroke="none" fill-rule="evenodd"></path></svg>
diff --git a/static/icons/light/grayscale/dailymotion.svg b/static/icons/light/grayscale/dailymotion.svg
new file mode 100644
index 000000000..f7b0097a4
--- /dev/null
+++ b/static/icons/light/grayscale/dailymotion.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.33474 21H19.6653V20.9972C20.0187 20.9953 20.3571 20.8541 20.607 20.6042C20.8569 20.3543 20.9981 20.0159 21 19.6624V4.33193C20.9985 3.97865 20.8573 3.64031 20.6073 3.39076C20.3572 3.14122 20.0185 3.00074 19.6653 3H4.33474C3.98097 3.00074 3.64191 3.14161 3.39176 3.39176C3.1416 3.64191 3.00074 3.98098 3 4.33474V19.6653C3.00074 20.019 3.1416 20.3581 3.39176 20.6082C3.64191 20.8584 3.98097 20.9993 4.33474 21ZM17.5898 19.1128V4.78455L14.5561 5.3927V9.84361C13.7566 9.05261 12.6807 8.60592 11.4225 8.60592C8.82949 8.60592 6.40698 10.9845 6.40698 13.9269C6.40698 16.8692 8.67084 19.2152 11.4225 19.2152C12.6807 19.2152 13.7566 18.7921 14.5561 18.0158V19.1128H17.5898ZM13.918 15.6821C13.4385 16.1616 12.7883 16.4312 12.1102 16.4318C11.4321 16.4312 10.7819 16.1616 10.3024 15.6821C9.82293 15.2026 9.55329 14.5524 9.55269 13.8743C9.55321 13.1961 9.82282 12.5459 10.3023 12.0663C10.7818 11.5868 11.4321 11.3171 12.1102 11.3165C12.7884 11.3171 13.4386 11.5868 13.9181 12.0663C14.3976 12.5459 14.6672 13.1961 14.6677 13.8743C14.6671 14.5524 14.3975 15.2026 13.918 15.6821Z" fill="#373B4D"/>
+</svg>
diff --git a/static/icons/light/grayscale/dart.svg b/static/icons/light/grayscale/dart.svg
index 7a995875d..4b4d3402c 100644
--- a/static/icons/light/grayscale/dart.svg
+++ b/static/icons/light/grayscale/dart.svg
@@ -1,7 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 18L2.48343 14.7154C2.18488 14.3157 2 13.7511 2 13.1992C2 12.9438 2.11036 12.5442 2.19355 12.3156L4.51644 6L5 18Z" stroke="#373B4D" stroke-linecap="square" stroke-linejoin="round"/>
-<path d="M17 6L13.68 3.48343C13.3903 3.26283 12.7867 3 12.2762 3C11.8367 3 11.406 3.06698 11.1276 3.19355L5 5.51644L17 6Z" stroke="#373B4D" stroke-linecap="square" stroke-linejoin="round"/>
-<path d="M10.2998 22H18V18.7864L12.2555 17L7 18.7864L10.2998 22Z" stroke="#373B4D" stroke-linecap="square" stroke-linejoin="round"/>
-<path d="M5 16.636C5 17.6895 5.13227 17.9478 5.65614 18.4746L6.18139 19H18L12.2227 12.4346L5 6V16.636Z" stroke="#373B4D" stroke-linecap="square" stroke-linejoin="round"/>
-<path d="M15.1591 6H5L17.5716 19H21V10.8587L16.9358 6.65614C16.3654 6.06458 15.8589 6 15.1591 6Z" stroke="#373B4D" stroke-linecap="square" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9885 6.12325L14.7744 6.12322L14.7534 6.12328L5.93564 6.12329L18.0383 18.6163L21 18.6163V10.9534L16.4243 6.39434C16.2792 6.24386 16.1385 6.16423 15.9885 6.12325ZM15.256 5.31774C15.2924 5.31528 15.3297 5.31285 15.3676 5.31068L13.5118 3.40774C13.396 3.32412 13.2091 3.22287 12.989 3.14103C12.755 3.05404 12.5127 2.99998 12.3081 2.99998C11.8787 2.99998 11.4951 3.06688 11.2769 3.16511L6.71678 5.34247L14.7534 5.34246C14.8969 5.34246 15.0357 5.33289 15.1859 5.32254L15.256 5.31774ZM17.4863 19.1652L5.38352 6.69561V17.2933L9.69362 22L17.4863 22V19.1652ZM2.17146 12.4595C2.08984 12.689 1.99998 13.0382 1.99998 13.2279C1.99998 13.6493 2.2466 14.0396 2.55634 14.4563L4.6027 16.5026V7.43579L2.17146 12.4595Z" fill="#373B4D"/>
 </svg>
diff --git a/static/icons/light/grayscale/disqus.svg b/static/icons/light/grayscale/disqus.svg
new file mode 100644
index 000000000..6eb14791f
--- /dev/null
+++ b/static/icons/light/grayscale/disqus.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8465 21C9.58866 21 7.52422 20.1952 5.92808 18.8639L2 19.3873L3.51754 15.7339C2.98882 14.5959 2.6922 13.3325 2.6922 12C2.6922 7.02973 6.79073 3 11.8465 3C16.9019 3 21 7.02973 21 12C21 16.9712 16.902 21 11.8465 21ZM16.8449 11.9743V11.9492C16.8449 9.35213 14.9673 7.50027 11.7299 7.50027H8.23337V16.5003H11.6781C14.9406 16.5004 16.8449 14.5712 16.8449 11.9743ZM11.7685 14.2891H10.7457V9.71213H11.7685C13.2706 9.71213 14.2676 10.5475 14.2676 11.9881V12.0132C14.2676 13.466 13.2706 14.2891 11.7685 14.2891Z" fill="#373B4D"/>
+</svg>
diff --git a/static/icons/light/grayscale/etsy.svg b/static/icons/light/grayscale/etsy.svg
new file mode 100644
index 000000000..b02003758
--- /dev/null
+++ b/static/icons/light/grayscale/etsy.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.4286 15.6964C19.3583 16.1284 18.8762 20.1161 18.8058 21C14.0697 20.8273 9.97075 20.8095 4 21V19.9756C5.82644 19.6159 6.43594 19.6532 6.45092 18.5592C6.52296 15.6533 6.5925 8.74984 6.45092 5.62163C6.40956 4.47817 5.96356 4.54629 4 4.17528V3.15071C6.96862 3.24546 14.283 3.49423 18.5848 3C18.4442 4.53684 18.2735 8.08257 18.2735 8.08257H17.3394C16.8953 6.3616 16.5857 4.44643 15.1396 4.44643H9.63513C9.2233 4.44643 9.20317 4.58708 9.20317 4.83818V11.4175C11.5335 11.4375 12.759 11.317 12.759 11.317C13.9551 11.2787 13.8662 10.9754 14.3963 8.69531H15.4308C15.2538 12.7675 15.2737 11.1795 15.3605 15.1339H14.326C13.9581 13.5233 13.9617 12.6813 12.7388 12.663C12.7388 12.663 11.875 12.5826 9.20313 12.5826V18.1674C9.20313 19.2121 9.77574 19.7042 10.981 19.7042H14.567C17.1238 19.7042 17.2415 18.7 18.5347 15.6964H19.4286V15.6964Z" fill="#373B4D"/>
+</svg>
diff --git a/static/icons/light/grayscale/podio.svg b/static/icons/light/grayscale/podio.svg
new file mode 100644
index 000000000..d73189161
--- /dev/null
+++ b/static/icons/light/grayscale/podio.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.7358 5.3661C14.61 2.22373 9.5308 2.21103 6.38892 5.32991L6.35205 5.36679C3.21517 8.52223 3.21617 13.6553 6.35392 16.8096L11.2005 21.6812C11.301 21.7825 11.4203 21.8628 11.5518 21.9175C11.6832 21.9722 11.8241 22.0002 11.9664 22C12.2434 22 12.5213 21.8941 12.7327 21.6812C13.1553 21.2558 13.1553 20.566 12.7327 20.1408L7.88542 15.2687C5.59942 12.9709 5.59211 9.23497 7.86417 6.92742L7.8863 6.90562C10.1799 4.60115 13.9112 4.60184 16.2034 6.90637C18.0857 8.79883 18.3558 12.0374 16.8306 14.4405C16.5089 14.9472 16.6571 15.6207 17.1611 15.9442C17.6662 16.2686 18.3352 16.119 18.6567 15.6125C20.7497 12.3153 20.3623 8.00648 17.7358 5.3661M15.7962 17.0594C16.2191 17.4848 16.2196 18.1747 15.7962 18.5995C15.696 18.701 15.5768 18.7815 15.4454 18.8363C15.3141 18.8912 15.1732 18.9193 15.031 18.9191C14.8885 18.9193 14.7474 18.8912 14.6158 18.8365C14.4842 18.7817 14.3646 18.7014 14.2639 18.6001L9.41749 13.7284C7.96967 12.2724 7.96967 9.90284 9.41749 8.44652C10.119 7.74189 11.0517 7.35344 12.0437 7.35344H12.0448C13.0367 7.35344 13.9694 7.74239 14.6705 8.44815C15.1447 8.92448 15.4817 9.52099 15.6458 10.1744C15.81 10.8277 15.7951 11.5136 15.6027 12.1592C15.4305 12.7356 14.8281 13.0637 14.2545 12.8912C13.6811 12.7194 13.3547 12.1124 13.5256 11.5356C13.6061 11.2666 13.6126 10.9806 13.5443 10.7081C13.4761 10.4357 13.3357 10.1869 13.1381 9.98823C12.8457 9.69398 12.4577 9.53205 12.0443 9.53186H12.0437C11.6302 9.53186 11.2422 9.6936 10.9497 9.98716C10.3463 10.5938 10.3463 11.5811 10.9497 12.1878L15.7962 17.0594" fill="#373B4D"/>
+</svg>
diff --git a/static/icons/light/grayscale/ms_yammer.svg b/static/icons/light/grayscale/yammer.svg
similarity index 100%
rename from static/icons/light/grayscale/ms_yammer.svg
rename to static/icons/light/grayscale/yammer.svg
diff --git a/tests/unit/components/copy.test.ts b/tests/unit/components/copy.test.ts
index c534cd796..af7792e97 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/heading.test.ts b/tests/unit/components/heading.test.ts
index c5b9d6fc0..13d544619 100644
--- a/tests/unit/components/heading.test.ts
+++ b/tests/unit/components/heading.test.ts
@@ -10,5 +10,5 @@ test('shows heading', () => {
 
     const headings = container.querySelectorAll(tag);
     expect(headings.length).toEqual(1);
-    expect(headings[0].className).toEqual(`heading-level-${size}`);
+    expect(headings[0].className).includes(`heading-level-${size}`);
 });
diff --git a/tests/unit/components/modal.test.ts b/tests/unit/components/modal.test.ts
index 6a7aa3cde..d78907928 100644
--- a/tests/unit/components/modal.test.ts
+++ b/tests/unit/components/modal.test.ts
@@ -1,52 +1,11 @@
 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);
+test('renders modal', async () => {
+    const { container } = 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
-    });
-
-    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 312052193..e74fbc837 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 82806cb76..000000000
--- 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 0857a120d..b199e0861 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/layout/breadcrumbs.test.ts b/tests/unit/layout/breadcrumbs.test.ts
index bd4236810..aaa634ae0 100644
--- a/tests/unit/layout/breadcrumbs.test.ts
+++ b/tests/unit/layout/breadcrumbs.test.ts
@@ -1,123 +1,25 @@
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/svelte';
-import { level, updateLayout } from '../../../src/lib/stores/layout';
-import { tick } from 'svelte';
 import BreadcrumbsComponent from '../../../src/lib/layout/breadcrumbs.svelte';
 
 test('shows relevant breadcrumbs', async () => {
-    const { queryByText } = render(BreadcrumbsComponent);
-
-    updateLayout({
-        title: 'Test',
-        level: 3,
+    const { queryByText } = render(BreadcrumbsComponent, {
         breadcrumbs: [
             {
-                href: 'lorem',
-                title: 'First',
-                level: 1
+                href: '/lorem',
+                title: 'First'
             },
             {
-                href: 'ipsum',
-                title: 'Second',
-                level: 2
-            },
-            {
-                href: 'dolor/sit/amet',
-                title: 'Third'
+                href: '/ipsum',
+                title: 'Second'
             }
         ]
     });
 
-    level.set(2);
-    await tick();
     expect(queryByText('First')).toBeInTheDocument();
     expect(queryByText('First')).toHaveAccessibleName();
     expect(queryByText('First')).toHaveAttribute('href', '/lorem');
     expect(queryByText('Second')).toBeInTheDocument();
     expect(queryByText('Second')).toHaveAccessibleName();
-    expect(queryByText('Second')).toHaveAttribute('href', '/lorem/ipsum');
-    expect(queryByText('Third')).not.toBeInTheDocument();
-
-    level.set(1);
-    await tick();
-    expect(queryByText('First')).toBeInTheDocument();
-    expect(queryByText('First')).toHaveAccessibleName();
-    expect(queryByText('First')).toHaveAttribute('href', '/lorem');
-    expect(queryByText('Second')).not.toBeInTheDocument();
-
-    level.set(0);
-    await tick();
-    expect(queryByText('First')).not.toBeInTheDocument();
-    expect(queryByText('Second')).not.toBeInTheDocument();
-
-    level.set(3);
-    await tick();
-    expect(queryByText('First')).toBeInTheDocument();
-    expect(queryByText('First')).toHaveAccessibleName();
-    expect(queryByText('First')).toHaveAttribute('href', '/lorem');
-    expect(queryByText('Second')).toBeInTheDocument();
-    expect(queryByText('Second')).toHaveAccessibleName();
-    expect(queryByText('Second')).toHaveAttribute('href', '/lorem/ipsum');
-    expect(queryByText('Third')).toBeInTheDocument();
-    expect(queryByText('Third')).toHaveAccessibleName();
-    expect(queryByText('Third')).toHaveAttribute('href', '/lorem/ipsum/dolor/sit/amet');
-});
-
-test('shows relevant breadcrumbs and ignore order', async () => {
-    const { queryByText } = render(BreadcrumbsComponent);
-
-    updateLayout({
-        title: 'Test',
-        level: 3,
-        breadcrumbs: [
-            {
-                href: 'ipsum',
-                title: 'Second',
-                level: 2
-            },
-            {
-                href: 'lorem',
-                title: 'First',
-                level: 1
-            },
-            {
-                href: 'dolor/sit/amet',
-                title: 'Third'
-            }
-        ]
-    });
-
-    level.set(2);
-    await tick();
-    expect(queryByText('First')).toBeInTheDocument();
-    expect(queryByText('First')).toHaveAccessibleName();
-    expect(queryByText('First')).toHaveAttribute('href', '/lorem');
-    expect(queryByText('Second')).toBeInTheDocument();
-    expect(queryByText('Second')).toHaveAccessibleName();
-    expect(queryByText('Second')).toHaveAttribute('href', '/lorem/ipsum');
-    expect(queryByText('Third')).not.toBeInTheDocument();
-
-    level.set(1);
-    await tick();
-    expect(queryByText('First')).toBeInTheDocument();
-    expect(queryByText('First')).toHaveAccessibleName();
-    expect(queryByText('First')).toHaveAttribute('href', '/lorem');
-    expect(queryByText('Second')).not.toBeInTheDocument();
-
-    level.set(0);
-    await tick();
-    expect(queryByText('First')).not.toBeInTheDocument();
-    expect(queryByText('Second')).not.toBeInTheDocument();
-
-    level.set(3);
-    await tick();
-    expect(queryByText('First')).toBeInTheDocument();
-    expect(queryByText('First')).toHaveAccessibleName();
-    expect(queryByText('First')).toHaveAttribute('href', '/lorem');
-    expect(queryByText('Second')).toBeInTheDocument();
-    expect(queryByText('Second')).toHaveAccessibleName();
-    expect(queryByText('Second')).toHaveAttribute('href', '/lorem/ipsum');
-    expect(queryByText('Third')).toBeInTheDocument();
-    expect(queryByText('Third')).toHaveAccessibleName();
-    expect(queryByText('Third')).toHaveAttribute('href', '/lorem/ipsum/dolor/sit/amet');
+    expect(queryByText('Second')).toHaveAttribute('href', '/ipsum');
 });
diff --git a/tests/unit/setup.ts b/tests/unit/setup.ts
index 8853bca56..59b173e59 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()
     }));
 });